/* ============================================================================
   magnet.css — מערכת העיצוב של פורטל ממגנט (V4)
   "אור בוקע מתוך חושך. המערכת שקטה, התובנה זוהרת, והאדם נשאר במרכז."
   כחול חשמלי = יוסף (התקדמות) · זהב = נסיה (חום/הכרעה) · קרם = האדם.
   עברית RTL, הכול ממורכז. דורש engine.js.
   כלל-על: הגרפיקה משרתת את הטקסט — ברגעי קריאה הרקע נרגע (body.calm).
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;800;900&family=Secular+One&display=swap');

:root {
  /* —— רקע נייבי חי (אף פיקסל לא שחור טהור) —— */
  --bg:        #090d1c;
  --bg-2:      #0e1430;
  --surface:   rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.08);
  --fg:        #F5EFE3;                 /* קרם — לא לבן קר */
  --muted:     #BCC3D8;
  --dim:       #6d7590;
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);

  /* —— המותג: כחול חשמלי + זהב —— */
  --blue:      #2E8BFF;
  --blue-deep: #0E5FE0;
  --blue-300:  #7EC8F8;
  --gold:      #E8B54B;
  --gold-bright:#F6DA8D;
  --grad-blue: linear-gradient(135deg, #4FA6FF 0%, #0E5FE0 100%);
  --grad-gold: linear-gradient(135deg, #F6DA8D 0%, #C9962F 100%);
  --glow-accent: 0 12px 40px rgba(46,139,255,.45);
  --glow-rgb: 46,139,255;               /* טוקן האור — מתחלף במצב "אנושי" */
  --glass-blur: 16px;

  /* —— טיפוגרפיה —— */
  --font-body:   'Heebo', system-ui, sans-serif;
  --font-impact: 'Secular One', 'Heebo', sans-serif;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: 1.2rem;
  --fs-xl: 1.5rem;   --fs-2xl: 1.95rem;  --fs-3xl: clamp(2.1rem, 6vw, 2.9rem);
  --fs-4xl: clamp(2.5rem, 8vw, 3.9rem);  --fs-hero: clamp(2.7rem, 10.5vw, 5rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 26px; --s6: 40px; --s7: 58px; --s8: 76px;
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --sh1: 0 1px 2px rgba(0,0,0,.5); --sh2: 0 14px 40px rgba(0,0,0,.5); --sh3: 0 30px 80px rgba(0,0,0,.65);
  --ease: cubic-bezier(.16,1,.3,1); --dur: 460ms; --dur-fast: 200ms; --maxw: 580px;
}
/* המעבר לנסיה — כל האור מתחלף לזהב חם */
body[data-mood="human"] { --blue:#E8B54B; --blue-deep:#B8860B; --blue-300:#F6DA8D;
  --grad-blue: var(--grad-gold); --glow-accent: 0 14px 44px rgba(232,181,75,.5); --glow-rgb: 232,181,75; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  direction: rtl; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  color: var(--fg); -webkit-font-smoothing: antialiased; overflow: hidden; min-height: 100dvh; position: relative;
  background:
    radial-gradient(ellipse 85% 45% at 50% -5%, rgba(126,200,248,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 55%);
}
/* אור אמביינט נודד — כחול (יוסף) למעלה, זהב (נסיה) למטה. תמיד שניהם בפריים. */
body::before, body::after { content: ''; position: fixed; z-index: -2; border-radius: 50%; filter: blur(75px); pointer-events: none; will-change: transform; }
body::before { width: 72vw; height: 72vw; max-width: 640px; max-height: 640px; top: -24vh; inset-inline-start: 50%; transform: translateX(50%);
  background: radial-gradient(circle, rgba(var(--glow-rgb),.30), rgba(var(--glow-rgb),0) 70%); animation: drift1 17s var(--ease) infinite alternate; }
body::after { width: 58vw; height: 58vw; max-width: 500px; max-height: 500px; bottom: -16vh; inset-inline-end: -8vw;
  background: radial-gradient(circle, rgba(232,181,75,.15), rgba(232,181,75,0) 70%); animation: drift2 23s var(--ease) infinite alternate; }
@keyframes drift1 { from { transform: translateX(50%) translateY(0) scale(1); } to { transform: translateX(38%) translateY(7vh) scale(1.12); } }
@keyframes drift2 { from { transform: translateY(0) scale(1); } to { transform: translateY(-9vh) scale(1.16); } }

/* ===== הוורטקס — נוצר ב-WebGL (vortex.js), עם גיבוי CSS רך ===== */
.vortex { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.vortex-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* גיבוי CSS כשאין WebGL: זוהר נושם בלבד — שקט, קריא */
.vx-fallback { position: absolute; inset: 0; margin: auto; width: 90vmin; height: 90vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--glow-rgb),.20) 0%, rgba(var(--glow-rgb),.07) 42%, transparent 68%);
  animation: vxBreath 6s ease-in-out infinite; }
body.gl .vx-fallback { display: none; }
@keyframes vxBreath { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.07); opacity: 1; } }
/* שכבת קריאוּת — וינייטה מרכזית. מתחזקת ברגעי קריאה (calm). */
.vx-scrim { position: absolute; inset: -10%; pointer-events: none; transition: opacity .9s var(--ease);
  background: radial-gradient(ellipse 82% 60% at 50% 46%, rgba(7,10,22,.72) 0%, rgba(7,10,22,.42) 46%, rgba(7,10,22,0) 74%); }
body.calm .vx-scrim { opacity: 1;
  background: radial-gradient(ellipse 86% 64% at 50% 46%, rgba(7,10,22,.78) 0%, rgba(7,10,22,.46) 48%, rgba(7,10,22,0) 76%); }

/* ===== מנוע השלבים — מעבר דרך עומק הפורטל ===== */
.stage { position: fixed; inset: 0; overflow: hidden; perspective: 1100px; perspective-origin: 50% 42%; transform-style: preserve-3d; }
.step { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: max(var(--s7), calc(env(safe-area-inset-top) + 64px)) var(--s5) max(var(--s6), env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transform: translateZ(-400px) scale(.88);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow-y: auto; -webkit-overflow-scrolling: touch; backface-visibility: hidden; }
.step.is-active { opacity: 1; visibility: visible; transform: translateZ(0) scale(1); z-index: 2; will-change: transform, opacity;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.step.is-exit { opacity: 0; visibility: visible; transform: translateZ(300px) scale(1.24); z-index: 1; will-change: transform, opacity;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.step-inner { width: 100%; max-width: var(--maxw); margin: auto; text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 3px 22px rgba(7,10,22,.55); }
/* קריאות לפני אפס-גלילה: כשהמנוע מזהה שגם אחרי דחיסה עדינה התוכן גבוה — מותרת גלילה קצרה + רמז דעיכה */
.step.can-scroll { justify-content: flex-start; }
.step.can-scroll::after { content: ''; position: sticky; bottom: -1px; display: block; width: 100%; height: 34px; flex-shrink: 0;
  background: linear-gradient(to top, var(--bg), transparent); pointer-events: none; }

.bar { position: fixed; inset-inline: 0; top: 0; height: 3px; background: rgba(255,255,255,.07); z-index: 40; }
.bar > i { display: block; height: 100%; width: 0; background: var(--grad-blue); box-shadow: 0 0 12px rgba(var(--glow-rgb),.75);
  border-radius: 0 var(--r-pill) var(--r-pill) 0; transition: width var(--dur) var(--ease), background .8s var(--ease); }

/* ===== סרגל עליון — מותג-העל Yosef (מודולרי: קל להחליף היררכיה) ===== */
.topbar { position: fixed; top: 3px; inset-inline: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--s4) 4px; pointer-events: none; }
.topbar::after { content: ''; position: absolute; top: 100%; inset-inline: 0; height: 26px; background: linear-gradient(to bottom, rgba(9,13,28,.85), transparent); pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 44px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.brand-product { font-family: var(--font-impact); font-size: var(--fs-sm); letter-spacing: .02em; opacity: .9; }
.brand-product b { color: var(--blue-300); font-weight: 400; }
.brand-product em { color: var(--gold-bright); font-style: normal; }
.snd { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--line); color: var(--blue-300); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.snd[hidden] { display: none; }
.snd svg { width: 17px; height: 17px; }
.snd:active { transform: scale(.92); }
.snd.off { color: var(--dim); }
.snd.off::after { content: ''; position: absolute; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-45deg); }

/* ===== טיפוגרפיה ===== */
.eyebrow { font-size: var(--fs-sm); font-weight: 800; letter-spacing: .04em; color: var(--gold); }
.display { font-family: var(--font-impact); font-weight: 400; line-height: 1.14; font-size: var(--fs-3xl); letter-spacing: -.01em; text-wrap: balance; }
.display-sm { font-family: var(--font-impact); font-size: var(--fs-2xl); line-height: 1.15; text-wrap: balance; }
.hero-word { font-family: var(--font-impact); font-size: var(--fs-hero); line-height: 1;
  background: linear-gradient(135deg, #FFF8E8 10%, var(--gold-bright) 55%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(232,181,75,.35)); }
h1,h2,h3 { line-height: 1.14; text-wrap: balance; }
.lead { font-size: var(--fs-lg); color: var(--muted); line-height: 1.62; text-wrap: pretty; }
p { text-wrap: pretty; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
.blue { color: var(--blue-300); } .gold { color: var(--gold-bright); }

/* חשיפת מילה-אחר-מילה (קולנועי, GPU בלבד) */
.cine-unit { display: inline-block; }
.cine-run .cine-unit { opacity: 0; animation: cineReveal .62s cubic-bezier(.22,.65,.2,1) forwards; animation-delay: calc(var(--i) * .05s); }
@keyframes cineReveal { from { opacity: 0; transform: translate3d(0,.5em,0); } to { opacity: 1; transform: translate3d(0,0,0); } }

/* ===== כפתורים ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 54px; padding: 0 var(--s6); border-radius: var(--r-pill); font-weight: 800; font-size: var(--fs-lg); line-height: 1;
  text-decoration: none; border: none; cursor: pointer; font-family: inherit; color: inherit;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background .6s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--grad-blue); color: #fff; box-shadow: var(--glow-accent); }
.btn-primary:hover { transform: translateY(-2px); }
body[data-mood="human"] .btn-primary { color: #241a00; }
.btn-gold { background: var(--grad-gold); color: #241a00; box-shadow: 0 12px 40px rgba(232,181,75,.4); }
.btn-ghost { background: var(--surface); backdrop-filter: blur(var(--glass-blur)); color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { display: flex; width: 100%; } .btn-lg { min-height: 62px; font-size: var(--fs-xl); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.step:focus, .step:focus-visible { outline: none; }

/* ===== קלפי בחירה ===== */
.opt { display: flex; align-items: center; gap: var(--s4); width: 100%; min-height: 62px; padding: var(--s4) var(--s5); margin-bottom: var(--s3);
  background: var(--surface); backdrop-filter: blur(var(--glass-blur)); border: 1.5px solid var(--line); border-radius: var(--r-md);
  text-align: start; font-size: var(--fs-lg); font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.opt:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-1px); }
.opt:active { transform: scale(.985); }
.opt.sel { border-color: var(--blue); background: linear-gradient(90deg, rgba(var(--glow-rgb),.2), rgba(var(--glow-rgb),.05)); box-shadow: var(--glow-accent); }
.opt .ic { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.opt .ck { margin-inline-start: auto; color: var(--blue-300); opacity: 0; font-weight: 900; transition: opacity .2s var(--ease); }
.opt.sel .ck { opacity: 1; }

/* שדות קלט */
.txt-in { width: 100%; resize: none; background: var(--surface); backdrop-filter: blur(var(--glass-blur)); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s4) var(--s5); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-lg);
  line-height: 1.55; text-align: center; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.txt-in:focus { outline: none; border-color: rgba(var(--glow-rgb),.6); box-shadow: 0 0 0 4px rgba(var(--glow-rgb),.12); }
.txt-in::placeholder { color: var(--dim); }
textarea.txt-in { text-align: start; min-height: 132px; }
/* זכוכית-נושמת — שאלת העומק */
.deep-glass { animation: deepBreath 5.5s ease-in-out infinite; }
@keyframes deepBreath { 0%,100% { box-shadow: 0 0 0 1px rgba(var(--glow-rgb),.10), 0 12px 44px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 0 1px rgba(var(--glow-rgb),.28), 0 12px 52px rgba(0,0,0,.46); } }

/* ===== כרטיס זכוכית ===== */
.card { position: relative; background: var(--surface); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh2); }
.card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%); }
.card-listen { text-align: start; border-inline-start: 3px solid rgba(var(--glow-rgb),.7);
  background: linear-gradient(90deg, rgba(var(--glow-rgb),.10), var(--surface) 60%); }
.card-listen .q-mark { font-family: var(--font-impact); font-size: var(--fs-2xl); color: var(--blue-300); line-height: 1; }

/* ===== דמויות — נוכחות אנושית ===== */
.figure-wrap { position: relative; display: inline-block; }
.figure-wrap::before { content: ''; position: absolute; inset: -8% -22%; z-index: -1; border-radius: 50%; filter: blur(20px);
  background: radial-gradient(ellipse at 50% 42%, rgba(var(--glow-rgb),.30), rgba(232,181,75,.12) 55%, transparent 75%);
  animation: haloPulse 5.5s ease-in-out infinite; }
@keyframes haloPulse { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
.figure { height: min(34vh, 300px); width: auto; object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(var(--glow-rgb),.28)) drop-shadow(0 0 52px rgba(232,181,75,.18));
  animation: figFloat 5.5s ease-in-out infinite; }
@keyframes figFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.figure-sm { height: min(24vh, 210px); }
/* בועת-תגובה: אווטר קטן + שורה חמה */
.react { display: flex; direction: rtl; align-items: center; gap: var(--s3); text-align: start; margin: 0 auto var(--s4); max-width: 420px;
  background: linear-gradient(90deg, rgba(232,181,75,.10), var(--surface) 70%); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3) var(--s4); backdrop-filter: blur(var(--glass-blur)); }
.react img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top;
  border: 2px solid rgba(232,181,75,.6); box-shadow: 0 0 14px rgba(232,181,75,.4); flex-shrink: 0; }
.react p { font-size: var(--fs-sm); color: var(--fg); line-height: 1.45; margin: 0; text-wrap: balance; }

/* ===== מסך החיבור — ✓ מצטברים ===== */
.connect-rows { text-align: start; max-width: 380px; margin: var(--s5) auto 0; }
.c-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; color: var(--dim); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.05); transition: color .5s var(--ease); }
.c-row:last-child { border-bottom: none; }
.c-row .tick { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; font-weight: 900;
  background: var(--surface); border: 1.5px solid var(--line); color: transparent; transition: all .5s var(--ease); }
.c-row.done { color: var(--fg); }
.c-row.done .tick { background: rgba(var(--glow-rgb),.2); border-color: rgba(var(--glow-rgb),.7); color: var(--blue-300); box-shadow: 0 0 14px rgba(var(--glow-rgb),.4); }
.connect-sub { min-height: 1.6em; color: var(--muted); font-size: var(--fs-base); margin-top: var(--s5); transition: opacity .4s var(--ease); }
.dots { display: inline-flex; gap: 7px; vertical-align: middle; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(var(--glow-rgb),.75); animation: bd 1s var(--ease) infinite; }
.dots i:nth-child(2){ animation-delay: .15s } .dots i:nth-child(3){ animation-delay: .3s }
@keyframes bd { 0%,100%{ opacity:.25; transform: translateY(0) } 50%{ opacity:1; transform: translateY(-6px) } }

/* ===== סרט השיקוף ===== */
.film-shroud { position: fixed; inset: 0; z-index: 2; background: rgba(5,7,16,0); pointer-events: none; transition: background 1.1s var(--ease); }
.stage { z-index: 10; }   /* התוכן תמיד מעל ההחשכה — הסרט מחשיך את העולם, לא את המילים */
body.film-dark .film-shroud { background: rgba(5,7,16,.82); }
.film-line { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.film-line.in { opacity: 1; transform: none; }
.film-name { font-family: var(--font-impact); font-size: var(--fs-4xl); line-height: 1.05;
  background: linear-gradient(135deg, #FFF8E8, var(--gold-bright) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(232,181,75,.4)); }
/* ביטים של השיקוף — נחשפים בהדרגה */
.beat-kicker { font-weight: 800; font-size: var(--fs-xs); letter-spacing: .08em; color: var(--gold-bright); display: block; margin-bottom: var(--s2); }
.beat-body { font-size: var(--fs-lg); line-height: 1.6; color: var(--fg); font-weight: 500; text-align: start; max-width: 40ch; margin-inline: auto; }
.beat-next { margin-top: var(--s5); }
.rev { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i,0) * 110ms); }
.in .rev, .rev.in { opacity: 1; transform: none; }

/* בדיקת דיוק — שלוש בחירות עדינות */
.acc-row { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.acc { min-height: 52px; padding: 0 var(--s5); border-radius: var(--r-pill); background: var(--surface); backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid var(--line); font-weight: 700; font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.acc:hover { border-color: var(--line-2); transform: translateY(-1px); }
.acc.sel { border-color: rgba(232,181,75,.75); background: linear-gradient(180deg, rgba(232,181,75,.16), rgba(232,181,75,.04)); box-shadow: 0 10px 30px rgba(232,181,75,.25); }

/* אבק פיות — עדין מאוד, נכבה ברגעי קריאה */
#dust { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity .9s var(--ease); }
body.calm #dust { opacity: .25; }
#dust i { position: absolute; border-radius: 50%; opacity: .3; animation: dustDrift linear infinite; }
@keyframes dustDrift { from { transform: translateY(12vh) } to { transform: translateY(-14vh) } }
/* פרץ ניצוצות בבחירה */
.spk { position: fixed; z-index: 60; border-radius: 50%; background: var(--gold-bright); pointer-events: none;
  box-shadow: 0 0 8px rgba(232,181,75,.8); animation: spkFly .8s ease-out forwards; }
@keyframes spkFly { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* ===== עזרים ===== */
.stack > * + * { margin-top: var(--s4); } .stack-lg > * + * { margin-top: var(--s5); }
.mt2{margin-top:var(--s2)} .mt3{margin-top:var(--s3)} .mt4{margin-top:var(--s4)} .mt5{margin-top:var(--s5)} .mt6{margin-top:var(--s6)}
.full { width: 100%; } .tc { text-align: center; }
.hint { font-size: var(--fs-sm); color: var(--dim); }
.trust { font-size: var(--fs-xs); color: var(--dim); letter-spacing: .02em; }
.trust b { color: var(--muted); font-weight: 600; }
img { max-width: 100%; display: block; }

.fade-up { animation: fu var(--dur) var(--ease) both; }
@keyframes fu { from{ opacity:0; transform: translateY(14px) } to{ opacity:1; transform:none } }
.reveal > * { animation: fu var(--dur) var(--ease) both; }
.reveal > *:nth-child(2){ animation-delay:.07s } .reveal > *:nth-child(3){ animation-delay:.14s }
.reveal > *:nth-child(4){ animation-delay:.21s } .reveal > *:nth-child(5){ animation-delay:.28s }
.reveal > *:nth-child(6){ animation-delay:.35s } .reveal > *:nth-child(7){ animation-delay:.42s }
.reveal.leaving { opacity: 0; transform: translateY(-10px) scale(.986); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; }

/* ===== נגישות ורספונסיביות ===== */
@media (prefers-reduced-motion: reduce) {
  *, .step, .bar > i { transition-duration: 1ms !important; animation: none !important; }
  .step { transform: none !important; }
  body::before, body::after { animation: none !important; }
  .cine-run .cine-unit { animation: none; opacity: 1; }
  .film-line, .rev { transition: none; }
}
@media (min-width: 600px) { :root { --maxw: 470px; } .figure { height: min(38vh, 340px); } }
@media (max-width: 400px) {
  :root { --fs-base: 1rem; --fs-lg: 1.1rem; --fs-xl: 1.3rem; --fs-2xl: 1.62rem; }
  .opt { min-height: 56px; font-size: 1.05rem; padding: var(--s3) var(--s4); } .opt .ic { font-size: 1.25rem; }
  .btn-lg { min-height: 56px; font-size: 1.15rem; }
}
@media (max-height: 760px) {
  .step { padding-top: max(var(--s6), calc(env(safe-area-inset-top) + 56px)); padding-bottom: var(--s5); }
  .stack-lg > * + * { margin-top: var(--s4); }
  .figure { height: min(28vh, 240px); } .figure-sm { height: min(20vh, 170px); }
}
@media (max-height: 700px) {
  .figure-sm { height: min(15vh, 120px); }
  .react { padding: var(--s2) var(--s3); } .react p { font-size: var(--fs-xs); }
  .acc { min-height: 46px; }
}
@media (max-height: 620px) {
  .figure { height: min(23vh, 190px); } .brand img { height: 36px; }
}