/* ============================================================
   קליקרים — סביבת האולפן (רקע בלבד)
   "במת טלוויזיה" חגיגית: אולם מואר בסגול-כחול, קירות LED ענקיים
   בשני הצדדים, פיגום תאורה עליון, אלומות כחול-לבן חזקות,
   קונפטי בשליש העליון ורצפת במה מבריקה עם השתקפויות.
   הכל CSS טהור — אפס תמונות, אפס בקשות רשת.

   כלל ברזל: כל הדרמה יושבת בשוליים, למעלה ולמטה.
   המרכז (~64% מהרוחב) נשאר נקי מספיק כדי שהטקסט הלבן
   והכרטיסים תמיד ינצחו על המקרן.
   ============================================================ */

/* ---- מיכל האווירה + סדר השכבות ---------------------------- */
.ambient{
  position:fixed; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#0A1030;
  contain:layout paint style;         /* מבודד ציור — עוזר לביצועים לאורך שעות */
}

.ambient > span{
  position:absolute;
  display:block;
  pointer-events:none;
}

.ambient .stage-base     { inset:0;  z-index:1; }
.ambient .led-wall       {           z-index:2; }
.ambient .truss          {           z-index:3; }
.ambient .beams          { inset:0;  z-index:4; }
.ambient .haze           {           z-index:5; }
.ambient .stage-confetti {           z-index:6; }
.ambient .floor          {           z-index:7; }
.ambient .grain          { inset:0;  z-index:8; }
.ambient .vignette       { inset:0;  z-index:9; }

/* ============================================================
   1. בסיס הבמה — אולם מלא זוהר סגול-כחול, לא חדר חשוך
   ============================================================ */
.ambient .stage-base{
  background:
    /* זוהר האופק מאחורי הבמה — רחב ובהיר */
    radial-gradient(86% 44% at 50% 86%, rgba(74,152,255,.44), rgba(74,152,255,0) 72%),
    /* הילת עומק סגלגלה שממלאת את חצי האולם התחתון */
    radial-gradient(132% 74% at 50% 100%, rgba(140,110,255,.36), rgba(140,110,255,0) 70%),
    /* שפיכת האור מהקירות המוארים אל תוך החדר */
    radial-gradient(56% 82% at -2% 46%,  rgba(255,60,170,.42), rgba(255,60,170,0) 74%),
    radial-gradient(56% 82% at 102% 46%, rgba(178,96,255,.42), rgba(178,96,255,0) 74%),
    /* זוהר עדין מאחורי הפיגום, כדי שהחלק העליון לא ייפול לשחור */
    radial-gradient(76% 40% at 50% 2%, rgba(70,130,240,.26), rgba(70,130,240,0) 76%),
    /* שיפוע הבסיס — נייבי מואר, בהיר בהרבה מקודם */
    linear-gradient(180deg, #0A1130 0%, #111C4C 32%, #17245F 62%, #142057 100%);
}

/* ============================================================
   2. קירות ה-LED — הפיצ'ר הבולט של הסביבה.
   רשת תאים זוהרים במגנטה/ורוד/סגול/כחול שנסוגה לעומק.
   ============================================================ */
.ambient .led-wall{
  top:-6%; height:112%;
  width:21%;
  background-color:#1C0A33;
  background-image:
    /* החשכה בקצה העליון והתחתון — הקיר לא נראה מדבקה אחידה */
    linear-gradient(180deg,
      rgba(6,9,26,.85) 0%, rgba(6,9,26,0) 14%,
      rgba(6,9,26,0) 74%, rgba(6,9,26,.72) 100%),
    /* מרווחי הפיקסלים — אנכי */
    repeating-linear-gradient(90deg, rgba(4,6,18,.90) 0 3px, rgba(4,6,18,0) 3px 27px),
    /* מרווחי הפיקסלים — אופקי */
    repeating-linear-gradient(0deg,  rgba(4,6,18,.90) 0 3px, rgba(4,6,18,0) 3px 22px),
    /* וריאציית בהירות — שורות בהירות/כהות לסירוגין, נותן "תוכן" למסך */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.20) 0 22px,
      rgba(0,0,0,.26) 22px 44px,
      rgba(255,255,255,.08) 44px 88px,
      rgba(0,0,0,.18) 88px 154px),
    /* פסי הצבע של הפאנלים — תא אחד = צבע אחד */
    repeating-linear-gradient(90deg,
      #FF2F9E 0 27px,
      #D926E8 27px 54px,
      #8B3BFF 54px 81px,
      #2F6BFF 81px 108px,
      #FF3D7F 108px 135px);
  filter:saturate(1.5) brightness(1.1) blur(.35px);
  opacity:.9;
  backface-visibility:hidden;
}

/* בלום רחב מסביב לקיר — האור נשפך אל תוך האולם */
.ambient .led-wall::after{
  content:"";
  position:absolute; inset:-16% -36%;
  background:radial-gradient(60% 48% at 50% 50%, rgba(255,60,170,.62), rgba(255,60,170,0) 74%);
  filter:blur(30px);
}

/* קיר ימין — הקצה הפנימי (לכיוון המרכז) נסוג לעומק ונמוג */
.ambient .led-right{
  right:0;
  transform-origin:100% 50%;
  transform:perspective(900px) rotateY(-30deg);
  -webkit-mask-image:linear-gradient(to left, #000 0%, #000 32%, rgba(0,0,0,.60) 62%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to left, #000 0%, #000 32%, rgba(0,0,0,.60) 62%, rgba(0,0,0,0) 100%);
  animation:led-pulse-a 13s ease-in-out infinite alternate;
}

/* קיר שמאל — מראה־תמונה, בגוון סגול-כחול ובקצב אחר */
.ambient .led-left{
  left:0;
  transform-origin:0 50%;
  transform:perspective(900px) rotateY(30deg);
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 32%, rgba(0,0,0,.60) 62%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 32%, rgba(0,0,0,.60) 62%, rgba(0,0,0,0) 100%);
  animation:led-pulse-b 17s ease-in-out infinite alternate;
}
.ambient .led-left::after{
  background:radial-gradient(60% 48% at 50% 50%, rgba(178,96,255,.60), rgba(178,96,255,0) 74%);
}

/* הבהוב איטי — משכים שונים כדי ששני הקירות לעולם לא יפעמו יחד */
@keyframes led-pulse-a{
  0%   { opacity:.86; }
  50%  { opacity:1; }
  100% { opacity:.90; }
}
@keyframes led-pulse-b{
  0%   { opacity:.96; }
  45%  { opacity:.82; }
  100% { opacity:1; }
}

/* ============================================================
   3. פיגום התאורה — צללית כהה לרוחב הראש עם נורות קטנות
   ============================================================ */
.ambient .truss{
  top:0; left:0; right:0; height:7%;
  background-image:
    /* נצנוץ מתכתי דק על גבי הצללית — אחרת שחור על שחור נעלם */
    repeating-linear-gradient( 62deg, rgba(178,205,255,.15) 0 1.5px, rgba(178,205,255,0) 1.5px 34px),
    repeating-linear-gradient(-62deg, rgba(178,205,255,.12) 0 1.5px, rgba(178,205,255,0) 1.5px 34px),
    linear-gradient(180deg,
      rgba(190,215,255,0) 0 20%, rgba(190,215,255,.16) 20% 21.5%,
      rgba(190,215,255,0) 21.5% 72%, rgba(190,215,255,.13) 72% 73.5%,
      rgba(190,215,255,0) 73.5% 100%),
    /* אלכסונים מצטלבים — שלד הפיגום */
    repeating-linear-gradient( 62deg, rgba(4,7,20,.80) 0 5px, rgba(4,7,20,0) 5px 34px),
    repeating-linear-gradient(-62deg, rgba(4,7,20,.80) 0 5px, rgba(4,7,20,0) 5px 34px),
    /* מסילות עליונה ותחתונה + החשכה כללית */
    linear-gradient(180deg,
      rgba(4,7,20,.96) 0 22%,
      rgba(4,7,20,.72) 22% 74%,
      rgba(4,7,20,.90) 74% 92%,
      rgba(4,7,20,0) 100%);
  opacity:.96;
}

/* נורות — נקודות בהירות תלויות מתחת למסילה התחתונה */
.ambient .truss::after{
  content:"";
  position:absolute; left:0; right:0; bottom:2%;
  height:30%;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,250,226,1) 0 2.2px, rgba(255,220,150,.55) 4px, rgba(255,220,150,0) 10px);
  background-size:64px 100%;
  background-repeat:repeat-x;
  opacity:.95;
}

/* ============================================================
   4. אלומות אור — קונוסים רחבים ובהירים שיורדים מהפיגום.
   שני חיצוניים חזקים + שניים ביניים רכים. אף אחד לא יורד
   בדיוק על המרכז, כדי לא להתחרות בטקסט.
   ============================================================ */
.ambient .beams{
  background:
    /* אלומה חיצונית שמאל — כחול-לבן חזק + זנב סגול */
    conic-gradient(from 192deg at 15% -14%,
      rgba(150,215,255,0) 0deg,
      rgba(190,232,255,.40) 7deg,
      rgba(120,196,255,.20) 13deg,
      rgba(120,196,255,0) 20deg,
      rgba(178,140,255,0) 25deg,
      rgba(178,140,255,.26) 32deg,
      rgba(178,140,255,0) 41deg),
    /* אלומה חיצונית ימין — ורוד + כחול-לבן חזק */
    conic-gradient(from 124deg at 85% -14%,
      rgba(255,90,190,0) 0deg,
      rgba(255,110,200,.28) 8deg,
      rgba(255,110,200,0) 16deg,
      rgba(150,215,255,0) 21deg,
      rgba(190,232,255,.40) 29deg,
      rgba(120,196,255,.20) 35deg,
      rgba(120,196,255,0) 43deg),
    /* אלומות ביניים רכות — נותנות עומק בלי להעמיס על המרכז */
    conic-gradient(from 186deg at 31% -18%,
      rgba(130,200,255,0) 0deg,
      rgba(160,220,255,.10) 6deg,
      rgba(160,220,255,0) 15deg),
    conic-gradient(from 129deg at 69% -18%,
      rgba(130,200,255,0) 0deg,
      rgba(160,220,255,.10) 6deg,
      rgba(160,220,255,0) 15deg);
  filter:blur(20px);
  mix-blend-mode:screen;
  opacity:.95;
  transform-origin:50% 0;
  will-change:transform;
  animation:stage-beam-sway 34s ease-in-out infinite alternate;
}
@keyframes stage-beam-sway{
  from{ transform:translate3d(-1.4%,0,0) rotate(-1deg); }
  to  { transform:translate3d(1.4%,0,0)  rotate(1deg); }
}

/* ============================================================
   5. ערפל במה — פס אטמוספרי רחב שמרים את כל בהירות האולם
   ============================================================ */
.ambient .haze{
  left:-10%; right:-10%;
  top:40%; height:40%;
  background:
    linear-gradient(90deg,
      rgba(200,150,255,.48) 0%,
      rgba(110,150,235,.14) 30%,
      rgba(110,150,235,.11) 70%,
      rgba(255,90,190,.46) 100%),
    radial-gradient(62% 100% at 50% 42%, rgba(80,170,255,.18), rgba(80,170,255,0) 78%);
  filter:blur(50px);
  opacity:.72;
  mix-blend-mode:screen;
}

/* ============================================================
   6. קונפטי — פתיתים גדולים וזוהרים בשליש-ורבע העליון.
   שתי שכבות פסאודו זזות ב-transform בלבד (ידידותי למעבד הגרפי);
   המסכה קבועה על ההורה ומכבה הכל מתחת ל-46%.
   ============================================================ */
.ambient .stage-confetti{
  top:0; left:0; right:0; height:45%;
  overflow:hidden;
  /* שתי מסכות מוצלבות: האנכית מכבה כלפי מטה,
     האופקית מדללת את המרכז כדי שהכותרת תישאר נקייה */
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, #000 0%, #000 17%, rgba(0,0,0,.26) 34%, rgba(0,0,0,.26) 66%, #000 83%, #000 100%);
          mask-image:
    linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, #000 0%, #000 17%, rgba(0,0,0,.26) 34%, rgba(0,0,0,.26) 66%, #000 83%, #000 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  opacity:.92;
}

.ambient .stage-confetti::before,
.ambient .stage-confetti::after{
  content:"";
  position:absolute;
  inset:-300px 0 0 0;
  will-change:transform;
}

/* שכבה קדמית — פתיתים גדולים, נפילה מהירה יותר.
   אליפסות זקופות/שוכבות לסירוגין, כדי שייראו כמו פיסות נייר.
   כל אריח מקבל רוחב אחר (שובר את תחושת הרשת),
   אבל הגבהים תמיד מחלקים של 180 — כך הלולאה נשארת חלקה. */
.ambient .stage-confetti::before{
  background-image:
    radial-gradient(4px   7.5px at 18% 12%, rgba(255,205,70,1)   0 72%, rgba(255,205,70,0)   74%),
    radial-gradient(7.5px 4px   at 72% 61%, rgba(60,205,255,1)   0 72%, rgba(60,205,255,0)   74%),
    radial-gradient(4.2px 7.8px at 41% 34%, rgba(255,60,170,1)   0 72%, rgba(255,60,170,0)   74%),
    radial-gradient(7px   3.8px at 88% 77%, rgba(255,255,255,.95) 0 72%, rgba(255,255,255,0) 74%),
    radial-gradient(3.8px 7.2px at 55% 18%, rgba(80,235,140,.95) 0 72%, rgba(80,235,140,0)  74%),
    radial-gradient(7.2px 4px   at 9%  56%, rgba(178,120,255,1)  0 72%, rgba(178,120,255,0)  74%);
  background-size:
    353px 180px, 311px 180px, 431px 180px,
    269px 180px, 521px 180px, 397px 180px;
  animation:confetti-fall-a 26s linear infinite;
}

/* שכבת עומק — פתיתים קטנים יותר, איטיים ועמומים (גבהים מחלקים של 240) */
.ambient .stage-confetti::after{
  background-image:
    radial-gradient(3.2px 6px   at 30% 22%, rgba(190,140,255,.95) 0 72%, rgba(190,140,255,0) 74%),
    radial-gradient(6px   3.2px at 64% 56%, rgba(255,255,255,.85) 0 72%, rgba(255,255,255,0) 74%),
    radial-gradient(3px   5.6px at 12% 78%, rgba(255,205,70,.90)  0 72%, rgba(255,205,70,0)  74%),
    radial-gradient(5.6px 3px   at 83% 39%, rgba(255,60,170,.85)  0 72%, rgba(255,60,170,0)  74%),
    radial-gradient(3px   5.6px at 47% 66%, rgba(255,130,60,.85)  0 72%, rgba(255,130,60,0)  74%);
  background-size:
    557px 240px, 389px 240px, 653px 240px,
    443px 240px, 487px 240px;
  opacity:.75;
  animation:confetti-fall-b 41s linear infinite;
}

/* התזוזה שווה בדיוק לגובה האריח — הלולאה נסגרת בלי קפיצה */
@keyframes confetti-fall-a{
  from{ transform:translate3d(0,-180px,0); }
  to  { transform:translate3d(0,0,0); }
}
@keyframes confetti-fall-b{
  from{ transform:translate3d(0,-240px,0); }
  to  { transform:translate3d(0,0,0); }
}

/* ============================================================
   7. הרצפה — במה מבריקה: קו נצנוץ חד בקצה העליון
   והשתקפויות אנכיות מטושטשות בכחול/ציאן/מגנטה
   ============================================================ */
.ambient .floor{
  left:0; right:0; bottom:0; height:19%;
  background:
    linear-gradient(180deg,
      rgba(96,160,255,.88) 0%,
      rgba(46,86,190,.86) 30%,
      rgba(20,40,110,.90) 62%,
      rgba(9,16,44,.94) 100%),
    radial-gradient(78% 150% at 50% 0%, rgba(150,200,255,.55), rgba(150,200,255,0) 76%),
    radial-gradient(38% 130% at 6%  0%, rgba(255,70,175,.42), rgba(255,70,175,0) 76%),
    radial-gradient(38% 130% at 94% 0%, rgba(170,100,255,.42), rgba(170,100,255,0) 76%);
}

/* נצנוץ ספקולרי חד לאורך קצה הבמה */
.ambient .floor::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,
    rgba(140,210,255,.30) 0%,
    rgba(170,225,255,.80) 12%,
    rgba(225,245,255,1) 34%,
    rgba(255,255,255,1) 50%,
    rgba(225,245,255,1) 66%,
    rgba(170,225,255,.80) 88%,
    rgba(140,210,255,.30) 100%);
  box-shadow:0 0 34px rgba(150,205,255,.95), 0 0 90px rgba(90,160,255,.55);
}

/* פסי השתקפות אנכיים מטושטשים — רצפה רטובה ומבריקה */
.ambient .floor::after{
  content:"";
  position:absolute; inset:3px 0 0 0;
  background-image:repeating-linear-gradient(90deg,
    rgba(150,215,255,0)   0 26px,
    rgba(150,215,255,.62) 26px 44px,
    rgba(150,215,255,0)   44px 88px,
    rgba(255,80,180,.50)  88px 104px,
    rgba(255,80,180,0)    104px 152px,
    rgba(90,225,255,.55)  152px 170px,
    rgba(90,225,255,0)    170px 214px,
    rgba(180,120,255,.42) 214px 230px,
    rgba(180,120,255,0)   230px 286px);
  filter:blur(8px);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 56%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 56%, rgba(0,0,0,0) 100%);
  opacity:.95;
}

/* ============================================================
   8. גרעיניות פילם — SVG מוטבע, שובר באנדינג בהקרנה
   ============================================================ */
.ambient .grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.035;
  mix-blend-mode:overlay;
}

/* ============================================================
   9. ויניית — החשכה עדינה בלבד. תפקידה למסגר, לא לכבות.
   השוליים נשארים בהירים כדי שקירות ה-LED יישארו נוכחים.
   ============================================================ */
.ambient .vignette{
  background:
    /* ריכוך קל מאחורי הטקסט המרכזי — מספיק לניגודיות, לא יותר */
    radial-gradient(66% 46% at 50% 44%, rgba(5,9,26,.22), rgba(5,9,26,0) 78%),
    /* מסגרת חיצונית רכה */
    radial-gradient(128% 96% at 50% 42%, rgba(4,8,22,0) 56%, rgba(4,8,22,.40) 100%),
    linear-gradient(180deg, rgba(4,8,22,.56) 0%, rgba(4,8,22,.30) 9%, rgba(4,8,22,0) 21%, rgba(4,8,22,0) 82%, rgba(4,8,22,.14) 100%),
    linear-gradient(90deg, rgba(4,8,22,.18) 0%, rgba(4,8,22,0) 11%, rgba(4,8,22,0) 89%, rgba(4,8,22,.18) 100%);
}

/* ============================================================
   נגישות — מי שביקש פחות תנועה מקבל תמונת סטילס
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ambient .led-right,
  .ambient .led-left,
  .ambient .beams,
  .ambient .stage-confetti::before,
  .ambient .stage-confetti::after{
    animation:none;
  }
  .ambient .led-right{ opacity:.93; }
  .ambient .led-left { opacity:.90; }
  .ambient .beams,
  .ambient .stage-confetti::before,
  .ambient .stage-confetti::after{ will-change:auto; }
}

/* ============================================================
   רקע תמונה — אולפן אמיתי במקום הבמה שנבנתה ב-CSS.
   התמונה כבר מכילה קירות LED, פיגום תאורה, אלומות, ערפל ורצפה
   מבריקה, ולכן השכבות המצוירות מכובות. נשארים רק הקונפטי (תנועה),
   הגרעיניות ושכבת הכהות — כדי שהטקסט הלבן יישאר קריא מהאולם.
   ============================================================ */

body:not(.concept) .ambient .stage-base{
  background-image:url("../img/arena.jpg");
  background-size:cover;
  background-position:center 46%;
  background-repeat:no-repeat;
  background-color:#0A0F2C;      /* צבע גיבוי עד שהתמונה נטענת */
  opacity:1;
  filter:saturate(1.04);
  animation:none;
}
body:not(.concept) .ambient .stage-base::before,
body:not(.concept) .ambient .stage-base::after{ content:none; }

/* השכבות שהתמונה מחליפה */
body:not(.concept) .ambient .led-wall,
body:not(.concept) .ambient .led-left,
body:not(.concept) .ambient .led-right,
body:not(.concept) .ambient .truss,
body:not(.concept) .ambient .beams,
body:not(.concept) .ambient .haze,
body:not(.concept) .ambient .floor{ display:none; }

/* שכבת הקריאות. מרכז התמונה בהיר מאוד — בלי זה הטקסט הלבן נבלע. */
body:not(.concept) .ambient .vignette{
  opacity:1;
  background:
    radial-gradient(128% 88% at 50% 44%,
      rgba(4,7,24,.40) 0%,
      rgba(4,7,24,.66) 52%,
      rgba(4,7,24,.90) 100%),
    linear-gradient(180deg,
      rgba(4,7,24,.66) 0%,
      rgba(4,7,24,.32) 24%,
      rgba(4,7,24,.40) 62%,
      rgba(4,7,24,.84) 100%);
  animation:none;
}

/* הקונפטי נשאר, קצת עדין יותר על רקע צילומי */
body:not(.concept) .ambient .stage-confetti{ opacity:.75; }

/* הצללה רכה מאחורי הכיתוב התחתון של השאלה. מרכז התמונה הוא בדיוק
   הטבעת הזוהרת, ובלי הלוח הזה שורת החשיפה נבלעת בתוכה. */
body:not(.concept) .q-foot::before{
  content:""; position:absolute; inset:-14% -6%;
  background:radial-gradient(68% 100% at 50% 58%,
    rgba(4,8,24,.74) 0%, rgba(4,8,24,.42) 52%, rgba(4,8,24,0) 82%);
  pointer-events:none;
  z-index:0;
}
body:not(.concept) .q-foot > *{ z-index:1; }