/* Motion & polish layer. Hidden start states only apply under .js-motion (set in <head>),
   so without JS or with reduced motion the page renders fully static. */

:root { --ease: cubic-bezier(.22, 1, .36, 1); }
html, body { overflow-x: clip; }

/* ---------- Header ---------- */
.site-header { transition: box-shadow .4s var(--ease), background-color .4s var(--ease); }
.site-header .header-inner { transition: padding .4s var(--ease); }
.site-header.is-scrolled { background: rgba(234,238,233,.8) !important; box-shadow: 0 14px 34px -16px rgba(5,20,22,.22); }
.site-header.is-scrolled .header-inner { padding-top: 12px !important; padding-bottom: 12px !important; }
.js-motion .site-header { animation: header-in .9s var(--ease) both; }
@keyframes header-in { from { translate: 0 -100%; opacity: 0; } }

.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; pointer-events: none;
  background: linear-gradient(270deg, #FF601F, #FFA06E);
  transform-origin: right; scale: var(--progress, 0) 1;
}

.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; right: 0; left: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: #FF601F; scale: 0 1; transform-origin: right; transition: scale .45s var(--ease);
}
.nav-link:hover::after, .nav-link:focus-visible::after { scale: 1 1; }

/* ---------- Buttons ---------- */
.btn-primary { --glow: rgba(255,96,31,.55); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-20deg);
}
.js-motion .hero-ctas .btn-primary::after { animation: shine 1.1s var(--ease) 1.9s; }
.btn-ghost { transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .4s var(--ease); }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px var(--glow); }
  .btn-primary:hover::after { animation: shine .9s var(--ease); }
  .btn-ghost:hover { background: #051416; color: #fff !important; border-color: #051416 !important; transform: translateY(-2px); }
}
@keyframes shine { from { left: -70%; } to { left: 125%; } }

/* ---------- Generic reveals ---------- */
.js-motion [data-reveal] {
  transition: opacity .9s var(--ease) var(--d, 0ms), translate 1.1s var(--ease) var(--d, 0ms),
    scale 1.3s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms), clip-path 1.5s var(--ease) var(--d, 0ms);
}
.js-motion [data-reveal=""], .js-motion [data-reveal="up"] { opacity: 0; translate: 0 34px; filter: blur(6px); }
.js-motion [data-reveal="zoom"] { opacity: 0; scale: .93; }
.js-motion [data-reveal].is-in { opacity: 1; translate: none; scale: none; filter: none; }

/* Children appear one after another */
.js-motion [data-stagger] > * {
  opacity: 0; translate: 0 28px;
  transition: opacity .8s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 110ms),
    translate 1s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 110ms),
    scale 1s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 110ms),
    transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s, background-color .4s;
}
.js-motion [data-stagger="x"] > * { translate: 40px 0; }
.js-motion [data-stagger="pop"] > * { translate: none; scale: .6; }
.js-motion [data-stagger].is-in > * { opacity: 1; translate: none; scale: none; }

/* Headings rise word by word */
.js-motion [data-split] .w { display: inline-block; vertical-align: top; overflow: hidden; padding: .12em .05em .24em; margin: -.12em -.05em -.24em; }
.js-motion [data-split] .wi { display: inline-block; translate: 0 115%; transition: translate 1.15s var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 75ms); }
.js-motion [data-split].is-in .wi { translate: none; }

/* ---------- Images ---------- */
.img-frame { overflow: hidden; border-radius: var(--r, 28px); transform: translateZ(0); }
.img-frame img { border-radius: 0 !important; }
.js-motion .img-frame img { scale: 1.1; transition: scale 1.9s var(--ease) var(--d, 0ms); will-change: translate; }
.js-motion .img-frame[data-reveal="img"] { clip-path: inset(14% 9% 14% 9% round var(--r, 28px)); }
.js-motion .img-frame[data-reveal="img"] img { scale: 1.35; }
.js-motion .img-frame[data-reveal="img"].is-in { clip-path: inset(0 0 0 0 round var(--r, 28px)); }
.js-motion .img-frame[data-reveal="img"].is-in img { scale: 1.1; }

/* ---------- Hero ---------- */
.pulse-dot { position: relative; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #FF601F; animation: ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.8); opacity: 0; } }

.hl { position: relative; display: inline-block; }
.hl-line { position: absolute; right: -3%; width: 106%; bottom: -.06em; height: .3em; overflow: visible; pointer-events: none; }
.hl-line path { fill: none; stroke: #FF601F; stroke-width: 6; stroke-linecap: round; opacity: .38; }
.js-motion .hl-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) calc(var(--d, 0ms) + 750ms); }
.js-motion .is-in .hl-line path { stroke-dashoffset: 0; }

.hero-media { position: relative; isolation: isolate; }
.hero-glow {
  position: absolute; inset: 12% -10% -8% 10%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,96,31,.32), transparent 70%), radial-gradient(closest-side at 30% 70%, rgba(0,76,67,.28), transparent 70%);
  filter: blur(36px);
}
.float-card .bars span { transform-origin: bottom; }
.js-motion .float-card .bars span { scale: 1 0; transition: scale .65s var(--ease) calc(var(--d, 0ms) + 350ms + var(--i, 0) * 70ms); }
.js-motion .float-card.is-in .bars span { scale: none; }

/* ---------- Season ---------- */
.js-motion .draw-top { position: relative; border-top-color: transparent !important; }
.js-motion .draw-top::before {
  content: ""; position: absolute; top: -2px; right: 0; left: 0; height: 2px; background: #051416;
  scale: 0 1; transform-origin: right; transition: scale 1.3s var(--ease) calc(100ms + var(--i, 0) * 160ms);
}
.js-motion .is-in > .draw-top::before { scale: none; }
.giant-word { will-change: translate; }

/* ---------- Problem ---------- */
.js-motion .x-list > * svg { rotate: -120deg; transition: rotate .9s var(--ease) calc(var(--d, 0ms) + 200ms + var(--i, 0) * 110ms); }
.js-motion .x-list.is-in > * svg { rotate: none; }

/* ---------- How it works ---------- */
.video-play { position: relative; }
.video-play::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); animation: ring 2.4s var(--ease) infinite; pointer-events: none; }
@keyframes ring { from { transform: scale(1); opacity: .85; } to { transform: scale(1.75); opacity: 0; } }
.video-card img { transition: scale 1.2s var(--ease); }

.spot { position: relative; overflow: hidden; transition: transform .45s var(--ease), border-color .4s, background-color .4s; }
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(217,249,209,.16), transparent 62%);
}

/* ---------- Benefits ---------- */
.benefit-row > span:first-child { transition: color .35s; }
.tile { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }

@media (hover: hover) {
  .video-card:hover img { scale: 1.04; }
  .spot:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.32) !important; background-color: rgba(255,255,255,.09) !important; }
  .spot:hover::before { opacity: 1; }
  .benefit-row:hover { transform: translateX(-10px); }
  .benefit-row:hover > span:first-child { color: #FF601F; }
  .tile:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -14px rgba(5,20,22,.35); }
}

/* ---------- Ambient loops, only for people who allow motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: glow 11s ease-in-out infinite alternate; }
  .float-card { animation: bob 6s ease-in-out 2s infinite; }
}
@keyframes glow { to { transform: translate(-7%, 5%) scale(1.1); } }
@keyframes bob { 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot::after, .video-play::before { animation: none; display: none; }
  .scroll-progress { display: none; }
}