/* Motion layer — loads after premium.css. Everything degrades to static without JS. */

:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Scroll reveal (classes added by motion.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.reveal-scale { transform: translateY(20px) scale(.96); }
.reveal.reveal-scale.in { transform: none; }

/* Cards keep their hover lift after reveal finishes */
.reveal.in.bento-card:hover,
.reveal.in.channel-item:hover,
.reveal.in.tile:hover { transform: translateY(-4px); transition-delay: 0ms; transition-duration: .25s; }

/* ---------- Hero entrance ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes blur-in { from { opacity: 0; filter: blur(8px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }

.hero-copy > *, .page-hero-inner > * { animation: rise .9s var(--ease-out) both; }
.hero-copy > :nth-child(1), .page-hero-inner > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2), .page-hero-inner > :nth-child(2) { animation-name: blur-in; animation-delay: .15s; }
.hero-copy > :nth-child(3), .page-hero-inner > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4), .page-hero-inner > :nth-child(4) { animation-delay: .42s; }
.hero-copy > :nth-child(5) { animation-delay: .54s; }

/* ---------- Ambient: drifting glows + shimmering gradient text ---------- */
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, 3%, 0) scale(1.06); }
}
.hero-glow, .ownership-glow { animation: drift 16s ease-in-out infinite; }

@keyframes shimmer { to { background-position: 200% center; } }
.grad-text {
  background-size: 200% auto;
  animation: shimmer 6s linear infinite;
  background-image: linear-gradient(90deg, #0FB39A, #1A9756, #6538FF, #0FB39A);
}

/* Pill dot pulse */
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(26,151,86,.45); } 100% { box-shadow: 0 0 0 10px rgba(26,151,86,0); } }
.pill-dot { animation: ping 2.2s ease-out infinite; }

/* Hero screenshot gently floats; glow behind breathes */
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.hero-home .hero-frame { animation: hero-rise .9s var(--ease-out) .25s both, float 8s ease-in-out 1.2s infinite; }
.hero-home .hero-stage::before { animation: breathe 6s ease-in-out infinite; }

/* Interactive tilt (driven by motion.js via --rx / --ry) */
.hero-home .hero-stage { perspective: 1600px; }
.hero-home .hero-frame.is-tilting {
  animation: none;
  transform: perspective(1600px) rotateY(var(--ry, -7deg)) rotateX(var(--rx, 2deg));
  transition: transform .15s ease-out;
}

/* ---------- Buttons: shine sweep + arrow nudge ---------- */
.btn-start { position: relative; overflow: hidden; }
.btn-start::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-start:hover::after { transform: translateX(120%); transition: transform .8s var(--ease-out); }
.btn-start .ico { transition: transform .25s var(--ease-out); }
.btn-start:hover .ico { transform: translateX(4px); }
.btn-light::after { background: linear-gradient(110deg, transparent 30%, rgba(15,23,42,.08) 50%, transparent 70%); }

/* Header gains depth once scrolled */
.site-header { transition: box-shadow .3s ease, background .3s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(15,23,42,.35); background: rgba(247,245,243,.92); }

/* Card icon chips pop on hover */
.tile-ico { transition: transform .35s var(--ease-out); }
.bento-card:hover .tile-ico, .channel-item:hover .tile-ico, .tile:hover .tile-ico { transform: scale(1.1) rotate(-6deg); }

/* Channel accent bar draws in */
.channel-item::after { transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .25s; }
.channel-item.in::after { transform: scaleX(1); }

/* Step connector draws in */
.step-cards-4 .step-card:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out) calc(var(--d, 0ms) + .4s); }
.step-card.in::after { transform: scaleX(1) !important; }

/* Problem card accent bar grows */
.problem-card::before { transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease-out) .2s; }
.problem-card.in::before { transform: scaleY(1); }

/* ---------- Feature-page hero mocks: staged reveal ---------- */
.mock { animation: mock-in 1s var(--ease-out) .2s both; }
@keyframes mock-in { from { opacity: 0; transform: translateY(30px) rotate(3deg) scale(.96); } to { opacity: 1; transform: rotate(1deg); } }

.mock-body > * { animation: rise .7s var(--ease-out) both; }
.mock-body > :nth-child(1) { animation-delay: .55s; }
.mock-body > :nth-child(2) { animation-delay: .8s; }
.mock-body > :nth-child(3) { animation-delay: 1.05s; }
.mock-body > :nth-child(4) { animation-delay: 1.3s; }
.cal-item { animation: rise .6s var(--ease-out) both; }
.cal-item:nth-child(1) { animation-delay: .6s; } .cal-item:nth-child(2) { animation-delay: .75s; }
.cal-item:nth-child(3) { animation-delay: .9s; } .cal-item:nth-child(4) { animation-delay: 1.05s; }

@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stat-track i { transform-origin: left; animation: grow-x 1.3s var(--ease-out) both; }
.stat-row:nth-child(1) i { animation-delay: .7s; } .stat-row:nth-child(2) i { animation-delay: .9s; }
.stat-row:nth-child(3) i { animation-delay: 1.1s; } .stat-row:nth-child(4) i { animation-delay: 1.3s; }

/* Highlighted row / note pulse softly to draw the eye */
@keyframes soft-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); } }
.mock-row.is-hot { animation: rise .7s var(--ease-out) .55s both, soft-pulse 3s ease-in-out 1.5s infinite; }
.mock-note { animation: rise .7s var(--ease-out) both, soft-pulse 3s ease-in-out 2s infinite; }

/* FAQ answer fades in */
.faq-item.is-open .faq-answer-inner { animation: rise .4s var(--ease-out) both; }

/* Bento lead card sheen */
@keyframes sheen { 0% { transform: translateX(-130%) skewX(-18deg); } 60%, 100% { transform: translateX(230%) skewX(-18deg); } }
.bento-lead { position: relative; overflow: hidden; }
.bento-lead::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: sheen 6s ease-in-out 1.5s infinite; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-home .hero-frame, .hero-glow, .ownership-glow, .grad-text, .bento-lead::after { animation: none !important; }
}