:root { --ease-out: cubic-bezier(.22,.61,.36,1); --ease-io: cubic-bezier(.65,0,.35,1); --dur-fast: .22s; --dur: .6s; }

/* Motion layer. Loaded after the other stylesheets; every effect is gated on
   [data-motion="auto"] and prefers-reduced-motion so it can be removed by
   deleting this file and its <link>/<script> tags. Transform/opacity only. */

/* Header: deeper glass once the page scrolls. */
.site-header.liquid-header { transition: box-shadow .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease; }
.site-header.liquid-header.is-scrolled { box-shadow: 0 14px 34px #00000022, inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); }

@media (prefers-reduced-motion: no-preference) {

  /* Reveals: staggered rise. --reveal-delay is set by motion.js and cleared after the entrance. */
  .motion-ready[data-motion="auto"] .reveal { transition-delay: var(--reveal-delay, 0ms); }

  /* Heading accent word arrives just after the bold part. */
  .motion-ready[data-motion="auto"] .reveal h2 em { display: inline-block; opacity: 0; transform: translateY(.28em); transition: opacity .6s ease .28s, transform .7s cubic-bezier(.2,.65,.3,1) .28s; }
  .motion-ready[data-motion="auto"] .reveal.is-visible h2 em { opacity: 1; transform: none; }

  /* Hero underline draws in. */
  [data-motion="auto"] .hero h1 em:after { transform-origin: left center; animation: underline-draw .8s cubic-bezier(.2,.65,.3,1) .55s both; }
  @keyframes underline-draw { from { transform: rotate(-3deg) scaleX(0); } to { transform: rotate(-3deg) scaleX(1); } }

  /* Hero parallax: --hero-scroll is written by motion.js (rAF-throttled). */
  [data-motion="auto"] .hero-art .lime-disc { translate: 0 calc(var(--hero-scroll, 0) * -.05px); }
  [data-motion="auto"] .hero-art .orbit-two { translate: 0 calc(var(--hero-scroll, 0) * -.09px); }
  [data-motion="auto"] .hero-art .art-spark-one { translate: 0 calc(var(--hero-scroll, 0) * -.14px); }

  /* Logo pulse. */
  [data-motion="auto"] .site-header .brand img { animation: logo-pulse 5s ease-in-out infinite; transform-origin: center; }
  @keyframes logo-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

  /* Card depth: sheen follows the pointer, tilt is set from JS. */
  .card-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #ffffff2e, transparent 62%); }
  [data-theme="dark"] .card-sheen { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), #ffffff10, transparent 62%); }
  .is-tilting > .card-sheen { opacity: 1; }
  .motion-ready[data-motion="auto"] .reveal.is-visible.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s ease-out, translate .35s ease, box-shadow .35s ease, border-color .35s ease, opacity .65s ease; }
  .is-tilting { will-change: transform; }

  /* Rows 01-04: accent bar slides in, arrow nudges. */
  :root[data-motion="auto"] .tour-tab { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: left center; background-size: 3px 0; box-shadow: none; transition: background-size .35s cubic-bezier(.2,.65,.3,1), background-color .25s ease; }
  :root[data-motion="auto"] .tour-tab.is-active { background-size: 3px 100%; box-shadow: none; }
  :root[data-motion="auto"] .tour-tab > .icon { transition: translate .25s ease; }
  :root[data-motion="auto"] .tour-tab:hover > .icon, :root[data-motion="auto"] .tour-tab:focus-visible > .icon { translate: 3px -3px; }

  /* Paused when off-screen (class toggled by motion.js). */
  .motion-paused, .motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }

  /* Page-level depth. Grain is static; ambient glows drift slowly in dark mode. */
  [data-motion="auto"] body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-motion="auto"] .github-stat:hover, [data-motion="auto"] .team-card:hover { translate: 0 -4px; box-shadow: var(--glass-shadow), 0 18px 35px #20202014; }
}

@media (prefers-reduced-motion: reduce) {
  .card-sheen, body::after { display: none !important; }
}

/* ---- Premium pass: hero entrance, nav, buttons, icons, FAQ, downloads ---- */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: each piece of copy arrives in sequence; the product showcase follows. */
  [data-motion="auto"] .hero-copy { animation: none; }
  [data-motion="auto"] .hero-copy > * { animation: rise-in .8s var(--ease-out) both; }
  [data-motion="auto"] .hero-copy > :nth-child(2) { animation-delay: .08s; }
  [data-motion="auto"] .hero-copy > :nth-child(3) { animation-delay: .2s; }
  [data-motion="auto"] .hero-copy > :nth-child(4) { animation-delay: .3s; }
  [data-motion="auto"] .hero-copy > :nth-child(5) { animation-delay: .4s; }
  [data-motion="auto"] .hero-copy > :nth-child(n+6) { animation-delay: .5s; }
  [data-motion="auto"] .hero-art { animation: art-in 1s var(--ease-out) .25s both; }
  [data-motion="auto"] .site-header.liquid-header { animation: header-in .7s var(--ease-out) both; }
  @keyframes rise-in { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
  @keyframes art-in { from { opacity: 0; translate: 0 28px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes header-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }

  /* Navigation links and header icon buttons. */
  .liquid-header .site-navigation a { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out); }
  .liquid-header .site-navigation a:hover { translate: 0 -1px; }
  .theme-toggle, .github-link { transition: scale var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
  .theme-toggle:hover, .github-link:hover { scale: 1.07; }
  .theme-toggle:active, .github-link:active { scale: .94; }

  /* Buttons: lift on hover, press on active, arrow nudges. */
  .button { transition: translate var(--dur-fast) var(--ease-out), scale var(--dur-fast) var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); }
  .button:hover { translate: 0 -2px; }
  .button:active { translate: 0 0; scale: .97; transition-duration: .08s; }
  .button > .icon:last-of-type:not(:first-of-type) { transition: translate var(--dur-fast) var(--ease-out); }
  .button:hover > .icon:last-of-type:not(:first-of-type) { translate: 2px -2px; }

  /* Cards: icons respond, borders ease. */
  .feature-icon, .team-platform-icon, .github-stat-icon { transition: scale .35s var(--ease-out), rotate .35s var(--ease-out); }
  .feature-card:hover .feature-icon, .team-card:hover .team-platform-icon, .github-stat:hover .github-stat-icon { scale: 1.08; rotate: -4deg; }
  .team-card, .github-stat { transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out), opacity .65s ease, transform .65s var(--ease-out); }

  /* FAQ: answers ease in; the plus turns. */
  details > summary .icon { transition: rotate .3s var(--ease-out); }
  details[open] > summary .icon { rotate: 45deg; }
  details[open] > :not(summary) { animation: faq-in .4s var(--ease-out) both; }
  @keyframes faq-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

  /* Closing download cards. */
  .download-platform { transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out); }
  .download-platform:hover { translate: 0 -4px; }

  /* Footer links. */
  .site-footer a { transition: opacity var(--dur-fast) ease, translate var(--dur-fast) var(--ease-out); }
  .site-footer a:hover { translate: 0 -1px; }

  /* Strong, quick focus ring that never hides under motion. */
  :focus-visible { outline-offset: 3px; transition: outline-offset .15s var(--ease-out); }
}