/* Fifty motions. Decorative layers sit under html.amaze so a failed script cannot hide the copy. */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms cubic-bezier(0.23, 1, 0.32, 1) both vt-out; }
::view-transition-new(root) { animation: 240ms cubic-bezier(0.23, 1, 0.32, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

header.site .brand { transform-origin: left center; transition: transform 220ms var(--ease-out); }
header.site.is-scrolled .brand { transform: scale(0.96); }
.dock-pill a[aria-current="page"] svg { animation: dock-bob 1.5s var(--ease-in-out) 1; }
@keyframes dock-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
footer.site .legal-line { animation: rise 700ms var(--ease-out) both; }
@media (hover: hover) and (pointer: fine) {
  footer.site li a { display: inline-block; transition: transform 180ms var(--ease-out); }
  footer.site li a:hover { transform: translateX(4px); }
  html.amaze .cta-band .btn-cream:hover { animation: conic-glow 700ms linear 1; }
}
@keyframes conic-glow {
  0% { box-shadow: 0 0 0 0 rgba(231, 225, 209, 0); }
  55% { box-shadow: 0 0 0 7px rgba(231, 225, 209, 0.28); }
  100% { box-shadow: 0 0 0 0 rgba(231, 225, 209, 0); }
}

.crosshair {
  position: fixed; z-index: 80; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border: 1px solid var(--navy); border-radius: 50%; pointer-events: none; opacity: 0;
  mix-blend-mode: multiply;
}
.crosshair i, .crosshair b {
  position: absolute; background: var(--navy); display: block;
}
.crosshair i { left: 50%; top: 5px; bottom: 5px; width: 1px; }
.crosshair b { top: 50%; left: 5px; right: 5px; height: 1px; }

html.amaze .stage { position: relative; }
html.amaze .stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(231, 225, 209, 0.95) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: plate-spin 1.5s linear 0.2s 1;
}
@keyframes plate-spin { to { transform: rotate(360deg); } }
html.amaze .stage-frame img {
  image-rendering: auto;
}

html.amaze .hero .kicker::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--amber); vertical-align: 1px; animation: pip-pulse 1.3s var(--ease-out) 4;
}
@keyframes pip-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.45; } }
html.amaze .hero h1::after {
  content: ""; display: block; width: 22px; height: 3px; margin-top: 10px; background: var(--navy);
  animation: caret 1.05s steps(1, end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
html.amaze .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(11, 28, 51, 0.45), transparent);
  animation: scan-down 1.8s var(--ease-in-out) 0.3s 1 both;
}
@keyframes scan-down { from { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } to { transform: translateY(68vh); opacity: 0; } }
html.amaze .mote { position: absolute; z-index: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); opacity: 0.28; pointer-events: none; }
html.amaze .mote-a { left: 12%; top: 22%; animation: float-a 7s var(--ease-in-out) infinite; }
html.amaze .mote-b { left: 28%; bottom: 18%; animation: float-b 9s var(--ease-in-out) infinite; }
html.amaze .mote-c { right: 8%; top: 30%; animation: float-c 8s var(--ease-in-out) infinite; }
@keyframes float-a { 50% { transform: translate3d(10px, -16px, 0); } }
@keyframes float-b { 50% { transform: translate3d(-14px, 12px, 0); } }
@keyframes float-c { 50% { transform: translate3d(-8px, -18px, 0); } }
html.amaze .mirror { position: absolute; right: 6%; bottom: 8%; width: 120px; z-index: 0; pointer-events: none; opacity: 0.45; }
html.amaze .mirror .ring { transform-origin: 60px 60px; animation: mirror-spin 26s linear infinite; }
html.amaze .mirror .dash { transform-origin: 60px 60px; animation: dash-orbit 5.5s linear infinite; }
@keyframes mirror-spin { to { transform: rotate(360deg); } }
@keyframes dash-orbit { to { stroke-dashoffset: -160; } }

html.amaze .chart-fact { margin-top: 14px; font-weight: 650; }
html.amaze .chart-fact b { font-size: 28px; letter-spacing: -0.04em; }
html.amaze .day-hand { width: 36px; height: 36px; margin-left: 8px; vertical-align: -8px; transform-origin: 18px 20px; animation: hand-turn linear both; animation-timeline: view(); animation-range: entry 0% exit 80%; }
@keyframes hand-turn { to { transform: rotate(240deg); } }
html.amaze .typing { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
html.amaze .typing i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: type-dot 1s var(--ease-in-out) infinite; }
html.amaze .typing i:nth-child(2) { animation-delay: 0.15s; }
html.amaze .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes type-dot { 0%, 100% { transform: translateY(0); opacity: 0.35; } 50% { transform: translateY(-3px); opacity: 1; } }
html.amaze .bars { display: inline-flex; gap: 2px; height: 14px; margin-left: 8px; vertical-align: -2px; }
html.amaze .bars i { width: 2px; height: 100%; background: currentColor; transform-origin: center bottom; }
html.amaze .bars i:nth-child(1) { animation: bar-1 0.9s var(--ease-in-out) infinite; }
html.amaze .bars i:nth-child(2) { animation: bar-2 0.7s var(--ease-in-out) infinite; }
html.amaze .bars i:nth-child(3) { animation: bar-3 1.05s var(--ease-in-out) infinite; }
html.amaze .bars i:nth-child(4) { animation: bar-4 0.8s var(--ease-in-out) infinite; }
@keyframes bar-1 { 50% { transform: scaleY(0.35); } }
@keyframes bar-2 { 50% { transform: scaleY(0.7); } }
@keyframes bar-3 { 50% { transform: scaleY(0.25); } }
@keyframes bar-4 { 50% { transform: scaleY(0.55); } }

html.amaze .story:nth-child(1) b::after {
  content: ""; display: block; height: 1px; margin-top: 6px; background: currentColor;
  transform: scaleX(0); transform-origin: left; animation: rule 700ms var(--ease-out) both;
  animation-timeline: view(); animation-range: entry 25% cover 50%;
}
html.amaze .story:nth-child(2) { animation: story-pop 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
html.amaze .story:nth-child(3) { animation: story-skew 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
html.amaze .story:nth-child(4) { animation: story-iris 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
html.amaze .stories { perspective: 900px; }
html.amaze .story:nth-child(5) { animation: story-flip 760ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
html.amaze .story:nth-child(6) { animation: story-soft 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
@keyframes story-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes story-skew { from { opacity: 0; transform: skewX(-4deg); } to { opacity: 1; transform: none; } }
@keyframes story-iris { from { clip-path: inset(8% 8% 8% 8% round 16px); } to { clip-path: inset(0 round 16px); } }
@keyframes story-flip { from { opacity: 0; transform: rotateY(14deg); } to { opacity: 1; transform: none; } }
@keyframes story-soft { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

html.amaze .why .plain:nth-child(1) { animation: why-clip 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
html.amaze .why .plain:nth-child(2) { animation: why-tilt 740ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 18% cover 48%; }
html.amaze .why .plain:nth-child(3) { animation: why-up 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 26% cover 56%; }
@keyframes why-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes why-tilt { from { opacity: 0; transform: rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes why-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

html.amaze .cta-band .btn-cream { animation: cta-cream 640ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
html.amaze .cta-band .btn-ghost { animation: cta-ghost 640ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 30% cover 65%; }
@keyframes cta-cream { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cta-ghost { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
html.amaze .band .wrap > p { animation: band-clip 800ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
@keyframes band-clip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
html.amaze .note { display: inline-block; animation: stamp 640ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
@keyframes stamp { from { opacity: 0; transform: rotate(-10deg) scale(1.06); } to { opacity: 1; transform: rotate(-2deg); } }
html.amaze .quote::before {
  content: "\201C"; display: block; font-size: 68px; line-height: 0.5; color: white;
  animation: quote-mark 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 8% cover 36%;
}
@keyframes quote-mark { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 0.4; transform: none; } }

html.amaze [data-rise] .audience:nth-child(1)::before {
  content: ""; position: absolute; inset: 10px; border: 1px solid var(--navy); border-radius: 12px; pointer-events: none;
  animation: ring-burst 900ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 50%;
}
@keyframes ring-burst { from { opacity: 0; transform: scale(0.9); } to { opacity: 0.4; transform: none; } }
html.amaze .mark-check, html.amaze .mark-pin { position: absolute; top: 16px; right: 16px; color: var(--navy); }
html.amaze .mark-check path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: check-draw 700ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
html.amaze .mark-pin { animation: pin-drop 640ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 25% cover 55%; }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
html.amaze [data-rise] .audience:nth-child(5) h3 { display: inline-block; animation: pop-soft 680ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 22% cover 52%; }
@keyframes pop-soft { 0% { transform: scale(0.96); } 65% { transform: scale(1.03); } 100% { transform: none; } }
html.amaze .cards-3 article:first-child .shot-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55), transparent 65%);
  transform: translateX(-130%); animation: sheen 1.1s var(--ease-out) 0.8s both;
}
html.amaze .stage figcaption { position: relative; }
html.amaze .stage figcaption::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 42px; height: 1px; background: #c5d0dc;
  transform: scaleX(0); transform-origin: left; animation: rule 600ms var(--ease-out) 0.9s both;
}
html.amaze .wl, html.amaze .wr {
  display: inline-block; animation-duration: 620ms; animation-timing-function: var(--ease-out);
  animation-fill-mode: both; animation-timeline: view(); animation-range: entry 8% cover 36%;
}
html.amaze .wl { animation-name: wleft; }
html.amaze .wr { animation-name: wright; }
@keyframes wleft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes wright { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

html.amaze .shot-frame { position: relative; }
html.amaze .live-paused, html.amaze .live-paused * { animation-play-state: paused !important; }