/* ===========================================================
   Come to My Window
   =========================================================== */

:root {
  --ink: #0a0b12;
  --ink-2: #0e1018;
  --night: #11142080;
  --paper: #e8eaf0;
  --accent: #9fb6d6;
  --accent-warm: #d9c9a6;

  /* wall geometry — the poster face + its thickness */
  --w: min(86vw, 116vh);
  --h: calc(var(--w) * 0.75);          /* 4:3 source aspect */
  --d: clamp(46px, 7vw, 96px);          /* wall thickness */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Iowan Old Style", "Palatino Linotype", "Georgia", serif;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100%; }

/* lock body: prevent scrolling until unlocked */
body.is-locked { overflow: hidden; height: 100vh; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===========================================================
   LOCK SCREEN
   =========================================================== */
.lock {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #161a2b 0%, #0a0b12 60%, #06070c 100%);
  transition: opacity 1.1s var(--ease), visibility 1.1s var(--ease);
  padding: 6vw;
}

.lock__sky {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 20%, #cfd8ff 50%, transparent),
    radial-gradient(1.6px 1.6px at 40% 70%, #fff 50%, transparent),
    radial-gradient(1px 1px at 85% 60%, #e6ecff 50%, transparent),
    radial-gradient(1.2px 1.2px at 60% 85%, #fff 50%, transparent),
    radial-gradient(1px 1px at 12% 80%, #cdd6ff 50%, transparent),
    radial-gradient(1.3px 1.3px at 90% 35%, #fff 50%, transparent);
  opacity: 0.55;
  animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.7; } }

.lock__panel { position: relative; z-index: 1; max-width: 36rem; width: 100%; }

/* Jeopardy-style clue board */
.jeopardy {
  margin: 0 0 1.8rem;
  padding: clamp(1.5rem, 5vw, 2.8rem);
  background: linear-gradient(180deg, #0b1ad6 0%, #060ce9 45%, #04089c 100%);
  border-radius: 8px;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 2px rgba(255, 255, 255, 0.07),
    inset 0 0 0 6px rgba(3, 5, 70, 0.5);
}

.jeopardy__category {
  margin: 0 0 1.1rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(0.72rem, 2.6vw, 0.92rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffd166;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
.jeopardy__category span { color: #fff2cc; opacity: 0.85; }

.jeopardy__clue {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 4.2vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}

.lock__form { display: block; }

.lock__field {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(180, 200, 240, 0.25);
  border-radius: 999px;
  padding: 0.45rem 0.5rem 0.45rem 1.4rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.lock__field:focus-within {
  border-color: rgba(190, 210, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(140, 170, 230, 0.12);
}

.lock__field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  font-family: inherit;
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  letter-spacing: 0.12em;
}

.lock__field input::placeholder { color: rgba(220, 228, 245, 0.4); font-style: italic; }

.lock__submit {
  flex: 0 0 auto;
  width: 2.9rem; height: 2.9rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(160deg, #cdd9f5, #8ea6cf);
  color: #0a0b12;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}
.lock__submit:hover { transform: scale(1.06); filter: brightness(1.08); }
.lock__submit:active { transform: scale(0.96); }

.lock__hint {
  margin: 1.1rem 0 0;
  min-height: 1.2em;
  font-size: clamp(0.8rem, 2.6vw, 0.95rem);
  color: rgba(220, 228, 245, 0.55);
  letter-spacing: 0.04em;
  transition: color 0.3s var(--ease);
}
.lock.is-wrong .lock__hint { color: #f3a9a9; }
.lock.is-wrong .lock__field { animation: shake 0.5s var(--ease); border-color: rgba(243, 169, 169, 0.7); }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* fade out once unlocked */
body:not(.is-locked) .lock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===========================================================
   EXPERIENCE
   =========================================================== */
.experience {
  position: relative;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 0.2s;
}
body:not(.is-locked) .experience { opacity: 1; }

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1.3px 1.3px at 15% 22%, rgba(255,255,255,0.9) 50%, transparent),
    radial-gradient(1px 1px at 62% 14%, rgba(207,216,255,0.8) 50%, transparent),
    radial-gradient(1.5px 1.5px at 38% 64%, rgba(255,255,255,0.85) 50%, transparent),
    radial-gradient(1px 1px at 83% 52%, rgba(230,236,255,0.7) 50%, transparent),
    radial-gradient(1.2px 1.2px at 74% 82%, rgba(255,255,255,0.8) 50%, transparent),
    radial-gradient(1px 1px at 26% 88%, rgba(205,214,255,0.7) 50%, transparent),
    radial-gradient(ellipse at 50% 40%, #12152099 0%, #0a0b12 70%);
  background-color: #070810;
}

.scroll-track {
  position: relative;
  height: 360vh;            /* scroll distance that drives the 0–180° turn */
  z-index: 1;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 1700px;
  perspective-origin: 50% 44%;
  overflow: hidden;
}

/* the 3D box: poster front, poster back, four wall edges */
.wall {
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}

.face,
.edge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.face {
  width: var(--w);
  height: var(--h);
  margin: 0;
  overflow: hidden;
  background: #05060a;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.55);
  backface-visibility: hidden;
}

.face picture, .face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.face--front { transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2)); }
.face--back  { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--d) / 2)); }

/* dynamic shading overlay (opacity driven by JS) */
.face__shade {
  position: absolute;
  inset: 0;
  background: #05070d;
  opacity: 0;
  pointer-events: none;
}

/* --- wall edges --- */
.edge {
  background:
    linear-gradient(var(--edge-angle, 90deg),
      #1a1d28 0%, #0c0e15 45%, #07080d 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5);
}

.edge--right {
  width: var(--d); height: var(--h);
  --edge-angle: 90deg;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--w) / 2));
}
.edge--left {
  width: var(--d); height: var(--h);
  --edge-angle: 270deg;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--w) / 2));
}
.edge--top {
  width: var(--w); height: var(--d);
  --edge-angle: 0deg;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--h) / 2));
}
.edge--bottom {
  width: var(--w); height: var(--d);
  --edge-angle: 180deg;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--h) / 2));
}

/* soft contact shadow on the "floor" */
.floor-shadow {
  position: absolute;
  bottom: 8vh;
  left: 50%;
  width: var(--w);
  height: 5vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}

/* ===========================================================
   HUD
   =========================================================== */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(220, 228, 245, 0.7);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: opacity 0.6s var(--ease);
}
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }

.scroll-hint__chevron {
  width: 12px; height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

.audio-toggle {
  position: fixed;
  top: 2vh; right: 2vw;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  background: rgba(10, 12, 20, 0.5);
  border: 1px solid rgba(180, 200, 240, 0.22);
  border-radius: 999px;
  color: rgba(220, 228, 245, 0.85);
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.audio-toggle:hover { border-color: rgba(190, 210, 255, 0.55); background: rgba(20, 24, 38, 0.6); }

.audio-toggle__icon {
  position: relative;
  width: 16px; height: 16px;
  display: inline-block;
}
/* speaker body */
.audio-toggle__icon::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 4px 7px 4px 0;
  border-color: transparent currentColor transparent transparent;
}
/* sound waves (shown when playing) */
.audio-toggle__icon::after {
  content: "";
  position: absolute;
  right: 0; top: 2px;
  width: 8px; height: 8px;
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0 8px 0 0;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.audio-toggle.is-playing .audio-toggle__icon::after { opacity: 1; }
.audio-toggle.is-playing { color: #fff; border-color: rgba(190, 210, 255, 0.6); }

/* ===========================================================
   RESPONSIVE / MOTION
   =========================================================== */
@media (max-width: 700px) {
  :root { --w: min(92vw, 70vh); --d: clamp(34px, 11vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .lock__sky, .scroll-hint__chevron { animation: none; }
  .experience { transition: opacity 0.4s linear; }
  .lock { transition: opacity 0.4s linear, visibility 0.4s linear; }
}