/* Gorban — motion layer. Everything here is gated behind html.motion, which an inline
   script in <head> sets only when the visitor hasn't asked for reduced motion.
   No JS / reduced motion → the page renders fully, statically. */
:root {
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out: long, soft settle */
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --rv-y: 28px;
  interpolate-size: allow-keywords;
}

/* ───────── Rainbow edge: slow drifting light ───────── */
html.motion .rainbow {
  background: linear-gradient(90deg, #FFC24D, #FF8A1F, #FF5A1F, #FF3D2E, #FF5A1F, #FF8A1F, #FFC24D);
  background-size: 200% 100%;
  animation: rainbow-drift 9s linear infinite;
}
@keyframes rainbow-drift { to { background-position: -200% 0; } }

/* ───────── Hero entrance (on load) ───────── */
html.motion .site-head .nav { animation: drop-in 1s var(--e-out) both .05s; }
html.motion .hero-copy > * { animation: rise-blur 1.1s var(--e-out) both; }
html.motion .hero-copy > :nth-child(1) { animation-delay: .15s; }
html.motion .hero-copy > :nth-child(2) { animation-delay: .25s; }
html.motion .hero-copy > :nth-child(3) { animation-delay: .38s; }
html.motion .hero-copy > :nth-child(4) { animation-delay: .5s; }
html.motion .hero-line { animation: wipe-in 2.6s var(--e-io) both .4s; }
html.motion .hero-scale { animation: fade-in 1.6s ease both .9s; }
html.motion .hero-dash { animation: rise 1.4s var(--e-out) both .55s; }
html.motion .hero-dash > .fit {
  transform-origin: 50% 0;
  transform: perspective(1800px) rotateX(calc((1 - var(--t, 0)) * 14deg)) scale(calc(.94 + .06 * var(--t, 0)));
  will-change: transform;
}

@keyframes drop-in { from { opacity: 0; transform: translateY(-16px); } }
@keyframes rise-blur { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(60px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Hero CTA: the glow breathes */
html.motion .btn--glow::after { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }

/* Pulse ring on the live data point + the case-study "Live" tag */
.pulse { position: absolute; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; }
html.motion .pulse { animation: ping 2.4s var(--e-out) infinite 2s; }
html.motion .case-tag::before { animation: ping-dot 2s ease-out infinite; }
@keyframes ping { from { box-shadow: 0 0 0 0 rgba(255,106,31,.55); } to { box-shadow: 0 0 0 14px rgba(255,106,31,0); } }
@keyframes ping-dot { from { box-shadow: 0 0 0 0 rgba(255,106,31,.6); } to { box-shadow: 0 0 0 7px rgba(255,106,31,0); } }

/* Live number tick in the hero dashboard */
.tick { transition: color .6s ease; }
.tick.flash { color: var(--blue); transition: none; }

/* ───────── Scroll reveals ─────────
   Units fade up with a soft blur; children inside them stagger once the unit is in. */
html.motion :is(.logos-inner, .divider, .sec-head, .why-card, .case-panel, .proof-grid > *, .faq-list > *, .foot-top, .foot-bottom) {
  transition: opacity 1s var(--e-out), transform 1.1s var(--e-out), filter 1s var(--e-out);
  transition-delay: var(--d, 0s);
}
html.motion :is(.logos-inner, .divider, .sec-head, .why-card, .case-panel, .proof-grid > *, .faq-list > *, .foot-top, .foot-bottom):not(.in) {
  opacity: 0; transform: translateY(var(--rv-y)); filter: blur(6px);
}
/* card rows cascade left → right */
html.motion .why-grid > :nth-child(2), html.motion .proof-grid > :nth-child(2), html.motion .proof-grid > :nth-child(5) { --d: .08s; }
html.motion .why-grid > :nth-child(3), html.motion .proof-grid > :nth-child(3), html.motion .proof-grid > :nth-child(6) { --d: .16s; }
html.motion .proof-grid > :nth-child(4) { --d: 0s; }
html.motion .faq-list > :nth-child(2) { --d: .07s; } html.motion .faq-list > :nth-child(3) { --d: .14s; } html.motion .faq-list > :nth-child(4) { --d: .21s; }

/* staggered children */
html.motion :is(.logos-row > *, .v-task, .v-tray .m-stat, .case-steps li, .case-stats > div, .deals tbody tr, .case-foot, .case-tag) {
  transition: opacity .8s var(--e-out), transform .9s var(--e-out); transition-delay: calc(var(--i, 0) * 70ms + .2s);
}
html.motion :is(.logos-inner, .why-card, .case-panel):not(.in) :is(.logos-row > *, .v-task, .v-tray .m-stat, .case-steps li, .case-stats > div, .deals tbody tr, .case-foot, .case-tag) {
  opacity: 0; transform: translateY(14px);
}
.logos-row > :nth-child(1), .v-task:nth-child(1), .v-tray .m-stat:nth-child(1), .case-steps li:nth-child(1), .case-stats > div:nth-child(1), .deals tbody tr:nth-child(1) { --i: 0; }
.logos-row > :nth-child(2), .v-task:nth-child(2), .v-tray .m-stat:nth-child(2), .case-steps li:nth-child(2), .case-stats > div:nth-child(2), .deals tbody tr:nth-child(2) { --i: 1; }
.logos-row > :nth-child(3), .v-task:nth-child(3), .v-tray .m-stat:nth-child(3), .case-steps li:nth-child(3), .case-stats > div:nth-child(3), .deals tbody tr:nth-child(3) { --i: 2; }
.logos-row > :nth-child(4), .v-tray .m-stat:nth-child(4), .deals tbody tr:nth-child(4) { --i: 3; }
.logos-row > :nth-child(5), .deals tbody tr:nth-child(5) { --i: 4; }
.deals tbody tr:nth-child(6) { --i: 5; } .deals tbody tr:nth-child(7) { --i: 6; }
.case-foot { --i: 4; } .case-tag { --i: 8; }

/* Deal-health bars grow from the left */
html.motion .v-bar { transform-origin: left center; transition: transform 1.3s var(--e-out); transition-delay: calc(var(--i, 0) * 120ms + .25s); }
html.motion .why-card:not(.in) .v-bar { transform: scaleX(0); }
.v-bar:nth-child(2) { --i: 1; } .v-bar:nth-child(3) { --i: 2; }

/* Chart lines draw themselves in */
html.motion :is(.m-balance > img, .m-stat img, .m-pipe img.abs[src*="pipeline"]) {
  transition: clip-path 1.8s var(--e-io); transition-delay: .35s;
}
html.motion :is(.hero-dash:not(.drawn), .why-card:not(.in)) :is(.m-balance > img, .m-stat img, .m-pipe img.abs[src*="pipeline"]) {
  clip-path: inset(0 100% 0 0);
}
html.motion .m-pipe img.abs[src*="pipeline-spend"] { transition-delay: .55s; }
html.motion .m-pipe :is(.tip, .pulse, img.abs[src*="dot-"], span.abs) { transition: opacity .6s ease 1.7s; }
html.motion .hero-dash:not(.drawn) .m-pipe :is(.tip, .pulse, img.abs[src*="dot-"], span.abs) { opacity: 0; }

/* ───────── Pointer spotlight: an orange light that follows the cursor ───────── */
.spot { position: relative; isolation: isolate; }
.spot::before, .spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .4s ease;
}
.spot::before { /* soft wash */
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,106,31,.07), transparent 42%);
}
.spot::after { /* lit edge */
  padding: 1.5px;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,138,31,.55), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }
.stat-card--blue.spot::before, .stat-card--pink.spot::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.16), transparent 45%); }
.stat-card--blue.spot::after, .stat-card--pink.spot::after { background: radial-gradient(300px circle at var(--mx) var(--my), rgba(255,255,255,.7), transparent 45%); }

/* Cards lift a hair on hover */
html.motion .why-card .fit { transition: transform .5s var(--e-out), border-color .3s ease; }
html.motion :is(.stat-card, .quote-card) { transition: opacity 1s var(--e-out), filter 1s var(--e-out), transform .7s var(--e-out), border-color .3s ease; transition-delay: var(--d, 0s); }
html.motion .done { --d: 0s; }
html.motion :is(.why-card .fit, .stat-card, .quote-card):hover { transform: translateY(-4px); }

/* Buttons: light sheen sweeps across on hover */
.btn--white, .btn--light { overflow: hidden; isolation: isolate; }
.btn--white::before, .btn--light::before {
  content: ""; position: absolute; z-index: -1; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.btn--light::before { background: linear-gradient(90deg, transparent, rgba(255,138,31,.18), transparent); }
html.motion .btn--white:hover::before, html.motion .btn--light:hover::before { transform: translateX(120%) skewX(-20deg); transition: transform .8s var(--e-out); }
html.motion .btn { transition: transform .25s var(--e-out), filter .2s ease, box-shadow .3s ease; }
html.motion .btn:hover { transform: translateY(-1px); }
html.motion .btn--white:hover { box-shadow: 0 6px 24px rgba(255,255,255,.12); }

/* Nav links: underline grows from the centre */
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transition: transform .35s var(--e-out); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }

/* Socials hop, footer links slide */
html.motion .foot-menus a { display: inline-block; transition: transform .3s var(--e-out), color .2s ease; }
html.motion .foot-menus a:hover { transform: translateX(3px); }

/* ───────── FAQ: smooth open/close ───────── */
html.motion .faq-item::details-content {
  block-size: 0; overflow: clip;
  transition: block-size .5s var(--e-out), content-visibility .5s allow-discrete;
}
html.motion .faq-item[open]::details-content { block-size: auto; }
html.motion .faq-item p { transition: opacity .4s ease .1s, transform .5s var(--e-out) .05s; }
html.motion .faq-item:not([open]) p { opacity: 0; transform: translateY(-6px); }
.faq-item summary { transition: color .2s ease; }
.faq-item summary:hover { color: #fff; }
.faq-item:not([open]):hover { border-color: rgba(255,255,255,.18); }

@media (prefers-reduced-motion: reduce) {
  .spot::before, .spot::after { display: none; }
}
@media (hover: none) {
  .spot::before, .spot::after { display: none; }
}