/* ══════════════════════════════════════════════════════
   GF HALDA NORMAL
   ══════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Halda';
  src: url('fonts/HALDANOR.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════
   QUOTE OVERLAY
   ══════════════════════════════════════════════════════ */

#quote-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  opacity: 1;
  transition: opacity 1.4s ease;
  cursor: default;
}

#quote-overlay.dismissed {
  opacity: 0;
  pointer-events: none;
}

/* hide unused bg/vignette elements */
#quote-bg, #quote-vignette { display: none; }

/* ── Film projector animations ── */
@keyframes film-wobble {
  0%   { transform: translate(0px,    0px)   rotate(0deg); }
  9%   { transform: translate(0.7px, -0.5px) rotate(0.03deg); }
  18%  { transform: translate(-0.4px, 0.3px) rotate(-0.02deg); }
  27%  { transform: translate(0.6px,  0.2px) rotate(0.015deg); }
  36%  { transform: translate(-0.7px,-0.4px) rotate(-0.035deg); }
  45%  { transform: translate(0.3px,  0.6px) rotate(0.01deg); }
  54%  { transform: translate(-0.5px,-0.2px) rotate(-0.025deg); }
  63%  { transform: translate(0.6px, -0.5px) rotate(0.025deg); }
  72%  { transform: translate(-0.3px, 0.4px) rotate(-0.015deg); }
  81%  { transform: translate(0.5px, -0.3px) rotate(0.02deg); }
  90%  { transform: translate(-0.6px, 0.2px) rotate(-0.03deg); }
  100% { transform: translate(0px,    0px)   rotate(0deg); }
}

@keyframes film-flicker {
  0%   { filter: brightness(1.00) contrast(1.00); }
  6%   { filter: brightness(0.91) contrast(1.04); }
  13%  { filter: brightness(1.06) contrast(0.97); }
  21%  { filter: brightness(0.94) contrast(1.02); }
  29%  { filter: brightness(1.04) contrast(0.99); }
  37%  { filter: brightness(0.89) contrast(1.05); }
  44%  { filter: brightness(1.07) contrast(0.96); }
  52%  { filter: brightness(0.93) contrast(1.03); }
  60%  { filter: brightness(1.05) contrast(0.98); }
  68%  { filter: brightness(0.90) contrast(1.04); }
  76%  { filter: brightness(1.03) contrast(1.00); }
  84%  { filter: brightness(0.95) contrast(1.02); }
  92%  { filter: brightness(1.06) contrast(0.97); }
  100% { filter: brightness(1.00) contrast(1.00); }
}

@keyframes focus-breathe {
  0%,100% { filter: blur(0px);    }
  33%     { filter: blur(0.4px);  }
  66%     { filter: blur(0.15px); }
}

/* ── Quote content ── */
#quote-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: film-wobble 0.4s linear infinite;
}

#quote-overlay.active {
  animation: film-flicker 0.11s linear infinite;
}

#quote-word {
  font-family: 'Halda', Georgia, serif !important;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5rem, 3.8vw, 2.4rem);
  line-height: 1;
  color: rgba(232, 228, 221, 0.90);
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.055s ease;
  animation: focus-breathe 3.2s ease-in-out infinite;
}

#quote-word.show { opacity: 1; }

/* ── TAN-PEARL — premium display serif ────────────────
   Drop tan-pearl.otf into v3/fonts/ to activate.
   Falls back to Cormorant Garamond until then.
─────────────────────────────────────────────────── */
@font-face {
  font-family: 'TAN-PEARL';
  src: url('fonts/tan-pearl.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────
   TOREY KOHARA  ·  v3
───────────────────────────────────────────────────── */

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

:root {
  --bg:      #050505;
  --white:   #e8e4dd;
  --dim:     rgba(232,228,221,0.35);
  --dimmer:  rgba(232,228,221,0.18);

  /* Font stack */
  --display: 'TAN-PEARL', 'Cormorant Garamond', Georgia, serif;
  --mono:    'IBM Plex Mono', 'Courier New', monospace;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  background: var(--bg);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow: hidden;
  background: var(--bg);
}

/* ── SCROLL CONTAINER ─────────────────────────────── */
#screen-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#screen {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}
#screen::-webkit-scrollbar { display: none; }

/* ── PANELS ─────────────────────────────────────────── */
.panel {
  height: 100dvh;
  width: 100vw;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* ── HEADER ───────────────────────────────────────── */
#header {
  position: fixed;
  top: 2rem;
  left: 2.4rem;
  z-index: 100;
  opacity: 0;
  transition: opacity 1s ease;
}
#header.visible { opacity: 1; }

#site-name {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  color: rgba(232,228,221,0.92);
  font-weight: 300;
  text-shadow:
    0 0 6px  rgba(226,221,214,0.55),
    0 0 14px rgba(226,221,214,0.22);
  animation: name-flicker 5s ease-in-out infinite;
}

@keyframes name-flicker {
  0%,89%,100% {
    opacity: 0.92;
    text-shadow: 0 0 6px rgba(226,221,214,0.55), 0 0 14px rgba(226,221,214,0.22);
  }
  90% { opacity: 0.65; text-shadow: 0 0 2px rgba(226,221,214,0.2); }
  91% { opacity: 0.90; text-shadow: 0 0 6px rgba(226,221,214,0.55), 0 0 14px rgba(226,221,214,0.22); }
  93% { opacity: 0.72; text-shadow: 0 0 3px rgba(226,221,214,0.25); }
  94% { opacity: 0.92; text-shadow: 0 0 6px rgba(226,221,214,0.55), 0 0 14px rgba(226,221,214,0.22); }
}

/* ── INTRO ROW ─────────────────────────────────────── */
#intro-row {
  height: 100dvh;
  scroll-snap-align: start;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex-shrink: 0;
}
#intro-row::-webkit-scrollbar { display: none; }

#panel-intro,
#panel-about,
#panel-game {
  min-width: 100vw;
  width: 100vw;
  height: 100dvh;
  flex-shrink: 0;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ── LANDING ──────────────────────────────────────── */
#two-paths {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vh; /* equal spacing above and below name */
}

/* ── HERO NAME ────────────────────────────────────── */
#landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 5vh;
}

/* ── HERO NAME ────────────────────────────────────── */
#landing-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: normal;
  font-size: clamp(1.8rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.06em; /* all-caps needs positive tracking */
  text-transform: uppercase;
  padding-top: 0.1em;
  max-width: calc(100vw - 12rem);

  /* Image window — both lines together are one viewport */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Default (fallback / after settle): solid white */
  color: var(--white);
  -webkit-text-fill-color: var(--white);

  opacity: 0;
  transition: opacity 0.9s ease;
  text-align: center;
  position: relative;
  z-index: 2;

}
#landing-name.visible { opacity: 1; }

/* Image-inside-letters mode */
#landing-name.image-mode {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: brightness(3.2) contrast(1.3) saturate(1.15);
}

/* Settled: elegant, image drifting inside letters */
#landing-name.image-settled {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: brightness(2.1) contrast(1.1) saturate(0.9);
  background-size: 160%; /* oversized so drift has room */
  animation: name-drift 9s ease-in-out infinite;
}

@keyframes name-drift {
  0%   { background-position: 42% 38%; }
  25%  { background-position: 58% 52%; }
  50%  { background-position: 48% 62%; }
  75%  { background-position: 35% 48%; }
  100% { background-position: 42% 38%; }
}

.ln-line { display: block; }

/* First name slightly smaller — Kohara anchors */
.ln-line:first-child { font-size: 0.78em; }



/* ── LANDING NAV items ────────────────────────────── */
.landing-nav-item {
  font-family: var(--mono);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(0.65rem, 1.2vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(232,228,221,0.85);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  transition: color 0.35s ease, opacity 0.9s ease, transform 0.9s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
  width: 100%;
}
.landing-nav-item.visible { opacity: 1; transform: translateY(0); }
.landing-nav-item:hover { color: var(--white); }

.nav-arr {
  font-size: 0.75em;
  color: rgba(232,228,221,0.38);
  letter-spacing: 0;
  flex-shrink: 0;
  transition: color 0.35s ease;
}
.landing-nav-item:hover .nav-arr { color: rgba(232,228,221,0.7); }

/* ── EDGE DISCOVER ARROWS ─────────────────────────── */
.edge-arrow {
  position: absolute;
  font-family: var(--mono);
  letter-spacing: 0.3em;
  color: rgba(232,228,221,0.68);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.9s ease, color 0.3s ease;
  cursor: pointer;
}
.edge-arrow:hover { color: rgba(232,228,221,0.95); }
.edge-arrow.visible {
  animation: arrow-pulse 4s ease-in-out 1s infinite;
}

@keyframes arrow-pulse {
  0%,100% { opacity: 0.68; }
  50%      { opacity: 1; }
}

#arrow-left  { left: 1.2rem;  top: 50%; transform: translateY(-50%); }
#arrow-right { right: 1.2rem; top: 50%; transform: translateY(-50%); }

.ea-label { font-size: 0.52rem; letter-spacing: 0.3em; }
.ea-glyph  {
  font-size: 0.7rem;
  opacity: 0.6;
  display: inline-block; /* needed for transform */
}

@keyframes glyph-nudge-l {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-4px); }
  60%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
@keyframes glyph-nudge-r {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(4px); }
  60%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}
#arrow-left  .ea-glyph { animation: glyph-nudge-l 1.4s cubic-bezier(0.34,1.56,0.64,1) 4.0s infinite; }
#arrow-right .ea-glyph { animation: glyph-nudge-r 1.4s cubic-bezier(0.34,1.56,0.64,1) 4.3s infinite; }

/* ── ABOUT PANEL ──────────────────────────────────── */
#panel-about {
  padding: 0;
  background: var(--bg);
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
}

#about-inner {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 14rem 0 10rem;
  box-sizing: border-box;
}

/* ── ABOUT HEADER ── */
#about-name-line {
  font-family: var(--mono);
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232,228,221,0.88);
  margin: 0 0 1rem 0;
}

#about-meta {
  display: flex;
  gap: 0;
  margin-bottom: 2.2rem;
}

.about-meta-item {
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232,228,221,0.30);
}

.about-meta-sep {
  font-family: var(--mono);
  font-size: 0.48rem;
  color: rgba(232,228,221,0.15);
  margin: 0 0.7rem;
}

#about-rule {
  width: 100%;
  height: 1px;
  background: rgba(232,228,221,0.09);
  margin-bottom: 2.6rem;
}

#about-email {
  display: block;
  margin-top: 3rem;
  font-family: var(--mono);
  font-size: 0.48rem;
  letter-spacing: 0.22em;
  color: rgba(232,228,221,0.25);
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.3s;
}
#about-email:hover { color: rgba(232,228,221,0.65); }

/* ── BIO TEXT ── */
#about-text {
  width: 100%;
}

#about-text p {
  font-family: 'Halda', Georgia, serif !important;
  font-size: clamp(1.2rem, 2.6vw, 1.42rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: rgba(232,228,221,0.82);
  margin: 0 0 2rem 0;
  width: 100%;
}
#about-text p:last-child { margin-bottom: 0; }

#about-text p:first-child,
#about-text p:nth-child(4),
#about-text p:nth-child(5) {
  color: rgba(232,228,221,0.82);
}

/* ── FILM PANELS ──────────────────────────────────── */
.film-panel {
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #020202;
}

/* ── AMBIENT BG (outside tile — barely-there atmosphere at tile edges) */
.film-panel > .film-bg {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(24px) brightness(0.28) saturate(0.4);
  transform: scale(1.06);
  transition: opacity 1.6s ease;
  z-index: 0;
}
.film-panel.in-view > .film-bg { opacity: 1; }

/* ── SHARP IMAGE inside the tile — the lens */
.film-bg-sharp {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.0);
  filter: brightness(1.06) contrast(1.07) saturate(1.1);
  transition: opacity 1.4s ease;
  z-index: 1;
}
.film-panel.in-view .film-bg-sharp { opacity: 1; }

/* ── GLASS TILE */
.film-tile {
  position: relative;
  z-index: 1;
  width: 88vw;
  height: 80vh;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;

  /* Deep physical shadow */
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.16),
    0 2px 4px  rgba(0,0,0,0.7),
    0 12px 32px rgba(0,0,0,0.75),
    0 36px 80px rgba(0,0,0,0.6),
    0 72px 140px rgba(0,0,0,0.4);

  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
}

/* ── Hover-play video layer ── */
.film-tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 1;
  pointer-events: none;
}
.film-tile-video.playing { opacity: 1; }

.film-tile .film-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(5,5,5,0.78) 0%,
    rgba(5,5,5,0.18) 24%,
    transparent 46%
  );
}

/* Script tiles: no text overlay needed — cover page is the content */
.script-tile .script-overlay {
  display: none;
}

/* ── Brand logo watermark */
.film-brand-logo {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  z-index: 7;
  height: 16px;
  width: auto;
  max-width: 72px;
  filter: grayscale(1) brightness(3) opacity(0.35);
  pointer-events: none;
  object-fit: contain;
}

/* Glass coating — specular rim only, image shows through clearly */
.film-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      132deg,
      rgba(210,225,255,0.08) 0%,
      rgba(210,225,255,0.01) 18%,
      transparent 32%
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.02) 3%,
      transparent 8%
    );
}

/* Bevel edges — glass thickness */
.film-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.38),
    inset 0 -1.5px 0 rgba(0,0,0,0.65),
    inset 1.5px 0 0 rgba(255,255,255,0.12),
    inset -1.5px 0 0 rgba(0,0,0,0.28);
}

/* Hover lift */
.film-panel:hover .film-tile {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.22),
    0 4px 8px rgba(0,0,0,0.7),
    0 18px 48px rgba(0,0,0,0.8),
    0 56px 110px rgba(0,0,0,0.65),
    0 100px 180px rgba(0,0,0,0.45);
}

/* ── SCRIPT PANELS — same glass system ── */
.script-panel {
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #020202;
  /* Hidden until scrolled to — prevents flash on load */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.script-panel.in-view { opacity: 1; }

/* ── Cover image fills the portrait tile */
.script-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  display: block;
}

.script-tile {
  position: relative;
  z-index: 1;
  /* 8.5 × 11 portrait — constrained by viewport height */
  height: min(84vh, calc(88vw * 11 / 8.5));
  width: calc(min(84vh, calc(88vw * 11 / 8.5)) * 8.5 / 11);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.14),
    0 2px 4px  rgba(0,0,0,0.65),
    0 12px 32px rgba(0,0,0,0.70),
    0 36px 80px rgba(0,0,0,0.55),
    0 72px 140px rgba(0,0,0,0.35);

  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.5s cubic-bezier(0.16,1,0.3,1);
}

.script-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      132deg,
      rgba(210,225,255,0.08) 0%,
      rgba(210,225,255,0.01) 18%,
      transparent 32%
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.02) 3%,
      transparent 8%
    );
}

.script-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.34),
    inset 0 -1.5px 0 rgba(0,0,0,0.60),
    inset 1.5px 0 0 rgba(255,255,255,0.10),
    inset -1.5px 0 0 rgba(0,0,0,0.24);
}

.script-panel:hover .script-tile {
  transform: translateY(-6px) scale(1.012);
}

/* film-bg and film-overlay now defined in the glass tile section above */

.film-descriptor {
  font-family: var(--mono);
  font-size: clamp(0.5rem, 1.1vw, 0.65rem);
  letter-spacing: 0.22em;
  color: rgba(232,228,221,0.82);
  text-transform: uppercase;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease 0.1s, transform 0.6s ease 0.1s;
  position: relative;
  z-index: 10;
}
.film-descriptor.in { opacity: 1; transform: translateY(0); }

.film-title-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.film-title-wrap::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: rgba(232,228,221,0.18);
  margin-bottom: 1.4rem;
}

.film-title {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: var(--white);
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: min(84vw, 720px);
}

.film-title .letter {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.001s, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.film-title .letter.assembled {
  opacity: 1;
  transform: translate(0,0) !important;
}

.film-index {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  z-index: 10;
  font-family: var(--mono);
  font-size: 0.38rem;
  letter-spacing: 0.22em;
  color: rgba(232,228,221,0.2);
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}
.film-index.in { opacity: 1; }

/* Parallax hint — handled in JS */

/* ── SCRIPT PANELS ────────────────────────────────── */
/* .script-panel base now defined in the glass tile section */

.script-panel-num {
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.38rem;
  letter-spacing: 0.22em;
  color: rgba(232,228,221,0.18);
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
  z-index: 2;
}
.script-panel.in-view .script-panel-num { opacity: 1; }

.script-panel-type {
  font-family: var(--mono);
  font-size: 0.38rem;
  letter-spacing: 0.38em;
  color: rgba(232,228,221,0.3);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease 0.1s, transform 0.6s ease 0.1s;
}
.script-panel.in-view .script-panel-type { opacity: 1; transform: translateY(0); }

.script-panel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.script-panel-wrap::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: rgba(232,228,221,0.12);
  margin-bottom: 1.4rem;
}

.script-panel-title {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 3.5vw, 3.2rem);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.08em;
  text-shadow:
    -0.5px 0 0 rgba(255, 60, 60, 0.22),
     0.5px 0 0 rgba(60, 200, 255, 0.22);
  color: rgba(232,228,221,0.82);
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s, color 0.3s;
  max-width: 90vw;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
.script-panel.in-view .script-panel-title { opacity: 1; transform: translateY(0); }
.script-panel-title:hover { color: var(--white); }

/* script-bg and script-overlay now handled in glass tile section */

/* Text sits above glass overlays */
.script-panel .script-panel-num,
.script-panel .script-panel-type,
.script-panel .script-panel-wrap { display: none; }

/* Keep the title span in DOM (JS needs data-script-id) but invisible */
.script-panel-title { visibility: hidden; position: absolute; }

/* ── SCRIPT PASSWORD GATE ─────────────────────────── */
#script-gate {
  position: fixed;
  inset: 0;
  background: rgba(5,5,5,0.97);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#script-gate.open {
  opacity: 1;
  pointer-events: all;
}
#gate-close {
  position: absolute;
  top: 2rem;
  left: 2.4rem;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: rgba(232,228,221,0.5);
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  transition: color 0.2s;
}
#gate-close:hover { color: var(--white); }

#gate-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
#gate-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2rem, 5vw, 4rem);
  color: rgba(232,228,221,0.7);
  letter-spacing: 0.01em;
  margin: 0;
}
#gate-input-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(232,228,221,0.12);
  padding-bottom: 0.6rem;
  width: 18rem;
  max-width: 80vw;
}
#gate-prompt {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: rgba(232,228,221,0.3);
  flex-shrink: 0;
}
#gate-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgba(232,228,221,0.75);
  letter-spacing: 0.18em;
  caret-color: rgba(232,228,221,0.5);
}
#gate-input::placeholder { color: rgba(232,228,221,0.15); }

@keyframes gate-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}
#gate-inner.shake { animation: gate-shake 0.4s ease; }

/* ── CONTACT ──────────────────────────────────────── */
#panel-contact {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#contact-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
#contact-name {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-style: italic;
  font-weight: normal;
  color: rgba(232,228,221,0.7);
  letter-spacing: 0.02em;
}
#contact-email {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.3s;
}
#contact-email:hover { color: var(--white); }
#contact-end {
  position: absolute;
  bottom: 2rem;
  font-family: var(--mono);
  font-size: 0.4rem;
  letter-spacing: 0.25em;
  color: rgba(232,228,221,0.1);
}

/* ── TERMINAL GAME PANEL ──────────────────────────── */
#panel-game {
  background: #020202;
  flex-direction: column;
  justify-content: center;
}

#game-terminal {
  width: 100%;
  max-width: 520px;
  height: var(--rvh, 100dvh);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(6vh, env(safe-area-inset-top, 2rem)) 6vw 4vh;
  box-sizing: border-box;
}

/* Session label at top of game panel */
#game-terminal::before {
  content: 'SESSION';
  display: block;
  font-family: var(--mono);
  font-size: 0.42rem;
  letter-spacing: 0.45em;
  color: rgba(232,228,221,0.2);
  margin-bottom: 3vh;
  flex-shrink: 0;
}

#game-output {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#game-output::-webkit-scrollbar { display: none; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.game-line {
  font-family: var(--mono);
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  line-height: 1.9;
  letter-spacing: 0.02em;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
/* ── GAME LINES ───────────────────────────────────── */
.game-system {
  color: rgba(232,228,221,0.92);
  margin-bottom: 0.4rem;
}
.game-user {
  color: rgba(232,228,221,0.45);
  font-style: normal;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
  padding-left: 1.2em;
  position: relative;
}
.game-user::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(232,228,221,0.25);
}
.game-restart {
  color: rgba(232,228,221,0.28);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  animation: blink 1.4s step-end infinite;
  margin-top: 1rem;
}

/* ── GAME INPUT ───────────────────────────────────── */
#game-input-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(232,228,221,0.1);
  padding-top: 1.2rem;
  margin-top: 0.5rem;
  flex-shrink: 0;
}
#game-prompt {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: rgba(232,228,221,0.5);
  flex-shrink: 0;
  letter-spacing: 0;
}
#game-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 16px; /* must be ≥16px — iOS auto-zooms anything smaller */
  color: rgba(232,228,221,0.95);
  letter-spacing: 0.03em;
  caret-color: var(--white);
}
#game-input::placeholder { color: rgba(232,228,221,0.5); }
#game-input:disabled { opacity: 0.6; }

/* ── MODAL ────────────────────────────────────────── */
#modal {
  position: fixed;
  inset: 0;
  background: #030303;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#modal.open { opacity: 1; pointer-events: all; }
#modal-close {
  position: absolute;
  top: 2rem;
  left: 2.4rem;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s;
  padding: 0;
}
#modal-close:hover { color: var(--white); }
#modal-video {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
  padding: 0 2rem;
}
#modal-video iframe { width:100%; height:100%; border:none; display:block; }

/* ── PROGRESS ─────────────────────────────────────── */
#progress-line {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(232,228,221,0.18);
  width: 0%;
  z-index: 50;
  transition: width 0.3s ease;
}

/* ── NAV COMPASS ──────────────────────────────────── */
#nav-compass {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2.4rem;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: rgba(232,228,221,0.58);
  pointer-events: none;
  text-transform: uppercase;
}
.nav-item { white-space: nowrap; transition: color 0.3s; }
.nav-item:empty { display: none; }
.nav-here { color: rgba(232,228,221,0.85); font-weight: 400; }
.nav-sep {
  width: 1px;
  height: 0.7rem;
  background: rgba(232,228,221,0.2);
  display: block;
  flex-shrink: 0;
}

/* ── REPRESENTATION BUTTON ────────────────────────── */
#rep-btn {
  display: block;
  position: fixed;
  top: 2rem;
  right: 2.4rem;
  z-index: 200;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.44rem;
  letter-spacing: 0.26em;
  color: rgba(232,228,221,0.92);
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  text-shadow:
    0 0 6px  rgba(226,221,214,0.55),
    0 0 14px rgba(226,221,214,0.22);
  animation: name-flicker 5s ease-in-out infinite;
  animation-delay: 1.2s;
  transition: color 0.3s;
}
#rep-btn:hover { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.7); }

/* ── REP OVERLAY ──────────────────────────────────── */
#rep-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,5,5,0.97);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#rep-overlay.open {
  opacity: 1;
  pointer-events: all;
}
#rep-close {
  position: absolute;
  top: 2rem;
  right: 2.4rem;
  background: none;
  border: none;
  font-size: 1rem;
  color: rgba(232,228,221,0.4);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}
#rep-close:hover { color: var(--white); }
#rep-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 6rem;
  max-width: 680px;
  width: 100%;
  padding: 0 4rem;
}
.rep-region {}
.rep-country {
  display: block;
  font-family: var(--mono);
  font-size: 0.38rem;
  letter-spacing: 0.38em;
  color: rgba(232,228,221,0.35);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.rep-agency {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: normal;
  color: rgba(232,228,221,0.85);
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.rep-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rep-contacts a {
  font-family: var(--mono);
  font-size: 0.42rem;
  letter-spacing: 0.12em;
  color: rgba(232,228,221,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.rep-contacts a:hover { color: var(--white); }

@media (max-width: 600px) {
  #rep-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 0 2rem;
  }
  #rep-btn { font-size: 0.36rem; top: 1.4rem; right: 1.4rem; }
}

/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .film-title {
    font-size: clamp(1.4rem, 7vw, 2.4rem);
  }
  .script-panel-title {
    font-size: clamp(1.6rem, 7vw, 2.8rem);
  }
  #about-inner { padding: 28dvh 7vw 8rem; }
  #about-text p { font-size: clamp(1.1rem, 4.5vw, 1.2rem) !important; }
  .film-panel, .script-panel { padding: 0 6vw; }
  #game-terminal { padding: 5vh 6vw 3vh; }
  #header { display: none; }
  #nav-compass { display: none; }
}

/* ── DESKTOP ──────────────────────────────────────── */
@media (min-width: 1024px) {
  #nav-compass   { font-size: 0.6rem; }
  #rep-btn       { font-size: 0.6rem; }
  #header        { font-size: 0.72rem; }
  .ea-label      { font-size: 0.6rem; }
  #gate-close    { font-size: 0.65rem; }

  .landing-nav-item {
    font-size: clamp(0.72rem, 0.95vw, 1.05rem);
    letter-spacing: 0.38em;
  }

  #about-inner { padding: 12vh 12vw 10vh; }
  #about-text p {
    font-size: clamp(0.85rem, 0.95vw, 1rem);
    line-height: 1.9;
  }
}