/* maid.day — cinematic ethereal dossier */

:root {
  --vellum: #F5F7FA;
  --frost: #E3EBF4;
  --hairline: #B8C5D6;
  --periwinkle: #8FA8C8;
  --cobalt: #3E5F8C;
  --inkwell: #1C2A44;
  --cyan: #7DD3F0;
  --lilac: #C9B8E0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--vellum);
  color: var(--cobalt);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 300;
  overflow-x: hidden;
  line-height: 1.5;
}

/* ===== continuity hairline ===== */
.continuity-bar {
  position: fixed;
  top: 66.67vh;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hairline);
  z-index: 1;
  pointer-events: none;
}

/* ===== letterbox transition bars ===== */
body::before, body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 6vh;
  background: rgba(28, 42, 68, 0.12);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
body::before { top: 0; }
body::after { bottom: 0; }
body[data-transitioning="true"]::before,
body[data-transitioning="true"]::after { opacity: 1; }

/* ===== scene grid ===== */
.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  column-gap: 24px;
  padding: 96px;
  overflow: hidden;
}

.z-zone { position: relative; display: flex; flex-direction: column; }

.z-tl { grid-column: 1 / 7;  grid-row: 1; align-items: flex-start;  justify-content: flex-start; }
.z-tr { grid-column: 7 / 13; grid-row: 1; align-items: flex-end;    justify-content: flex-start; text-align: right; }
.z-bl { grid-column: 1 / 7;  grid-row: 3; align-items: flex-start;  justify-content: flex-end; }
.z-br { grid-column: 7 / 13; grid-row: 3; align-items: flex-end;    justify-content: flex-end; text-align: right; }

/* ===== typography ===== */
.wordmark {
  font-weight: 200;
  font-size: clamp(64px, 9vw, 144px);
  letter-spacing: -0.04em;
  text-transform: lowercase;
  line-height: 0.95;
  color: var(--cobalt);
}

.scene-heading {
  font-weight: 200;
  font-size: clamp(48px, 7vw, 110px);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  line-height: 0.95;
  color: var(--inkwell);
}

.caption, .scene-number {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--periwinkle);
  line-height: 1.8;
  max-width: 32ch;
}
.z-br .caption, .z-tr .caption { margin-left: auto; }

.body-copy {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--cobalt);
}

.poem {
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 2.0;
  color: var(--cobalt);
}

.scene-numeral {
  font-weight: 200;
  font-size: 240px;
  line-height: 1;
  color: var(--cobalt);
  opacity: 0.08;
  user-select: none;
}

/* ===== illustrations ===== */
.illu { display: block; }
.illu-napkin { width: clamp(180px, 22vw, 320px); height: auto; }
.illu-press { width: clamp(150px, 18vw, 240px); height: auto; }
.illu-decanter { width: clamp(200px, 26vw, 320px); height: auto; }
.illu-fragments { width: clamp(220px, 30vw, 360px); height: auto; }

/* ===== itinerary table ===== */
.itinerary {
  border-collapse: collapse;
  width: 100%;
  max-width: 560px;
}
.itinerary td {
  border-top: 2px solid var(--hairline);
  padding: 14px 0;
  vertical-align: top;
}
.itinerary tr:last-child td { border-bottom: 2px solid var(--hairline); }
.itinerary td.caption { width: 92px; white-space: nowrap; padding-right: 28px; }
.itinerary td.body-copy { text-align: left; }

/* ===== membership cards ===== */
.scene--4 { position: relative; }
.tier-card {
  position: relative;
  width: 320px;
  min-height: 440px;
  background: var(--frost);
  border: 1px solid var(--hairline);
  padding: 36px 28px;
}
.tier-card .tier-label { margin-bottom: 28px; color: var(--cobalt); }
.tier-list { list-style: none; }
.tier-list li { margin-bottom: 18px; }

.tier-card--2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.tier-card--1 { z-index: 1; }
.tier-card--3 { z-index: 3; margin-bottom: 56px; }

/* corner crystal glyph on cards */
.tier-card::before, .tier-card::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--hairline);
  opacity: 0.5;
  transform: rotate(45deg);
}
.tier-card::before { top: -6px; left: -6px; }
.tier-card::after { bottom: -6px; right: -6px; }

/* ===== reservation ===== */
.reservation-form { position: relative; display: inline-block; width: clamp(220px, 28vw, 360px); }
.reservation {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--cobalt);
  padding: 8px 0;
  text-align: right;
}
.reservation::placeholder { color: var(--periwinkle); opacity: 0.7; }
.reservation:focus { outline: none; }
.reservation-underline {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: var(--cyan);
  transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reservation:focus ~ .reservation-underline { width: 100%; }

/* ===== corner crystal glyphs ===== */
.crystal-glyph {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0.3;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
/* placed at the four z-track corners — base glyph in HTML is positioned via JS-injected siblings; here we style the explicit one */
.cg-tl { top: 96px; left: 96px; }
.scene::after, .scene::before {
  /* additional 3 corner glyphs drawn with CSS using the symbol is not possible; JS injects them */
}
.crystal-glyph.crystal--lit { transform: rotate(45deg); }

/* ===== slide-reveal initial offsets ===== */
.reveal { transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.z-tl .reveal { transform: translate(-40vw, 0); }
.z-tr .reveal { transform: translate(40vw, 0); }
.z-bl .reveal { transform: translate(-40vw, 20vh); }
.z-br .reveal { transform: translate(40vw, 20vh); }
/* the floating afternoon card sits visually centre, treat as z-bl style entry */
.scene--4 > .tier-card--2.reveal { transform: translate(-50%, -50%) translate(-40vw, 20vh); }

/* staggered children */
.reveal[data-stagger="0"] { transition-delay: 0ms; }
.reveal[data-stagger="1"] { transition-delay: 90ms; }
.reveal[data-stagger="2"] { transition-delay: 180ms; }
.reveal[data-stagger="3"] { transition-delay: 270ms; }
.reveal[data-stagger="4"] { transition-delay: 360ms; }
.reveal[data-stagger="5"] { transition-delay: 450ms; }

/* revealed state */
.scene.in-view .z-tl .reveal,
.scene.in-view .z-tr .reveal,
.scene.in-view .z-bl .reveal,
.scene.in-view .z-br .reveal { transform: translate(0, 0); }
.scene--4.in-view > .tier-card--2.reveal { transform: translate(-50%, -50%) translate(0, 0); }

/* ===== responsive ===== */
@media (max-width: 768px) {
  .scene { padding: 32px; column-gap: 16px; }
  .cg-tl { top: 32px; left: 32px; }
  .scene-numeral { font-size: 140px; }
  .tier-card { width: 100%; max-width: 320px; }
  .tier-card--2 { position: relative; top: auto; left: auto; transform: none; margin: 28px auto; }
  .scene--4 > .tier-card--2.reveal { transform: translate(-40vw, 20vh); }
  .scene--4.in-view > .tier-card--2.reveal { transform: translate(0, 0); }
  .z-tl, .z-tr, .z-bl, .z-br { grid-column: 1 / 13; }
  .z-tr, .z-br { text-align: left; align-items: flex-start; }
  .z-br .caption, .z-tr .caption { margin-left: 0; }
  .scene { grid-template-rows: auto auto auto; row-gap: 40px; }
}

@media (max-width: 414px) {
  .scene { padding: 20px; }
  .cg-tl { top: 20px; left: 20px; }
  .scene-numeral { font-size: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 0ms !important; transition-delay: 0ms !important; transform: translate(0,0) !important; }
  .scene--4 > .tier-card--2.reveal { transform: translate(-50%,-50%) !important; }
  .crystal-glyph { transition-duration: 0ms !important; }
  body::before, body::after { display: none; }
}