/* ===================================================================== Full Blue – motion layer. Every effect is progressive enhancement and is disabled under prefers-reduced-motion. Nothing here affects layout. ===================================================================== */ /* Cross-document page transitions (Chromium/Safari; others simply navigate) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out 220ms cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: vt-in 320ms cubic-bezier(0,0,.2,1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } } /* ================= Frame motion ================= Layers drift at different speeds as you scroll (depth); gold chevrons draw in on the first page of a visit. */ @media (min-width: 80em) { .frame-poly { transform: translate3d(0, calc(var(--fy, 0) * -0.35px), 0) scale(1.08); transform-origin: center; } .frame-facets { transform: translate3d(0, calc(var(--fy, 0) * -0.7px), 0); } .frame-photo-layer { transform: translate3d(0, calc(var(--fy, 0) * -0.5px), 0); } .frame-lines { transform: translate3d(0, calc(var(--fy, 0) * -1px), 0); } @keyframes frame-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } } @keyframes frame-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes frame-glint { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } .intro .frame-gold { animation: frame-draw 1600ms cubic-bezier(.4,0,.2,1) 200ms backwards; } .intro .frame-gold-thin { animation-delay: 450ms; } .intro .frame-facets, .intro .frame-photo-layer { animation: frame-fade 1200ms ease-out 300ms backwards; } .intro .site { animation: frame-fade 600ms ease-out backwards; } } /* ================= Header motion ================= Intro plays once per visit (html.intro is set in ), everything under 2s (WCAG 2.2.2). Scroll: logo glides into the sticky bar (see main.js --hp). Hover: purposeful micro-interactions. */ /* Intro: plate slides in, logo settles, gold sweep draws up, gold line runs across, items cascade */ @keyframes hdr-plate { from { transform: translateX(-2.5rem); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes hdr-logo { from { opacity: 0; transform: translateX(-1.25rem) scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes hdr-sweep { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes hdr-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes hdr-drop { from { opacity: 0; transform: translateY(-.6rem); } to { opacity: 1; transform: none; } } @keyframes hdr-rise { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } } @keyframes hdr-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } } .intro .logo-plate::before { animation: hdr-plate 700ms cubic-bezier(.2,.8,.2,1) backwards; } .intro .brand-logo { animation: hdr-logo 900ms cubic-bezier(.2,.8,.2,1) 150ms backwards; } .intro .plate-sweep { animation: hdr-sweep 550ms cubic-bezier(.3,.7,.2,1) 450ms backwards; } .intro .site-header::after { animation: hdr-line 900ms cubic-bezier(.3,.7,.2,1) 700ms backwards; } .intro .header-social li, .intro .header-utility > li { animation: hdr-drop 600ms cubic-bezier(.2,.8,.2,1) backwards; } .intro .header-social li:nth-child(1) { animation-delay: 250ms; } .intro .header-social li:nth-child(2) { animation-delay: 300ms; } .intro .header-social li:nth-child(3) { animation-delay: 350ms; } .intro .header-social li:nth-child(4) { animation-delay: 400ms; } .intro .header-utility > li:nth-child(1) { animation-delay: 450ms; } .intro .header-utility > li:nth-child(2) { animation-delay: 550ms; } .intro .header-utility > li:nth-child(3) { animation-delay: 650ms; } .intro .nav-list > li, .intro .nav-cta > .btn { animation: hdr-rise 600ms cubic-bezier(.2,.8,.2,1) backwards; } .intro .nav-list > li:nth-child(1) { animation-delay: 600ms; } .intro .nav-list > li:nth-child(2) { animation-delay: 670ms; } .intro .nav-list > li:nth-child(3) { animation-delay: 740ms; } .intro .nav-list > li:nth-child(4) { animation-delay: 810ms; } .intro .nav-list > li:nth-child(5) { animation-delay: 880ms; } .intro .nav-cta > .btn { animation-delay: 950ms; } .intro .nav-cta > .btn-gold::after { animation: hdr-sheen 900ms ease-in-out 1500ms backwards; } /* Nav bar: one light sweep on intro and again whenever the bar becomes stuck; contact button glows in */ @keyframes bar-sheen { from { transform: translateX(-160%) skewX(-12deg); } to { transform: translateX(600%) skewX(-12deg); } } @keyframes cta-glow { 0% { box-shadow: 0 0 0 0 rgba(226,194,88,.75); } 100% { box-shadow: 0 0 0 14px rgba(226,194,88,0); } } .intro .bar-sheen, .bar-sheen.is-run { animation: bar-sheen 1400ms cubic-bezier(.4,0,.2,1) 1100ms both; } .bar-sheen.is-run { animation-delay: 0ms; } .intro .nav-cta > .btn-gold { animation: hdr-rise 600ms cubic-bezier(.2,.8,.2,1) 950ms backwards, cta-glow 1200ms ease-out 1900ms; } .nav-link { transition: background 200ms, transform 200ms; } .nav-link:hover { transform: translateY(-1px); } .plate-sweep { transition: filter 300ms; } .logo-plate:hover .plate-sweep { filter: brightness(1.25) saturate(1.1); } /* Sticky state */ .site-header { transition: box-shadow 300ms; } .brand-logo { transition: transform 400ms cubic-bezier(.2,.7,.2,1); } .brand:hover .brand-logo { transform: scale(1.03); } /* Sliding nav indicator follows hover/focus, returns to the current page */ .nav-link:hover { transform: none; } /* Chips: phone rings, envelope bobs, social lifts */ @keyframes ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } } @keyframes bob { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3px); } 70% { transform: translateY(1px); } } .utility-item:hover .icon-phone, .utility-item:focus-visible .icon-phone { animation: ring 700ms ease-in-out; transform-origin: 50% 60%; } .utility-item:hover .icon-mail, .utility-item:focus-visible .icon-mail { animation: bob 600ms ease-in-out; } .header-portal:hover .icon { transform: translateY(-2px) rotate(-8deg); } /* Mega menu: fade/slide in with staggered items */ @keyframes sub-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes sub-item { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } @media (min-width: 64.01em) { .nav-sub.is-open { animation: sub-in 240ms cubic-bezier(.2,.8,.2,1) both; transform-origin: top left; } .nav-sub.is-open .nav-sub-list li, .nav-sub.is-open .nav-sub-aside > * { animation: sub-item 320ms cubic-bezier(.2,.8,.2,1) both; } .nav-sub.is-open .nav-sub-list li:nth-child(2) { animation-delay: 30ms; } .nav-sub.is-open .nav-sub-list li:nth-child(3) { animation-delay: 60ms; } .nav-sub.is-open .nav-sub-list li:nth-child(4) { animation-delay: 90ms; } .nav-sub.is-open .nav-sub-list li:nth-child(5) { animation-delay: 120ms; } .nav-sub.is-open .nav-sub-list li:nth-child(6) { animation-delay: 150ms; } .nav-sub.is-open .nav-sub-aside > * { animation-delay: 120ms; } } /* Mobile menu: links cascade in when opened */ @media (max-width: 64em) { .site-nav.is-open .nav-list > li, .site-nav.is-open .nav-cta > * { animation: hdr-rise 420ms cubic-bezier(.2,.8,.2,1) both; } .site-nav.is-open .nav-list > li:nth-child(2) { animation-delay: 40ms; } .site-nav.is-open .nav-list > li:nth-child(3) { animation-delay: 80ms; } .site-nav.is-open .nav-list > li:nth-child(4) { animation-delay: 120ms; } .site-nav.is-open .nav-list > li:nth-child(5) { animation-delay: 160ms; } .site-nav.is-open .nav-cta > *:nth-child(1) { animation-delay: 200ms; } .site-nav.is-open .nav-cta > *:nth-child(2) { animation-delay: 240ms; } .site-nav.is-open .nav-cta > *:nth-child(3) { animation-delay: 280ms; } .nav-toggle-icon .icon { transition: transform 300ms cubic-bezier(.2,.8,.2,1); } .nav-toggle[aria-expanded="true"] .nav-toggle-close { animation: spin-in 300ms cubic-bezier(.2,.8,.2,1); } @keyframes spin-in { from { transform: rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } } } /* Hero headline: words rise in sequence (split by JS; falls back to plain text) */ .hero-title .word { display: inline-block; opacity: 0; transform: translateY(110%) rotate(2deg); animation: word-in 900ms cubic-bezier(.2,.7,.1,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); } .hero-title .word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; } @keyframes word-in { to { opacity: 1; transform: none; } } .hero-lead, .hero .btn-row, .hero-note { opacity: 0; animation: fade-up 800ms cubic-bezier(.2,.7,.1,1) forwards; } .hero-note { animation-delay: 850ms; } /* Hero slideshow: frame slides in, active image slowly zooms (Ken Burns), dot fills over the slide duration */ @keyframes slider-in { from { opacity: 0; transform: translateX(2.5rem) scale(.98); } to { opacity: 1; transform: none; } } @keyframes outline-in { from { opacity: 0; transform: translate(1.25rem, 1.25rem); } to { opacity: 1; transform: none; } } @keyframes stat-pop { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 70% { opacity: 1; transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: none; } } @keyframes kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } } @keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero-slider-frame { animation: slider-in 1000ms cubic-bezier(.2,.8,.2,1) 250ms backwards; } .hero-slider-outline { animation: outline-in 900ms cubic-bezier(.2,.8,.2,1) 650ms backwards; } .hero-extra.is-active .hero-info { animation: info-in 650ms cubic-bezier(.2,.8,.2,1) 250ms backwards; } .hero-extra.is-active .hero-stat { animation: stat-pop 650ms cubic-bezier(.2,.8,.2,1) backwards; } .hero-extra.is-active .hero-stat-1 { animation-delay: 450ms; } .hero-extra.is-active .hero-stat-2 { animation-delay: 600ms; } @keyframes info-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } .hero-slider.is-playing .hero-slide.is-active img { animation: kenburns var(--slide-ms, 6500ms) linear both; } .hero-slider.is-playing .slider-dot.is-active .slider-dot-fill { animation: dot-fill var(--slide-ms, 6500ms) linear both; } @media (min-width: 40.01em) { .hero-chips { translate: 0 calc(var(--fy, 0) * -0.15px); } } .hero-lead { animation-delay: 550ms; } .hero .btn-row { animation-delay: 700ms; } .hero-aside { animation-delay: 850ms; } .hero .eyebrow { opacity: 0; animation: fade-up 700ms cubic-bezier(.2,.7,.1,1) forwards; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Scroll reveals with stagger via --i set by JS */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.2,.7,.1,1), transform 700ms cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--i, 0) * 80ms); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-line { position: relative; } .reveal-line::after { content: ""; position: absolute; left: 0; bottom: -.4rem; width: 3rem; height: 3px; background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(.2,.7,.1,1) 250ms; } .reveal-line.is-visible::after { transform: scaleX(1); } /* Door cards: cursor-following highlight */ .door { position: relative; overflow: hidden; } .door::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), rgba(212,175,55,.18), transparent 45%); } .door:hover::before, .door:focus-within::before { opacity: 1; } .door::before { z-index: 1; } .door-medical::before { background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 45%); } /* Buttons: gold sheen sweep on hover */ .btn-gold { position: relative; overflow: hidden; isolation: isolate; } .btn-gold::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 600ms cubic-bezier(.2,.7,.1,1); } .btn-gold:hover::after { transform: translateX(120%); } /* Dates rows: slide in */ .date-row.reveal { transform: translateX(-14px); } .date-row.reveal.is-visible { transform: none; } /* Numbers counting up get a subtle settle */ [data-countup].is-done { animation: settle 500ms cubic-bezier(.2,.7,.1,1); } @keyframes settle { 0% { transform: scale(1.06); } 100% { transform: scale(1); } } /* Accreditation ticker */ .ticker { overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; gap: 2.5rem; width: max-content; animation: ticker 40s linear infinite; } .ticker.is-paused .ticker-track, .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; } @keyframes ticker { to { transform: translateX(-50%); } } .ticker-toggle { margin-top: .75rem; } /* Progress / stepper micro-interactions */ .stepper button:active { transform: scale(.92); } .field input:not([type="checkbox"]), .field select, .field textarea { transition: border-color 200ms, box-shadow 200ms, transform 200ms; } /* Reduced motion: switch everything off */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .intro .logo-plate::before, .intro .brand-logo, .intro .plate-sweep, .intro .site-header::after, .intro .header-social li, .intro .header-utility > li, .intro .nav-list > li, .intro .nav-cta > .btn, .intro .nav-cta > .btn-gold::after, .nav-sub.is-open, .nav-sub.is-open *, .site-nav.is-open *, .utility-item .icon, .nav-toggle .icon { animation: none !important; } .brand, .brand-logo, .nav-indicator, .nav-link { transition: none !important; transform: none !important; } .bar-sheen, .nav-cta > .btn-gold { animation: none !important; } .frame-layer { transform: none !important; } .frame-gold, .frame-facets, .frame-photo-layer, .intro .site { animation: none !important; } .brand:hover .brand-logo, .header-portal:hover .icon { transform: none; } .hero-title .word, .hero-lead, .hero .btn-row, .hero-note, .hero .eyebrow, .hero-slider-frame, .hero-slider-outline, .hero-stat, .hero-info, .hero-slide img, .slider-dot-fill { opacity: 1; animation: none !important; } .hero-slide { transition: none !important; } .hero-chips { translate: none !important; } .reveal, .date-row.reveal { opacity: 1; transform: none; transition: none; } .reveal-line::after { transform: scaleX(1); transition: none; } .door::before, .btn-gold::after { display: none; } .ticker-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .ticker { mask-image: none; } [data-countup].is-done { animation: none; } } .no-js .reveal, .no-js .hero-lead, .no-js .hero .btn-row, .no-js .hero-note, .no-js .hero .eyebrow { opacity: 1; transform: none; animation: none; }