/* Seeqly v3 motion layer (GSAP + ScrollTrigger + Lenis). Everything here is inert when html.gs is absent
   (reduced motion, or the libraries failed to load), so the site always renders fully. */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.lenis body, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* GSAP owns the generic reveal: neutralise the old CSS transition reveal */
html.gs .pre .rv, html.gs .rv { opacity: 1; transform: none; filter: none; transition: none; }
html.gs .rv:not(.m-done) { visibility: hidden; }

/* Split headlines: each word slides up out of its own mask */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wi { display: inline-block; will-change: transform; }
html.gs .m-split:not(.m-done) { visibility: hidden; }

/* Card spotlight: a soft light follows the pointer on clickable cards */
html.gs a.card, html.gs .card.fc, html.gs .card.pw, html.gs .card.fmt, html.gs .card.li { position: relative; isolation: isolate; }
html.gs a.card::after, html.gs .card.fc::after, html.gs .card.pw::after, html.gs .card.fmt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 12%, transparent), transparent 62%);
}
html.gs a.card:hover::after, html.gs .card.fc:hover::after, html.gs .card.pw:hover::after, html.gs .card.fmt:hover::after { opacity: 1; }
html.gs a.card:hover { border-color: color-mix(in srgb, var(--acc) 35%, var(--line2)); }

/* Magnetic buttons need a transform origin that doesn't jump */
html.gs .btn { will-change: transform; }

/* Header hides while reading down, returns on the way up */
html.gs .nav { transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .3s; }
html.gs .nav.m-hide { transform: translateY(-110%); }

/* Scroll progress line */
.m-prog { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 95; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #8b5cf6)); pointer-events: none; }

/* Mega menu items cascade in */
@media (min-width: 901px) {
  html.gs .dd.open .mi3, html.gs .dd.open .mmf, html.gs .dd.open .mmb a { animation: mIn .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--mi, 0) * 28ms); }
}
@keyframes mIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Parallax media are scaled up a touch so movement never shows an edge */
html.gs .m-par { will-change: transform; }

/* FAQ bodies animate their height */
html.gs details.m-acc > :not(summary) { overflow: hidden; }

/* Cross-page fade (View Transitions API, ignored by browsers without support) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  html.gs .rv, html.gs .m-split { visibility: visible !important; }
  @view-transition { navigation: none; }
}

/* Homepage product window: no dim, tilted entrance and no moving painting behind it */
html.gs .pre #product .win, html.gs #product .win, html.gs .pre .persp .win { transform: none !important; opacity: 1 !important; transition: box-shadow .3s; }
html.gs #product .persp { background-position: 50% 60% !important; }