/* ============================================================
   home.css — the interactive room homepage
   Desktop: the whole room fits the viewport at its ORIGINAL aspect ratio —
   room.js sizes/positions #room-canvas every load/resize, like
   object-fit:contain. No cropping, no blurred filler in the leftover space
   — just the page's own solid background showing through.
   Mobile:  room fills the screen height; swipe horizontally to explore.
   ============================================================ */

body.home { margin: 0; background: #0e0e0e; overflow: hidden; }

/* Stage fills the viewport. */
.home-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Just a positioning context for #room-canvas — no clipping needed since
   the canvas is sized to fit inside, never overflow. */
.room {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Sized + positioned by room.js on load/resize: width/height come out to
   the room art's natural aspect ratio scaled to fit fully inside the
   viewport (whichever dimension is the tighter fit), then centered. Every
   layer inside (room art, hover art) is 100%/100% of this box, so they all
   scale together with zero extra math. */
.room-canvas {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 0;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.4);
}
.room-base {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Overlay art base class ----
   Shared by anything that sits full-canvas on top of the room. */
.room-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- Fairy lights (lights.png), twinkling ----
   Layered on top of the base art's own (static) lights so this copy can
   pulse brightness/opacity independently — a wide swing (dim+desaturated
   at the trough, blown-out with a double glow at the peak) on a fast 1.5s
   loop for a punchy twinkle. Purely decorative, clicks pass through. */
.room-lights {
  z-index: 3;
  animation: lights-twinkle 1.5s ease-in-out infinite;
}
@keyframes lights-twinkle {
  0%, 100% { opacity: 0.3;  filter: brightness(0.8); }
  50%      { opacity: 1;    filter: brightness(1.9) drop-shadow(0 0 26px rgba(255, 235, 190, 0.85)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .room-lights { animation: none; opacity: 0.85; }
}

/* ---- Per-hotspot hover art (computer + contact) ----
   hover-art.png is Del's finished art — colored shape + hand-written label
   drawn together (purple "Portfolio" box, cyan "Contact" bracket + arrow).
   Same image, used twice, each clipped in CSS to its own hotspot rectangle
   (traced from the art at 4032x3024) and faded in on hover/focus. Bed has
   no hover treatment right now — Del asked to drop the old flat highlight;
   that hotspot is still clickable. */
.room-hotspot-art {
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.room-hotspot-art.is-active { opacity: 1; }
.room-hotspot-art[data-hotspot="computer"] { clip-path: inset(74.11% 70.11% 0% 0.99%); }
.room-hotspot-art[data-hotspot="contact"]  { clip-path: inset(1.52% 7.96% 80.72% 79.76%); }

/* Mobile swipe hint (hidden on desktop). */
.swipe-hint { display: none; }

/* Fallback nav: kept in the DOM for crawlers + keyboard/screen readers,
   visually hidden (the room + swipe are the visual navigation). */
.room-fallback-nav {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Mobile: fill the height and swipe to look around the room.
   room.js skips its resize logic below this same 640px breakpoint, so
   #room-canvas here falls back to sizing itself naturally off #room-base's
   own height:100vh instead of JS-computed dimensions.
   ============================================================ */
@media (max-width: 640px) {
  .home-stage {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Back to normal flow so .home-stage's own scroll does the work — no JS
     resizing or absolute clipping on mobile. */
  .room {
    position: static;
  }
  .room-canvas {
    position: relative; /* keeps inset:0 overlays aligned to this box */
    display: inline-block;
    height: 100vh;
    box-shadow: none;
  }
  .room-base {
    height: 100vh;
    width: auto;
  }

  .swipe-hint {
    display: block;
    position: fixed;
    z-index: 2;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    font: 600 13px/1 system-ui, sans-serif;
  }
}

/* ============================================================
   #rotate-prompt — ask a mobile visitor holding their phone upright to
   turn it sideways.

   This is a REQUEST, not an enforced lock. The only real orientation-lock
   API (screen.orientation.lock()) only works once a page is in fullscreen,
   which a plain website can't put itself into without the visitor tapping
   a "fullscreen" control first — there's no reliable way for an ordinary
   web page (as opposed to an installed PWA/app) to force rotation across
   iOS Safari + Android Chrome. So instead: hide the room entirely behind a
   full-screen message whenever the viewport is mobile-width AND portrait,
   and let the visitor act on it. Once they rotate, the media query stops
   matching and this disappears on its own — no JS needed.
   ============================================================ */
#rotate-prompt {
  display: none;
}
@media (max-width: 640px) and (orientation: portrait) {
  #rotate-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 32px;
    text-align: center;
    background: #0e0e0e;
    color: #f2ede0;
  }
  .rotate-prompt-icon {
    font-size: 48px;
    animation: rotate-prompt-tilt 1.6s ease-in-out infinite;
  }
  #rotate-prompt p {
    margin: 0;
    max-width: 28ch;
    font: 500 16px/1.5 system-ui, -apple-system, sans-serif;
    color: rgba(242, 237, 224, 0.85);
  }
}
@keyframes rotate-prompt-tilt {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-90deg); }
}
@media (max-width: 640px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .rotate-prompt-icon { animation: none; transform: rotate(-90deg); }
}

/* ============================================================
   #music-toggle — click-to-play background music.
   Deliberately not autoplay (see js/music.js header comment). Sits fixed
   in the corner so it reads on top of both the desktop contain-layout and
   the mobile swipe view. Icon swaps between a plain note (paused, default)
   and animated equalizer bars (.is-playing) — the bars' own SVG <animate>
   tags do the movement, no CSS keyframes needed.
   ============================================================ */
.music-toggle {
  position: fixed;
  z-index: 20;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(242, 237, 224, 0.25);
  border-radius: 50%;
  background: rgba(14, 14, 14, 0.55);
  backdrop-filter: blur(4px);
  color: #f2ede0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.music-toggle:hover,
.music-toggle:focus-visible {
  background: rgba(14, 14, 14, 0.8);
  border-color: rgba(242, 237, 224, 0.5);
}
.music-icon-note,
.music-icon-bars {
  width: 20px;
  height: 20px;
}
.music-icon-bars { display: none; }
.music-toggle.is-playing .music-icon-note { display: none; }
.music-toggle.is-playing .music-icon-bars { display: block; }

@media (max-width: 640px) {
  .music-toggle { top: 12px; right: 12px; }
}