/* ==========================================================================
   NIGHT STUDIO background (studio.js). Loaded after style.css / glass.css.
   ========================================================================== */
body::before{display:none}                 /* glass colour blobs off: the studio is the background now */
.bg-glow{opacity:.35}

.studio-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 35%,#171a14,transparent 75%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 84px),      /* wall panels */
    linear-gradient(180deg,#10120e,#0b0c0a)}
.st-defs{position:absolute}
.st-layer{position:absolute;left:-3%;top:-3%;width:106%;height:106%;will-change:transform;overflow:visible}
.st-ui{font:500 9.5px 'Poppins',sans-serif;fill:#9aa092}
.st-time{fill:#c6ff2e;font-weight:600}

/* neon sign: gentle buzz + an occasional flicker */
.st-neon{animation:stNeon 7s infinite}
@keyframes stNeon{0%,100%{opacity:1}90%{opacity:1}91%{opacity:.35}92%{opacity:1}94%{opacity:.6}95%{opacity:1}}
/* steam from the mug */
.st-steam path{transform-box:fill-box;transform-origin:50% 100%;animation:stSteam 3.2s ease-in-out infinite;opacity:0}
.st-steam path:nth-child(2){animation-delay:1s}.st-steam path:nth-child(3){animation-delay:2s}
@keyframes stSteam{0%{opacity:0;transform:translateY(8px) scaleY(.7)}35%{opacity:.8}100%{opacity:0;transform:translateY(-22px) scaleY(1.1)}}

/* keeps the middle (where the text is) calmer; darker after the hero */
.st-shade{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 46% 55% at 50% 45%,rgba(9,10,8,calc(var(--shade,.15) + .1)),rgba(9,10,8,calc(var(--shade,.15) * .5)) 75%,rgba(9,10,8,.1) 100%),
    linear-gradient(180deg,rgba(9,10,8,.35),transparent 18%),
    linear-gradient(rgba(9,10,8,var(--dim,0)),rgba(9,10,8,var(--dim,0)))}

@media (prefers-reduced-motion:reduce){ .st-neon,.st-steam path{animation:none} .st-steam path{opacity:.4} }

/* ==========================================================================
   STUDIO DOOR — padded sound-proof door, round window with the monitors' light
   inside, ON AIR light, MB. STUDIO nameplate, "Rendering… do not disturb" tag.
   ========================================================================== */
.door-face{
  background:
    radial-gradient(circle,rgba(0,0,0,.55) 2px,rgba(255,255,255,.07) 3px,transparent 4px) 0 0/64px 64px,   /* buttons of the padding */
    repeating-linear-gradient(45deg,transparent 0 44px,rgba(0,0,0,.45) 44px 45.5px),                     /* quilted diamonds */
    repeating-linear-gradient(-45deg,transparent 0 44px,rgba(0,0,0,.45) 44px 45.5px),
    radial-gradient(90% 70% at 50% 40%,rgba(255,255,255,.05),transparent 70%),
    linear-gradient(0deg,rgba(198,255,46,.22),transparent 3%),                                             /* light leaking under the door */
    linear-gradient(180deg,#1b1e17,#111310);
}
.door.left .door-face{border-right:3px solid #2c3027;box-shadow:inset -16px 0 30px -12px rgba(0,0,0,.8),inset 0 0 0 14px #15170f,inset 0 0 0 16px #2a2e25}
.door.right .door-face{border-left:3px solid #2c3027;box-shadow:inset 16px 0 30px -12px rgba(0,0,0,.8),inset 0 0 0 14px #15170f,inset 0 0 0 16px #2a2e25}

/* round window: you can see the glow of the monitors inside */
.door-face::before{left:50%;right:auto;top:31%;width:min(150px,17vw);height:auto;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  border:9px solid #2b2f27;outline:2px solid #3b4036;outline-offset:-2px;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.28),transparent 22%),
    radial-gradient(circle at 70% 75%,rgba(90,168,255,.35),transparent 45%),
    radial-gradient(circle at 40% 60%,rgba(198,255,46,.45),transparent 55%),
    #0b100c;
  box-shadow:inset 0 0 22px rgba(0,0,0,.85),0 0 40px rgba(198,255,46,.18),0 6px 14px rgba(0,0,0,.6);
  animation:stWindow 4s ease-in-out infinite}
@keyframes stWindow{0%,100%{filter:brightness(1)}45%{filter:brightness(1.25)}50%{filter:brightness(.85)}55%{filter:brightness(1.2)}}
/* brushed-metal kick plate at the bottom */
.door-face::after{left:8%;right:8%;bottom:3%;top:auto;height:6%;border-radius:4px;border:1px solid rgba(255,255,255,.08);
  background:repeating-linear-gradient(90deg,#2b2e28 0 2px,#22251f 2px 5px),#25281f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.6)}

/* bar handles: brushed metal with a lime LED line */
.handle{display:block;width:12px;height:170px;margin-top:-85px;border-radius:6px;
  background:linear-gradient(90deg,#4d5149,#cfd3c9 45%,#6a6e64 70%,#3c4038)!important;
  box-shadow:0 0 0 3px #181a14,0 10px 18px rgba(0,0,0,.75),0 0 16px rgba(198,255,46,.3)!important}
.handle::after{content:"";position:absolute;top:10%;bottom:10%;left:50%;width:2px;margin-left:-1px;border-radius:2px;background:#c6ff2e;box-shadow:0 0 8px #c6ff2e}

/* ON AIR light */
.door-onair{display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:6px;font:800 .82rem 'Poppins',sans-serif;letter-spacing:5px;
  color:#ffd9d2;background:linear-gradient(180deg,#5a1410,#2c0907);border:2px solid #1a1a16;
  box-shadow:0 0 0 2px #3a3e35,0 0 26px rgba(255,70,50,.55),inset 0 0 14px rgba(255,90,60,.6);text-shadow:0 0 10px #ff4d3d,0 0 2px #fff;
  animation:onAir 3.5s infinite}
.door-onair i{width:9px;height:9px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 10px #ff4d3d}
@keyframes onAir{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.55}52%{opacity:1}}

/* nameplate: brushed metal with screws */
.door-plaque{position:relative;padding:7px 24px;border-radius:6px;border:1px solid rgba(255,255,255,.18)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04)),repeating-linear-gradient(90deg,#3a3e36 0 2px,#30342c 2px 4px)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)!important;color:#eef1e6}
.door-plaque small{font:600 .62rem 'Poppins',sans-serif;letter-spacing:4px;font-style:normal;color:#c9cec0;vertical-align:middle;margin-left:4px}
.door-plaque::before,.door-plaque::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#8a8f84;box-shadow:inset 0 -1px 0 #444}
.door-plaque::before{left:8px}.door-plaque::after{right:8px}

/* "Rendering… do not disturb" tag hanging from the right handle */
.door-tag{position:absolute;left:50%;margin-left:-62px;top:calc(31% + min(150px,17vw) + 46px);width:124px;padding:30px 10px 12px;border-radius:8px 8px 10px 10px;text-align:center;
  background:linear-gradient(180deg,#e9e5d8,#cfcabb);color:#141510;box-shadow:0 10px 18px rgba(0,0,0,.6);
  transform-origin:62px -20px;animation:tagSwing 3.4s ease-in-out infinite;pointer-events:none;direction:ltr}
.door-tag::before{content:"";position:absolute;left:56px;top:8px;width:12px;height:12px;border-radius:50%;background:#111310;box-shadow:inset 0 1px 2px #000}
.door-tag::after{content:"";position:absolute;left:41px;top:-30px;width:42px;height:42px;border:2px solid #8a8f84;border-bottom:0;border-right:0;rotate:45deg;border-radius:2px 0 0 0}
.door-tag b{display:block;font:800 .76rem 'Poppins',sans-serif;color:#2c3a06;white-space:nowrap}
.door-tag b::before{content:"● ";color:#ff4d3d}
.door-tag small{display:block;font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;margin-top:3px;color:#4b4e44}
[dir=rtl] .door-tag{direction:rtl}[dir=rtl] .door-tag b,[dir=rtl] .door-tag small{font-family:'Cairo',sans-serif;letter-spacing:0}
@keyframes tagSwing{0%,100%{rotate:-4deg}50%{rotate:4deg}}

/* the light from the seam when it opens: monitor light from inside */
.door-light{background:
  linear-gradient(90deg,transparent 46%,rgba(235,255,200,.95) 50%,transparent 54%),
  radial-gradient(ellipse 50% 60% at 50% 50%,rgba(var(--glow),.5),rgba(90,168,255,.12) 60%,transparent 75%)}

@media (max-width:760px){
  .door-face::before{top:36%;width:24vw;border-width:6px}
  .door-tag{width:100px;margin-left:-50px;padding:26px 8px 10px;top:calc(36% + 24vw + 34px);transform-origin:50px -20px}.door-tag::before{left:44px}.door-tag::after{left:29px}
  .handle{height:120px;margin-top:-60px}
}
@media (prefers-reduced-motion:reduce){ .door-face::before,.door-onair,.door-tag{animation:none} }

/* ==========================================================================
   READABILITY over the studio
   ========================================================================== */
:root{--muted:#b9beb0}                                                 /* body text a bit brighter */
.hero-text{position:relative}
.hero-text::before{content:"";position:absolute;inset:-60px -90px -40px -120px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(9,10,8,.82),rgba(9,10,8,.55) 60%,transparent)}
.hero p,section.block p,.job p,.skill p,.proc-step p,.contact-info p{text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8)}
.hero h1,.name,.hello,section.block h2,.tag,.job h3,.proc-step h3,.skill h3{text-shadow:0 2px 16px rgba(0,0,0,.9)}
/* sections without their own panel get a soft dark backdrop */
.about-text,.timeline,.process{position:relative}
.about-text::before,.timeline::before,.process::before{content:"";position:absolute;inset:-30px -40px;z-index:-1;pointer-events:none;border-radius:40px;
  background:radial-gradient(closest-side,rgba(9,10,8,.7),rgba(9,10,8,.45) 70%,transparent)}