/* =====================================================================
   IN TRANCE -- ELEVATE LAYER
   שכבת חוויה פרימיום: אטמוספירה קוסמית, hero קולנועי, countdown,
   scroll-reveal, headliner, רחבה שנייה. בטוח למובייל: בלי פילטרים על הרקע,
   בלי הזרקת צבע לטקסט, בלי מיזוג צבעים, בלי רקע קבוע (fixed).
   ===================================================================== */

:root{
  --tr-purple:#a06bff;
  --tr-violet:#7a3cff;
  --tr-glow:#c8aaff;
  --tr-red:#ff4d3d;
  --tr-amber:#ff9234;
}

/* ---- כיבוד העדפת תנועה מופחתת ---- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  #cosmos,.atmos{display:none !important}
}

/* =====================================================================
   אטמוספירה גלובלית -- שכבה קבועה מאחורי כל התוכן
   ===================================================================== */
html{background:#04020c}
body{background:transparent !important;position:relative;overflow-x:hidden}

#cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}

.atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atmos .glow{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.atmos .g1{width:60vw;height:60vw;top:-15vw;left:-10vw;
  background:radial-gradient(circle, rgba(122,60,255,.45), rgba(122,60,255,0) 65%);
  animation:drift1 28s ease-in-out infinite alternate}
.atmos .g2{width:55vw;height:55vw;bottom:-20vw;right:-12vw;
  background:radial-gradient(circle, rgba(160,107,255,.38), rgba(160,107,255,0) 65%);
  animation:drift2 34s ease-in-out infinite alternate}
.atmos .g3{width:40vw;height:40vw;top:35%;left:55%;
  background:radial-gradient(circle, rgba(80,40,180,.30), rgba(80,40,180,0) 70%);
  animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vw) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-7vw,-5vw) scale(1)}}
@keyframes drift3{from{transform:translate(-4vw,2vw)}to{transform:translate(5vw,-4vw)}}

/* קרני אור דקות שנושמות */
.atmos .beam{position:absolute;top:-10%;width:2px;height:120%;
  background:linear-gradient(to bottom, rgba(200,170,255,0), rgba(200,170,255,.5), rgba(200,170,255,0));
  opacity:.0;animation:beam 9s ease-in-out infinite}
.atmos .b1{left:22%;animation-delay:0s}
.atmos .b2{left:48%;animation-delay:3s}
.atmos .b3{left:73%;animation-delay:6s}
@keyframes beam{0%,100%{opacity:0;transform:translateY(-20px)}45%,55%{opacity:.6;transform:translateY(0)}}

/* =====================================================================
   HERO -- קולנועי, תמונת רקע מתקרבת לאט, חשיפה מדורגת
   ===================================================================== */
.hero{position:relative;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(/images/in-trance-hero.png) center/cover no-repeat;
  transform:scale(1.06);animation:heroZoom 26s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(4,2,12,.45) 0%, rgba(4,2,12,.30) 38%, rgba(4,2,12,.78) 78%, rgba(4,2,12,.97) 100%)}
.hero > *{position:relative;z-index:2}
@keyframes heroZoom{from{transform:scale(1.06)}to{transform:scale(1.18)}}

/* חשיפה מדורגת של אלמנטי ה-hero */
.hero-kicker{opacity:0;animation:rise .9s ease .15s forwards}
.hero-title .t-in{display:inline-block;opacity:0;animation:rise 1s cubic-bezier(.2,.7,.2,1) .35s forwards}
.hero-title .t-tr{display:inline-block;opacity:0;animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .6s forwards;
  text-shadow:0 0 40px rgba(160,107,255,.55), 0 0 90px rgba(122,60,255,.35)}
.hero-sub{opacity:0;animation:rise 1s ease .95s forwards}
.hero-pills{opacity:0;animation:rise 1s ease 1.2s forwards}
.hero-ew{opacity:0;animation:rise .9s ease 1.4s forwards}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}

/* תג EVENT WEEK ב-hero */
.hero-ew{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  align-self:flex-start;padding:9px 16px;border-radius:40px;
  border:1px solid rgba(255,77,61,.5);background:rgba(255,77,61,.10);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#ffb3aa}
.hero-ew b{color:#fff;letter-spacing:.18em}
.ew-dot{width:9px;height:9px;border-radius:50%;background:var(--tr-red);
  box-shadow:0 0 10px var(--tr-red);animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}

/* =====================================================================
   COUNTDOWN -- בקרת שיגור קולנועית
   ===================================================================== */
.event-hero{position:relative}
.ew-badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  padding:10px 18px;border-radius:40px;border:1px solid rgba(255,77,61,.5);
  background:rgba(255,77,61,.10);font-family:var(--mono);font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:#ffb3aa}

.event-name-xl{font-family:var(--display);line-height:.86;letter-spacing:.01em;
  font-size:clamp(54px,11vw,140px);color:var(--ink);margin:4px 0 14px;
  text-shadow:0 0 50px rgba(160,107,255,.4)}
.event-name-xl em{font-style:normal;color:var(--tr-glow);
  text-shadow:0 0 50px rgba(160,107,255,.7)}
.event-meta{font-family:var(--mono);font-size:clamp(11px,1.4vw,14px);
  letter-spacing:.1em;color:rgba(245,240,232,.7);margin-bottom:30px}

.countdown{display:flex;align-items:flex-start;gap:clamp(8px,2vw,22px);
  margin:8px 0 38px;flex-wrap:wrap}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:clamp(58px,12vw,104px)}
.cd-num{font-family:var(--display);font-size:clamp(46px,9vw,104px);line-height:.9;
  color:var(--ink);letter-spacing:.02em;
  text-shadow:0 0 30px rgba(160,107,255,.55), 0 0 70px rgba(122,60,255,.3);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), color .35s}
.cd-num.tick{transform:translateY(-6px) scale(1.06);color:#fff}
.cd-lab{font-family:var(--mono);font-size:clamp(8px,1.1vw,11px);letter-spacing:.26em;
  text-transform:uppercase;color:rgba(200,170,255,.6);margin-top:8px}
.cd-sep{font-family:var(--display);font-size:clamp(40px,8vw,90px);line-height:1;
  color:rgba(200,170,255,.3);padding-top:2px}
.cd-live{font-family:var(--display);font-size:clamp(40px,8vw,88px);color:var(--tr-red);
  text-shadow:0 0 40px rgba(255,77,61,.6);animation:pulseDot 1.4s ease-in-out infinite}

/* =====================================================================
   HEADLINER -- מונומנט ל-DJ YAHEL
   ===================================================================== */
.headliner{display:flex;gap:clamp(18px,3vw,40px);align-items:center;flex-wrap:wrap;
  margin:14px 0 34px;padding:clamp(18px,3vw,32px);border-radius:20px;
  border:1px solid rgba(160,107,255,.22);
  background:linear-gradient(135deg, rgba(122,60,255,.12), rgba(20,8,44,.5))}
.hl-portrait{position:relative;width:clamp(120px,20vw,200px);height:clamp(120px,20vw,200px);
  border-radius:50%;background-size:cover;background-position:center top;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(200,170,255,.35), 0 0 60px rgba(122,60,255,.4)}
.hl-aura{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(200,170,255,.35);animation:aura 3.2s ease-in-out infinite}
.hl-aura::after{content:"";position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(160,107,255,.18);animation:aura 3.2s ease-in-out .6s infinite}
@keyframes aura{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.08);opacity:.25}}
.hl-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(200,170,255,.65);margin-bottom:6px}
.hl-name{font-family:var(--display);font-size:clamp(40px,8vw,82px);line-height:.9;color:var(--ink);
  text-shadow:0 0 40px rgba(160,107,255,.5)}
.hl-desc{font-family:var(--body,'Heebo',sans-serif);font-size:15px;line-height:1.7;
  color:rgba(245,240,232,.72);max-width:46ch;margin-top:10px}

/* =====================================================================
   שתי רחבות -- ניגוד אטמוספירה (סגול מול אדום/כתום)
   ===================================================================== */
.floors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:4px 0 34px}
@media(max-width:640px){.floors{grid-template-columns:1fr}}
.floor{padding:20px 22px;border-radius:16px;border:1px solid;position:relative;overflow:hidden}
.floor-tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.floor-djs{font-family:var(--display);font-size:clamp(17px,2.4vw,24px);letter-spacing:.02em;line-height:1.25}
.floor-main{border-color:rgba(160,107,255,.35);
  background:linear-gradient(135deg, rgba(122,60,255,.16), rgba(15,6,38,.4))}
.floor-main .floor-tag{color:var(--tr-glow)}
.floor-main .floor-djs{color:#efe8ff;text-shadow:0 0 26px rgba(160,107,255,.45)}
.floor-2{border-color:rgba(255,77,61,.4);
  background:linear-gradient(135deg, rgba(255,77,61,.14), rgba(40,10,6,.45))}
.floor-2 .floor-tag{color:var(--tr-amber)}
.floor-2 .floor-djs{color:#ffe2d2;text-shadow:0 0 26px rgba(255,120,60,.4)}
.floor-2::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 80% 120%, rgba(255,120,40,.22), transparent 60%)}

.event-cta-xl{display:inline-block;font-family:var(--mono);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:#04020c;background:var(--tr-glow);padding:16px 30px;border-radius:40px;
  text-decoration:none;font-weight:700;transition:transform .3s, box-shadow .3s;
  box-shadow:0 0 40px rgba(160,107,255,.45)}
.event-cta-xl:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(160,107,255,.7)}

/* =====================================================================
   SCROLL-REVEAL
   ===================================================================== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* =====================================================================
   LINEUP -- זוהר ספוטלייט במעבר עכבר
   ===================================================================== */
.dj-card{transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s, background .35s}
.dj-card:hover{transform:translateY(-5px);border-color:rgba(160,107,255,.55) !important;
  box-shadow:0 10px 40px rgba(122,60,255,.3), 0 0 0 1px rgba(160,107,255,.3) inset}
.dj-card .dj-name{transition:text-shadow .35s, color .35s}
.dj-card:hover .dj-name{color:#fff;text-shadow:0 0 22px rgba(160,107,255,.7)}
.dj-card.dj-local:hover{border-color:rgba(255,140,60,.5) !important;
  box-shadow:0 10px 40px rgba(255,100,40,.22), 0 0 0 1px rgba(255,140,60,.3) inset}
.dj-card.dj-local:hover .dj-name{text-shadow:0 0 22px rgba(255,150,70,.7)}

/* כותרות הסקשנים -- זוהר עדין */
.sec-title em{text-shadow:0 0 36px rgba(160,107,255,.45)}