/* ============================================================================
   CH-106 — LANDING-KÍSÉRLETEK közös rétege (index_anime.php · index_gsap.php · index_gsap2.php)
   ----------------------------------------------------------------------------
   Csak a kísérleti címeken töltődik be (includes/lp_lab.php fűzi be). A főoldal nem látja.
   Állapotok a <html>-en:
     .lpx          – kísérleti oldal (mindig)
     .lpx-still    – csökkentett mozgás / JS nélkül: SEMMI nem változik, az oldal = főoldal
     .lpx-intro    – az első festés előtt rejtjük azt, amit a szkript majd beúsztat (nincs villanás)
     .lpx-on       – a mozgás-szkript átvette a vezérlést (a régi .bx-reveal átmenete kikapcsol)
     .lpx-fallback – a szkript nem indult el 3,2 mp alatt → minden látszik, a régi viselkedéssel
     .lpx-spot     – kártya-reflektor (csak egér, csak a GSAP-os változatokban)
   Szabály: a végállapot MINDIG azonos a főoldaléval – a szkriptek a végén visszaállítják a DOM-ot
   és törlik a beírt stílusokat; ezek a díszítőelemek aria-hidden-ek és nem fogadnak kattintást.
   ============================================================================ */

/* ---- 1. Első festés: amit a szkript beúsztat, az addig nem látszik ---- */
html.lpx-intro .bx-hero__inner > *,
html.lpx-intro #bizalom .bx-feat,
html.lpx-intro #bizalom .bx-sample,
html.lpx-intro #bizalom .bx-partners,
html.lpx-intro #lp .bx-eyebrow,
html.lpx-intro #lp .bx-sec__h,
html.lpx-intro #lp .bx-sub-h--lg,
html.lpx-intro #lp .bx-sec__lead,
html.lpx-intro #lp .bx-reveal,
html.lpx-intro #lp .bx-answer,
html.lpx-intro #lp .bx-badges > li,
html.lpx-intro #lp .tst-viewport,
html.lpx-intro #lp .bx-qa,
html.lpx-intro #lp .bx-faq__side > .bx-card,
html.lpx-intro #zaro .bx-final__search,
html.lpx-intro #zaro .bx-final__hint,
html.lpx-intro #zaro .bx-final__sources,
html.lpx-intro #zaro .bx-final__updated { opacity: 0 !important; }

/* ---- 2. A régi görgetéses megjelenés (landing.js · .bx-reveal) átadja a helyét ----
   A szkript minden frame-ben beírja az opacity/transform értéket – a CSS-átmenet ezt
   „utánhúzná", ezért kikapcsoljuk. (A .bx-reveal kezdő rejtését a szkript állítja be.) */
html.lpx-on.bx-js .bx-reveal { opacity: 1; transform: none; transition: none; }

/* ---- 3. Szóbontás maszkkal (a címek szavai „alulról kiemelkednek") ----
   A maszk függőlegesen túlnyúlik a sorkereten (ékezet, alsó szár), a negatív margó miatt a
   sorköz nem változik. A gradiens kifejezés EGY egység (a background-clip: text ép marad).
   Az animáció végén a szkript visszaállítja az eredeti jelölést. */
.lpx-w { display: inline-block; overflow: clip; overflow-clip-margin: .06em; padding: .16em .05em .2em; margin: -.16em -.05em -.2em; vertical-align: baseline; }
.lpx-wi { display: inline-block; white-space: nowrap; }

/* ---- 4. Hero: lassú „aura" a háttérben (csak asztalon, egérrel finoman követi a mutatót) ----
   A díszítés mindenhol `isolation: isolate` + z-index: -1: a gazda háttere FELETT, a tartalma
   ALATT fest – így egyetlen meglévő elem pozicionálásához sem kell nyúlni. */
html.lpx-on .bx-hero, html.lpx-on .bx-final, html.lpx-on .bx-sample, html.lpx-on .bx-calm { isolation: isolate; }
.lpx-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.lpx-aura i { position: absolute; display: block; width: 52vmax; height: 52vmax; border-radius: 50%; opacity: 0; will-change: transform; }
.lpx-aura i:nth-child(1) { left: -16vmax; top: -24vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 22%, transparent), transparent); }
.lpx-aura i:nth-child(2) { right: -18vmax; top: -14vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent); }
.lpx-aura i:nth-child(3) { left: 22vmax; bottom: -34vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent); }
html.lpx-on .bx-final .lpx-aura i:nth-child(1) { background: radial-gradient(closest-side, rgba(45, 212, 191, .16), transparent); }
html.lpx-on .bx-final .lpx-aura i:nth-child(2) { background: radial-gradient(closest-side, rgba(129, 140, 248, .13), transparent); }
html.lpx-on .bx-final .lpx-aura i:nth-child(3) { display: none; }

/* ---- 5. Görgetés-jelző: vékony sáv a képernyő tetején (hol tartok a hosszú oldalon) ---- */
.lpx-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: 3px; pointer-events: none; }
.lpx-progress > i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--primary), var(--accent) 62%, var(--accent-2)); border-radius: 0 3px 3px 0; }

/* ---- 6. Keresősáv: egyszeri „pásztázó fény" + elemzés közben futó csík (aria-busy) ---- */
html.lpx-on .bx-hero__search, html.lpx-on .bx-final__search { position: relative; }
.lpx-scan { position: absolute; inset: -1.5px; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.lpx-scan > s { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; opacity: 0; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--primary) 14%, transparent) 45%, color-mix(in srgb, #fff 34%, transparent) 52%, transparent); text-decoration: none; }
.lpx-scan > b { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 28%; opacity: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); }

/* ---- 7. Riport-minta: végigfutó „mérő" csík ---- */
.lpx-scanline { position: absolute; left: 0; right: 0; top: 0; height: 42%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 7%, transparent) 70%, color-mix(in srgb, var(--primary) 22%, transparent) 97%, transparent); }

/* ---- 8. Videó-borító: „szonár" gyűrűk a lejátszó gomb körül (a delfin echolokációja) ---- */
.lpx-sonar { position: absolute; inset: 0; z-index: 1; margin: auto; width: 76px; height: 76px; pointer-events: none; }
.lpx-sonar > i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); opacity: 0; }

/* ---- 9. „Nem kell szakértőnek lenned" sáv: egyszer végigsuhanó fény ---- */
html.lpx-on .bx-calm { position: relative; overflow: hidden; }
.lpx-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .17) 48%, rgba(255, 255, 255, .06) 56%, transparent 70%); }

/* ---- 10. Kártya-reflektor: a mutató alatt halvány fény (csak egér; a tartalom alatt) ---- */
@property --lpx-sa { syntax: '<number>'; inherits: false; initial-value: 0; }
html.lpx-on.lpx-spot #lp .bx-card,
html.lpx-on.lpx-spot #bizalom .bx-feat {
  background-image: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--primary) calc(var(--lpx-sa) * 9%), transparent), transparent 65%);
  transition: --lpx-sa .35s var(--ease);
}
html.lpx-on.lpx-spot #lp .bx-card.lpx-hot,
html.lpx-on.lpx-spot #bizalom .bx-feat.lpx-hot { --lpx-sa: 1; }

/* ---- 11. GYIK: a nyíló válasz magassága animálva (a <details> natív marad) ---- */
.lpx-acc { overflow: hidden; }

/* Nyomtatás és csökkentett mozgás: a díszítés eltűnik, minden a helyén. */
@media print { .lpx-aura, .lpx-progress, .lpx-scan, .lpx-scanline, .lpx-sonar, .lpx-sheen { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .lpx-aura, .lpx-progress, .lpx-scan, .lpx-scanline, .lpx-sonar, .lpx-sheen { display: none !important; } }