/* ————————————————————————————————
   AURELIA — a scroll film in six acts
   ———————————————————————————————— */

:root {
  --ink: #0a0908;
  --ink-soft: #14110e;
  --stone: #b7a99a;
  --sand: #d8cbb8;
  --gold: #c2a878;
  --paper: #efe9df;
  --paper-dim: rgba(239, 233, 223, 0.55);
  --hairline: rgba(239, 233, 223, 0.14);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", sans-serif;
  --ease-lux: cubic-bezier(0.32, 0.72, 0, 1);
}

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

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

::selection { background: var(--gold); color: var(--ink); }

/* ——— film grain (5%) ——— */
.grain {
  position: fixed; inset: -100%;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ——— progress bar ——— */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 95;
  pointer-events: none;
}
.progress__fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}

/* ——— type helpers ——— */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}
.actno {
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}
.actno--corner {
  position: absolute;
  top: clamp(5.5rem, 12vh, 7rem);
  left: clamp(1.2rem, 5vw, 4.5rem);
  z-index: 4;
  opacity: 0;
}
.line { display: block; overflow: hidden; padding-block: 0.06em; }
.line__inner { display: inline-block; will-change: transform; }

/* ——— nav ——— */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode: difference;
}
.nav__mark {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.38em;
}
.nav__cta {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.75rem 1.4rem;
  transition: background 0.6s var(--ease-lux), color 0.6s var(--ease-lux);
  will-change: transform;
}
.nav__cta:hover { background: #fff; color: #000; }

/* ——— shared stage (every pinned act) ——— */
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.stage__media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.stage__media img { will-change: transform, filter; }
.stage__shade {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.42) 0%, rgba(10, 9, 8, 0.02) 32%, rgba(10, 9, 8, 0.1) 60%, rgba(10, 9, 8, 0.72) 100%);
}
/* dissolve-through-black between acts */
.stage__black {
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  background: var(--ink);
  opacity: 1;
  will-change: opacity;
}

/* ——— ACT 1 · ARRIVAL ——— */
.arrival__poster,
.arrival__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.arrival__poster { object-fit: cover; will-change: transform; transform-origin: 50% 40%; }
.arrival__canvas { z-index: 1; opacity: 0; }
.arrival__title {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 clamp(1.2rem, 5vw, 4rem);
}
.arrival__title .eyebrow { opacity: 0; }
.headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 8vw, 7.5rem);
  line-height: 1.04;
  letter-spacing: 0.01em;
  margin-top: 1.4rem;
}
.headline em { color: var(--gold); }
.arrival__hint {
  position: absolute;
  bottom: clamp(1.4rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.arrival__hint span {
  display: block;
  width: 1px; height: 52px;
  background: linear-gradient(180deg, transparent, var(--gold));
}
.arrival__hint p {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ——— act captions (one line per act) ——— */
.act__caption {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4.5rem);
  bottom: clamp(2.4rem, 9vh, 6rem);
  z-index: 4;
}
.act__caption--center {
  left: 0; right: 0;
  bottom: auto; top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.oneline {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.8vw, 3.4rem);
  line-height: 1.12;
  margin-top: 0.9rem;
}
.oneline em { color: var(--gold); }
.oneline--big { font-size: clamp(2.4rem, 6.5vw, 6rem); line-height: 1.05; }

/* ——— ACT 3 · ROOMS ——— */
.room {
  position: absolute; inset: 0;
}
.room__media {
  position: absolute; inset: 0;
  overflow: hidden;
  will-change: clip-path;
}
.room__media img { will-change: transform, filter; transform: scale(1.1); }
.room[data-room="1"] .room__media,
.room[data-room="2"] .room__media { clip-path: inset(100% 0 0 0); }
.room__captions {
  position: absolute;
  left: clamp(1.2rem, 5vw, 4.5rem);
  bottom: clamp(2.4rem, 9vh, 6rem);
  z-index: 4;
}
.room__caption {
  position: absolute; bottom: 0; left: 0;
  width: max-content; max-width: 84vw;
  opacity: 0; visibility: hidden;
}
.room__caption[data-caption="0"] { position: relative; }
.roomname {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.08;
}
.roomline {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--paper-dim);
  margin-top: 0.5rem;
}
.roomrate {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 1.1rem;
}

/* ——— ACT 4 · RITUALS ——— */
.rite { position: absolute; inset: 0; }
.rite__media { position: absolute; inset: 0; overflow: hidden; }
.rite__media img { will-change: transform, opacity; transform: scale(1.08); filter: saturate(0.9); }
.rite[data-rite="1"], .rite[data-rite="2"] { opacity: 0; }
.rite__captions {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(2.6rem, 10vh, 6.5rem);
  z-index: 4;
  text-align: center;
}
.rite__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  opacity: 0; visibility: hidden;
}
.rite__caption[data-rcaption="0"] { position: relative; }
.ritename {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 1;
}
.riteline {
  font-size: clamp(0.78rem, 1.1vw, 0.95rem);
  letter-spacing: 0.12em;
  color: var(--paper-dim);
  margin-top: 0.8rem;
}

/* ——— ACT 6 · REQUEST ——— */
.act-request {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 115%, rgba(194, 168, 120, 0.13), transparent 60%),
    var(--ink);
}
.request__inner {
  text-align: center;
  padding: clamp(6rem, 16vh, 10rem) clamp(1.2rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem);
  display: flex; flex-direction: column; align-items: center;
}
.request__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.2rem, 10vw, 9rem);
  line-height: 1.02;
  margin: 1.6rem 0 2rem;
}
.request__title em { color: var(--gold); }
.request__note {
  font-size: 0.85rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
  margin-bottom: 3.2rem;
}
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 1rem;
  border: 1px solid rgba(239, 233, 223, 0.28);
  border-radius: 999px;
  padding: 0.55rem 0.6rem 0.55rem 1.9rem;
  transition: border-color 0.7s var(--ease-lux), background 0.7s var(--ease-lux);
  will-change: transform;
}
.btn:hover { border-color: var(--gold); background: rgba(194, 168, 120, 0.08); }
.btn:active { transform: scale(0.98); }
.btn__label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.btn__orb {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 1rem;
  transition: transform 0.7s var(--ease-lux);
}
.btn:hover .btn__orb { transform: translate(2px, -2px) scale(1.06); }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem clamp(1.2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ——— mobile ——— */
@media (max-width: 768px) {
  .oneline { font-size: clamp(1.4rem, 6.4vw, 2rem); }
  .roomname { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .room__caption { max-width: 90vw; }
}

/* ——— reduced motion: static posters, no scrub ——— */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .progress, .arrival__hint, .arrival__canvas { display: none; }
  .stage { height: auto; min-height: 70vh; }
  .stage__black { display: none; }
  .arrival__poster { position: relative; height: 100vh; }
  .arrival__title { position: absolute; }
  .arrival__title .eyebrow { opacity: 1; }
  .act-threshold .stage__media,
  .act-coast .stage__media { position: relative; height: 80vh; }
  .act__caption { position: relative; left: auto; bottom: auto; padding: 2.4rem clamp(1.2rem, 5vw, 4.5rem); }
  .act__caption--center { top: auto; transform: none; text-align: left; }
  .actno--corner { display: none; }
  .room, .rite { position: relative; }
  .room__media, .rite__media { position: relative; height: 70vh; }
  .room[data-room="1"] .room__media,
  .room[data-room="2"] .room__media { clip-path: none; }
  .rite[data-rite="1"], .rite[data-rite="2"] { opacity: 1; }
  .room__captions, .rite__captions { position: relative; inset: auto; padding: 2rem clamp(1.2rem, 5vw, 4.5rem); text-align: left; }
  .room__caption, .rite__caption { position: relative; opacity: 1; visibility: visible; margin-bottom: 3rem; }
  .room__media img, .rite__media img, .stage__media img { transform: none; }
}