/* Vodlix landing-page motion — styles for shared/lp/parallax.js.
   The script writes translate / scale / rotate / opacity and a few custom
   properties (--sp scene progress, --mx/--my pointer, --tx/--ty tilt); this
   file turns them into the picture. Every rule here has a sensible value
   with the script absent, so the page reads the same without it. */
.px-persp { perspective:1400px; perspective-origin:50% 30%; }
.px-live { will-change:translate, scale, rotate; }
.px-img { transform-origin:50% 50%; }

/* reading progress, a hairline of brand at the very top */
.px-bar { position:fixed; left:0; top:0; height:2px; width:100%; background:var(--brand); transform-origin:left; transform:scaleX(0); z-index:1000; pointer-events:none; }

/* ── words settle one after another as the heading enters (--sp 0..1) ── */
.px-w { display:inline-block; translate:0 calc((1 - clamp(0, (var(--sp, 1) * 2.2 - var(--i) * .16), 1)) * 14px);
  opacity:calc(.45 + .55 * clamp(0, (var(--sp, 1) * 2.2 - var(--i) * .16), 1)); }

/* ── depth glows behind a hero or a dark band ── */
.px-glows { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; border-radius:inherit; }
.px-glow { position:absolute; border-radius:50%; filter:blur(48px); opacity:.55; }
.px-glow--a { width:46vmax; height:46vmax; left:-14vmax; top:-18vmax;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 34%, transparent), transparent); }
.px-glow--b { width:34vmax; height:34vmax; right:-10vmax; top:-6vmax;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); }
.px-glow--c { width:40vmax; height:40vmax; right:12vmax; bottom:-26vmax;
  background:radial-gradient(closest-side, color-mix(in srgb, #f89436 16%, transparent), transparent); }
.px-ring { position:absolute; width:min(560px, 86vw); aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; border:1px solid color-mix(in srgb, var(--brand) 26%, transparent); pointer-events:none; z-index:0; }
.px-ring::after { content:""; position:absolute; inset:14%; border-radius:50%; border:1px dashed color-mix(in srgb, var(--brand) 18%, transparent); }

/* ── HERO FAN: three real app screens. At rest the two side phones peek out
   behind the main one; scrolling the first half-screen fans them out and
   turns the main phone toward the reader (--sp from data-px-scrub="top"). ── */
.px-fan { position:relative; }
.px-fan .phone-device { position:relative; z-index:2; transform:rotate(-4deg) rotateY(calc(var(--sp, 0) * -14deg)); transform-style:preserve-3d; }
.px-side { position:absolute; top:6%; z-index:1; width:78%; pointer-events:none; }
.px-side .phone-device { width:100%; padding:9px; border-radius:34px; box-shadow:0 22px 44px -18px rgba(0,0,0,.45), inset 0 0 0 2px #1c1c1c; }
.px-side .phone-screen { border-radius:26px; }
.px-side .phone-screen::before { width:64px; height:16px; top:8px; }
.px-side--l { left:50%; transform:translateX(calc(-50% - 34% - var(--sp, 0) * 34%)) scale(calc(.82 - var(--sp, 0) * .04)) rotate(calc(-4deg - var(--sp, 0) * 8deg)); }
.px-side--r { left:50%; transform:translateX(calc(-50% + 34% + var(--sp, 0) * 34%)) scale(calc(.82 - var(--sp, 0) * .04)) rotate(calc(-4deg + var(--sp, 0) * 12deg)); }
.px-side .phone-device::before, .px-side .phone-device::after { display:none; }
.stage { overflow-x:clip; }
@media (max-width: 1079.98px) {
  .px-side { width:66%; top:10%; }
  .px-side--l { transform:translateX(calc(-50% - 40% - var(--sp, 0) * 14%)) scale(.8) rotate(-8deg); }
  .px-side--r { transform:translateX(calc(-50% + 40% + var(--sp, 0) * 14%)) scale(.8) rotate(6deg); }
}

/* ── FRAMES: a stack of screens, one showing; scroll (or the chips) picks ── */
.px-frames { position:relative; }
.px-frames img { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.px-frames img:first-child { position:relative; opacity:1; }       /* no script: the first screen shows */
.px-frames[data-at] img:first-child:not(.is-on) { opacity:0; }
.px-frames img.is-on { opacity:1; }
.px-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:-8px auto 26px; }
.px-chips button { font:inherit; font-size:12.5px; font-weight:600; color:var(--sub); background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 13px; cursor:pointer; min-height:36px; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.px-chips button:hover { color:var(--ink); border-color:color-mix(in srgb, var(--brand) 45%, transparent); }
.px-chips button[aria-pressed="true"] { color:var(--accent-ink); border-color:var(--brand); background:var(--brand-tint); }
.px-chips button:focus-visible { outline:2px solid var(--accent-ink); outline-offset:2px; }

/* ── PROGRESS: the How-it-works track fills as you scroll past it; each
   step lights up when the fill reaches it ── */
.hw-a .hw-fill { display:none; }
.px-on .hw-a[data-px-progress]::before { background:var(--line); }
.px-on .hw-a .hw-fill { display:block; position:absolute; left:12%; right:12%; top:27px; height:2px; background:var(--brand); transform-origin:left; transform:scaleX(var(--sp, 1)); }
.hw-a[data-px-progress] .hw-a__n { transition:transform .35s cubic-bezier(.2,.8,.25,1), background .3s ease, color .3s ease, border-color .3s ease; }
.px-on .hw-a[data-px-progress] .hw-a__s:not(.is-on) .hw-a__n { background:var(--surface); color:var(--sub); border:2px solid var(--line); }
.px-on .hw-a[data-px-progress] .hw-a__s.is-on .hw-a__n { transform:scale(1.08); }
.px-on .hw-a[data-px-progress] .hw-a__s--last.is-on .hw-a__n { background:var(--brand); color:#fff; border-color:var(--brand); }
@media (max-width: 859.98px) { .hw-a .hw-fill { display:none; } }

/* ── SPOT: a grid whose tile lights where the pointer is ── */
.px-spot > div { position:relative; overflow:hidden; }
.px-spot > div::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%); }
.px-spot > div:hover::after, .px-spot > div[style*="--mx"]::after { opacity:1; }
.px-spot > div[style*="--mx"] { border-color:color-mix(in srgb, var(--brand) 40%, var(--line)); }
.px-spot > div > * { position:relative; z-index:1; }

/* ── TILT: a 3D card following the pointer, with a soft sheen ── */
.px-tilt { transform-style:preserve-3d; transition:transform .12s linear; position:relative; }
.px-tilt::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:5; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(60% 50% at var(--tx, 50%) var(--ty, 50%), rgba(255,255,255,.14), transparent 70%); }
.px-tilt[style*="perspective"]::after { opacity:1; }

/* ── MAGNET: a button leaning toward the pointer ── */
.px-magnet { transition:translate .18s cubic-bezier(.2,.8,.25,1); }

@media (prefers-reduced-motion: reduce) { .px-glow { opacity:.4; } .px-w { translate:0; opacity:1; } }