/* ============================================================
   ITS ALIGNED - Gallery
   Page styles for the WebGL gallery. Loads after style.css.
   ============================================================ */

body.corridor-page {
  background: #06070a;
  overflow: hidden;
  height: 100dvh;
}

#corridor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ── HUD ───────────────────────────────────────────────── */
.hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hud a { pointer-events: auto; }

.hud-tr,
.hud-bl,
.hud-br {
  position: absolute;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(224, 221, 215, 0.42);
}

.hud-tr { top: 92px;  right: 40px; text-align: right; }
.hud-bl { bottom: 34px; left: 40px; }
.hud-br { bottom: 34px; right: 40px; text-align: right; max-width: 48ch; line-height: 1.7; }

.hud-count { display: block; color: rgba(224, 221, 215, 0.75); }
.hud-room  { display: block; margin-top: 6px; }

#hudTitle {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #e0ddd7;
  line-height: 1;
}

#hudMeta {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(224, 221, 215, 0.4);
}

body.is-focused .hud-bl { opacity: 0; transition: opacity 0.4s ease; }

/* ── Focus card ────────────────────────────────────────── */
#card {
  position: fixed;
  z-index: 30;
  left: 40px;
  bottom: 34px;
  max-width: 42ch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}

#card.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#card h2 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #e0ddd7;
}

.card-medium,
.card-note,
.card-credit {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: #8a867f;
  margin-top: 12px;
}

.card-credit { color: #585552; font-style: italic; }

.card-turn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.card-turn button {
  width: 38px;
  height: 38px;
  font-size: 17px;
  line-height: 1;
  color: #e0ddd7;
  background: transparent;
  border: 1px solid rgba(224, 221, 215, 0.25);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.card-turn button:hover {
  background: #1e35c4;
  border-color: #1e35c4;
}

.card-turn span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #585552;
}

.card-cta {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e0ddd7;
  border: 1px solid rgba(224, 221, 215, 0.25);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.card-cta:hover {
  background: #1e35c4;
  border-color: #1e35c4;
}

/* ── Intro ─────────────────────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: end;
  padding: 0 40px 84px;
  background: linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.92) 62%, #06070a 100%);
}

.intro-label {
  position: absolute;
  top: 96px;
  right: 40px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #585552;
  text-align: right;
  line-height: 1.9;
}

#intro h1 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: #e0ddd7;
}

.intro-sub {
  max-width: 44ch;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: #8a867f;
}

#enter {
  justify-self: start;
  align-self: end;
  margin-bottom: 6px;
  padding: 16px 34px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e0ddd7;
  background: transparent;
  border: 1px solid rgba(224, 221, 215, 0.3);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease;
}

#enter:hover {
  background: #1e35c4;
  border-color: #1e35c4;
  letter-spacing: 0.3em;
}

/* ── Flat fallback ─────────────────────────────────────── */
#flat { display: none; }

body.is-flat {
  overflow: auto;
  height: auto;
}

body.is-flat #corridor,
body.is-flat #intro,
body.is-flat .hud { display: none; }

body.is-flat #flat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 96px 56px;
  padding: 148px 48px 120px;
  max-width: 1400px;
}

.flat-piece img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.flat-piece figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
}

.flat-num    { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.16em; color: #585552; }
.flat-title  { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #e0ddd7; }
.flat-medium { font-size: 13px; font-weight: 300; color: #8a867f; }
.flat-credit { font-size: 12px; font-style: italic; color: #585552; }

/* ── Narrow screens ────────────────────────────────────── */
@media (max-width: 820px) {
  .hud-tr { top: 82px; right: 20px; }
  .hud-bl { bottom: 26px; left: 20px; }
  .hud-br { display: none; }

  #intro {
    grid-template-columns: 1fr;
    align-content: end;
    gap: 34px;
    padding: 0 20px 56px;
  }

  .intro-label { top: 84px; right: 20px; }

  #card {
    left: 20px;
    right: 20px;
    bottom: 26px;
    max-width: none;
  }

  .card-turn button { width: 46px; height: 46px; font-size: 19px; }

  body.is-flat #flat { padding: 120px 20px 80px; gap: 64px 28px; }
}