/* fig.ironlab.ai motion (concept C2, Rasel approved the direction 2026-11-08). Everything that starts hidden is gated
   on .js-motion, which motion.js sets first: if the script never runs, the page is the static page. All of it is
   switched off under prefers-reduced-motion. Festive pieces (badge sparkle, fireworks) end on a date set in motion.js. */
@media (prefers-reduced-motion: no-preference) {
  /* Logo arrival */
  header .brand { perspective: 700px; }
  .js-motion header .brand img { animation: m-logo 1.3s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes m-logo { 0% { transform: rotateY(-540deg) scale(.35); opacity: 0 } 55% { opacity: 1 } 80% { transform: rotateY(12deg) scale(1.06) } 100% { transform: none } }
  header .brand .word { display: inline-block; white-space: nowrap; }
  header .brand .ch { display: inline-block; animation: m-ch .8s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes m-ch { from { opacity: 0; transform: translateX(-14px); filter: blur(6px) } }

  /* Headline: lines rise from behind a mask */
  .hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
  .hero h1 .line > span { display: inline-block; transform: translateY(110%); transition: transform 1s cubic-bezier(.2,.8,.2,1); }
  .hero h1.is-in .line > span { transform: none; }
  .hero h1 .line:nth-child(2) > span { transition-delay: .12s } .hero h1 .line:nth-child(3) > span { transition-delay: .24s }

  /* Hero phone: leans toward the pointer with a sheen; recedes as the hero scrolls away */
  .hero-art { perspective: 1200px; }
  .js-motion .hero-art > .phone { transform: translateY(var(--exit-y, 0)) scale(var(--exit-s, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-2deg); transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform; }
  .js-motion .hero-art > .phone::after { content: ""; position: absolute; inset: 8px; border-radius: 35px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #ffffff40 var(--sheen, 50%), transparent 65%); mix-blend-mode: soft-light; }
  .hero-leaf { animation: m-float 14s ease-in-out infinite; }
  @keyframes m-float { 0%,100% { transform: rotate(30deg) translateY(0) } 50% { transform: rotate(42deg) translateY(-28px) rotateY(25deg) } }

  /* Cursor spotlight (dark design only: invisible on cream) */
  .hero-shell { position: relative; }
  .spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(620px circle at var(--mx, 70%) var(--my, 45%), #d6aee266, transparent 62%); }
  .hero-shell > header, .hero-shell > .hero { position: relative; z-index: 1; }

  /* App Store badge: warm glow and a light sweep, twice, then still (festive) */
  .festive .hero .store-badge { position: relative; overflow: hidden; animation: m-glow 1.6s ease-out 1.5s 2 both; }
  .festive .hero .store-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #fff8 48%, transparent 66%); transform: translateX(-120%); animation: m-sweep 1.6s ease-out 1.5s 2; pointer-events: none; }
  @keyframes m-glow { 0%, 100% { box-shadow: 0 0 0 0 #ffd99a00 } 35% { box-shadow: 0 0 26px 6px #ffd99a99 } }
  @keyframes m-sweep { 0% { transform: translateX(-120%) } 60%, 100% { transform: translateX(120%) } }
  .spark { position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 3; opacity: 0; filter: drop-shadow(0 0 4px var(--g, #ffe3a3));
    background: var(--c); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    animation: m-spark 1.4s cubic-bezier(.2,.8,.2,1) var(--d) both; }
  @keyframes m-spark { 0% { opacity: 0; transform: translate(0,0) scale(.2) rotate(0) } 25% { opacity: 1 } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)) rotate(180deg) } }

  /* Buttons lean toward the pointer */
  .magnetic { transition: transform .25s ease-out; will-change: transform; }

  /* Sections rise in; feature cards tilt on hover */
  .js-motion .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
  .js-motion .reveal.in { opacity: 1; transform: none; }
  .feature-grid { perspective: 1000px; }
  .feature { transition: transform .4s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
  .feature .art { transition: transform .4s; }
  .feature:hover { transform: rotateX(6deg) rotateY(-6deg) translateY(-6px); }
  .feature:hover .art { transform: translateZ(40px) scale(1.05); }

  /* Closing scene: the leaf falls and settles, the phone swings in, then both breathe and follow the pointer */
  .closing-art { perspective: 1200px; }
  .js-motion .closing-art .phone, .js-motion .closing-art .leaf { opacity: 0; }
  .js-motion .closing-art.in .phone { animation: m-phone-in 1.5s cubic-bezier(.2,.8,.2,1) both, m-bob 7s ease-in-out 1.5s infinite; }
  @keyframes m-phone-in { from { opacity: 0; transform: translateY(90px) rotateY(-55deg) rotateX(14deg) rotate(14deg) } to { opacity: 1; transform: rotate(8deg) } }
  @keyframes m-bob { 0%, 100% { opacity: 1; transform: rotate(8deg) } 50% { opacity: 1; transform: translateY(-10px) rotateY(-6deg) rotate(7deg) } }
  .js-motion .closing-art.in .leaf { animation: m-leaf-fall 2.2s cubic-bezier(.3,.7,.3,1) .2s both, m-sway 9s ease-in-out 2.4s infinite; }
  @keyframes m-leaf-fall { 0% { opacity: 0; transform: translate(-180px,-300px) rotate(-150deg) rotateX(70deg) } 35% { opacity: 1; transform: translate(40px,-170px) rotate(-40deg) rotateX(-30deg) } 65% { transform: translate(-30px,-50px) rotate(40deg) rotateX(25deg) } 100% { opacity: 1; transform: rotate(16deg) } }
  @keyframes m-sway { 0%, 100% { opacity: 1; transform: rotate(16deg) } 50% { opacity: 1; transform: rotate(20deg) rotateY(18deg) translateY(-6px) } }
  .closing-art .phone { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); transition: translate .3s ease-out; }
  .closing-art .leaf { translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -18px); transition: translate .4s ease-out; }

  .fireworks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
}

/* The call screen's waveform plays (Rasel, 2026-11-08: "at the moment it's empty"). The screenshot was taken 15 s into
   a 2:39 call, so nearly every bar is pale; the app colours played bars green. A green copy of the screenshot's own bars
   is revealed left to right, as the app does while a call plays. Static at the same point without motion. */
.wave-host { display: block; position: relative; }
.phone .wave-played { position: absolute; left: 7.863%; top: 29.937%; width: 84.274%; height: auto; border: 0; border-radius: 0; pointer-events: none; clip-path: inset(0 32% 0 0); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .closing-art .wave-played { clip-path: inset(0 90.4% 0 0); }
  .js-motion .closing-art.in .wave-played { animation: m-play 9s cubic-bezier(.45,.05,.55,.95) 1.2s forwards; }
  .js-motion .second-phone .wave-played { animation: m-play 9s cubic-bezier(.45,.05,.55,.95) 1.8s both; }
  @keyframes m-play { from { clip-path: inset(0 90.4% 0 0) } to { clip-path: inset(0 32% 0 0) } }
}