/* Scroll motion layer. Sits on top of the Lovable bundle's own fades.
   Everything hidden here is gated on html.mx, which motion.js adds, so the
   page stays fully visible if the script never runs. Remove the <link> and
   <script> for motion.* in the page head to revert. */
:root{--mx-ease:cubic-bezier(.16,1,.3,1)}

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

  /* Section label: the blue rule draws in (charge running to ground), then the words */
  html.mx .section-label.mx-t::before{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--mx-ease)}
  html.mx .section-label.mx-t{color:transparent;transition:color .5s ease .25s}
  html.mx .section-label.mx-in::before{transform:none}
  html.mx .section-label.mx-in{color:hsl(var(--primary))}

  /* Headlines rise out of a mask instead of fading as a block */
  html.mx .mx-head.mx-t{clip-path:inset(-20% -4% 100% -4%);transform:translateY(.35em);transition:clip-path .9s var(--mx-ease),transform .9s var(--mx-ease)}
  html.mx .mx-head.mx-in{clip-path:inset(-20% -4% -30% -4%);transform:none}

  /* Lists and spec rows fill in one after another, like readings coming in */
  html.mx .mx-row.mx-t{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .6s var(--mx-ease);transition-delay:calc(var(--i,0) * 55ms + 120ms)}
  html.mx .mx-row.mx-in{opacity:1;transform:none}

  /* Cards and tiles lift into place */
  html.mx .mx-card.mx-t{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .6s ease,transform .8s var(--mx-ease);transition-delay:calc(var(--i,0) * 90ms)}
  html.mx .mx-card.mx-in{opacity:1;transform:none}

  /* Big 01 / 02 numerals charge up from faint to full blue as their card lands */
  html.mx .mx-num{transition:color .9s ease .35s}
  html.mx .mx-card.mx-in .mx-num{color:hsl(var(--primary) / .75)}

  /* Scroll-linked: tied to the scrollbar itself, not just a one-off reveal */
  @supports (animation-timeline:scroll()){
    /* hero drifts back and dims as you leave it */
    html.mx section.min-h-screen>div.max-w-content{animation:mx-hero-out linear both;animation-timeline:scroll(root);animation-range:0 85vh}
    /* the big background ring turns and rises at a different speed (depth) */
    html.mx section.min-h-screen>div.rounded-full{animation:mx-ring linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    /* the dark quote lights up as it crosses the middle of the screen */
    html.mx section.dark-section blockquote p{animation:mx-light linear both;animation-timeline:view();animation-range:entry 15% cover 50%}
  }
}
@keyframes mx-hero-out{to{opacity:.15;transform:translateY(-70px) scale(.97)}}
@keyframes mx-ring{to{transform:translateY(-160px) rotate(24deg) scale(1.12)}}
@keyframes mx-light{from{opacity:.18;letter-spacing:.012em}to{opacity:1;letter-spacing:0}}

/* Buttons: small press feedback everywhere (kept under reduced motion, it is feedback) */
a.rounded-lg,a[class*="rounded"][class*="px-6"]{transition:transform .15s ease,background-color .2s ease,color .2s ease}
a[class*="rounded"][class*="px-6"]:active{transform:translateY(1px) scale(.98)}