/* rooms.css — a 3D-perspective "room zoom" gallery.
   Reverse-engineered from thehtml.review/04, rebuilt in DREA's dark house
   style. <main> is a fixed perspective stage; each piece is an <article> at a
   different Z depth; scrolling (via the --scroll variable set in rooms.js)
   flies the camera forward through the nested rooms. Room count is dynamic —
   depths/opacity are set per-article by rooms.js, not hardcoded here. */

@font-face {
  font-family: 'Fungal';
  src: url('/assets/fonts/FungalVF.woff') format('woff'),
       url('/assets/fonts/FungalVF.ttf')  format('truetype');
  font-weight: normal;
  font-display: swap;
}

:root {
  --scroll: 0px;                 /* set by rooms.js = window.scrollY */
  --bg:      #202020;
  --ink:     #e9e7e2;
  --line:    rgba(233, 231, 226, 0.34);   /* hairline room borders */
  --muted:   rgba(233, 231, 226, 0.55);
  --accent:  #f4e04d;            /* the one accent — the "enter" button */
  --vh:      520px;              /* room height on mobile (set by rooms.js) */

  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  letter-spacing: -0.01em;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; backface-visibility: hidden; }

body, main { background: var(--bg); margin: 0; }

/* ---- Header / footer (the brand wordmark + nav) ---- */
header, footer {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
header {
  z-index: 100; position: relative;
  top: calc(100vh - 12rem);      /* wordmark sits near the bottom of screen 1 */
  pointer-events: none;          /* let clicks through to the stage; re-enable on nav */
}
header nav, header .filters { pointer-events: auto; }
footer { width: 100%; }

.brand {
  margin: 0;
  font-family: 'Fungal', serif;
  /* grow:0 keeps the glyphs as clean letters — grow>0 inflates them into the
     overlapping "bubble" artifact (which Paint Circle animates on purpose). */
  font-variation-settings: 'THCK' 400, 'grow' 0;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 1; text-transform: lowercase; letter-spacing: 0.02em;
  /* "hollow" wordmark: dark fill + light stroke, so every stroke reads as a
     light inner outline — uniform across all letters (the e included). */
  color: var(--bg);
  -webkit-text-stroke: 1.5px var(--ink);
}
.issue { margin: 0 0 0.4rem; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

nav { display: flex; flex-direction: row; gap: 1.4rem; justify-content: center; }
nav a { color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; text-decoration: none; }
nav a:hover { color: var(--ink); }

.filters { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; }
.filters button {
  background: none; border: 0; padding: 0.2em 0; cursor: pointer;
  color: var(--muted); font: inherit; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem;
  border-bottom: 1px solid transparent;
}
.filters button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- The enter button (fixed, names the room you're approaching) ---- */
#link {
  position: fixed; top: 92%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200; display: none;
  background: var(--accent); color: #201d05;
  border: 1px solid var(--accent);
  padding: 0.9rem 1.2rem; font-size: 0.95rem; letter-spacing: 0.02em;
  text-decoration: none; width: max-content; max-width: 90%; text-align: center;
}
#link:hover { filter: brightness(1.05); }

/* ---- Rooms ---- */
article {
  border: 3px solid var(--line);
  border-bottom: none;
}
p, pre { margin: 0; }

.title {
  position: absolute; top: 0; left: 0; z-index: 1;
  padding: 1rem; width: calc(100% - 4rem);
  font-family: 'Fungal', serif;
  font-variation-settings: 'THCK' 360, 'grow' 0;   /* grow:0 — no bubble artifact */
  font-size: 2.4rem; line-height: 1; letter-spacing: 0.01em;
  text-decoration: none;
  /* hollow to match the wordmark; fills in on hover */
  color: var(--bg);
  -webkit-text-stroke: 1px var(--ink);
}
.title:hover { color: var(--ink); }

/* medium/tags rotated on the right edge (reference used this for the author) */
.edge {
  position: absolute; right: 0; bottom: 100%;
  transform: rotate(90deg) translate(100%, 4.5rem);
  transform-origin: bottom right;
  width: max-content; padding: 1rem;
  color: var(--muted); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
}

.description {
  position: absolute; bottom: 0; width: 100%; padding: 0 0.5rem 1.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-decoration: none; color: inherit;
}
/* The box is framed to each piece's own aspect ratio (--arn = w/h, set per box
   in rooms.js; default 16:10), so the iframe fills it edge-to-edge and the
   border hugs the actual work — no letterbox. The height cap keeps tall
   (portrait/square) pieces inside the room. bg matches the site so any sliver
   reads as background, not a distinct panel. */
.description .preview {
  position: relative; display: block;
  aspect-ratio: var(--arn, 1.6);
  width: min(46rem, 78%, calc(58vh * var(--arn, 1.6)));
  background: var(--bg); overflow: hidden; border: 1px solid var(--line);
}
.description .preview img {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover;
}
/* Live previews render at each piece's natural size (width/height/margins set
   per box in rooms.js) and scale to *contain* within the frame, centered on
   both axes (--pv set in rooms.js), so each piece composes as it would
   fullscreen instead of at the tiny frame size. Decorative — clicks fall through. */
.description .preview iframe {
  position: absolute; top: 50%; left: 50%; border: 0;
  transform-origin: center center;
  transform: scale(var(--pv, 0.36));
  pointer-events: none;
}
.preview__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--line); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.caption { margin-top: 0.8rem; color: var(--muted); font-size: 0.85rem; text-align: center; max-width: 40rem; }
.caption .prompt { font-style: italic; }

/* About view — a centered text panel, not a 3D room (higher specificity than
   the article transform rules, so it stays flat and fully visible). */
.about-room {
  position: fixed; inset: 0; z-index: 50; border: none;
  display: flex; align-items: center; justify-content: center;
  padding: 8vh 8vw;
  transform: none !important; opacity: 1 !important;
}
.about-room:before, .about-room:after { display: none; }
.about-room .about-text {
  max-width: 42rem; text-align: center;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.5; color: var(--ink);
}

/* The receding wall/floor lines: two big bordered rectangles per room, exactly
   as the reference draws them, so the perspective reads as a corridor. */
article:after, article:before {
  content: ""; position: absolute; bottom: 0; height: 100%; width: 300vw;
  border-bottom: 3px solid var(--line); background: var(--bg);
}
article:after  { left: 100vw;  margin-left: -6px; border-left: 3px solid var(--line); }
article:before { left: -300vw; margin-left: -2px; border-right: 3px solid var(--line); }

/* ---- Desktop: the 3D stage (>800px) ---- */
@media screen and (min-width: 801px) {
  main {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    perspective: 600px;
  }
  article {
    position: absolute;
    width: 100vw; height: calc(100vh - 6rem);
    margin: 0;
    /* --z (depth) and --op (opacity) are set per-article by rooms.js */
    transform: translateZ(calc(var(--scroll) - var(--z, 2500px)));
    opacity: var(--op, 1);
  }
  footer {
    /* Once the last room passes the camera the footer fades in — center it in
       the viewport (not pinned to the bottom) so the wordmark + "↑ top" land
       mid-screen as the end-of-gallery rest state. */
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    opacity: var(--footer-op, 0);
  }
}

/* ---- Mobile: drop 3D, plain vertical stack of bordered rooms (<=800px) ---- */
@media screen and (max-width: 800px) {
  main { position: relative; }
  header { top: 3rem; padding: 8rem 0; }
  footer { position: relative; padding: 4rem 0 8rem; }
  article {
    position: relative;
    width: 84vw; min-height: var(--vh);
    margin: 8rem 8vw; border-width: 2px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  article:after  { left: 84vw; width: 8vw; border-width: 2px; }
  article:before { border-width: 2px; }
  .title { font-size: 1.9rem; position: static; padding: 1rem; width: 100%; }
  .edge  { font-size: 0.78rem; }
  .description { position: static; padding: 0 1rem 1.5rem; }
  #link { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}