/* =========================================================
   HoloBox911 — MOTION LAYER
   3D UI, motion graphics and sound, in the HoloBox Motion Kit house style.
   Loads after style.css / pages.css / theme-light.css and only adds to them.
   Every effect degrades: reduced-motion → static, no WebGL → CSS only.
   ========================================================= */

:root {
  /* Kit streak-wipe bar order, bottom-left to top-right: orange, green, cyan, blue, purple, magenta */
  --k-orange: #FFAA28; --k-green: #78D746; --k-cyan: #40D6FF; --k-blue: #2882FF; --k-purple: #8232DC; --k-magenta: #F03CAA;
  --k-bars: linear-gradient(90deg, var(--k-orange) 0 16.66%, var(--k-green) 16.66% 33.33%, var(--k-cyan) 33.33% 50%, var(--k-blue) 50% 66.66%, var(--k-purple) 66.66% 83.33%, var(--k-magenta) 83.33% 100%);
  --k-bg: linear-gradient(135deg, #2C1060 0%, #120A3A 55%, #0A2264 100%);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

/* =========================================================
   1. INTRO — Logo reveal (Motion Kit v2 · 01 Logo Reveal, 3.0 s)
   Arrows fly in one by one, wordmark wipes on, spectrum line draws,
   "Certified Hologram Display" spreads, then a streak wipe clears it.
   ========================================================= */
.hb-intro {
  position: fixed; inset: 0; z-index: 2000; display: none;
  overflow: hidden; background: var(--k-bg);
  color: #fff; -webkit-user-select: none; user-select: none; cursor: pointer;
}
.hb-intro.show, html.hb-intro-on .hb-intro { display: block; }   /* hb-intro-on is set inline in <head>, so it covers the first paint */
html.hb-intro-on .hb-intro:not(.show) { animation: intro-fallback .6s ease 4.6s both; }  /* if the script never arrives, it still clears */
@keyframes intro-fallback { to { opacity: 0; visibility: hidden; } }
.hb-intro-bg { position: absolute; inset: 0; overflow: hidden; }
.hb-intro-bg i {
  position: absolute; width: 46vmax; height: 10px; border-radius: 10px;
  transform: rotate(-45deg); opacity: 0; filter: blur(2px);
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  box-shadow: 0 0 40px var(--c);
  animation: intro-streak 2.2s var(--ease-out) both;
}
.hb-intro-bg .k1 { --c: var(--k-cyan); top: 18%; left: -10%; animation-delay: .05s; }
.hb-intro-bg .k2 { --c: var(--k-magenta); top: 70%; left: 55%; animation-delay: .25s; }
.hb-intro-bg .k3 { --c: var(--k-orange); top: 40%; left: 70%; width: 30vmax; animation-delay: .45s; }
.hb-intro-bg .k4 { --c: var(--k-green); top: 85%; left: -5%; width: 24vmax; animation-delay: .6s; }
@keyframes intro-streak {
  0% { opacity: 0; translate: -30vmax 30vmax; }
  35% { opacity: .55; }
  100% { opacity: 0; translate: 30vmax -30vmax; }
}
.hb-intro-glow {
  position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; border-radius: 50%;
  translate: -50% -50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(64,214,255,.35), rgba(240,60,170,.18) 45%, transparent 72%);
  filter: blur(30px);
  animation: intro-glow 2.6s ease-out .7s both;
}
@keyframes intro-glow { 0% { opacity: 0; scale: .6; } 40% { opacity: 1; scale: 1; } 100% { opacity: .55; scale: 1.25; } }

.hb-lockup {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; grid-template-columns: auto auto; column-gap: clamp(10px, 1.6vw, 22px); align-items: center;
  --h: clamp(44px, 7.2vw, 96px);
}
.hb-mark { width: var(--h); height: var(--h); overflow: visible; }
.hb-mark .s {
  fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 50%;
  opacity: 0; transform: translate(-60px, 60px) scale(.6);
  animation: arrow-in .62s var(--ease-out) both;
}
.hb-mark .s1 { stroke: #18E8F8; animation-delay: .08s; }
.hb-mark .s2 { stroke: #EC008C; animation-delay: .2s; }
.hb-mark .s3 { stroke: #00A8E8; animation-delay: .32s; }
.hb-mark .s4 { stroke: #FFD000; animation-delay: .44s; }
.hb-mark .s5 { stroke: #8DC63F; animation-delay: .56s; }
@keyframes arrow-in {
  0% { opacity: 0; transform: translate(-60px, 60px) scale(.6); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.hb-word {
  /* the wordmark file carries its own arrows on the left (x 0–106 of 568); only the text is shown here */
  display: block; height: calc(var(--h) * .56); aspect-ratio: 462 / 99;
  background: #fff;
  -webkit-mask: url("../img/HoloBox911_Logo_Wordmark.svg") no-repeat right center / 122.94% auto; mask: url("../img/HoloBox911_Logo_Wordmark.svg") no-repeat right center / 122.94% auto;
  clip-path: inset(0 100% 0 0);
  animation: word-wipe .75s var(--ease-io) .9s both;
}
@keyframes word-wipe { to { clip-path: inset(0 0 0 0); } }
.hb-sub { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; margin-top: clamp(10px, 1.4vw, 18px); }
.hb-sub i {
  display: block; width: 36%; height: 3px; border-radius: 3px; background: var(--spectrum);
  transform: scaleX(0); animation: line-draw .6s var(--ease-out) 1.55s both;
}
@keyframes line-draw { to { transform: scaleX(1); } }
.hb-sub span {
  font-size: clamp(9px, 1.05vw, 13px); font-weight: 600; text-transform: uppercase;
  letter-spacing: .6em; opacity: 0; color: #e8eaff;
  animation: sub-spread .7s var(--ease-out) 1.75s both;
}
@keyframes sub-spread { 0% { opacity: 0; letter-spacing: .1em; } 100% { opacity: 1; letter-spacing: .34em; } }
.hb-intro-skip {
  position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7);
  padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.2);
  opacity: 0; animation: fade .6s 1.2s both;
}
.hb-intro-skip:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.hb-intro-sound {
  position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px;
  font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  opacity: 0; animation: fade .6s 1.2s both;
}
.hb-intro-sound:hover { background: rgba(255,255,255,.16); }
.hb-intro-sound .eq { --on: 1; }
.hb-intro.hide-chrome .hb-intro-skip, .hb-intro.hide-chrome .hb-intro-sound { opacity: 0; transition: opacity .2s; animation: none; }

/* Light theme intro = kit "Light" variant: white frame, dark wordmark */
html[data-theme="light"] .hb-intro { background: #fff; color: var(--ink); }
html[data-theme="light"] .hb-word { background: #0F1222; }
html[data-theme="light"] .hb-sub span { color: #4A5068; }
html[data-theme="light"] .hb-intro-skip, html[data-theme="light"] .hb-intro-sound { color: #0F1222; border-color: rgba(15,18,34,.2); background: rgba(15,18,34,.05); }
html[data-theme="light"] .hb-intro-bg i { opacity: 0; filter: blur(3px); mix-blend-mode: multiply; }

/* =========================================================
   2. STREAK WIPE — page transitions (Motion Kit v2 · 03 Transitions, cut at 0.60 s)
   Six brand bars sweep up-right and cover the frame; the new page sweeps them off.
   ========================================================= */
.hb-wipe {
  position: fixed; left: 50%; top: 50%; z-index: 2100; pointer-events: none;
  width: 260vmax; height: 260vmax; translate: -50% -50%; rotate: -45deg;
  display: flex; flex-direction: column; visibility: hidden;
}
.hb-wipe i { flex: 1; display: block; background: var(--c); transform: translateX(-102%); will-change: transform; }
.hb-wipe i:nth-child(1) { --c: var(--k-orange); }
.hb-wipe i:nth-child(2) { --c: var(--k-green); }
.hb-wipe i:nth-child(3) { --c: var(--k-cyan); }
.hb-wipe i:nth-child(4) { --c: var(--k-blue); }
.hb-wipe i:nth-child(5) { --c: var(--k-purple); }
.hb-wipe i:nth-child(6) { --c: var(--k-magenta); }
/* cover: bars arrive from the bottom-left */
.hb-wipe.cover { visibility: visible; pointer-events: auto; }
.hb-wipe.cover i { animation: wipe-cover .5s var(--ease-io) both; animation-delay: calc(var(--i) * 40ms); }
/* the next page starts with the bars still covering (flag set in <head>), then sweeps them off */
html.hb-arriving .hb-wipe { visibility: visible; }
html.hb-arriving .hb-wipe i { transform: translateX(0); }
@keyframes wipe-cover { from { transform: translateX(-102%); } to { transform: translateX(0); } }
/* leave: bars already covering, exit to the top-right */
.hb-wipe.leave { visibility: visible; }
.hb-wipe.leave i { animation: wipe-leave .66s var(--ease-io) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
@keyframes wipe-leave { from { transform: translateX(0); } to { transform: translateX(102%); } }
.hb-wipe.leave i:nth-child(1) { --i: 5; } .hb-wipe.leave i:nth-child(2) { --i: 4; } .hb-wipe.leave i:nth-child(3) { --i: 3; }
.hb-wipe.leave i:nth-child(4) { --i: 2; } .hb-wipe.leave i:nth-child(5) { --i: 1; } .hb-wipe.leave i:nth-child(6) { --i: 0; }
.hb-wipe.cover i:nth-child(1) { --i: 0; } .hb-wipe.cover i:nth-child(2) { --i: 1; } .hb-wipe.cover i:nth-child(3) { --i: 2; }
.hb-wipe.cover i:nth-child(4) { --i: 3; } .hb-wipe.cover i:nth-child(5) { --i: 4; } .hb-wipe.cover i:nth-child(6) { --i: 5; }
html.is-leaving { transition: none; opacity: 1; }   /* the wipe replaces the plain fade from main.js */
html.hb-arriving body { animation: arrive-rise .9s var(--ease-out) .25s both; }
@keyframes arrive-rise { from { transform: translateY(18px) scale(.995); opacity: .6; } to { transform: none; opacity: 1; } }

/* =========================================================
   3. SOUND TOGGLE — equaliser pill in the nav
   ========================================================= */
.sound-toggle {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text);
  transition: background .3s, border-color .3s, transform .3s; margin-left: 6px;
}
.sound-toggle:hover { border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; --on: 0; }
.eq i { width: 3px; border-radius: 2px; background: currentColor; height: 30%; transform-origin: 50% 100%; transition: height .3s; }
.eq i:nth-child(2) { height: 60%; } .eq i:nth-child(3) { height: 100%; } .eq i:nth-child(4) { height: 45%; }
.sound-toggle:not(.on) .eq i { height: 18%; opacity: .55; }
.sound-toggle:not(.on)::after { content: ""; position: absolute; width: 26px; height: 1.5px; background: currentColor; rotate: -45deg; opacity: .6; border-radius: 2px; }
.sound-toggle.on .eq i, .eq[style*="--on: 1"] i, .hb-intro-sound .eq i { animation: eq-bounce 1s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.25s !important; } .eq i:nth-child(3) { animation-delay: -.5s !important; } .eq i:nth-child(4) { animation-delay: -.75s !important; }
@keyframes eq-bounce { 0% { transform: scaleY(.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.45); } }
.sound-toggle.on { background: linear-gradient(135deg, rgba(64,214,255,.18), rgba(240,60,170,.18)); border-color: rgba(64,214,255,.45); }
.sound-toggle.on .eq i { background: var(--spectrum); background-size: 100% 400%; }
@media (max-width: 1180px) { .sound-toggle { margin-left: 6px; } .theme-toggle { margin-left: auto !important; } }
@media (max-width: 420px) { .sound-toggle, .theme-toggle { width: 40px; height: 40px; } }
html[data-theme="light"] .sound-toggle:hover { border-color: rgba(15,18,34,.35); }

/* Quiet "tap for sound" nudge, shown once on arrival after the intro */
.hb-sound-nudge {
  position: fixed; z-index: 1500; right: 18px; top: calc(var(--nav-h) + 14px);
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: rgba(14,16,40,.82); color: #fff; border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 500; box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
  opacity: 0; translate: 0 -8px; transition: opacity .5s var(--ease), translate .5s var(--ease); pointer-events: none;
}
.hb-sound-nudge.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.hb-sound-nudge b { font-weight: 700; background: var(--headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hb-sound-nudge button { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.12); }
.hb-sound-nudge button:hover { background: rgba(255,255,255,.22); }

/* =========================================================
   4. HERO — WebGL holographic field + 3D layered device with edge lights
   ========================================================= */
.holo-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.4s ease .2s; pointer-events: none; }
.holo-field.ready { opacity: 1; }
.hero-bg .orb { z-index: 1; }
.hero-bg .strokes { z-index: 2; }
html.has-webgl .hero .strokes { opacity: .5; }          /* the GL streaks take over most of that job */

.hero { overflow: hidden; }
.stage { perspective: 1600px; }
.device { transform-style: preserve-3d; transition: none; }  /* motion.js drives the transform every frame */
.device > img { transform: translateZ(0); backface-visibility: hidden; }
.device .glow { transform: translateZ(-120px) scale(1.08); }
.device .scan, .device .reflection { transform: translateZ(34px); }
/* edge lights: the two vertical LED rails on the real unit, pulsing through the spectrum */
.device .edge {
  position: absolute; top: 9%; bottom: 10%; width: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--k-cyan) 20%, var(--k-magenta) 55%, var(--k-orange) 80%, transparent);
  background-size: 100% 300%; filter: blur(.6px);
  box-shadow: 0 0 12px var(--k-cyan), 0 0 28px rgba(64,214,255,.5);
  animation: edge-pulse 4s linear infinite; transform: translateZ(18px);
  opacity: .9; mix-blend-mode: screen;
}
.device .edge.l { left: 11.5%; }
.device .edge.r { right: 11.5%; animation-delay: -2s; box-shadow: 0 0 12px var(--k-magenta), 0 0 28px rgba(240,60,170,.5); }
@keyframes edge-pulse { to { background-position: 0 -300%; } }
/* holographic depth: a faint duplicate of the hologram sits behind the glass */
.device .depth {
  position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: screen;
  background: inherit; transform: translateZ(-60px) scale(1.02); filter: blur(6px) saturate(1.6) hue-rotate(10deg);
}
/* floor: soft reflection + spotlight disc under the unit */
.device-floor {
  position: absolute; left: 50%; bottom: 2%; width: 78%; height: 56px; translate: -50% 0; pointer-events: none; z-index: 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(64,214,255,.42), rgba(240,60,170,.18) 55%, transparent);
  filter: blur(10px); animation: floor-breathe 6s ease-in-out infinite;
}
@keyframes floor-breathe { 50% { scale: 1.08 .85; opacity: .75; } }
.device-reflect {
  position: absolute; left: 50%; top: 99%; width: 100%; height: 22%; translate: -50% 0; pointer-events: none;
  background: var(--src) center bottom / 100% auto no-repeat; transform: scaleY(-1);
  opacity: .14; filter: blur(3px);
  -webkit-mask-image: linear-gradient(0deg, transparent, rgba(0,0,0,.9)); mask-image: linear-gradient(0deg, transparent, rgba(0,0,0,.9));
}
/* hero lines arrive with a little depth */
.hero h1 .line span { animation-name: rise-3d; }
@keyframes rise-3d { from { transform: translateY(110%) rotateX(-35deg); opacity: 0; } to { transform: none; opacity: 1; } }
.hero h1 { perspective: 800px; }
.float-tag { transform-style: preserve-3d; }
.float-tag i { transform: translateZ(14px); }
.scroll-cue span { animation: cue-pulse 1.8s ease-in-out infinite; }
@keyframes cue-pulse { 50% { box-shadow: 0 0 0 6px rgba(64,214,255,.15); } }

/* Inner-page heroes get the field too, at lower intensity */
.phero .holo-field { opacity: 0; }
.phero .holo-field.ready { opacity: .75; }

/* =========================================================
   5. SECTION MOTION GRAPHICS
   ========================================================= */
/* Spectrum hairline that draws across the top of each section as it enters */
.sec-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--spectrum); opacity: .55; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease-io); pointer-events: none; }
.section.in .sec-line, .section.seen .sec-line { transform: scaleX(1); }

/* Heading streak-wipe: the brand bars sweep across while the text is revealed behind them */
.h-wipe { position: relative; display: block; clip-path: inset(0 100% 0 0); }
.h-wipe::after {
  content: ""; position: absolute; top: -6%; bottom: -6%; left: 0; width: 46%; pointer-events: none;
  background: var(--k-bars); opacity: .95; transform: translateX(-120%) skewX(-18deg); mix-blend-mode: normal;
}
.h-wipe.go { animation: h-reveal 1.05s var(--ease-io) both; }
.h-wipe.go::after { animation: h-bar 1.05s var(--ease-io) both; }
@keyframes h-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes h-bar { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
.phero h1.h-wipe { animation: none; opacity: 1; }
.phero h1.h-wipe.go { animation: h-reveal 1.05s var(--ease-io) both; }
/* eyebrow spectrum bar draws itself */
.eyebrow::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out) .1s; }
.in .eyebrow::before, .seen .eyebrow::before, .phero .eyebrow::before, .hero .eyebrow::before, .eyebrow.go::before { transform: scaleX(1); }
/* big statements get a soft spectrum underglow pulse when they land */
.h-wipe.go .grad-text { animation: shimmer 8s linear infinite, text-glow 1.6s ease-out .5s both; }
@keyframes text-glow { 0% { filter: drop-shadow(0 0 0 transparent); } 35% { filter: drop-shadow(0 0 18px rgba(64,214,255,.6)) drop-shadow(0 0 30px rgba(240,60,170,.4)); } 100% { filter: drop-shadow(0 0 0 transparent); } }

/* Cards enter in 3D: parents get depth, children tilt up from the floor */
.ind-grid, .spec-grid, .steps, .centres, .case-grid, .icard-grid, .next-grid, .vcard-grid, .kind-grid, .mode-grid, .option-grid,
.people, .faq-grid, .why-grid, .cmini-grid, .stack-grid, .gstats, .cstats, .award-stats, .spec-list, .certs, .intro-grid, .film-grid, .gallery, .mosaic, .flow, .routes, .text-grid, .pq-grid, .story-grid, .numband {
  perspective: 1400px;
}
.ind-grid > [data-reveal], .spec-grid > [data-reveal], .steps > [data-reveal], .centres > [data-reveal], .case-grid > [data-reveal], .icard-grid > [data-reveal],
.next-grid > [data-reveal], .vcard-grid > [data-reveal], .kind-grid > [data-reveal], .mode-grid > [data-reveal], .option-grid > [data-reveal], .people > [data-reveal],
.faq-grid > [data-reveal], .why-grid > [data-reveal], .cmini-grid > [data-reveal], .stack-grid > [data-reveal], .gstats > [data-reveal], .cstats > [data-reveal],
.film-grid > [data-reveal], .gallery > [data-reveal], .mosaic > [data-reveal], .flow > [data-reveal], .routes > [data-reveal], .pq-grid > [data-reveal], .story-grid > [data-reveal] {
  transform: rotateX(16deg) translate3d(0, 54px, -90px); transform-origin: 50% 100%;
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--d, 0s);
  backface-visibility: hidden;
}
[data-reveal].in { transform: none !important; }
.award-card[data-reveal], .trust[data-reveal], .cta-band[data-reveal] { transform: perspective(1400px) rotateX(8deg) translateY(50px); transition-duration: 1.2s; }
.award-card[data-reveal].in, .trust[data-reveal].in, .cta-band[data-reveal].in { transform: none; }
/* story rail cards swing in from the side */
.rail .story { transform-style: preserve-3d; transition: transform .6s var(--ease-out), border-color .4s; }
.rail .story.off-r { transform: perspective(1200px) rotateY(-22deg) translateX(60px); opacity: .55; }
.rail .story.off-l { transform: perspective(1200px) rotateY(22deg) translateX(-60px); opacity: .55; }
.rail .story:hover { transform: perspective(1200px) translateZ(20px); }

/* Pills / list tags pop in sequence (tick on each, like kit captions) */
.cap ul li, .pills > *, .spec-list > div, .badges span { transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }
.cap:not(.on) ul li { opacity: .5; }
.cap.on ul li { animation: pill-pop .55s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 90ms); }
@keyframes pill-pop { 0% { transform: translateY(10px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Capabilities stage: images rotate in through 3D, halo ring spins up */
.caps-stage { perspective: 1200px; transform-style: preserve-3d; }
.caps-stage img:not(.on) { transform: rotateY(-32deg) translate3d(70px, 10px, -140px) scale(.92); filter: blur(8px); }
.caps-stage img.on { transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), filter .7s var(--ease-out); }
.caps-stage .ring { animation: ring-spin 14s linear infinite; }
@keyframes ring-spin { to { rotate: 360deg; } }

/* Finishes: the unit flips on its axis when you pick a finish (motion.js) */
.fin-stage { perspective: 1500px; }
.fin-device { transition: transform .32s var(--ease-io); }
.fin-device.flip-out { transform: rotateY(88deg) scale(.96) !important; }
.fin-device.flip-in { transform: rotateY(-88deg) scale(.96) !important; transition: none; }
.fin-stage .pedestal { transition: background .5s; }
.swatch { transition: transform .35s var(--ease-out), border-color .3s; }
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] i { animation: swatch-ring .6s var(--ease-out); }
@keyframes swatch-ring { 0% { box-shadow: 0 0 0 0 rgba(64,214,255,.7); } 100% { box-shadow: 0 0 0 10px rgba(64,214,255,0); } }

/* Buttons: 3D press, light sweep */
.btn { transform-style: preserve-3d; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 120% 0; opacity: 0; transition: opacity .3s;
}
.btn-primary:hover::after { opacity: 1; animation: btn-sweep 1.1s var(--ease-out) both; }
@keyframes btn-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.btn:active { transform: scale(.97) translateY(1px) !important; transition-duration: .08s; }

/* Spec counters: a spectrum tick mark flares when the count lands */
.spec .big { position: relative; }
.spec.in .big::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 44px; border-radius: 3px; background: var(--c, var(--spectrum)); transform-origin: 0 50%; animation: line-draw .7s var(--ease-out) 1.3s both; }

/* Corner logo pill on every piece of footage (kit rule: logo pill top-left on every footage scene) */
.video-frame, .film-frame, .reel-player, .card-vid { position: relative; }
.corner-pill {
  position: absolute; z-index: 5; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; pointer-events: none;
  padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(10,12,32,.72); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px);
  opacity: 0; transform: translateX(-16px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.corner-pill img { height: 14px; width: auto; }
.corner-pill b { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.corner-pill b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--k-magenta); margin-right: 6px; box-shadow: 0 0 8px var(--k-magenta); animation: live-dot 1.4s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .35; } }
.has-pill.playing .corner-pill, .has-pill.in .corner-pill, .video-frame.playing .corner-pill { opacity: 1; transform: none; }
@media (max-width: 600px) { .corner-pill { top: 10px; left: 10px; padding: 5px 10px 5px 7px; } .corner-pill img { height: 11px; } .corner-pill b { font-size: 9px; } }

/* CTA band = the kit End Card: floating logo arrows in the corners */
.cta-band { overflow: hidden; }
.cta-arrows { position: absolute; width: clamp(90px, 12vw, 170px); height: auto; pointer-events: none; opacity: .9; z-index: 0; filter: drop-shadow(0 0 30px rgba(64,214,255,.3)); }
.cta-arrows.a1 { right: -2%; top: -6%; animation: arrows-float 7s ease-in-out infinite; }
.cta-arrows.a2 { left: -3%; bottom: -8%; rotate: 180deg; animation: arrows-float 9s ease-in-out -3s infinite; }
@keyframes arrows-float { 50% { translate: 0 -14px; } }
.cta-band > :not(.bg):not(.cta-arrows) { position: relative; z-index: 1; }

/* Nav: links underline with the spectrum, mega menus rise in 3D */
.nav-links > li > a { position: relative; }
.nav-links > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--spectrum); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out); }
.nav-links > li > a:hover::after, .nav-links > li > a[aria-current]::after { transform: scaleX(1); }
.has-mega .mega { transform-origin: 50% 0; }
.has-mega.open .mega { animation: mega-in .4s var(--ease-out) both; }
@keyframes mega-in { from { opacity: 0; transform: perspective(900px) rotateX(-10deg) translateY(-8px); } to { opacity: 1; transform: none; } }

/* Theme switch: a spectrum wipe crosses the page as the colours change */
html.theme-anim::after { content: ""; position: fixed; inset: -20%; z-index: 1900; pointer-events: none; background: var(--k-bars); opacity: .9; rotate: -45deg; animation: theme-sweep .55s var(--ease-io) both; }
@keyframes theme-sweep { from { transform: translateX(-120%); } 50% { opacity: .9; } to { transform: translateX(120%); opacity: 0; } }

/* Marquee: logos get a holographic sheen as they pass the centre */
.marquee-track span { transition: color .3s; }
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

/* Cursor glow becomes a small spectrum ring on interactive things */
.cursor-glow.hot { transform: scale(1.6); }

/* =========================================================
   6. RESPONSIVE: tablet & mobile
   ========================================================= */
@media (max-width: 1024px) {
  .hb-lockup { --h: clamp(40px, 9vw, 80px); }
  .device .edge { width: 1.5px; }
}
@media (max-width: 760px) {
  .hb-lockup { grid-template-columns: 1fr; justify-items: center; row-gap: 10px; --h: 64px; }
  .hb-word { height: 30px; }
  .hb-sub i { width: 50%; }
  .hb-sub span { letter-spacing: .3em; font-size: 9.5px; }
  .hb-intro-sound { left: 50%; bottom: 72px; translate: -50% 0; white-space: nowrap; }
  .hb-intro-skip { right: 50%; bottom: 24px; translate: 50% 0; }
  .hb-sound-nudge { left: 14px; right: 14px; top: auto; bottom: 86px; justify-content: space-between; }
  .h-wipe::after { width: 60%; }
  .ind-grid > [data-reveal], .case-grid > [data-reveal], .icard-grid > [data-reveal], .steps > [data-reveal], .centres > [data-reveal] { transform: rotateX(10deg) translate3d(0, 36px, -40px); }
  .device-reflect { display: none; }
  .cta-arrows { width: 80px; }
  .gyro-hint { display: inline-flex; }
}
/* Gyro hint chip on touch devices (hidden once the phone has moved) */
.gyro-hint {
  display: none; position: absolute; left: 50%; bottom: 8px; translate: -50% 0; z-index: 4; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  padding: 7px 12px; border-radius: 999px; background: rgba(14,16,40,.7); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
  opacity: 0; animation: fade .6s 1.6s both; transition: opacity .4s;
}
.gyro-hint svg { width: 14px; height: 14px; animation: phone-tilt 2s ease-in-out infinite; }
@keyframes phone-tilt { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
.gyro-hint.done { opacity: 0 !important; pointer-events: none; }
@media (pointer: fine) { .gyro-hint { display: none !important; } }

/* =========================================================
   7. ACCESSIBILITY: reduced motion / no JS / save-data
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hb-intro, .hb-wipe, .holo-field, .hb-sound-nudge, .gyro-hint, .device-reflect { display: none !important; }
  .h-wipe { clip-path: none !important; animation: none !important; }
  .h-wipe::after { display: none; }
  [data-reveal] { transform: none !important; opacity: 1 !important; }
  .sec-line { transform: scaleX(1); }
  .device .edge, .device-floor, .caps-stage .ring, .scroll-cue span, .cta-arrows, .corner-pill b::before { animation: none !important; }
  .eyebrow::before { transform: scaleX(1); }
  .cap.on ul li { animation: none; }
  html.theme-anim::after { display: none; }
}
html:not(.js) .h-wipe { clip-path: none; }
html.hb-lite .holo-field, html.hb-lite .device-reflect, html.hb-lite .device .depth { display: none; }