/* ==========================================================================
   MERIEM BEMBLI — HEADQUARTERS · A 3D WORLD
   One continuous CSS-3D space. The camera (a transform on #world) physically
   travels through it. No scene swaps for the arrival; portals fly the camera
   into museum wings.

   World units = px. Atrium: W 2600 · H 1400 · spans z -200 (entrance) .. -4600.
   ========================================================================== */

:root{
  --bg:#070605; --ink:#efe6d6; --ink-soft:rgba(239,230,214,.6); --ink-faint:rgba(239,230,214,.32);
  --gold:#d8b275; --gold-hi:#f4dca0; --gold-line:rgba(216,178,117,.30); --gold-glow:rgba(244,220,160,.5);
  --cyan:#8ed8e8; --cyan-deep:#2b6c7d;
  --font-display:"Cinzel",Georgia,serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.6,.01,.2,1);
}
html[data-mood="gold"]{ --cyan:#e7c98a; }
html[data-mood="cool"]{ --gold:#cdbfae; --gold-hi:#e8ddca; --gold-line:rgba(205,191,174,.28); --gold-glow:rgba(180,210,225,.45); --cyan:#9fe0ee; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ min-height:100%; background:#000; overflow-x:hidden; }
html.locked, html.locked body{ overflow:hidden; height:100%; }
body{ font-family:var(--font-body); color:var(--ink); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:rgba(244,220,160,.28); color:#fff; }

/* =====================================================================
   SCROLL DRIVER — a tall invisible column whose scroll drives the camera
   ===================================================================== */
#scroll-driver{ position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none; }

/* =====================================================================
   VIEWPORT + CAMERA RIG
   ===================================================================== */
#viewport{
  position:fixed; inset:0; overflow:hidden;
  background:#040303;
  perspective:1000px;
  perspective-origin:50% 46%;
  isolation:isolate;            /* contain inner blends/filters — stops GPU "black box" bleed */
}
#world{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d;
  transform:translateZ(0);
  will-change:transform;
}
.plane{ position:absolute; left:0; top:0; transform-style:preserve-3d; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.exterior, .atrium{ position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; }
#world.hide-interior .atrium{ visibility:hidden; }
#world.in-building .exterior{ display:none; }

/* ambient backdrop seen through the doorway / behind everything */
#skydome{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%, #182233 0%, #0c1018 36%, #070605 72%, #040303 100%);
}

/* =====================================================================
   ATRIUM SHELL — the enclosed grand hall
   ===================================================================== */
/* GPU-stability: keep big walls/floor as stable, non-flipping layers */
.atrium-floor, .atrium-ceil, .atrium-left, .atrium-right, .atrium-back{
  transform-origin:50% 50%;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}

/* FLOOR : polished dark stone w/ reflections + receding light grid */
.atrium-floor{
  width:5200px; height:5400px;
  transform:translate3d(0,720px,-2700px) rotateX(90deg) translate(-50%,-50%);
  background:
    radial-gradient(50% 36% at 50% 14%, rgba(244,220,160,.14), transparent 60%),
    linear-gradient(180deg, #14110d 0%, #0c0a08 40%, #0a0807 100%);
  box-shadow:inset 0 0 360px rgba(0,0,0,.9);
}
.atrium-floor::before{ /* reflective sheen + grid */
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(216,178,117,.05) 0 1px, transparent 1px 220px),
    repeating-linear-gradient(0deg, rgba(216,178,117,.045) 0 1px, transparent 1px 300px);
  -webkit-mask:linear-gradient(0deg, transparent, #000 60%);
          mask:linear-gradient(0deg, transparent, #000 60%);
}
.atrium-floor::after{ /* glossy center reflection of the hologram */
  content:""; position:absolute; left:50%; top:8%; width:34%; height:46%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, rgba(142,216,232,.22), transparent 70%);
  filter:blur(14px);
}

/* CEILING : dark with a long luminous trough */
.atrium-ceil{
  width:5200px; height:5400px;
  transform:translate3d(0,-720px,-2700px) rotateX(-90deg) translate(-50%,-50%);
  background:linear-gradient(180deg,#0b0a08,#100d0a 50%,#0b0a08);
}
.atrium-ceil::before{
  content:""; position:absolute; left:50%; top:0; width:120px; height:100%;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(244,220,160,.5), rgba(244,220,160,.16) 50%, rgba(244,220,160,.5));
  box-shadow:0 0 80px 30px rgba(244,220,160,.18);
}
.atrium-ceil::after{ /* side coffer light lines */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(244,220,160,.10) 0 3px, transparent 3px) 18% 0/ 1px 100% no-repeat,
    linear-gradient(90deg, rgba(244,220,160,.10) 0 3px, transparent 3px) 82% 0/ 1px 100% no-repeat;
}

/* SIDE WALLS : dark paneled stone w/ vertical light pilasters */
.atrium-left, .atrium-right{
  width:4400px; height:1400px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.6), transparent 30%, transparent 70%, rgba(0,0,0,.6)),
    linear-gradient(180deg, #0d0b09 0%, #161109 46%, #0a0807 100%);
}
.atrium-left{ transform:translate3d(-1300px,0,-3100px) rotateY(90deg) translate(-50%,-50%); }
.atrium-right{ transform:translate3d(1300px,0,-3100px) rotateY(-90deg) translate(-50%,-50%); }
.atrium-left::before, .atrium-right::before{ /* vertical pilaster light strips */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 540px, rgba(244,220,160,.16) 540px 543px, transparent 543px 560px);
  -webkit-mask:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
          mask:linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.atrium-left::after, .atrium-right::after{ /* base + cornice shadow lines */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(244,220,160,.10), transparent 10%),
    linear-gradient(0deg, rgba(0,0,0,.7), transparent 22%);
}

/* FAR WALL : faces camera, hosts THE ARSENAL portal; subtle showroom texture */
.atrium-back{
  width:5200px; height:1600px;
  transform:translate3d(0,0,-5400px) translate(-50%,-50%);
  background:
    radial-gradient(60% 90% at 50% 42%, rgba(216,178,117,.10), transparent 64%),
    linear-gradient(180deg,#0c0a08,#171008 55%,#0a0807);
}
.atrium-back::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 300px, rgba(244,220,160,.08) 300px 302px, transparent 302px 320px);
  -webkit-mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* =====================================================================
   PHOTOGRAPHIC MARBLE-ARCH DOOR
   Each door is the reference image, split into two glass leaves that swing
   open. Placed on the arc; faces the camera.
   ===================================================================== */
.door3d{
  position:absolute; left:0; top:0;
  transform-style:preserve-3d; cursor:pointer;
  --rh:84;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  transition:filter .45s var(--ease);
}
/* gold aura behind the door (hover bloom) */
.door-aura{
  position:absolute; inset:-44px; border-radius:50% 50% 10px 10px / 30% 30% 4% 4%;
  background:radial-gradient(60% 60% at 50% 40%, oklch(0.8 0.16 var(--rh)/.5), transparent 70%);
  opacity:.28; filter:blur(20px); transition:opacity .45s var(--ease);
}
/* warm interior light revealed when the doors open */
.door-light{
  position:absolute; inset:6%;
  background:
    radial-gradient(60% 80% at 50% 60%, #fff7e6 0%, oklch(0.9 0.12 var(--rh)/.85) 26%, oklch(0.6 0.16 var(--rh)/.4) 60%, transparent 80%);
  opacity:0; transition:opacity 1.2s var(--ease) .25s;
}
/* volumetric god-rays spilling from inside (revealed on open) */
.door-rays{
  position:absolute; left:50%; top:40%; width:120%; height:120%; transform:translate(-50%,-50%);
  background:
    conic-gradient(from 180deg at 50% 42%,
      transparent 0deg, oklch(0.92 0.1 var(--rh)/.0) 6deg,
      oklch(0.95 0.12 var(--rh)/.5) 9deg, transparent 12deg,
      transparent 28deg, oklch(0.95 0.12 var(--rh)/.4) 31deg, transparent 34deg,
      transparent 50deg, oklch(0.95 0.12 var(--rh)/.45) 53deg, transparent 56deg,
      transparent 124deg, oklch(0.95 0.12 var(--rh)/.45) 127deg, transparent 130deg,
      transparent 146deg, oklch(0.95 0.12 var(--rh)/.4) 149deg, transparent 152deg,
      transparent 168deg, oklch(0.95 0.12 var(--rh)/.5) 171deg, transparent 174deg);
  -webkit-mask:radial-gradient(60% 70% at 50% 42%, #000 10%, transparent 75%);
          mask:radial-gradient(60% 70% at 50% 42%, #000 10%, transparent 75%);
  opacity:0; transition:opacity 1.1s var(--ease) .4s; filter:blur(2px);
}
/* light particles drifting out of the doorway */
.door-sparks{ position:absolute; left:0; bottom:6%; width:100%; height:88%; pointer-events:none; }
.door-sparks i{ position:absolute; bottom:0; width:5px; height:5px; border-radius:50%;
  background:oklch(0.96 0.1 var(--rh)); box-shadow:0 0 12px oklch(0.9 0.14 var(--rh));
  opacity:0; }
.door3d.open .door-rays{ opacity:.9; animation:rayturn 14s linear infinite; }
@keyframes rayturn{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.door3d.open .door-sparks i{ animation:doorspark var(--sd,3s) linear var(--sdl,0s) infinite; }
@keyframes doorspark{ 0%{ transform:translateY(0) scale(.5); opacity:0; } 14%{ opacity:1; } 80%{ opacity:.5; } 100%{ transform:translateY(-78%) scale(1.1); opacity:0; } }

/* the two swinging leaves */
.leaf{
  position:absolute; top:0; height:100%; width:50%; overflow:hidden;
  backface-visibility:hidden;
  transition:transform 1.6s cubic-bezier(.62,.02,.2,1);
  box-shadow:inset 0 0 60px rgba(0,0,0,.45);
}
.leaf.l{ left:0;  transform-origin:left center; }
.leaf.r{ right:0; transform-origin:right center; }
.leaf img{ position:absolute; top:0; height:100%; width:200%; max-width:none; object-fit:cover; animation:doorimgfade .6s ease both; }
.leaf.l img{ left:0; }
.leaf.r img{ right:0; }
@keyframes doorimgfade{ from{ opacity:0; } to{ opacity:1; } }
/* marble blur-up placeholder shown until each room photo decodes */
.leaf-fill{ position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 26%, oklch(0.34 0.06 var(--rh)/.5), transparent 60%),
    repeating-linear-gradient(118deg, rgba(244,220,160,.05) 0 2px, transparent 2px 80px),
    linear-gradient(180deg, #15120c 0%, #0b0907 60%, #080605 100%); }
.door-loading{ position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  font-size:90px; color:oklch(0.85 0.1 var(--rh)); opacity:.4; pointer-events:none;
  animation:doorpulse 1.6s ease-in-out infinite; }
@keyframes doorpulse{ 0%,100%{ opacity:.22; } 50%{ opacity:.5; } }
/* hinge open */
.door3d.open .leaf.l{ transform:rotateY(112deg); }
.door3d.open .leaf.r{ transform:rotateY(-112deg); }
.door3d.open .door-light{ opacity:1; }
.door3d.open .door-rim{ opacity:0; }
.door3d.open .door-cap{ opacity:0; }

/* gold rim framing the arch (drawn over the image edge) */
.door-rim{
  position:absolute; inset:0; pointer-events:none; border-radius:46% 46% 8px 8px / 30% 30% 3% 3%;
  box-shadow:
    inset 0 0 0 2px oklch(0.78 0.12 var(--rh)/.5),
    inset 0 0 60px oklch(0.55 0.14 var(--rh)/.35),
    0 50px 120px rgba(0,0,0,.6);
  transition:box-shadow .45s var(--ease), opacity .6s var(--ease);
}
.door3d:hover .door-aura{ opacity:.6; }
.door3d:hover .door-rim{ box-shadow:inset 0 0 0 2px oklch(0.86 0.16 var(--rh)/.85), inset 0 0 70px oklch(0.7 0.16 var(--rh)/.5), 0 50px 130px rgba(0,0,0,.6); }
.door3d:hover{ filter:brightness(1.07); }
.door3d.arming{ filter:brightness(1.18); }
.door3d.arming .door-aura{ opacity:.9; }
.door3d.arming .door-rim{ box-shadow:inset 0 0 0 3px oklch(0.9 0.16 var(--rh)/.9), inset 0 0 90px oklch(0.78 0.18 var(--rh)/.6), 0 50px 130px rgba(0,0,0,.6); }
.door3d.arming .door-light{ opacity:.5; }
.door3d.behind{ visibility:hidden; }
.door3d.near .door-aura{ opacity:.5; }
.door3d.near .door-rim{ box-shadow:inset 0 0 0 2px oklch(0.86 0.16 var(--rh)/.8), inset 0 0 70px oklch(0.7 0.16 var(--rh)/.45), 0 50px 130px rgba(0,0,0,.6); }
.door3d.near .door-cap{ opacity:1; }

/* floor reflection of the door */
.door-reflect{
  position:absolute; left:0; top:100%; width:100%; height:46%;
  background-size:cover; background-position:center top;
  transform:scaleY(-1); opacity:.16; filter:blur(2px); pointer-events:none;
  -webkit-mask:linear-gradient(180deg,#000,transparent 72%);
          mask:linear-gradient(180deg,#000,transparent 72%);
}

/* "ENTER" affordance */
.door-cap{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; transition:opacity .4s var(--ease); pointer-events:none; text-align:center;
}
.door3d:hover .door-cap{ opacity:1; }
.dc-enter{ font-family:var(--font-mono); font-size:13px; letter-spacing:.42em; color:#fff;
  padding:9px 20px; border:1px solid oklch(0.85 0.14 var(--rh)/.7); border-radius:30px;
  background:rgba(10,8,6,.45); backdrop-filter:blur(4px); box-shadow:0 0 26px oklch(0.8 0.16 var(--rh)/.45); }
.dc-idx{ font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; color:rgba(255,255,255,.6); }

/* STYLED door (Growth Center — no reference image) */
.leaf-marble{ position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 30%, oklch(0.32 0.06 var(--rh)/.5), transparent 60%),
    repeating-linear-gradient(118deg, rgba(244,220,160,.05) 0 2px, transparent 2px 90px),
    linear-gradient(180deg, #14110c 0%, #0b0907 60%, #080605 100%);
}
.door3d.styled .leaf{ box-shadow:inset 0 0 80px rgba(0,0,0,.7); }
.door-frame{
  position:absolute; inset:3%; pointer-events:none; text-align:center;
  border-radius:46% 46% 6px 6px / 30% 30% 2% 2%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:9%;
}
.df-title{ font-family:var(--font-display); font-size:46px; letter-spacing:.1em; color:var(--gold-hi); text-shadow:0 0 30px oklch(0.8 0.16 var(--rh)/.7); }
.df-tag{ font-family:var(--font-body); font-size:19px; letter-spacing:.04em; color:oklch(0.85 0.08 var(--rh)); margin-top:10px; }
.df-seal{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-size:120px; color:oklch(0.85 0.12 var(--rh)); opacity:.42; text-shadow:0 0 50px oklch(0.8 0.16 var(--rh)/.6); }
.door3d.styled .door-rim{ box-shadow:inset 0 0 0 3px oklch(0.8 0.14 var(--rh)/.7), inset 0 0 70px oklch(0.55 0.16 var(--rh)/.4), 0 50px 120px rgba(0,0,0,.6); }

/* =====================================================================
   AI HOLOGRAM — digital twin of Meriem (atrium center, low so it never
   blocks a portal arch)
   ===================================================================== */

/* DEDICATED 2D LAYER — sits on its own z-plane, never inside the doors' 3D
   space, so it can never coplanar-intersect / slice through a portal. */
#holo-layer{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  display:grid; place-items:center;
  opacity:0; transition:opacity .7s var(--ease);
  isolation:isolate;            /* keep htint/hscan screen-blends inside this layer only */
}
#holo-layer.show{ opacity:1; }
.holo-stage{
  position:relative; width:330px; height:520px;
  transform:translate(0,5vh); transform-style:flat; will-change:transform,opacity;
}

/* portrait */
.holo-portrait{
  position:absolute; left:50%; top:0; width:300px; height:432px; transform:translateX(-50%);
  z-index:2; animation:holohover 6s ease-in-out infinite;
}
@keyframes holohover{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-16px); } }
.holo-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 16%;
  border-radius:50% 50% 46% 46% / 30% 30% 8% 8%;
  -webkit-mask:linear-gradient(180deg, rgba(0,0,0,.99) 64%, rgba(0,0,0,.34) 88%, transparent);
          mask:linear-gradient(180deg, rgba(0,0,0,.99) 64%, rgba(0,0,0,.34) 88%, transparent);
  filter:contrast(1.05) brightness(1.06) saturate(1.16)
         drop-shadow(0 0 56px rgba(110,200,255,.6)) drop-shadow(0 0 20px rgba(150,225,255,.45));
  opacity:.94; animation:holoflick 7s steps(1) infinite;
}
@keyframes holoflick{ 0%,93%,100%{opacity:.94;} 94%{opacity:.72;} 95%{opacity:1;} 96%{opacity:.82;} }
/* cyan holographic wash — light enough to keep the face clear */
.holo-portrait .htint{
  position:absolute; inset:0; border-radius:50% 50% 46% 46% / 30% 30% 8% 8%;
  background:linear-gradient(180deg, rgba(120,205,255,.4), rgba(110,190,245,.22) 55%, rgba(150,210,255,.12) 84%, transparent);
  mix-blend-mode:screen;
  -webkit-mask:linear-gradient(180deg, #000 66%, transparent);
          mask:linear-gradient(180deg, #000 66%, transparent);
}
/* subtle digital scan lines */
.holo-portrait .hscan{
  position:absolute; inset:0; border-radius:50% 50% 46% 46% / 30% 30% 8% 8%;
  background:repeating-linear-gradient(0deg, rgba(150,220,255,.16) 0 2px, transparent 2px 7px);
  mix-blend-mode:screen; animation:hscan 5s linear infinite; opacity:.7;
}
@keyframes hscan{ to{ background-position:0 180px; } }
/* AI glow halo behind the head */
.holo-portrait::before{
  content:""; position:absolute; left:50%; top:28%; width:130%; height:84%; transform:translate(-50%,-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(120,200,255,.4), transparent 70%);
  filter:blur(24px); z-index:-1; animation:holopulse 4s ease-in-out infinite;
}
@keyframes holopulse{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

/* vertical AI light beam (behind) */
.holo-beam{
  position:absolute; left:50%; top:-4%; width:230px; height:560px; transform:translateX(-50%); z-index:0;
  background:linear-gradient(180deg, rgba(120,200,255,0), rgba(120,200,255,.2) 42%, rgba(150,220,255,.32) 100%);
  -webkit-mask:linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
          mask:linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  filter:blur(7px);
}
/* plinth disc */
.holo-disc{
  position:absolute; left:50%; bottom:36px; width:440px; height:120px; transform:translateX(-50%); z-index:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(130,205,255,.5), rgba(244,220,160,.1) 52%, transparent 72%);
  filter:blur(5px);
}
/* orbiting AI rings (centered behind the figure) */
.holo-rings{ position:absolute; left:50%; top:48%; width:430px; height:430px; transform:translate(-50%,-50%); z-index:1; }
.holo-rings .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(120,200,255,.28); }
.holo-rings .ring.r2{ inset:9%; border-color:rgba(160,225,255,.4); border-style:dashed; }
.holo-rings .ring.r3{ inset:20%; border-color:rgba(120,200,255,.22); }
.holo-rings .spin{ animation:spin 28s linear infinite; }
.holo-rings .spin.rev{ animation-direction:reverse; animation-duration:40s; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* floating particles around the hologram */
.holo-particles{ position:absolute; left:50%; top:0; width:360px; height:470px; transform:translateX(-50%); z-index:3; pointer-events:none; }
.holo-particles i{ position:absolute; bottom:0; width:5px; height:5px; border-radius:50%; background:rgba(150,220,255,.9);
  box-shadow:0 0 10px rgba(120,200,255,.9); animation:holorise var(--d,7s) linear infinite; animation-delay:var(--dl,0s); opacity:0; }
@keyframes holorise{ 0%{ bottom:0%; transform:scale(.6); opacity:0; } 12%{ opacity:.9; } 90%{ opacity:.5; } 100%{ bottom:100%; transform:scale(1.1); opacity:0; } }

/* name plate */
.holo-name{ position:absolute; left:50%; bottom:-58px; transform:translateX(-50%); text-align:center; white-space:nowrap; z-index:4; }
.holo-name b{ font-family:var(--font-display); font-size:30px; letter-spacing:.2em; color:#eaf6ff; display:block;
  text-shadow:0 0 30px rgba(120,200,255,.7); }
.holo-name span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.36em; color:#9fdcff; text-transform:uppercase; }


/* =====================================================================
   EXTERIOR — full-screen approach layer (scales toward the doors)
   ===================================================================== */
.ext-screen{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  background:#06080c url(../assets/exterior.webp) center 50%/cover no-repeat;
  transform-origin:50% 54%; will-change:transform,opacity;
}
.ext-screen::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 54%, transparent 36%, rgba(4,3,3,.55) 100%);
}

/* =====================================================================
   THE MB ENTRANCE — the building's OWN door, sliced from exterior.webp into
   two halves (positioned by JS) that slide apart; warm light shows behind.
   driven by --open (0..1) and --glow (0..1) from the scroll engine
   ===================================================================== */
.ext-door{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0;
  transform-origin:50% 54%; transform:scale(1);
  --open:0; --glow:0;
  will-change:transform,opacity;
}
/* warm gold light revealed behind the parting doors (rect set by JS) */
.ext-door .exd-light{
  position:absolute; border-radius:4px;
  background:
    radial-gradient(56% 72% at 50% 52%, #fff6e2 0%, #f4dca0 28%, rgba(216,178,117,.6) 58%, rgba(40,28,14,.85) 88%),
    linear-gradient(180deg, #1c140b, #0d0a07);
  opacity:var(--glow); filter:blur(1px);
}
/* rising gold particles inside the doorway (rect set by JS) */
.ext-door .exd-particles{ position:absolute; overflow:hidden; opacity:var(--glow); }
.ext-door .exd-particles i{ position:absolute; bottom:0; width:4px; height:4px; border-radius:50%;
  background:#fbe6b4; box-shadow:0 0 10px #f4dca0; opacity:0;
  animation:exdrise var(--pd,3.4s) linear var(--pdl,0s) infinite; }
@keyframes exdrise{ 0%{ bottom:0%; transform:scale(.5); opacity:0; } 16%{ opacity:1; } 86%{ opacity:.5; } 100%{ bottom:100%; transform:scale(1.05); opacity:0; } }

/* the two real door halves cut from the building image (bg + rect set by JS) */
.ext-door .exd-leaf{
  position:absolute; overflow:hidden; background-repeat:no-repeat; backface-visibility:hidden;
  will-change:transform;
}
.ext-door .exd-leaf.l{ transform:translateX(calc(var(--open) * -116%));
  box-shadow:inset -12px 0 26px -10px rgba(244,220,160,calc(var(--glow)*.7)); }
.ext-door .exd-leaf.r{ transform:translateX(calc(var(--open) * 116%));
  box-shadow:inset 12px 0 26px -10px rgba(244,220,160,calc(var(--glow)*.7)); }

/* atmospheric fog slabs (kept subtle, screen-space) */
.fog{
  width:6000px; height:3000px; transform-origin:50% 50%;
  background:radial-gradient(60% 60% at 50% 60%, rgba(120,150,180,.05), transparent 70%);
  pointer-events:none;
}

/* moving light streaks during approach */
.ext-streaks{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; opacity:.5; }
.streak{ position:absolute; width:2px; height:140px;
  background:linear-gradient(180deg, transparent, rgba(244,220,160,.5), transparent);
  filter:blur(1px); animation:streak 3.4s linear infinite; }
@keyframes streak{ from{ transform:translateY(-30vh) scaleY(.6); opacity:0; } 20%{opacity:.8;} to{ transform:translateY(120vh) scaleY(1.4); opacity:0; } }

/* big arrival title (screen-space overlay, fades on approach) */
.arr-title{ position:fixed; left:0; right:0; top:42%; transform:translateY(-50%); text-align:center; z-index:6; pointer-events:none; padding:0 6vw; }
.arr-title .eyebrow{ font-family:var(--font-mono); font-size:13px; letter-spacing:.55em; color:var(--gold); text-transform:uppercase; margin-bottom:24px; }
.arr-title h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,8vw,120px); line-height:.96; letter-spacing:.06em;
  text-shadow:0 2px 50px rgba(0,0,0,.7), 0 0 70px rgba(244,220,160,.12); }
.arr-title h1 .amp{ color:var(--gold-hi); }
.arr-title .tagline{ margin-top:28px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; font-size:14px; letter-spacing:.18em; color:var(--ink-soft); text-transform:uppercase; }
.arr-title .tagline span+span::before{ content:"·"; margin-right:20px; color:var(--gold); }

/* atmospheric vignette + grain over everything */
#vignette{ position:fixed; inset:0; z-index:40; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%, transparent 42%, rgba(4,3,3,.7) 100%); }
.grain{ position:fixed; inset:0; z-index:41; pointer-events:none; opacity:.04;
  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"); }

/* white/gold bloom used at the peak of camera moves */
#bloom{ position:fixed; inset:0; z-index:45; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, #fff 0%, var(--gold-hi) 16%, rgba(244,220,160,.3) 38%, transparent 70%);
  will-change:opacity,transform; }

/* =====================================================================
   HUD
   ===================================================================== */
#hud{ position:fixed; inset:0; z-index:50; pointer-events:none; }
#hud > *{ pointer-events:auto; }
.hud-brand{ position:absolute; top:26px; left:30px; display:flex; align-items:center; gap:14px; }
.hud-seal{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--gold-line);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.05em;
  color:var(--gold-hi); box-shadow:0 0 24px rgba(244,220,160,.18), inset 0 0 12px rgba(244,220,160,.12);
  background:radial-gradient(circle at 50% 40%, rgba(244,220,160,.1), transparent 70%); }
.hud-name{ font-family:var(--font-display); letter-spacing:.22em; font-size:13px; color:var(--ink); }
.hud-name small{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.32em; color:var(--ink-faint); margin-top:3px; }
.hud-tools{ position:absolute; top:30px; right:28px; display:flex; gap:10px; }
.hud-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--gold-line); color:var(--ink-soft);
  display:grid; place-items:center; transition:.3s var(--ease); backdrop-filter:blur(6px); background:rgba(10,8,6,.3); }
.hud-btn:hover{ color:var(--gold-hi); border-color:var(--gold); box-shadow:0 0 18px rgba(244,220,160,.25); }
.hud-btn svg{ width:18px; height:18px; }
.hud-coord{ position:absolute; left:30px; bottom:24px; font-family:var(--font-mono); font-size:10px; letter-spacing:.28em; color:var(--ink-faint); }
.skip-intro{ position:absolute; right:30px; bottom:24px; font-family:var(--font-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid transparent; transition:.3s var(--ease); }
.skip-intro:hover{ color:var(--gold-hi); border-color:var(--gold); }

.atrium-nav{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:flex; gap:4px; align-items:center;
  padding:8px 10px; border:1px solid var(--gold-line); border-radius:40px; background:rgba(10,8,6,.5); backdrop-filter:blur(12px); box-shadow:0 14px 40px rgba(0,0,0,.5); }
.atrium-nav button{ display:flex; align-items:center; gap:8px; padding:9px 15px; border-radius:30px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); transition:.25s var(--ease); --rh:84; white-space:nowrap; }
.atrium-nav button:hover{ color:oklch(0.92 0.1 var(--rh)); background:oklch(0.82 0.16 var(--rh)/.14); }
.atrium-nav button .dot{ width:6px; height:6px; border-radius:50%; background:oklch(0.82 0.14 var(--rh)); box-shadow:0 0 10px oklch(0.82 0.16 var(--rh)); }

/* look-around hint */
.look-hint{ position:absolute; left:50%; bottom:88px; transform:translateX(-50%); display:flex; align-items:center; gap:16px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
.look-hint .lh-arrow{ font-size:22px; color:var(--gold); opacity:.7; animation:lharrow 2.4s ease-in-out infinite; }
.look-hint .lh-arrow:last-child{ animation-delay:1.2s; }
@keyframes lharrow{ 0%,100%{ opacity:.3; } 50%{ opacity:.9; } }

/* scroll hint */
.scroll-hint{ position:fixed; left:50%; bottom:40px; transform:translateX(-50%); z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.4em; color:var(--ink-soft); text-transform:uppercase; pointer-events:none; }
.scroll-hint .rail{ width:1px; height:46px; background:linear-gradient(var(--gold), transparent); position:relative; overflow:hidden; }
.scroll-hint .rail::after{ content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--gold-hi); animation:railrun 2.2s var(--ease) infinite; }
@keyframes railrun{ to{ top:120%; } }

/* loader */
#loader{ position:fixed; inset:0; z-index:200; background:#040303; display:grid; place-items:center; transition:opacity .8s ease; }
#loader.hide{ opacity:0; pointer-events:none; }
#loader .l-seal{ width:64px; height:64px; border-radius:50%; border:1.5px solid var(--gold-line); display:grid; place-items:center; font-family:var(--font-display); font-size:22px; color:var(--gold-hi); position:relative; }
#loader .l-seal::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid transparent; border-top-color:var(--gold); animation:spin 1.1s linear infinite; }
#loader .l-text{ position:absolute; bottom:36%; font-family:var(--font-mono); font-size:10px; letter-spacing:.4em; color:var(--ink-faint); text-transform:uppercase; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; } }

/* ---- pause atrium animations while the visitor is NOT in the atrium ---- */
body.anims-paused .holo-rings .spin,
body.anims-paused .holo-portrait,
body.anims-paused .holo-portrait img,
body.anims-paused .holo-portrait::before,
body.anims-paused .hscan,
body.anims-paused .holo-particles i,
body.anims-paused .door-sparks i,
body.anims-paused .door3d.open .door-rays,
body.anims-paused .door-loading{ animation-play-state:paused !important; }

/* =====================================================================
   CV DOWNLOAD — recruiter CTA + premium button + quick actions
   (gold by default; inside a .wing it adopts the room accent --acc)
   ===================================================================== */
.cv-cta{
  --cv:var(--gold); --cv-hi:var(--gold-hi); --cv-glow:rgba(244,220,160,.5);
  text-align:center; max-width:560px; margin:0 auto;
}
.wing .cv-cta{ --cv:var(--acc); --cv-hi:#fff; --cv-glow:var(--acc-glow); }
.cv-cta .cv-line{
  font-family:var(--font-display); font-size:clamp(19px,2.4vw,26px); line-height:1.45; letter-spacing:.01em;
  color:var(--ink); margin-bottom:6px;
}
.cv-cta .cv-sub{ font-size:14px; line-height:1.6; color:var(--ink-soft); margin-bottom:22px; }

.cv-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; }

/* primary download button */
.cv-btn{
  pointer-events:auto; display:inline-flex; align-items:center; gap:11px; cursor:pointer;
  padding:15px 28px; border-radius:44px; position:relative; overflow:hidden;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:#120d08; border:1px solid var(--cv-hi);
  background:linear-gradient(180deg, var(--cv-hi), var(--cv));
  box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 26px var(--cv-glow);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.cv-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 16px 40px rgba(0,0,0,.5), 0 0 40px var(--cv-glow); }
.cv-btn:active{ transform:translateY(0); }
.cv-btn svg{ width:17px; height:17px; }
.cv-btn .dl{ display:inline-block; }
.cv-btn:hover .dl{ animation:cvbob .6s var(--ease); }
@keyframes cvbob{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(3px); } }
/* sheen sweep on hover */
.cv-btn::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); opacity:0; }
.cv-btn:hover::after{ animation:cvsheen .8s var(--ease); }
@keyframes cvsheen{ 0%{ left:-60%; opacity:.8; } 100%{ left:130%; opacity:0; } }

/* secondary quick-action pills */
.cv-act{
  pointer-events:auto; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:13px 20px; border-radius:44px; text-decoration:none;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; color:var(--ink);
  border:1px solid color-mix(in oklch, var(--cv) 45%, transparent);
  background:rgba(10,8,6,.42); transition:.3s var(--ease);
}
.cv-act:hover{ color:var(--cv-hi); border-color:var(--cv); box-shadow:0 0 22px var(--cv-glow); transform:translateY(-1px); }
.cv-act svg{ width:15px; height:15px; }

/* hero placement — compact, sits under the tagline */
.arr-cta{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px; pointer-events:none; }
.arr-cta .cv-actions{ pointer-events:auto; }

@media (max-width:760px){
  .cv-actions{ gap:9px; }
  .cv-btn{ padding:14px 22px; font-size:11px; }
  .cv-act{ padding:12px 16px; font-size:11px; }
  .arr-cta{ margin-top:26px; }
}