/* ==========================================================================
   OBRELIA — Portal  ·  Midnight (כחול לילה + פלטינה)
   דף בית ראשי לדומיין obrelia.com  ·  עברית RTL  ·  פונט Rubik + Assistant
   ========================================================================== */

:root{
  --ink-0:#06070d;      /* רקע עמוק */
  --ink-1:#0a0d1e;
  --ink-2:#141b3a;
  --wine :#1c2657;      /* שיא רדיאלי — כחול לילה */
  --acc  :#7ba6ff;      /* אקסנט — כחול/פלטינה */
  --acc-2:#bcd4ff;      /* אקסנט בהיר */
  --acc-soft:rgba(123,166,255,.5);
  --txt:#eef1f8;        /* טקסט */
  --txt-dim:rgba(238,241,248,.66);
  --txt-faint:rgba(238,241,248,.42);
  --glass:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.12);
  --radius:16px;
  --maxw:1120px;
  --display:'Rubik','Segoe UI',system-ui,Arial,sans-serif;
  --sans:'Assistant','Segoe UI',system-ui,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;direction:rtl;font-family:var(--sans);color:var(--txt);
  background:var(--ink-0);line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- רקע קולנועי חי (ללא תמונה חיצונית) ---- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background-color:var(--ink-0);
  background:
    radial-gradient(120% 95% at 84% -12%, var(--wine) 0%, var(--ink-2) 40%, var(--ink-1) 68%, var(--ink-0) 100%),
    radial-gradient(80% 72% at 4% 44%, rgba(40,60,130,.32), transparent 55%);
}
.bg::after{ /* וינייטה עמוקה */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 116% at 50% 38%, transparent 46%, rgba(0,0,0,.64) 100%);
}
/* קרן מפתח קרירה — מגיעה משמאל, "נושמת" */
.bg .beam{position:absolute;inset:0;
  background:
    radial-gradient(40% 72% at 9% 46%, rgba(123,166,255,.22), rgba(90,130,220,.06) 42%, transparent 68%),
    conic-gradient(from 208deg at 5% 40%, rgba(123,166,255,.12), transparent 22%);
  animation:breathe 6.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.82}50%{opacity:1}}
/* שדה נקודות אור / מסכים רחוקים (bokeh) — סטטי, ריצוד עדין בשקיפות */
.bg .bokeh{position:absolute;inset:0;filter:blur(.4px);
  background-image:
    radial-gradient(circle 3px at 18% 30%, rgba(210,225,255,.50), transparent 60%),
    radial-gradient(circle 2px at 26% 62%, rgba(180,210,255,.42), transparent 60%),
    radial-gradient(circle 4px at 12% 74%, rgba(123,166,255,.48), transparent 60%),
    radial-gradient(circle 2px at 39% 22%, rgba(200,220,255,.40), transparent 60%),
    radial-gradient(circle 3px at 52% 66%, rgba(188,212,255,.36), transparent 60%),
    radial-gradient(circle 2px at 64% 34%, rgba(160,195,255,.30), transparent 60%),
    radial-gradient(circle 5px at 8% 50%,  rgba(123,166,255,.40), transparent 62%),
    radial-gradient(circle 2px at 33% 44%, rgba(230,238,255,.42), transparent 60%),
    radial-gradient(circle 2px at 47% 38%, rgba(150,185,255,.30), transparent 60%),
    radial-gradient(circle 3px at 22% 52%, rgba(123,166,255,.28), transparent 60%);
  animation:twinkle 5.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.72}50%{opacity:1}}
/* רצפת אולפן / קונסולה — נגה כחולה + קווי פרספקטיבה עדינים */
.bg .floor{position:absolute;left:0;right:0;bottom:0;height:44%;
  background:
    linear-gradient(0deg, rgba(123,166,255,.10), transparent 72%),
    linear-gradient(0deg, rgba(0,0,0,.52), transparent 82%)}
.bg .floor::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 48px);
  -webkit-mask:linear-gradient(0deg,#000,transparent);mask:linear-gradient(0deg,#000,transparent)}
.bg .grain{position:absolute;inset:0;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* גרעין סטטי — טקסטורה עדינה בלי עומס GPU מתמשך */
}
.bg .sweep{position:absolute;top:-30%;height:160%;width:46%;inset-inline-start:-40%;
  background:linear-gradient(90deg,transparent,rgba(188,212,255,.10) 45%,rgba(123,166,255,.06) 55%,transparent);
  filter:blur(22px);transform:skewX(-16deg);animation:sweep 9s ease-in-out infinite;}
@keyframes sweep{0%{inset-inline-start:-46%;opacity:0}12%{opacity:1}60%{opacity:1}72%,100%{inset-inline-start:140%;opacity:0}}

/* ---- מעטפת ---- */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ---- ניווט עליון ---- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0 8px}
.wordmark{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:3px;font-size:15px}
.wordmark .emblem{width:34px;height:34px;flex:0 0 auto;filter:drop-shadow(0 3px 10px rgba(123,166,255,.5))}
.wordmark b{font-weight:800}
.nav .live{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-dim);
  border:1px solid var(--glass-line);background:var(--glass);padding:6px 13px;border-radius:30px}
.nav .live .pulse{width:8px;height:8px;border-radius:50%;background:var(--acc-2);
  box-shadow:0 0 0 0 var(--acc-soft);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(123,166,255,.6)}70%{box-shadow:0 0 0 9px rgba(123,166,255,0)}100%{box-shadow:0 0 0 0 rgba(123,166,255,0)}}

/* ---- Hero ---- */
.hero{padding:clamp(46px,9vh,96px) 0 30px;position:relative}
.hero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:2px;color:var(--acc-2)}
.hero .kicker::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--acc),transparent)}
.hero h1{font-family:var(--display);font-weight:800;line-height:1.04;margin:16px 0 10px;
  font-size:clamp(40px,7.2vw,82px);letter-spacing:-1.5px;
  text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero h1 .accent{color:transparent;background:linear-gradient(120deg,var(--acc-2),var(--acc) 62%);
  -webkit-background-clip:text;background-clip:text}
.hero .lede{max-width:560px;font-size:clamp(15px,1.7vw,19px);color:var(--txt-dim);margin:0 0 30px}
.hero .cue{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--txt-faint)}
.hero .cue .arrow{display:inline-block;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- רשת כרטיסים ---- */
.systems{padding:26px 0 70px}
.systems h2{font-size:13px;letter-spacing:3px;color:var(--txt-faint);font-weight:700;
  margin:0 0 18px;display:flex;align-items:center;gap:12px}
.systems h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--glass-line),transparent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}

.card{position:relative;display:flex;flex-direction:column;min-height:210px;
  padding:24px 22px;border-radius:var(--radius);background:var(--glass);
  border:1px solid var(--glass-line);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.card::before{ /* זוהר כחול שנחשף ב-hover */
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;
  background:radial-gradient(90% 80% at 80% 0%,rgba(123,166,255,.28),transparent 60%)}
.card .ico{font-size:30px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));transition:transform .4s}
.card .name{font-family:var(--display);font-size:25px;margin:14px 0 4px;font-weight:700;letter-spacing:-.5px}
.card .desc{font-size:13.5px;color:var(--txt-dim);margin:0}
.card .go{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--txt)}
.card .go .chev{transition:transform .35s}
.card .lock{margin-top:auto;padding-top:18px;font-size:12.5px;color:var(--txt-faint);
  display:flex;align-items:center;gap:7px}

.card.live:hover{transform:translateY(-8px);border-color:var(--acc-soft);
  box-shadow:0 22px 50px rgba(0,0,0,.5),0 8px 26px rgba(123,166,255,.22)}
.card.live:hover::before{opacity:1}
.card.live:hover .ico{transform:scale(1.16) rotate(-5deg)}
.card.live:hover .go .chev{transform:translateX(-6px)}
.card.live:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px}

.card.soon{border-style:dashed;opacity:.62}
.card.soon .name{color:var(--txt-dim)}
.card .badge{position:absolute;top:16px;inset-inline-start:16px;font-size:10.5px;font-weight:700;
  letter-spacing:1.5px;padding:4px 10px;border-radius:20px}
.card.live .badge{color:var(--acc-2);background:rgba(123,166,255,.12);border:1px solid var(--acc-soft)}
.card.soon .badge{color:var(--txt-faint);background:rgba(255,255,255,.04);border:1px solid var(--glass-line)}

/* ---- כותרת תחתונה ---- */
.foot{border-top:1px solid var(--glass-line);padding:26px 0 40px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--txt-faint)}
.foot .dot{width:5px;height:5px;border-radius:50%;background:var(--acc);display:inline-block;margin:0 8px;vertical-align:middle}

/* ---- נגישות: כיבוד prefers-reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media (max-width:560px){
  .nav .live{display:none}
  .hero h1{font-size:clamp(38px,12vw,60px)}
}