/* =================================================================
   #FindTheThird — ARG teaser
   Mobile-portrait first. Heavy / unsettling.
   ================================================================= */

:root {
  --bg: #000;
  --ink: #e8e8e8;
  --ghost: rgba(232, 232, 232, 0.16);
  --accent: #b9b3a7;
  --mono: "Courier New", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: Georgia, "Times New Roman", serif;
  /* real viewport height, accounting for mobile browser chrome */
  --vh: 100vh;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body { position: fixed; inset: 0; }

/* ---------- Scene system ---------- */
.scene {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: var(--vh);
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.2s ease;
  will-change: opacity;
}
.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
   SCENE 1 — DECRYPT LOADER
   ================================================================= */
#loader { background: #000; }

.loader-inner {
  width: min(86vw, 540px);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
}

.decrypt {
  font-family: var(--mono);
  font-size: clamp(0.72rem, 3.6vw, 1rem);
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #8f968a;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 8.5em;
  text-shadow: 0 0 6px rgba(143, 150, 138, 0.35);
}
.decrypt .done { color: #d7dccd; text-shadow: 0 0 8px rgba(215, 220, 205, 0.45); }
.decrypt .scramble { color: #6f756a; opacity: 0.85; }

.decrypt-bar {
  width: 100%;
  height: 2px;
  background: rgba(143, 150, 138, 0.18);
  overflow: hidden;
}
.decrypt-bar-fill {
  height: 100%;
  width: 0%;
  background: #8f968a;
  box-shadow: 0 0 10px rgba(143, 150, 138, 0.8);
  transition: width 0.25s steps(6, end);
}

.decrypt-status {
  font-family: var(--mono);
  font-size: clamp(0.62rem, 3vw, 0.8rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5f655b;
  min-height: 1.2em;
}

/* =================================================================
   SCENE 2 — THE ROOM
   ================================================================= */
#room { background: #000; overflow: hidden; }

.room-media {
  position: absolute;
  inset: -4%;            /* bleed for drift */
  width: 108%;
  height: 108%;
  object-fit: cover;
  z-index: 0;
}

/* CSS stand-in for "dimly lit cinematic room" — a faint pool of light
   in a dark space. Swap for real footage when ready. */
.room-placeholder {
  background:
    radial-gradient(120% 80% at 50% 18%,
      rgba(60, 52, 40, 0.55) 0%,
      rgba(28, 24, 19, 0.5) 26%,
      rgba(8, 7, 6, 0.85) 60%,
      #050505 100%),
    radial-gradient(60% 40% at 50% 30%,
      rgba(150, 120, 70, 0.18) 0%,
      rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #0a0908 0%, #050404 55%, #000 100%);
  animation: roomDrift 26s ease-in-out infinite alternate;
}
/* faint horizontal "floor line" + doorway suggestion */
.room-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 61%, transparent 63%),
    radial-gradient(28% 55% at 50% 42%, rgba(120,95,55,0.16) 0%, transparent 72%);
  mix-blend-mode: screen;
}

@keyframes roomDrift {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.1) translate(-1.5%, -1%); }
}

/* film grain */
.grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grainShift 0.6s steps(4) infinite;
  mix-blend-mode: screen;
}
.grain-faint { opacity: 0.05; z-index: 1; }

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6%, 4%); }
  50%  { transform: translate(3%, -5%); }
  75%  { transform: translate(-4%, -3%); }
  100% { transform: translate(5%, 4%); }
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%,
    transparent 38%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.92) 100%);
}

/* full-screen flicker / darkening pulse */
.flicker-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #000;
  opacity: 0;
  animation: flicker 7s linear infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0; }
  46% { opacity: 0; }
  47% { opacity: 0.55; }
  48% { opacity: 0.05; }
  49% { opacity: 0.4; }
  50% { opacity: 0; }
  82% { opacity: 0; }
  83% { opacity: 0.3; }
  84% { opacity: 0; }
}

/* ---------- the barely-visible #FindTheThird ---------- */
.hashtag {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: none;
  border: 0;
  padding: 1.2rem 1.6rem;   /* generous tap target */
  font-family: var(--serif);
  cursor: pointer;
  appearance: none;
}
.hashtag-text {
  display: inline-block;
  font-size: clamp(1.5rem, 8vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(232, 232, 232, 0.13);
  text-shadow: 0 0 1px rgba(255,255,255,0.08);
  animation: hashtagBreathe 6s ease-in-out infinite;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.hashtag:active .hashtag-text,
.hashtag:hover .hashtag-text {
  color: rgba(232, 232, 232, 0.32);
  text-shadow: 0 0 14px rgba(220, 220, 210, 0.4);
}
@keyframes hashtagBreathe {
  0%, 100% { opacity: 0.5; }
  40% { opacity: 1; }
  43% { opacity: 0.25; }
  46% { opacity: 0.85; }
  70% { opacity: 0.6; }
}

/* glitch burst when tapped (added via JS) */
.glitching .room-media { animation: roomGlitch 0.5s steps(2) 2; }
@keyframes roomGlitch {
  0% { filter: none; transform: translate(0,0) scale(1.06); }
  20% { filter: invert(1) hue-rotate(80deg); transform: translate(2%, -1%) scale(1.08); }
  40% { filter: none; transform: translate(-2%, 1%) scale(1.05); }
  60% { filter: contrast(2) brightness(1.5); transform: translate(1%, 0) scale(1.09); }
  100% { filter: none; transform: translate(0,0) scale(1.06); }
}

/* =================================================================
   SCENE 3 — THE POEM
   ================================================================= */
.poem-scene {
  background: #000;
  align-items: center;
  justify-content: center;
  padding: 14vh 5vw;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.poem-body {
  width: 100%;
  max-width: 760px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(0.95rem, 4.6vw, 1.45rem);
  line-height: 2.2;
  letter-spacing: 0.02em;
}

.poem-line {
  display: block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(6px);
}

/* inner wrapper: held to a single line, scaled by JS to fit width */
.poem-fit {
  display: inline-block;
  white-space: nowrap;
  transform-origin: left center;
}
.poem-line.show {
  animation: lineIn 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes lineIn {
  0% { opacity: 0; filter: blur(6px); transform: translateY(6px); }
  60% { opacity: 0.9; filter: blur(0.5px); }
  100% { opacity: 0.92; filter: blur(0); transform: translateY(0); }
}

/* per-character flicker / unsettle */
.poem-line .ch {
  display: inline-block;
  white-space: pre;
}
.poem-line .ch.jit { animation: chJitter 3.5s ease-in-out infinite; }
@keyframes chJitter {
  0%, 100% { transform: translate(0,0); opacity: 0.92; }
  48% { transform: translate(0, 0); }
  49% { transform: translate(0.5px, -1px); opacity: 0.5; }
  50% { transform: translate(-0.5px, 0); opacity: 1; }
  51% { transform: translate(0, 1px); opacity: 0.7; }
}

/* whole-poem occasional flash */
.poem-scene .glitch-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.poem-scene.flash .glitch-flash { animation: poemFlash 0.18s steps(2) 1; }
@keyframes poemFlash {
  0% { opacity: 0; }
  50% { opacity: 0.08; }
  100% { opacity: 0; }
}

/* =================================================================
   Accessibility / motion
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .room-placeholder,
  .grain,
  .flicker-layer,
  .hashtag-text,
  .poem-line .ch.jit { animation: none !important; }
  .hashtag-text { color: rgba(232,232,232,0.22); }
  .poem-line { filter: none; transition: opacity 0.8s ease; }
}

/* larger screens: keep it intimate, centered, portrait-ish column */
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .hashtag { top: 18%; }
}