/* =========================================================
   Scroll-Portal Engine — shared across every scene
   Palette is driven by CSS variables so each scene reskins
   the same mechanics. Scene-specific art lives per page.
   ========================================================= */

:root {
  --bg: #05060a;
  --ink: #ffffff;
  --muted: #9fb0c8;

  /* doorway gradient */
  --door-a: #ffe6b0;
  --door-b: #f4b451;
  --door-c: #b9721f;

  /* doorway glow bloom */
  --glow-1: rgba(255, 190, 110, 0.9);
  --glow-2: rgba(255, 170, 80, 0.55);
  --glow-3: rgba(255, 150, 60, 0.35);

  --accent: #f4b451;

  /* doorway placement + size (the zoom origin) */
  --door-x: 50%;
  --door-y: 63%;
  --door-w: 6.5vw;
  --door-h: 11vw;

  --track: 500vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---- scroll mechanics ---- */
.scroll-track { height: var(--track); position: relative; }
.viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* the exterior world — this whole layer scales toward the door */
.stage {
  position: absolute;
  inset: 0;
  transform-origin: var(--door-x) var(--door-y);
  will-change: transform, filter;
}
.scene { position: absolute; inset: 0; }

/* generic photo layer helper */
.cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* the glowing doorway we fly into */
.door {
  position: absolute;
  left: var(--door-x);
  top: var(--door-y);
  transform: translate(-50%, -50%);
  width: var(--door-w);
  height: var(--door-h);
  min-width: 56px;
  min-height: 96px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, var(--door-a) 0%, var(--door-b) 45%, var(--door-c) 100%);
  box-shadow:
    0 0 10px 3px var(--glow-1),
    0 0 46px 14px var(--glow-2),
    0 0 130px 46px var(--glow-3);
}

/* the interior — crisp, above the stage, crossfades in */
.interior {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

/* ---- overlay UI ---- */
.ui { position: absolute; inset: 0; padding: clamp(20px, 4vw, 56px); will-change: opacity, transform; }

.hero-ui {
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.brand { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(16px, 2vw, 22px); }
.hero-center { text-align: center; }
.hero-center h1 {
  font-weight: 300; letter-spacing: -0.04em;
  font-size: clamp(30px, 6vw, 76px); line-height: 1.05;
}
.hero-center p { margin-top: 16px; color: var(--muted); font-size: clamp(14px, 1.6vw, 19px); }

.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 12px; position: relative; }
.mouse::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 6px;
  background: #fff; border-radius: 2px; transform: translateX(-50%);
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

.inside-ui {
  z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; opacity: 0; pointer-events: none;
}
.inside-ui .eyebrow { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
.inside-ui h2 { font-weight: 300; letter-spacing: -0.03em; font-size: clamp(34px, 6vw, 72px); }
.inside-ui p { color: var(--muted); max-width: 36ch; font-size: clamp(14px, 1.6vw, 18px); }

.glass-btn {
  margin-top: 4px; pointer-events: auto; padding: 12px 26px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-weight: 500; cursor: pointer; font-family: inherit; font-size: 14px;
}

/* fixed chrome */
.topbar {
  position: fixed; z-index: 45; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 56px); pointer-events: none;
}
.topbar a, .topbar .tag { pointer-events: auto; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.topbar a:hover { color: #fff; }

.progress {
  position: fixed; left: 0; top: 0; height: 3px; z-index: 50; width: 0%;
  background: linear-gradient(90deg, var(--accent), #ffffff);
}

@media (max-width: 640px) {
  :root { --door-w: 16vw; --door-h: 26vw; }
}