/* Depth and motion for the public site, measured on the direction's reference (alytics.framer.website,
   2026-11-03). This file holds the depth (backdrop, frame, shadows, band, hover); the motion itself is
   GSAP in /js/site.js (load sequence, scroll reveals, the frame straightening, counters, the band). */

@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }

:root {
  --rise: 48px;
  --rise-blur: 8px;
  --grid-line: rgb(18 20 24 / 0.07);
  --aura-sky: rgb(6 147 198 / 0.30);
  --aura-pink: rgb(216 57 149 / 0.22);
  --grain-opacity: 0.035;
}

/* Hero backdrop: a fine grid that fades out from the centre, two soft auras, and a whisper of grain. */
.hero-bg { position: absolute; top: -68px; left: calc(50% - 50vw); width: 100vw; height: 1040px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) 70%, transparent); mask-image: linear-gradient(to bottom, var(--color-ink) 70%, transparent); }
.hero-bg .grid { position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, var(--color-ink) 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, var(--color-ink) 20%, transparent 75%); }
.hero-bg .aura { position: absolute; border-radius: 50%; filter: blur(80px); }
.hero-bg .aura.a { width: 560px; height: 440px; left: 14%; top: 440px; background: var(--aura-sky); }
.hero-bg .aura.b { width: 520px; height: 420px; right: 12%; top: 520px; background: var(--aura-pink); }
.hero-bg .grain { position: absolute; inset: 0; opacity: var(--grain-opacity); background: url("/img/grain.svg") 0 0 / 200px 200px; }
.hero { isolation: isolate; }

/* The product frame sits in 3D space. */
.tilt { perspective: 1200px; perspective-origin: 50% 0; }
.frame { transform-origin: 50% 0; }
.frame::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 28px; background: var(--blend); opacity: 0.38; }

/* Buttons: layered shadow like the reference and a label that rolls up on hover. */
.btn { box-shadow: 0 2px 4px rgb(18 20 24 / 0.10), 0 1px 0 rgb(18 20 24 / 0.05), inset 0 0 0 1px rgb(255 255 255 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.25); overflow: hidden; }
.btn .roll { display: inline-grid; overflow: hidden; height: 1.2em; line-height: 1.2; }
.btn .roll > span { grid-area: 1 / 1; transition: transform 420ms var(--ease); }
.btn .roll > span + span { transform: translateY(110%); }
.btn:hover .roll > span:first-child, .btn:focus-visible .roll > span:first-child { transform: translateY(-110%); }
.btn:hover .roll > span + span, .btn:focus-visible .roll > span + span { transform: translateY(0); }

/* Cards lift; the piece of product inside moves a little more than the card. */
.card, .step, .area, .vs .them { transition: translate 420ms var(--ease), box-shadow 420ms var(--ease); }
.card:hover, .step:hover, .area:hover { translate: 0 -4px; box-shadow: 0 1px 2px rgb(18 20 24 / 0.04), 0 24px 48px -24px rgb(18 20 24 / 0.22); }
.card .ui { transition: translate 600ms var(--ease), scale 600ms var(--ease), box-shadow 600ms var(--ease); }
.card:hover .ui { translate: 0 -6px; scale: 1.02; box-shadow: 0 20px 40px -16px rgb(18 20 24 / 0.25); }
.ui { box-shadow: 0 0 0 1px rgb(18 20 24 / 0.04), 0 8px 30px -10px rgb(18 20 24 / 0.14); }

/* The running band: what the platform keeps, side by side; it pauses under the pointer. */
.marquee { margin-top: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-ink) 12%, var(--color-ink) 88%, transparent); mask-image: linear-gradient(90deg, transparent, var(--color-ink) 12%, var(--color-ink) 88%, transparent); }
.marquee .track { display: flex; width: max-content; gap: 12px; }
.marquee ul { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.marquee li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-rule), var(--shadow-card); white-space: nowrap; color: var(--color-ink-2); font-weight: 500; font-size: 0.9375rem; }
.marquee li i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sky); }
.marquee li:nth-child(3n) i { background: var(--color-pink); }

/* Steps: a line runs under the four numbers. */
.steps-wrap { position: relative; }
.steps-line { position: absolute; left: 24px; right: 24px; top: 41px; height: 2px; background: var(--color-rule); border-radius: 2px; overflow: hidden; }
.steps-line::after { content: ""; position: absolute; inset: 0; background: var(--blend); transform-origin: left; transform: scaleX(var(--drawn, 1)); }
.grid4 .step { position: relative; }

/* Counting figures: the number is read from --to; the visible digits are drawn by the counter. */
.count { font-variant-numeric: tabular-nums; }
.count { counter-reset: n var(--n); }
.count::after { content: counter(n); }
.count { --n: var(--to); }

/* Before the motion script runs, what it will bring in waits hidden; without the script (or under
   reduced motion, where boot.js does not add the class) the page shows as it is. */
.js-motion .rise, .js-motion .reveal, .js-motion .tile { visibility: hidden; animation: failsafe 0s 4s forwards; }
@keyframes failsafe { to { visibility: visible; } }
.cta { background-size: 220% 100%; }

@media (max-width: 960px) {
  .hero-bg { height: 760px; }
  .hero-bg .aura.a { left: -20%; top: 380px; width: 360px; }
  .hero-bg .aura.b { right: -20%; top: 460px; width: 340px; }
  .steps-line { display: none; }
}