/* ============================================================
   AVAREX CORE — ROOM IDENTITY LAYER (rooms.css)
   Additive only. Each scene = a room with its own environment
   + small touchable objects. Morning/Dusk only; Night untouched.
   ============================================================ */

.room-env {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.room-env * { pointer-events: none; }
.room-env .ro { pointer-events: auto; cursor: pointer; }

/* every room section must be a positioning context */
.has-room-env { position: relative; }
.has-room-env > *:not(.room-env) { position: relative; z-index: 1; }

/* Night: rooms stay exactly as approved — no env at all */
body.night .room-env { display: none; }

/* ---------- shared pieces ---------- */
.re-photo {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  opacity: 0.16;
  animation: re-kenburns 26s ease-in-out infinite alternate;
}
body.golden-hour .re-photo, body.dusk .re-photo {
  filter: sepia(0.35) saturate(1.15) hue-rotate(-8deg) brightness(0.92);
}
@keyframes re-kenburns {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.4%); }
}
.re-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%,
              rgba(250,248,242,0.82), rgba(250,248,242,0.45) 60%, transparent);
}
body.golden-hour .re-scrim, body.dusk .re-scrim {
  background: radial-gradient(ellipse 70% 60% at 50% 45%,
              rgba(247,238,220,0.80), rgba(247,238,220,0.42) 60%, transparent);
}

/* ── THE GOLD PATH — the magic guide weaving through the journey ── */
#gold-path {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 3; pointer-events: none; overflow: visible;
}
#gold-path svg { position: absolute; inset: 0; overflow: visible; }
#gold-path .gp-line {
  fill: none; stroke: #e0bc4a; stroke-width: 1.6; stroke-linecap: round;
  opacity: 0.6;
}
#gold-path .gp-glow {
  fill: none; stroke: rgba(230,198,90,0.35); stroke-width: 6;
  stroke-linecap: round; filter: blur(4px);
}
#gold-path .gp-head {
  position: absolute; top: 0; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6d8, #e6c65a 55%, rgba(201,162,39,0.0) 75%);
  box-shadow: 0 0 18px 5px rgba(230,198,90,0.55);
  animation: gp-pulse 1.8s ease-in-out infinite;
}
@keyframes gp-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.5); }
}
.gp-spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #f4df8f;
  box-shadow: 0 0 6px rgba(244,223,143,0.9);
  animation: gp-spark .9s ease-out forwards;
  pointer-events: none;
}
@keyframes gp-spark {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
@media (max-width: 720px) {
  #gold-path .gp-line { stroke-width: 1.2; opacity: 0.45; }
  #gold-path .gp-glow { stroke-width: 4; }
}

/* ── SCROLL-SCRUB TRANSITION — the camera move you control by scrolling ── */
.scrub-scene { position: relative; height: 260vh; background: #0b0d0a; }
body.night .scrub-scene { display: none; } /* Night stays classic */
.scrub-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.scrub-sticky video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.scrub-cap {
  position: relative; z-index: 2; text-align: center; padding: 0 24px;
  opacity: 0; transition: opacity .4s ease;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.scrub-cap .scrub-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .35em;
  text-transform: uppercase; color: #e6c65a;
}
.scrub-cap h3 {
  margin-top: 10px; font-size: clamp(26px,4.5vw,46px);
  font-weight: 800; color: #fff;
}
.scrub-hint {
  position: absolute; bottom: 6%; left: 0; right: 0; z-index: 2;
  text-align: center; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(244,243,236,.55);
}

/* photoreal room media (auto-activates when files exist) */
.re-video {
  position: absolute; inset: -2%;
  width: 104%; height: 104%;
  object-fit: cover;
  opacity: 0.22;
}
body.golden-hour .re-video, body.dusk .re-video {
  filter: sepia(0.35) saturate(1.15) hue-rotate(-8deg) brightness(0.92);
}
/* when a real photo/video is present, hide the CSS stand-in scenery
   (touchable .ro objects stay) */
.room-env.has-photo .re-desk,
.room-env.has-photo .re-paper,
.room-env.has-photo .re-sticky,
.room-env.has-photo .re-phoneglow,
.room-env.has-photo .re-blueprint,
.room-env.has-photo .re-thread,
.room-env.has-photo .re-pegboard,
.room-env.has-photo .re-bench,
.room-env.has-photo .re-window,
.room-env.has-photo .re-table { display: none; }

/* sprite images shot on white — multiply hides the white */
.re-sprite {
  position: absolute;
  background-size: contain; background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.9;
  filter: drop-shadow(0 8px 18px rgba(60,45,20,0.18));
}

/* touchable objects: idle float + hover lift */
.ro {
  position: absolute;
  animation: ro-float 5s ease-in-out infinite;
  transition: transform .25s ease;
  will-change: transform;
}
.ro:hover { transform: translateY(-4px) scale(1.05); }
.ro:nth-child(odd)  { animation-duration: 6.2s; }
.ro:nth-child(3n)   { animation-delay: 1.2s; }
@keyframes ro-float {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -4px; }
}
.room-env.paused .ro, .room-env.paused .re-photo { animation-play-state: paused; }

/* hide small objects on narrow phones so they never crowd content */
@media (max-width: 540px) { .ro { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .re-photo, .ro { animation: none !important; }
}

/* ============================================================
   ROOM: THE NOISE — a cluttered desk late at night
   ============================================================ */
.re-noise .re-desk {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(72,58,38,0.20), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% -20%, rgba(20,18,14,0.14), transparent 60%);
}
.re-noise .re-paper {
  position: absolute;
  width: 90px; height: 62px; border-radius: 3px;
  background: linear-gradient(175deg, rgba(240,234,220,0.55), rgba(214,206,188,0.45));
  box-shadow: 0 4px 10px rgba(40,30,15,0.12);
}
.re-noise .re-sticky {
  position: absolute;
  width: 44px; height: 44px;
  background: rgba(222,193,110,0.55);
  box-shadow: 0 3px 8px rgba(40,30,15,0.14);
  transform: rotate(-6deg);
}
.re-noise .re-phoneglow {
  position: absolute;
  width: 44px; height: 84px; border-radius: 9px;
  background: linear-gradient(rgba(35,38,34,0.85), rgba(28,30,27,0.85));
  box-shadow: 0 0 26px rgba(120,200,150,0.28);
}
.re-noise .re-phoneglow::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(88,201,139,0.5) 30%, rgba(224,117,113,0.45) 70%);
  opacity: 0.6;
}
.re-noise .re-crumple {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(242,236,222,0.9), rgba(196,188,168,0.85) 65%, rgba(160,150,130,0.8));
  box-shadow: inset -3px -4px 6px rgba(90,80,60,0.25), 0 4px 8px rgba(40,30,15,0.15);
}
.re-noise .re-coffee {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(58,38,22,0.85) 38%, rgba(233,225,208,0.9) 40% 58%, rgba(210,200,180,0.85) 60%);
  box-shadow: 0 4px 10px rgba(40,30,15,0.18);
}

/* ============================================================
   ROOM: THE METHOD — drafting table, roadmap, gold thread
   ============================================================ */
.re-method .re-blueprint {
  position: absolute; inset: 8% 6%;
  border-radius: 6px;
  background:
    repeating-linear-gradient(rgba(120,100,60,0.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(120,100,60,0.05) 0 1px, transparent 1px 34px),
    linear-gradient(178deg, rgba(247,242,230,0.28), rgba(238,230,212,0.20));
}
.re-method .re-thread {
  position: absolute; left: 4%; right: 4%; top: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,0.75) 12% 88%, transparent);
  box-shadow: 0 0 12px rgba(201,162,39,0.35);
  transform: rotate(-2.5deg);
}
.re-method .re-pin {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e6c65a, #a8841b 70%);
  box-shadow: 0 2px 6px rgba(90,70,20,0.4);
}
.re-method .re-pencil {
  width: 78px; height: 7px; border-radius: 3px;
  background: linear-gradient(90deg, #3a3630 8%, #caa257 8% 88%, #efe4cf 88% 94%, #2c2a26 94%);
  transform: rotate(-14deg);
  box-shadow: 0 3px 7px rgba(60,45,20,0.25);
}

/* ============================================================
   ROOM: ACADEMY — study corner by the window (real photo)
   ============================================================ */
.re-academy .re-photo { background-image: url('assets/study_moment.jpg'); opacity: 0.20; }
.re-academy .re-book {
  width: 84px; height: 58px; border-radius: 3px 8px 8px 3px;
  background:
    linear-gradient(90deg, #8a6d1d 0 8px, rgba(246,241,229,0.95) 8px),
    #f6f1e5;
  box-shadow: 0 6px 14px rgba(60,45,20,0.22);
}
.re-academy .re-book::after {
  content: ""; position: absolute; inset: 8px 10px 8px 16px;
  background: repeating-linear-gradient(rgba(120,105,70,0.35) 0 1px, transparent 1px 8px);
}
.re-academy .re-marker {
  width: 64px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #2e5c46 0 12%, #efe9da 12% 88%, #2e5c46 88%);
  transform: rotate(8deg);
  box-shadow: 0 3px 7px rgba(60,45,20,0.22);
}

/* ============================================================
   ROOM: APP LAB — tidy workbench with pegboard
   ============================================================ */
.re-apps .re-pegboard {
  position: absolute; inset: 0 0 40% 0;
  background:
    radial-gradient(circle 2.5px at 20px 20px, rgba(120,100,60,0.14) 98%, transparent) 0 0/44px 44px,
    linear-gradient(rgba(226,216,196,0.16), rgba(226,216,196,0.05));
}
.re-apps .re-bench {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: linear-gradient(rgba(150,118,74,0.22), rgba(110,86,52,0.26));
}
.re-apps .re-tools { background-image: url('assets/obj_phone_chart_glasses.jpg'); }
.re-apps .re-wrench {
  width: 58px; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #b0aca3, #8e8a81);
  transform: rotate(-30deg);
  box-shadow: 0 3px 7px rgba(50,45,35,0.3);
}
.re-apps .re-wrench::before, .re-apps .re-wrench::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 5px solid #a29e95; top: -5px;
}
.re-apps .re-wrench::before { left: -12px; }
.re-apps .re-wrench::after  { right: -12px; }

/* ============================================================
   ROOM: COMMUNITY — long shared table by the windows
   ============================================================ */
.re-community .re-window {
  position: absolute; inset: 0 0 34% 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(250,244,226,0.18) 12% 30%, transparent 30% 38%,
      rgba(250,244,226,0.18) 38% 56%, transparent 56% 64%, rgba(250,244,226,0.18) 64% 82%, transparent 82%);
}
.re-community .re-table {
  position: absolute; left: -4%; right: -4%; bottom: 0; height: 30%;
  background: linear-gradient(rgba(168,132,84,0.20), rgba(122,94,58,0.26));
  border-top: 2px solid rgba(122,94,58,0.25);
}
.re-community .re-mug {
  width: 34px; height: 30px; border-radius: 4px 4px 8px 8px;
  background: linear-gradient(#f0e9d8, #d8cfba);
  box-shadow: 0 4px 9px rgba(60,45,20,0.22);
}
.re-community .re-mug::after {
  content: ""; position: absolute; right: -10px; top: 6px;
  width: 12px; height: 14px; border: 3px solid #d8cfba; border-left: none;
  border-radius: 0 8px 8px 0;
}
.re-community .re-mug::before {
  content: ""; position: absolute; left: 50%; top: -12px;
  width: 3px; height: 10px; border-radius: 2px;
  background: rgba(200,190,170,0.5);
  animation: re-steam 2.6s ease-in-out infinite;
}
@keyframes re-steam {
  0%,100% { opacity: 0; transform: translateY(0); }
  50%     { opacity: 0.8; transform: translateY(-5px); }
}
.re-community .re-notebook { background-image: url('assets/obj_journal_notes.jpg'); }

/* ============================================================
   ROOM: MEMBERSHIP / NEXUS — skylit atrium, one gold key
   ============================================================ */
.re-nexus .re-shaft {
  position: absolute; left: 30%; right: 30%; top: -6%; height: 80%;
  background: linear-gradient(rgba(230,198,90,0.20), rgba(230,198,90,0.05) 65%, transparent);
  clip-path: polygon(38% 0, 62% 0, 86% 100%, 14% 100%);
  animation: re-shaftpulse 9s ease-in-out infinite;
}
@keyframes re-shaftpulse {
  0%,100% { opacity: 0.75; }
  50%     { opacity: 1; }
}
.re-nexus .re-floorglow {
  position: absolute; left: 22%; right: 22%; bottom: 6%; height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(230,198,90,0.22), transparent 70%);
}
.re-nexus .re-key {
  width: 54px; height: 20px;
}
.re-nexus .re-key::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  border: 5px solid #c9a227;
  box-shadow: 0 0 14px rgba(201,162,39,0.5);
}
.re-nexus .re-key::after {
  content: ""; position: absolute; left: 20px; top: 8px;
  width: 32px; height: 5px;
  background: linear-gradient(90deg, #c9a227 60%, transparent 60% 68%, #c9a227 68% 82%, transparent 82% 88%, #c9a227 88%);
  box-shadow: 2px 6px 0 -2px #c9a227;
}