/* ============================================================
   Fast Shadow — landing enhancements (loaded after styles.css)
   Theme-aware: everything flows from --accent / --line / --panel …
   so it holds up in light + dark and all six accent colors.
   Adds: a "how it works" sequence, the aurora backdrop,
   and a little more craft on the existing feature cards.
   ============================================================ */

/* ---------- how it works (a real 3-step sequence) ---------- */
.lp-how-grid {
  list-style: none; padding: 0; margin: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 32px);
}
/* the connecting line across the number row */
.lp-how-grid::before {
  content: ""; position: absolute; top: 25px; height: 2px; inset-inline: 16%; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.lp-step { position: relative; z-index: 1; text-align: center; }
.lp-step-n {
  display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 16px;
  border-radius: var(--radius); font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--panel-2); border: 1px solid var(--line-2); box-shadow: var(--glow);
}
.lp-step h3 { font-size: 1.12rem; margin: 0 0 7px; letter-spacing: -.01em; }
.lp-step p { color: var(--muted); font-size: .95rem; line-height: 1.6; margin: 0 auto; max-width: 30ch; }

/* ---------- a little more craft on the feature cards ---------- */
.lp-card { transition: transform .18s var(--ease-out), border-color .18s var(--ease-out); }
.lp-card:hover { transform: translateY(-3px); border-color: var(--line-2); }

/* ---------- responsive ---------- */
@media (max-width: 620px) {
  .lp-how-grid { grid-template-columns: 1fr; gap: 24px; }
  .lp-how-grid::before { display: none; }
}

/* ---------- bolder plans: the featured tier leads; the price is the evidence ---------- */
.lp-plans .plan .price .amt { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.03em; }
.lp-plans .plan h3 { font-size: clamp(19px, 2.6vw, 23px); }
.lp-plans .plan.hl { transform: scale(1.035); z-index: 1; }
.lp-plans .plan.hl:hover { transform: scale(1.035) translateY(-4px); }
@media (max-width: 620px) { .lp-plans .plan.hl, .lp-plans .plan.hl:hover { transform: none; } }

/* ============================================================
   ATMOSPHERE — an animated aurora behind the page + scroll cues.
   Restraint over neon: low-opacity accent glows that drift slowly.
   Theme-aware (color-mix on the live --accent), reduced-motion safe,
   GPU transforms only, and never in front of content.
   ============================================================ */
.lp-aurora {
  position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  overflow: hidden; contain: strict;
  --aurora-op: .22;   /* dark default */
}
[data-theme="light"] .lp-aurora { --aurora-op: .13; }
.lp-aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(38px); opacity: var(--aurora-op); will-change: transform;
}
.lp-aurora span:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 320px; min-height: 320px; top: -8%; inset-inline-end: -6%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent), transparent 68%);
  animation: auroraA 50s var(--ease-out) infinite alternate;
}
.lp-aurora span:nth-child(2) {
  width: 42vw; height: 42vw; min-width: 300px; min-height: 300px; bottom: -10%; inset-inline-start: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 52%, transparent), transparent 68%);
  animation: auroraB 64s var(--ease-out) infinite alternate;
}
.lp-aurora span:nth-child(3) {
  width: 34vw; height: 34vw; min-width: 260px; min-height: 260px; top: 34%; inset-inline-start: 34%;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 45%, transparent), transparent 70%);
  animation: auroraC 76s var(--ease-out) infinite alternate;
}
@keyframes auroraA { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(-3%, 4.5%, 0) scale(1.08); } }
@keyframes auroraB { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(4%, -3.5%, 0) scale(1); } }
@keyframes auroraC { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(2.5%, 3%, 0) scale(1.1); } }

/* Scroll progress: an accent line tracking how far down the page you are.
   Its scaleX (and the aurora's parallax) is driven from landing.js — CSS scroll
   timelines aren't supported widely enough (Safari/Firefox/in-app browsers). */
.lp-scroll-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 40;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none;
  transition: transform .08s linear;   /* smooth the rAF steps */
}
html[dir="rtl"] .lp-scroll-progress { transform-origin: 100% 50%; }

@media (prefers-reduced-motion: reduce) {
  .lp-aurora span { animation: none; }
  .lp-scroll-progress { display: none; }
}

/* ============================================================
   INTERACTIVE CARDS — an accent light follows the pointer across
   each feature / plan card; the card lifts and its icon pops.
   landing.js sets --cx / --cy.
   ============================================================ */
.lp-card, .lp-plans .plan { --cx: 50%; --cy: 50%; }
/* keep content above the glow, but never re-position the featured tag */
.lp-card > *:not(.tag), .lp-plans .plan > *:not(.tag) { position: relative; z-index: 1; }
.lp-card::before, .lp-plans .plan::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease-out);
  background: radial-gradient(220px circle at var(--cx) var(--cy),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
}
.lp-card:hover::before, .lp-card.lp-touch::before,
.lp-plans .plan:hover::before, .lp-plans .plan.lp-touch::before { opacity: 1; }
/* accent edge on interaction (overrides the plain line-2 hover) */
.lp-card:hover, .lp-card.lp-touch,
.lp-plans .plan:hover, .lp-plans .plan.lp-touch { border-color: color-mix(in srgb, var(--accent) 42%, var(--line-2)); }
/* the feature icon pops */
.lp-card .lp-ic { transition: transform .2s var(--ease-out), background-color .2s var(--ease-out); }
.lp-card:hover .lp-ic, .lp-card.lp-touch .lp-ic {
  transform: scale(1.08); background: color-mix(in srgb, var(--accent) 24%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .lp-card::before, .lp-plans .plan::before { display: none; }
  .lp-card .lp-ic { transition: none; }
}

/* ---------- hero "decrypt on arrival" + handshake ---------- */
/* The headline scrambles → resolves on load (landing.js); this styles the
   compact handshake status beneath it. Latin/mono, forced LTR in both langs,
   with a blinking cursor. Reduced-motion keeps a steady cursor, no blink. */
.lp-handshake {
  margin-top: 20px; font-family: var(--mono); font-size: clamp(10.5px, 2.6vw, 12px);
  letter-spacing: .02em; white-space: nowrap;   /* one line — never wrap the status */
  color: var(--muted); direction: ltr; unicode-bidi: isolate;
  min-height: 1.25em;   /* reserve the line so the typewriter never reflows the hero */
}
.lp-handshake::after {
  content: "_"; color: var(--accent); margin-inline-start: 2px; font-weight: 700;
  animation: lpCursor 1.05s steps(1) infinite;
}
@keyframes lpCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .lp-handshake::after { animation: none; opacity: .55; }
}

/* ---------- polish pass ---------- */
/* footer copy was --faint (< AA on the dark bg) — lift to --muted */
.lp-footer { color: var(--muted); }
/* landing nav: friendlier touch targets (toggles were 34px, CTAs 39px) */
.lp-nav .theme-btn { width: 40px; height: 40px; }
.lp-nav .lang-btn.sm { padding: 10px 13px; }
.lp-nav .lp-actions .btn-sm { padding-block: 10px; }
/* perf: backdrop-filter re-samples every scroll frame — costly on phones.
   Below 620px use a near-opaque bar (mirrors the app topbar pattern). */
@media (max-width: 620px) {
  .lp-nav { backdrop-filter: none; background: var(--glass-solid); }
}