* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; background: #000; }

html, button { cursor: url(assets/cursor.png) 4 0, auto; }

body {
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  color: #eef3ff;
}

body.arrived { overflow: auto; }

canvas {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ---------- Scene 1: intro ---------- */

#intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  perspective: 800px; /* keep in sync with P in main.js */
  transition: opacity .8s ease;
}
body.arrived #intro { opacity: 0; }

/* the navy sky thins out during the flight, revealing the distant galaxy */
.sky-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(#0a1744, #10276a);
  transition: opacity 2.4s ease .8s;
}
body.world .sky-bg { opacity: 0; }

#stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* stars and clouds, positioned in 3D by main.js */
.layer {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transition: transform 2.8s cubic-bezier(.65, 0, .35, 1);
}
body.open #curtain-left  { transform: translateX(-110%) scale(1.15); }
body.open #curtain-right { transform: translateX(110%) scale(1.15); }

.content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4.5vh, 40px);
  padding: 0 16px;
  text-align: center;
  transform-style: preserve-3d;
}

.title {
  font-size: clamp(15px, min(5.6vw, 7.5vh), 64px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: .08em .08em 0 #0a1640;
}

.sub {
  font-size: clamp(10px, min(2vw, 3vh), 20px);
  text-shadow: .12em .12em 0 #0a1640;
}

.sub, .start {
  opacity: 0;
  translate: 0 10px;
  transition: opacity .8s ease, translate .8s ease;
}
.start { transition-delay: .3s; }
body.ready .sub, body.ready .start { opacity: 1; translate: 0 0; }

.start {
  --c: #eef3ff;
  position: relative;
  font: inherit;
  font-size: clamp(16px, min(3.4vw, 5vh), 34px);
  letter-spacing: .06em;
  color: #c9d9ff;
  text-shadow: .08em .08em 0 #0c1a45;
  background: #1f3c7c;
  border: 3px solid #6f93d8;
  box-shadow: 0 0 0 3px #0c1a45, inset 0 0 0 3px #2a4c92;
  padding: .55em .85em .5em;
}

/* pixel corner brackets around the button */
.start::before {
  content: '';
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / 10px 3px,
    linear-gradient(var(--c), var(--c)) left top / 3px 10px,
    linear-gradient(var(--c), var(--c)) right top / 10px 3px,
    linear-gradient(var(--c), var(--c)) right top / 3px 10px,
    linear-gradient(var(--c), var(--c)) left bottom / 10px 3px,
    linear-gradient(var(--c), var(--c)) left bottom / 3px 10px,
    linear-gradient(var(--c), var(--c)) right bottom / 10px 3px,
    linear-gradient(var(--c), var(--c)) right bottom / 3px 10px;
  background-repeat: no-repeat;
}

.start:hover, .start:focus-visible { background: #28499a; color: #fff; outline: none; }
.start:hover::before, .start:focus-visible::before { animation: bracket 1s steps(1) infinite; }
.start:active { background: #1a3470; }

@keyframes bracket {
  50% { inset: -17px; }
}

#fade {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #000;
  pointer-events: none;
  transition: opacity 1.6s ease;
}
body.lit #fade { opacity: 0; }
body.gate #fade { pointer-events: auto; }

.gate-text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(10px, 2.6vw, 16px);
  color: #c9d9ff;
  opacity: 0;
  transition: opacity .6s ease;
}
body.gate .gate-text { opacity: 1; animation: blink 1.2s steps(1) infinite; }

@keyframes blink {
  50% { opacity: .25; }
}

/* ---------- Scene 2: world ---------- */

#world {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
}

.galaxy {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* always fills the screen; eases in a little as the camera arrives */
  transition: transform 5.5s cubic-bezier(.3, .1, .2, 1) .3s;
}
body.world .galaxy { transform: scale(1.15); }

.galaxy::before {
  content: '';
  position: absolute;
  inset: -3%;
  background: url(assets/galaxy.jpg) center / cover no-repeat;
  animation: drift 60s ease-in-out infinite alternate;
}

.galaxy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75) 100%);
}

#sparkles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: auto;
}

/* ---------- the magazine ---------- */

#mag {
  position: fixed;
  inset: 0;
  z-index: 20;
  perspective: 1200px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
body.arrived #mag { opacity: 1; }

#mag-dim {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #02040f;
  opacity: 0;
}

/* each page is a 3D slab: framed front, plain back, paper-stack edges */
.page {
  position: absolute;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.page img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
  box-shadow: 0 calc(1px * var(--u)) calc(4px * var(--u)) rgba(0, 0, 0, .35);
}

.face { position: absolute; inset: 0; backface-visibility: hidden; }

.front {
  padding: var(--frame);
  transform: translateZ(calc(var(--thick) / 2));
  background: linear-gradient(145deg, #fbf8f2, #e6ddcd);
  /* double gold line on the mat, plus a faint blue rim to lift it off the galaxy */
  box-shadow:
    inset 0 0 0 calc(1px * var(--u)) rgba(176, 140, 76, .9),
    inset 0 0 0 calc(4px * var(--u)) #f6f1e8,
    inset 0 0 0 calc(5px * var(--u)) rgba(176, 140, 76, .55),
    0 0 0 calc(1px * var(--u)) rgba(200, 220, 255, .25),
    0 0 calc(34px * var(--u)) rgba(120, 160, 255, .16);
}

/* glossy sheen that slides across as the page tilts */
.front::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 48%, transparent 60%) var(--sheen, 50%) 0 / 300% 100%;
  mix-blend-mode: screen;
}

.back {
  transform: rotateY(180deg) translateZ(calc(var(--thick) / 2));
  background: #d9d0c0;
}

.edge {
  position: absolute;
  background: repeating-linear-gradient(var(--dir, 0deg),
    #f3ede2 0 calc(2px * var(--u)), #cfc5b3 calc(2px * var(--u)) calc(3px * var(--u)));
}
.edge.top, .edge.bottom { left: 0; width: 100%; height: var(--thick); }
.edge.left, .edge.right { top: 0; height: 100%; width: var(--thick); --dir: 90deg; }
.edge.top    { top: calc(var(--thick) / -2); transform: rotateX(90deg); }
.edge.bottom { bottom: calc(var(--thick) / -2); transform: rotateX(-90deg); }
.edge.left   { left: calc(var(--thick) / -2); transform: rotateY(-90deg); }
.edge.right  { right: calc(var(--thick) / -2); transform: rotateY(90deg); }

/* soft shadow floating behind the slab */
.shadow {
  position: absolute;
  inset: 8% 6%;
  transform: translateZ(calc(-90px * var(--u))) translateY(calc(50px * var(--u)));
  background: rgba(0, 0, 0, .7);
  filter: blur(calc(30px * var(--u)));
  border-radius: calc(12px * var(--u));
  pointer-events: none;
}

/* hide the scrollbar so the galaxy stays immersive */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

/* message box that opens from the hidden star */
.dialog {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 35;
  width: min(680px, calc(100% - 32px));
  min-height: 8em;
  padding: 20px 22px 30px;
  font-size: clamp(10px, 2.4vw, 14px);
  line-height: 1.9;
  color: #eef3ff;
  background: rgba(12, 26, 69, .92);
  border: 3px solid #6f93d8;
  box-shadow: 0 0 0 3px #0c1a45, inset 0 0 0 3px #2a4c92;
}

.dialog-next {
  position: absolute;
  right: 16px;
  bottom: 12px;
  border: 6px solid transparent;
  border-top: 8px solid #eef3ff;
  border-bottom: 0;
  opacity: 0;
}
.dialog.done .dialog-next { opacity: 1; animation: bob .8s steps(1) infinite; }

@keyframes bob {
  50% { transform: translateY(3px); }
}

.mute {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 38;
  width: 44px;
  height: 44px;
  padding: 7px;
  /* same pink and lavender as the folder icon */
  background: linear-gradient(#ded1ed, #ebb6ca);
  border: 3px solid #e476a3;
  box-shadow: inset 3px 3px 0 #f5ecef;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
body.arrived .mute { opacity: 1; pointer-events: auto; }
.mute:hover { background: linear-gradient(#e6dbf3, #f0c4d5); }
.mute svg { display: block; width: 100%; height: 100%; fill: #c4497f; }
.mute .x { display: none; }
.mute.off .wave { display: none; }
.mute.off .x { display: inline; }

/* keep the dialog clear of the folder button on narrow screens */
@media (max-width: 760px) {
  .dialog { bottom: 88px; }
}

/* ---------- folder button and the crossword sheet ---------- */

.folder {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 37;
  width: 64px;
  padding: 0;
  border: 0;
  background: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
body.arrived .folder { opacity: 1; pointer-events: auto; }
.folder img {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
  transition: transform .25s steps(3);
}
.folder:hover img, .folder:focus-visible img { transform: translateY(-4px); }
.folder.open img { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
.folder:focus-visible { outline: 2px dashed #e476a3; outline-offset: 4px; }

@media (max-width: 640px) {
  .folder { width: 54px; }
}

.paper {
  position: fixed;
  inset: 0;
  z-index: 36;
  perspective: 1400px;
  pointer-events: none;
}
.paper.open { pointer-events: auto; }
body.paper-open { overflow: hidden; }

.paper-dim {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 24, .62);
  opacity: 0;
  transition: opacity .6s ease;
}
.paper.open .paper-dim { opacity: 1; }

/* closed: tipped back and dropped below the screen; open: flat and centred */
.sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, calc(100vw - 24px));
  height: calc(100vh - 110px);
  height: calc(100dvh - 110px);
  margin-top: -34px;
  background: #f0c3d8;
  border-radius: 3px;
  box-shadow:
    4px 5px 0 -1px #f7dbe8,
    8px 10px 0 -2px #e9c2d4,
    0 40px 90px rgba(0, 0, 0, .6);
  transform: translate(-50%, -50%) translate3d(0, 115vh, 0) rotateX(50deg) rotateZ(-8deg);
  transition: transform .95s cubic-bezier(.2, .85, .25, 1);
}
.paper.open .sheet { transform: translate(-50%, -50%); }

.sheet iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 3px;
}

/* washi tape holding the sheet */
.tape {
  position: absolute;
  top: -14px;
  z-index: 1;
  width: 120px;
  height: 30px;
  background: rgba(228, 118, 163, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  pointer-events: none;
}
.tape-l { left: 7%; transform: rotate(-6deg); }
.tape-r { right: 7%; transform: rotate(5deg); }

/* ---------- the pony ---------- */

.pony {
  position: fixed;
  left: 0;
  bottom: 4px;
  z-index: 34;
  width: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4));
}

#trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
}

@keyframes drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.5%, 1%); }
}