/* ============================================================
   SERAPHINE SS27 — digital invite
   Palette: gallery cream #F2EDE4 · ink #121212 · saffron #E8A020
   Type: Anton (display) vs Archivo (editorial body) — Nancy DNA
   ============================================================ */

:root {
  --cream: #F2EDE4;
  --ink: #121212;
  --saffron: #E8A020;
  --cream-dim: rgba(242, 237, 228, 0.55);
  --ink-dim: rgba(18, 18, 18, 0.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-tear: cubic-bezier(0.7, 0, 0.2, 1);

  /* long ease-out, no overshoot - the "expensive" curve for entrances */
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  /* slow to leave, slow to arrive - the two halves of the crossfade */
  --ease-reveal: cubic-bezier(0.32, 0, 0.16, 1);
  --ease-bloom: cubic-bezier(0.45, 0, 0.25, 1);

  /* ---- REVEAL / SETTLE pacing. See TIMING.md. Every delay below is
     measured from the instant JS adds body.entered (= REVEAL, t_r). ---- */
  --t-intro-fade: 2600ms;   /* mirrored as INTRO_FADE in js/main.js */
  --t-invite-in: 2000ms;
  --t-overlay-out: 550ms;
  --t-push: 7000ms;         /* video push-in = clip length at 0.72x */

  --t-line: 1400ms;
  --d-line-1: 900ms;
  --d-line-2: 1150ms;
  --t-sub: 1100ms;
  --d-sub: 1700ms;
  --t-card: 1500ms;
  --d-card: 1450ms;
  --t-cta: 1000ms;
  --d-cta: 2150ms;
  --t-nav: 1000ms;
  --d-nav: 1000ms;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Archivo', sans-serif;
  background: var(--ink);
  color: var(--cream);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.on-intro { overflow: hidden; }

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

/* ============ INTRO ============ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: opacity var(--t-intro-fade) var(--ease-reveal);
  overflow: hidden;
}

.intro.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro.hidden { display: none; }

/* full-screen tear video — first frame = opening state. object-fit cover is now
   safe because the ticket is full-bleed in the footage (bleeds off all edges) */
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  /* first frame == load state: the scale is identical at t=0 and only drifts
     once the clip is running, so continuity with the poster stays exact */
  transform: scale(1.03);
  transform-origin: 50% 48%;
  transition: transform var(--t-push) linear;
}

.intro.is-playing .intro-video { transform: scale(1.065); }

/* HTML text overlay — independent of video framing, always crisp */
.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(2.5rem, 8vh, 5rem) 1.5rem;
  pointer-events: none;
  transition: opacity var(--t-overlay-out) var(--ease-reveal),
              transform var(--t-overlay-out) var(--ease-reveal);
}

.intro.is-playing .intro-overlay { opacity: 0; transform: translateY(-10px); }

.intro-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cream-dim);
  animation: rise 0.9s var(--ease-out) both;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.intro-hint {
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-dim);
  animation: pulse-hint 2.2s ease-in-out infinite 1.2s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-hint {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* --- the ticket --- */

.ticket {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--cream);
  color: var(--ink);
  padding: 0;
  min-width: min(560px, 88vw);
  max-width: 88vw;
  height: 150px;
  animation: rise 0.9s var(--ease-out) 0.15s both;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.intro-hit:hover ~ .intro-stage .ticket,
.intro:not(.is-playing) .intro-stage:hover .ticket {
  transform: translateY(-4px) rotate(-0.4deg);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.45);
}

.ticket-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.4rem 1.6rem;
  text-align: left;
}

.ticket-brand {
  font-family: 'Anton', sans-serif;
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.ticket-sub {
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.ticket-meta {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saffron);
  font-weight: 600;
}

.ticket-perf {
  width: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.perf-dot {
  width: 8px;
  height: 2px;
  background: var(--ink);
  opacity: 0.35;
}

.ticket-right {
  width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.stub-no {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.stub-word {
  font-family: 'Anton', sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--saffron);
  -webkit-text-stroke: 0;
}

.stub-arrow {
  font-size: 1.1rem;
  color: var(--ink-dim);
  transition: transform 0.3s var(--ease-out);
}

.ticket:hover:not(.is-torn) .stub-arrow { transform: translateX(5px); }

/* saffron edge on the tear side */
.ticket::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--saffron);
}

/* invisible full-screen hit target, sits above the video */
.intro-hit {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  border: none;
  cursor: pointer;
}

.intro.is-playing .intro-hit { pointer-events: none; cursor: default; }

/* ============ MAIN INVITE ============ */

.invite {
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  opacity: 0;
  transition: opacity var(--t-invite-in) var(--ease-bloom);
}

body.entered .invite { opacity: 1; }

/* --- hero --- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.4rem clamp(1.2rem, 4vw, 3.5rem) clamp(1.4rem, 3vw, 2.5rem);
  position: relative;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
}

body.entered .nav { animation: fade-in var(--t-nav) var(--ease-lux) var(--d-nav) forwards; }

.nav-mark { font-family: 'Anton', sans-serif; font-size: 1rem; color: var(--ink); letter-spacing: 0.05em; }

.hero-type {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero-line {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.2rem, 17.5vw, 15.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow: hidden;
}

/* Held at rest until REVEAL - the stagger is choreography, not a page-load
   animation that has already finished by the time the ticket is torn. */
.hero-line span {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform;
}

body.entered .hero-line span {
  animation: line-up var(--t-line) var(--ease-lux) var(--d-line-1) forwards;
}

.hero-line--indent { padding-left: clamp(2rem, 12vw, 11rem); }
body.entered .hero-line--indent span { animation-delay: var(--d-line-2); }

@keyframes line-up { to { transform: translateY(0); } }

.hero-sub {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
}

body.entered .hero-sub {
  animation: fade-in var(--t-sub) var(--ease-lux) var(--d-sub) forwards;
}

.hero-season { color: var(--saffron); font-weight: 600; }
.hero-rule { width: 3rem; height: 1px; background: var(--ink); }

@keyframes fade-in { to { opacity: 1; } }

.hero-card {
  position: absolute;
  right: clamp(1.2rem, 5vw, 4.5rem);
  top: 16%;
  width: clamp(150px, 19vw, 270px);
  transform: rotate(2.5deg);
  opacity: 0;
}

body.entered .hero-card {
  animation: card-in var(--t-card) var(--ease-lux) var(--d-card) both;
}

.hero-card img {
  width: 100%;
  display: block;
  box-shadow: 0 24px 60px rgba(18, 18, 18, 0.28);
}

.hero-card figcaption {
  margin-top: 0.7rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

@keyframes card-in {
  from { opacity: 0; transform: rotate(2.5deg) translateY(28px); }
  to { opacity: 1; transform: rotate(2.5deg) translateY(0); }
}

/* --- CTA --- */

.hero-cta {
  justify-self: start;
  align-self: end;
  display: inline-block;
  padding: 1rem 1.6rem;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
}

body.entered .hero-cta {
  animation: fade-in var(--t-cta) var(--ease-lux) var(--d-cta) forwards;
}

.hero-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--saffron);
  transform: translateY(101%);
  transition: transform 0.35s var(--ease-out);
  z-index: -1;
}

.hero-cta:hover::before { transform: translateY(0); }
.hero-cta:hover { color: var(--ink); }

/* --- details --- */

.details {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(3rem, 8vw, 6.5rem) clamp(1.2rem, 4vw, 3.5rem);
}

.details-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.d-cell {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(242, 237, 228, 0.25);
}

.d-label {
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--saffron);
}

.d-value {
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 300;
}

/* --- programme --- */

.programme {
  padding: clamp(3.5rem, 9vw, 7.5rem) clamp(1.2rem, 4vw, 3.5rem);
}

.p-kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 2.2rem;
}

.p-list {
  list-style: none;
  max-width: 1400px;
  margin: 0 auto;
}

.p-list li {
  display: flex;
  align-items: baseline;
  gap: 2.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(18, 18, 18, 0.14);
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
}

.p-list li span:first-child {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  min-width: 4.2rem;
}

/* --- rsvp --- */

.rsvp {
  background: var(--saffron);
  color: var(--ink);
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: none;
}

.rsvp-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.rsvp-form { display: flex; flex-direction: column; gap: 1.6rem; justify-content: center; }

.field { display: flex; flex-direction: column; gap: 0.5rem; }

.field span {
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.field input {
  border: none;
  border-bottom: 1.5px solid rgba(18, 18, 18, 0.45);
  background: transparent;
  font-family: 'Archivo', sans-serif;
  font-size: 1.05rem;
  padding: 0.55rem 0;
  color: var(--ink);
  border-radius: 0;
}

.field input:focus { outline: none; border-bottom-color: var(--ink); }
.field input[readonly] { opacity: 0.6; letter-spacing: 0.14em; }

.rsvp-btn {
  position: relative;
  border: 1.5px solid var(--ink);
  background: transparent;
  padding: 1.05rem 1.8rem;
  font-family: 'Archivo', sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  margin-top: 0.4rem;
}

.rsvp-btn-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.35s var(--ease-out);
  z-index: 0;
}

.rsvp-btn:hover .rsvp-btn-fill { transform: translateY(0); }
.rsvp-btn:hover .rsvp-btn-label { color: var(--saffron); }
.rsvp-btn-label { position: relative; z-index: 1; transition: color 0.35s; }

.rsvp-note { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.65; }

/* success state */
.rsvp-done {
  position: absolute;
  inset: 0;
  background: var(--saffron);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.rsvp { position: relative; }

.rsvp-done.is-shown { opacity: 1; visibility: visible; }

.done-mark {
  width: 64px;
  height: 64px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  animation: stamp 0.5s var(--ease-out) both;
}

@keyframes stamp {
  0% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.done-no { font-family: 'Anton', sans-serif; font-size: 2.2rem; }
.done-line { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- footer --- */

.foot {
  background: var(--ink);
  color: var(--cream-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2rem;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.foot-dot { width: 4px; height: 4px; background: var(--saffron); border-radius: 50%; }

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .hero-card { position: static; width: min(300px, 70vw); margin: 2.4rem 0 0; }
  .hero { display: flex; flex-direction: column; }
  .hero-type { margin-top: 3rem; }
  .details-grid { grid-template-columns: repeat(2, 1fr); }
  .rsvp { grid-template-columns: 1fr; }
  .ticket { height: 128px; min-width: 92vw; }
  .ticket-right { width: 104px; }
  .stub-word { font-size: 2rem; }
}

@media (max-width: 540px) {
  .details-grid { grid-template-columns: 1fr; }
  .p-list li { gap: 1.2rem; }
  .intro-stage { gap: 1.8rem; }
}

/* motion safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }
}

/* The push-in is the one transform that must NOT snap under reduced motion:
   collapsing its 7s transition to 0.01ms turns it into a 3.5% jump on the tap
   frame, which is exactly the poster -> first-frame continuity the intro is
   built to protect. Pin both states to the rest scale so there is nothing to
   animate. Declared after the global block so it wins on order. */
@media (prefers-reduced-motion: reduce) {
  .intro-video,
  .intro.is-playing .intro-video { transform: scale(1.03); }
}