/* Groupbox marketing site — motion and finishing touches.
   Everything that moves lives here, inside no-preference / not-calm guards, so a visitor who asks for less motion (system setting or the
   "Pause motion" button in the footer) gets the same page, still. Only transform and opacity are animated. */

/* ---------- Page transitions (cross-document View Transitions: Chrome, Edge, Safari 18.2+; others just navigate) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  main { view-transition-name: page; }
  ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease); }
  ::view-transition-old(page) { animation: .28s var(--ease) both vt-out; }
  ::view-transition-new(page) { animation: .5s var(--ease) both vt-in; }
  ::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation: none; mix-blend-mode: normal; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Hero: aurora, grain, grid ---------- */
.hero { isolation: isolate; }
.hero::before { display: none; }
.aurora { position: absolute; inset: 0 0 auto 0; height: min(900px, 110%); z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -8%; top: -18%; background: radial-gradient(circle, rgba(43,192,248,.7), transparent 68%); }
.aurora i:nth-child(2) { width: 42vw; height: 42vw; max-width: 600px; max-height: 600px; right: -6%; top: -10%; background: radial-gradient(circle, rgba(107,63,219,.6), transparent 68%); }
.aurora i:nth-child(3) { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; left: 34%; top: 18%; background: radial-gradient(circle, rgba(22,112,236,.45), transparent 68%); }
.hero::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(14,18,32,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,18,32,.045) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 0%, #000, transparent 75%);
}
.grain::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Headline: words rise out of a mask, one after another */
.reveal-words { display: block; }
.reveal-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.reveal-words .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.calm) .reveal-words .w > span { transform: translateY(112%); animation: word-up .9s var(--ease) both; animation-delay: calc(.18s + var(--i, 0) * .09s); }
  .js:not(.calm) .hero-copy .eyebrow, .js:not(.calm) .hero-copy .lead, .js:not(.calm) .hero-actions, .js:not(.calm) .hero-copy .fine { animation: fade-up .9s var(--ease) both; }
  .js:not(.calm) .hero-copy .eyebrow { animation-delay: .05s; }
  .js:not(.calm) .hero-copy .lead { animation-delay: .6s; }
  .js:not(.calm) .hero-actions { animation-delay: .75s; }
  .js:not(.calm) .hero-copy .fine { animation-delay: .9s; }
  .js:not(.calm) .shot-stage { animation: fade-up 1.1s var(--ease) .95s both; }
}
@keyframes word-up { to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(22px); } }

/* Aurora drifts slowly (stopped by reduced motion and the Pause motion button) */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.calm) .aurora i:nth-child(1) { animation: drift-a 22s ease-in-out infinite alternate; }
  .js:not(.calm) .aurora i:nth-child(2) { animation: drift-b 26s ease-in-out infinite alternate; }
  .js:not(.calm) .aurora i:nth-child(3) { animation: drift-a 30s ease-in-out infinite alternate-reverse; }
}
@keyframes drift-a { to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-9vw, 9vh, 0) scale(1.1); } }

/* ---------- Product stage: the dashboard tilts up into place as it scrolls in; UI chips float around it ---------- */
.shot-stage { position: relative; perspective: 1600px; margin-top: clamp(40px, 7vw, 72px); }
.shot-stage .hero-shot { margin-top: 0; transform-origin: 50% 0; }
.shot-stage .shot { box-shadow: 0 50px 100px -40px rgba(14,18,32,.45), 0 0 0 1px rgba(14,18,32,.04); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js:not(.calm) .shot-stage .hero-shot { animation: tilt-in linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    .js:not(.calm) .chip-float { animation: float-y linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .js:not(.calm) .chip-float.b { animation-name: float-y2; }
    .js:not(.calm) .steps-line i { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
  }
}
@keyframes tilt-in { from { transform: rotateX(16deg) scale(.92) translateY(40px); opacity: .55; } to { transform: none; opacity: 1; } }
@keyframes float-y { from { transform: translateY(40px); } to { transform: translateY(-50px); } }
@keyframes float-y2 { from { transform: translateY(-20px); } to { transform: translateY(60px); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.chip-float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px); border: 1px solid rgba(14,18,32,.08); box-shadow: 0 18px 40px -16px rgba(14,18,32,.35);
  font-size: .85rem; font-weight: 600; color: var(--ink); white-space: nowrap; pointer-events: none;
}
.chip-float .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 700; }
.chip-float .dot svg { width: 14px; height: 14px; }
.chip-float.a { top: -22px; right: 7%; } .chip-float.a .dot { background: var(--primary); }
.chip-float.b { left: -2%; top: 34%; } .chip-float.b .dot { background: var(--accent); }
.chip-float.c { right: -1%; bottom: 12%; } .chip-float.c .dot { background: #12805c; }
@media (max-width: 760px) {
  .chip-float { font-size: .75rem; padding: 7px 12px 7px 8px; }
  .chip-float .dot { width: 22px; height: 22px; }
  .chip-float.a { top: -18px; right: 8px; }
  .chip-float.b { left: 8px; top: auto; bottom: -16px; }
  .chip-float.c { display: none; }
}

/* ---------- Scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cyan), var(--primary), var(--accent)); }

/* ---------- Nav: tucks away while reading down, returns on the way up (always shown while something inside has focus) ---------- */
.nav { transition: transform .45s var(--ease), background .3s, box-shadow .3s; }
.nav.scrolled { box-shadow: 0 10px 30px -22px rgba(14,18,32,.4); }
.nav.tucked:not(:focus-within) { transform: translateY(-100%); }
body.menu-open .nav.tucked { transform: none; }

/* ---------- Reveals ---------- */
.js .rv { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }
.js .sec-head.rv { transform: translateY(28px); }
.calm .rv, .calm .rv.in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* ---------- Cards: light follows the pointer, icon wakes up ---------- */
.card { position: relative; overflow: hidden; isolation: isolate; }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(22,112,236,.11), transparent 60%);
}
.card:hover::before { opacity: 1; }
.card .ico { transition: transform .5s var(--ease), background .3s, color .3s; }
.card:hover .ico { transform: translateY(-3px) rotate(-6deg) scale(1.06); background: var(--primary); color: #fff; }
.card { border-color: #e1e4ef; }
.card:hover { border-color: #c7d4ef; }

/* ---------- Steps: a line draws across as they come into view ---------- */
.steps { position: relative; }
.steps-line { position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: #dfe3f0; border-radius: 2px; pointer-events: none; }
.steps-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--primary), var(--accent)); transform-origin: 0 50%; border-radius: 2px; }
.step::before { background: var(--paper); padding-right: 14px; z-index: 1; -webkit-text-stroke: 1.5px var(--primary); }
@media (max-width: 960px) { .steps-line { display: none; } }

/* ---------- Buttons: shine sweep, soft glow, magnetic pull (JS sets --tx/--ty) ---------- */
.btn { position: relative; overflow: hidden; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); }
.btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: transform .8s var(--ease); pointer-events: none; }
.btn:hover::after { transform: translateX(120%) skewX(-18deg); }
.btn-primary { box-shadow: 0 14px 34px -10px rgba(22,112,236,.65), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { box-shadow: 0 18px 44px -10px rgba(22,112,236,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.btn:active { transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + 1px), 0) scale(.98); }

/* ---------- Pricing ---------- */
.plan { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(14,18,32,.35); }
.plan.pop { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--cyan), var(--primary), var(--accent), var(--cyan)) border-box; background-size: 100% 100%, 300% 300%; }
@media (prefers-reduced-motion: no-preference) { .js:not(.calm) .plan.pop { animation: border-flow 8s linear infinite; } }
@keyframes border-flow { to { background-position: 0 0, 300% 0; } }
.price span { display: inline-block; }
.price span.roll { animation: price-roll .55s var(--ease); }
@keyframes price-roll { from { opacity: 0; transform: translateY(.45em); } }
.toggle { box-shadow: inset 0 0 0 1px #dde1ee; }
.toggle button { transition: background .3s var(--ease), box-shadow .3s var(--ease), color .2s; }

/* ---------- FAQ: answers open smoothly where the browser can animate it ---------- */
@supports (interpolate-size: allow-keywords) {
  details { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .45s var(--ease), opacity .35s, content-visibility .45s allow-discrete; }
  details[open]::details-content { block-size: auto; opacity: 1; }
}
summary { padding-block: 2px; transition: color .2s; } summary:hover { color: var(--primary-d); }

/* ---------- Gradient headline word shimmer ---------- */
.grad { background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .js:not(.calm) .hero .grad { animation: shimmer 6s ease-in-out 1.6s infinite alternate; } }
@keyframes shimmer { to { background-position: 100% 0; } }

/* ---------- Dark section glow ---------- */
.dark { position: relative; overflow: hidden; isolation: isolate; }
.dark::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; left: 50%; top: -30%; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(22,112,236,.28), rgba(107,63,219,.12) 45%, transparent 70%); filter: blur(30px); }
.promises li { transition: transform .5s var(--ease), border-color .3s; }
.promises li:hover { transform: translateY(-4px); border-color: #3b4a8a; }

/* ---------- Pause motion button ---------- */
.calm-btn { background: none; border: 1px solid #3a4162; color: #c3c8dc; font: 500 .85rem var(--font); padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.calm-btn:hover { color: #fff; border-color: #8a93b8; }
.calm-btn[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.legal .end { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------- Calm mode: nothing moves ---------- */
.calm *, .calm *::before, .calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.calm .reveal-words .w > span { transform: none !important; }
.calm .progress { display: none; }
@media (prefers-reduced-motion: reduce) { .progress { display: none; } .nav.tucked { transform: none !important; } }

/* Steps: number sits above the title, line runs through its middle */
.step { padding-top: 78px; }
.step::before { line-height: 1; height: 3rem; display: block; }
.steps-line { top: 24px; }