/* ============================================================
   lizotte.tv hub — production styles
   Intro: TV plays the logo startup, zooms through into the hallway
   Hallway: Entrance 2.png as full-bleed background
            + ambient FX overlays (neon flicker, CRT static, fog, lamps)
            + 4 show-logo overlays positioned over the empty panels
            + 4 invisible door hotspots over the door bodies
   ============================================================ */

/* === EDITABLE ACCENTS — per-show neon color (R, G, B), edited by the cloud
   editor's Styling panel. Keep this block's shape; the editor rewrites the
   values between the markers. === */
/* ACCENTS:START */
:root {
  --accent-gb:  255, 179, 71;
  --accent-sl:  80, 220, 100;
  --accent-twr: 255, 102, 204;
  --accent-smn: 255, 140, 60;
}
/* ACCENTS:END */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  background: #0a0a10;
  color: #ddd;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
}

/* ─── INTRO LAYER ─────────────────────────────────────────── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform-origin: center center;
  transition:
    transform 1.4s cubic-bezier(.6, .02, .7, 1),
    opacity   1.4s ease-in;
}
.intro video {
  display: block;
  max-width: 88vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  background: transparent;
}
.intro-hint {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  letter-spacing: .4em;
  color: #888;
  text-transform: uppercase;
  animation: intro-hint-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes intro-hint-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}
.intro.playing .intro-hint {
  opacity: 0;
  animation: none;
  transition: opacity .3s ease;
}
.intro.zooming {
  transform: scale(6);
  opacity: 0;
  pointer-events: none;
}

/* ─── HALLWAY SCENE ───────────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.scene.revealed { opacity: 1; }

/* BLURRED BACKDROP — fills the full viewport with a blurred, dimmed
   copy of the hallway image. The sharp image on top (object-fit: contain)
   shows in its natural aspect; the blurred copy fills the letterbox
   areas so the edges blend into the scene instead of looking like flat
   gray bars. */
.scene::before {
  content: '';
  position: absolute;
  inset: -5%;        /* slightly oversized to hide blur edge artifacts */
  background-image: url('assets/Entrance%20FINAL.png');
  background-size: cover;
  background-position: center;
  filter: blur(40px) brightness(0.45) saturate(0.85);
  z-index: 0;
  pointer-events: none;
}

.hallway-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain keeps the FULL image visible — no clipping at top/bottom or
     sides. The blurred ::before fills any leftover letterbox space. */
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}

/* ─── AMBIENT FX OVERLAYS ─────────────────────────────────── */
/* Each .fx is positioned via JS over a specific area of the background
   image. mix-blend-mode lets each effect enhance the existing pixels
   instead of replacing them. pointer-events: none so they never
   interfere with door-hotspot clicks. */
.fx {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  will-change: opacity, filter, transform;
}

/* NEON FLICKER — for LIZOTTE.TV sign + ceiling cove
   Brief brightness drops simulating a worn neon tube. Additive blend
   so it brightens existing neon without dimming dark areas. */
.fx-flicker {
  background: radial-gradient(ellipse at center,
    rgba(140, 200, 255, .35) 0%,
    rgba(140, 200, 255, .12) 40%,
    transparent 70%);
  mix-blend-mode: screen;
  animation: neon-flicker 6.7s infinite;
}
.fx-flicker[data-fx="ceiling"] {
  animation: neon-flicker 5.3s infinite;   /* slightly out of sync */
  animation-delay: -1.2s;
}
@keyframes neon-flicker {
  /* Steady most of the time, brief dim/dark spots like real neon */
  0%, 16%, 18%, 22%, 50%, 51.5%, 78%, 100% { opacity: 1; }
  17%   { opacity: .35; }
  20%   { opacity: .15; }
  51%   { opacity: .45; }
  78.5% { opacity: .25; }
  79%   { opacity: 1;   }
}

/* DOOR PANEL BREATHE — pulses the colored backlight glow above each
   door (where each show's logo sits). Different colors per door,
   slightly different timings so they don't all pulse in sync. */
.fx-breathe-amber, .fx-breathe-green, .fx-breathe-pink, .fx-breathe-orange {
  border-radius: 10px;
  filter: blur(20px);
  mix-blend-mode: screen;
  animation: glow-breathe 4.5s ease-in-out infinite;
}
.fx-breathe-amber  { background: radial-gradient(ellipse, rgba(var(--accent-gb),.42) 0%, transparent 65%); animation-duration: 4.8s; }
.fx-breathe-green  { background: radial-gradient(ellipse, rgba(var(--accent-sl),.45) 0%, transparent 65%); animation-duration: 5.2s; animation-delay: -1.1s; }
.fx-breathe-pink   { background: radial-gradient(ellipse, rgba(var(--accent-twr),.50) 0%, transparent 65%); animation-duration: 4.1s; animation-delay: -2.4s; }
.fx-breathe-orange { background: radial-gradient(ellipse, rgba(var(--accent-smn),.45) 0%, transparent 65%); animation-duration: 5.6s; animation-delay: -0.6s; }
@keyframes glow-breathe {
  0%, 100% { opacity: .55; transform: scale(1);    }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ON AIR SIGN — red pulse with broadcast rhythm */
.fx-onair {
  background: radial-gradient(ellipse,
    rgba(255, 40, 40, .85) 0%,
    rgba(255, 40, 40, .35) 50%,
    transparent 80%);
  border-radius: 6px;
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: onair-pulse 2.4s ease-in-out infinite;
}
@keyframes onair-pulse {
  0%, 60%, 100% { opacity: .4; }
  10%, 50%      { opacity: 1;  }
}

/* CRT SCREEN STATIC — canvas overlay; JS draws scan lines + noise. */
.fx-crt {
  mix-blend-mode: screen;
  border-radius: 8px;
  opacity: .85;
}

/* BRASS LAMP FLICKER — soft warm glow with occasional brightness dip */
.fx-lamp {
  background: radial-gradient(ellipse at center 80%,
    rgba(255, 200, 120, .65) 0%,
    rgba(255, 170, 80, .35) 40%,
    transparent 75%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: lamp-flicker 3.7s infinite;
}
.fx-lamp[data-fx="lamp-r"] {
  animation-duration: 4.1s;
  animation-delay: -0.8s;
}
@keyframes lamp-flicker {
  0%, 100%        { opacity: .9;  }
  23%, 24%        { opacity: .55; }
  60%             { opacity: 1;   }
  82%, 82.5%, 83% { opacity: .4;  }
  83.5%           { opacity: .9;  }
}

/* FOG / MIST DRIFT — two translucent gradient bands drifting in opposite
   directions across the lower hallway. Layered via two pseudo-elements
   on one parent for performance. */
.fx-fog {
  overflow: hidden;
  opacity: .35;
}
.fx-fog::before,
.fx-fog::after {
  content: '';
  position: absolute;
  inset: -10% -50%;             /* extra width so the drift can loop seamlessly */
  background:
    radial-gradient(ellipse at 20% 60%, rgba(220, 230, 240, .25) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 40%, rgba(255, 200, 180, .18) 0%, transparent 38%),
    radial-gradient(ellipse at 45% 80%, rgba(200, 220, 240, .22) 0%, transparent 32%);
  filter: blur(30px);
  animation: fog-drift 38s linear infinite;
}
.fx-fog::after {
  animation-duration: 51s;
  animation-direction: reverse;
  opacity: .7;
}
@keyframes fog-drift {
  0%   { transform: translateX(-15%); }
  100% { transform: translateX( 15%); }
}

/* ─── SHOW LOGOS ──────────────────────────────────────────── */
.show-logo {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .5));
}

/* ─── DOOR HOTSPOTS ───────────────────────────────────────── */
.door-hotspot {
  position: absolute;
  z-index: 4;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
  transition: background .25s ease-out, box-shadow .3s ease-out;
  /* [ENTER] hint is now a separate .fx overlay (see .enter-hint),
     positioned independently by the layout editor. */
}
.door-hotspot:hover {
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, .12);
}
.door-hotspot[data-door="gb"]:hover {
  background: rgba(var(--accent-gb), .08);
  box-shadow: inset 0 0 60px rgba(var(--accent-gb), .22);
}
.door-hotspot[data-door="sl"]:hover {
  background: rgba(var(--accent-sl), .08);
  box-shadow: inset 0 0 60px rgba(var(--accent-sl), .22);
}
.door-hotspot[data-door="twr"]:hover {
  background: rgba(var(--accent-twr), .08);
  box-shadow: inset 0 0 60px rgba(var(--accent-twr), .22);
}
.door-hotspot[data-door="smn"]:hover {
  background: rgba(var(--accent-smn), .08);
  box-shadow: inset 0 0 60px rgba(var(--accent-smn), .22);
}
.door-hotspot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* [ENTER] hint — sized + positioned as a .fx overlay (JS reads FX_POS).
   Its text is centered inside the box. The matching door's hover/focus
   state toggles the .visible class via the JS hover bridge in index.html. */
.enter-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: .4em;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  border-radius: 2px;
  z-index: 6;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease-out, transform .25s ease-out;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(255, 255, 255, .5);
  white-space: nowrap;
  overflow: hidden;
}
.enter-hint.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── SOCIAL ROW PLACEHOLDER ──────────────────────────────── */
.social-row {
  position: absolute;
  bottom: 24px;
  right: 32px;
  height: 32px;
  width: 200px;
  z-index: 5;
}

/* ─── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .intro, .intro.zooming, .scene, .door-hotspot, .enter-hint,
  .fx, .fx-flicker, .fx-breathe-amber, .fx-breathe-green,
  .fx-breathe-pink, .fx-breathe-orange, .fx-onair, .fx-lamp,
  .fx-fog, .fx-fog::before, .fx-fog::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .fx-crt { display: none !important; }
}

/* ============================================================
   EDIT MODE — toggled by pressing E or visiting with ?edit
   Makes all overlays draggable + resizable for visual tuning.
   ============================================================ */
body.edit-mode .scene.revealed { opacity: 1 !important; }
body.edit-mode .intro { display: none !important; }

/* Make every overlay visible with a colored outline */
body.edit-mode .door-hotspot,
body.edit-mode .show-logo,
body.edit-mode .fx {
  pointer-events: auto !important;
  cursor: move !important;
  /* Disable blend modes / animations / filters that hide the box */
  mix-blend-mode: normal !important;
  animation: none !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35) !important;
}
body.edit-mode .door-hotspot { outline: 2px dashed #ff5566; outline-offset: -1px; }
body.edit-mode .show-logo     { outline: 2px dashed #33ccff; outline-offset: -1px; opacity: .85 !important; }
body.edit-mode .fx             { outline: 2px dashed #ffd700; outline-offset: -1px; background: rgba(255, 215, 0, .08) !important; }

/* Highlight currently-selected overlay */
body.edit-mode .ed-selected {
  outline: 3px solid #00ff66 !important;
  outline-offset: 0 !important;
  z-index: 999 !important;
  box-shadow: 0 0 0 4px rgba(0, 255, 102, .2) !important;
}

/* Label badge showing each overlay's key — works on div/anchor only
   (pseudo-elements don't render on <img>/<canvas>, so those use the
   floating label drawn by JS instead). */
body.edit-mode .door-hotspot::before,
body.edit-mode .fx::before {
  content: attr(data-door) attr(data-fx);
  position: absolute !important;
  top: -22px; left: 0;
  font: 11px/1 'Courier New', monospace;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1001;
}

/* Floating label that follows the selected overlay (works on img/canvas) */
.ed-float-label {
  position: fixed;
  font: 11px/1 'Courier New', monospace;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: 3px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 999998;
  display: none;
}
body.edit-mode .ed-float-label.active { display: block; }

/* Floating resize handles that follow the selected overlay.
   Two handles: bottom-right (anchors top-left, expands toward BR) and
   top-left (anchors bottom-right, expands toward TL). Lives in viewport
   coordinates so they work on any element type, including <img> and
   <canvas> which can't host ::after pseudo-elements. */
.ed-resize-handle, .ed-resize-handle-tl {
  position: fixed;
  width: 20px;
  height: 20px;
  background: #00ff66;
  border: 2px solid #000;
  border-radius: 2px;
  cursor: nwse-resize;
  z-index: 999999;
  display: none;
  box-shadow: 0 0 8px rgba(0, 255, 102, .6);
}
body.edit-mode .ed-resize-handle.active,
body.edit-mode .ed-resize-handle-tl.active { display: block; }

/* Hide [ENTER] hint and child elements that get in the way */
/* In edit mode, force [ENTER] hint overlays visible so they can be
   selected, dragged, and resized like any other .fx overlay. */
body.edit-mode .enter-hint {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* HUD panel */
.ed-hud {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 320px;
  z-index: 99999;
  background: rgba(10, 10, 16, .95);
  border: 1px solid #00ff66;
  border-radius: 6px;
  padding: 14px;
  font: 12px/1.5 'Courier New', monospace;
  color: #ddd;
  display: none;
}
body.edit-mode .ed-hud { display: block; }
.ed-hud h3 {
  font-size: 13px;
  color: #00ff66;
  letter-spacing: .15em;
  margin: 0 0 8px;
}
.ed-hud .ed-sel {
  background: #161620;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: #fff;
  min-height: 60px;
}
.ed-hud .ed-sel.empty { color: #666; }
.ed-hud .ed-coords {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 8px;
}
.ed-hud .ed-coords div { background: #161620; padding: 4px 6px; border-radius: 3px; }
.ed-hud .ed-coords b { color: #00ff66; font-weight: normal; }
.ed-hud button {
  width: 100%;
  background: #161620;
  border: 1px solid #00ff66;
  color: #00ff66;
  padding: 6px 8px;
  margin-bottom: 4px;
  font: 11px/1.3 'Courier New', monospace;
  letter-spacing: .1em;
  cursor: pointer;
  border-radius: 3px;
  text-transform: uppercase;
}
.ed-hud button:hover { background: #00ff66; color: #000; }
.ed-hud .ed-hint {
  font-size: 10px;
  color: #666;
  margin-top: 8px;
  line-height: 1.4;
}
.ed-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 255, 102, .95);
  color: #000;
  padding: 10px 18px;
  border-radius: 4px;
  font: 12px/1 'Courier New', monospace;
  letter-spacing: .1em;
  z-index: 99999;
  opacity: 0;
  transition: opacity .25s ease-out;
  pointer-events: none;
}
.ed-toast.show { opacity: 1; }

/* Picker dropdown for selecting stacked overlays */
.ed-hud select {
  width: 100%;
  background: #161620;
  border: 1px solid #444;
  color: #fff;
  padding: 6px 8px;
  margin-bottom: 8px;
  font: 11px/1.3 'Courier New', monospace;
  border-radius: 3px;
}
.ed-hud .ed-storage-state {
  font-size: 10px;
  color: #888;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2a2a3a;
}
.ed-hud .ed-storage-state.saved { color: #00ff66; }


/* ─── GB LOGO BACKLIGHT ────────────────────────────────────────
   The "THE GOLDEN BANANA" sign sits against dark wood and reads
   faint, so a warm layered glow behind the logo lifts it off the
   background and makes the gold text legible. Tune the alphas /
   blur radii to taste. (Auto-removed in edit mode by the existing
   `body.edit-mode .show-logo { filter:none }` rule.) */
.show-logo[data-show="gb"] {
  mix-blend-mode: screen;                  /* drops the video's solid black background */
  filter:
    drop-shadow(0 0 10px rgba(255, 232, 180, .45))
    drop-shadow(0 0 26px rgba(var(--accent-gb), .40));
}
/* In edit mode, show the raw (black-bg) box so positioning is accurate. */
body.edit-mode .show-logo[data-show="gb"] { mix-blend-mode: normal; }

/* ─── SMN LOGO BACKLIGHT (animated black-bg video, same pattern as GB) ─── */
.show-logo[data-show="smn"] {
  mix-blend-mode: screen;                  /* drops the video's solid black background */
  filter:
    drop-shadow(0 0 10px rgba(255, 232, 180, .45))
    drop-shadow(0 0 26px rgba(var(--accent-smn), .40));   /* SMN orange halo */
}
body.edit-mode .show-logo[data-show="smn"] { mix-blend-mode: normal; }

/* Intro TV: poster is a transparent PNG (no black box on the resting view).
   Lock the box to the video's aspect ratio so the poster and the playing video
   are the same size (no resize on click); screen-blend drops the video's black
   background during the brief playback too. */
.intro video {
  height: 80vh;
  width: auto;
  max-width: 88vw;
  aspect-ratio: 1310 / 1060;
  object-fit: contain;
  mix-blend-mode: screen;
}

/* ─── MOBILE HALLWAY: portrait phones load the tall Entrance_MOBILE image,
   fill the screen height, and scroll left/right across the four doors. ─── */
body.mobile .scene { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
body.mobile .scene::before { display: none; }
body.mobile .hallway-bg { left: 0; right: auto; bottom: auto; max-width: none; }
/* Ambient FX (neon glows, flicker, CRT static, fog, lamps) are positioned for
   mobile via FX_POS_M, so the desktop graphics carry over to phones too. */

/* ─── MOBILE INTRO ZOOM: start on the full image, animate into the middle two
   doors, then a scroll hint. Overlays fade in once the zoom settles. ─── */
body.mobile .hallway-bg { transform-origin: 50% 47%; will-change: transform; }
body.mobile .show-logo,
body.mobile .enter-hint { transition: opacity .5s ease-out; }
body.mobile-zoom .scene { overflow: hidden !important; }
body.mobile-zoom .enter-hint { opacity: 0; }