/* ==========================================================================
   Direction E — "The Long Walk"
   A 23-second painted tracking shot: through the church doors, along the
   wall, and out onto the dance floor.

   Palette measured off the reference film, not chosen. Everything here is
   dusty on purpose — the moment these values get saturated the artwork and
   the interface stop belonging to each other.
   ========================================================================== */

:root {
  --wall:       #B18972;
  --plaster:    #B39586;
  --wall-shade: #816C61;
  --stone:      #CDC3B0;
  --gold:       #B09978;
  --paper:      #F2E9DC;
  --white:      #F5F6F9;
  --sage:       #AFBD9C;
  --red:        #823229;
  --ink:        #120E0A;
  --ink-soft:   #4A3B31;

  /* base.css contract */
  --surround:     #C9B29C;
  --page-bg:      var(--paper);
  --card-border:  #9A7A64;
  --frame-border: 1px solid #C9AE96;
  --marquee-speed: 30s;

  --music-bg:     var(--ink);
  --music-fg:     var(--paper);
  --music-border: var(--gold);

  --status-error-bg:   #F6E2DC;
  --status-error-fg:   #8C2E24;
  --status-success-bg: #EAE7D8;
  --status-success-fg: #3F5240;

  --cover-surround:    #8E6B56;
  --cover-paper:       var(--paper);
  --cover-border:      #9A7A64;
  --cover-ink:         var(--ink);
  --cover-shadow:      rgba(30, 18, 12, .34);
  --cover-action:      var(--ink);
  --cover-action-ink:  var(--paper);
}

.v5 { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink); }

.v5-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- The film ------------------------------------------------------------ */

.v5-film {
  margin: 0 calc(var(--gutter) * -1) 0;
  padding: 0;
  background: var(--wall);
}

.v5-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 82vh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--wall);
  isolation: isolate;
  /* The stage is a fixed-aspect window; on wide screens it stays portrait
     and the surround shows through either side. */
  max-width: calc(82vh * 9 / 16);
}

.v5-loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: var(--wall);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity .45s ease, visibility .45s ease;
}
.v5-loader__mark {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(242, 233, 220, .42);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: v5-loader-spin 1s linear infinite;
}
.v5-stage.is-ready .v5-loader { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes v5-loader-spin { to { transform: rotate(360deg); } }

/* Act 1 — the exterior, scaled through the doorway. */
.v5-exterior {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* The real Saint Sarkis entrance is at the base of the right bell tower. */
  transform-origin: 67% 69%;
  will-change: transform, opacity;
  background: var(--stone);
}
.v5-exterior__closed,
.v5-exterior__open {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v5-exterior__open {
  opacity: 0;
  /* Only the doorway changes between generated frames. Feathering the
     overlay prevents tiny paint variations elsewhere from flickering. */
  -webkit-mask-image: radial-gradient(ellipse 15% 14% at 67% 69%, #000 38%, transparent 76%);
          mask-image: radial-gradient(ellipse 15% 14% at 67% 69%, #000 38%, transparent 76%);
}

/* Act 2 — the mural. */
.v5-interior { position: absolute; inset: 0; z-index: 1; opacity: 0; }

.v5-strip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Two 21:9 panels overlapped 20% — 7.467 stage widths of wall. */
  width: 746.7%;
  will-change: transform;
}
.v5-panel {
  position: absolute;
  top: 0;
  height: 100%;
  width: 55.556%;
  object-fit: cover;
  display: block;
}
.v5-panel--1 { left: 0; }
.v5-panel--2 {
  left: 44.444%;
  /* Feather the seam so the two paintings meet on bare plaster. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%);
          mask-image: linear-gradient(90deg, transparent 0, #000 11%);
}

/* --- Characters ---------------------------------------------------------- */

.v5-figure { position: absolute; left: 0; bottom: 0; will-change: transform, opacity; }
.v5-figure img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: auto;
  display: block;
  /* The cut-out lost the shadow that was painted into its background.
     Rebuilt here so it tracks the figure instead of sitting frozen. */
  filter: drop-shadow(16px -9px 10px rgba(90, 64, 52, .42));
}

.v5-waiter  { z-index: 5; height: 54%; }
.v5-dancers {
  z-index: 5;
  left: 0;
  width: 100%;
  height: 54%;
  opacity: 0;
  pointer-events: none;
}
.v5-dancers img { left: 50%; transform: translateX(-50%); }

.v5-pose--b { opacity: 0; }

/* --- Lettering ------------------------------------------------------------ */

.v5-type {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 6;
  color: var(--ink);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  padding: 0 6%;
}

.v5-type--headline {
  top: 11%;
  font-size: clamp(13px, 3.1vw, 19px);
  letter-spacing: .06em;
  line-height: 1.55;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(242, 233, 220, .72), 0 0 18px rgba(242, 233, 220, .92);
}

.v5-script {
  font-family: 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-weight: 400;
  line-height: 1.1;
  display: block;
}

.v5-type--save    { top: 11%; }
.v5-type--save .v5-script    { font-size: clamp(38px, 10.5vw, 64px); }
.v5-type--save .v5-hy        { font-family: 'Noto Serif Armenian', serif; font-size: clamp(13px, 3.4vw, 21px); letter-spacing: .04em; margin-top: .5em; display: block; color: var(--ink-soft); }

.v5-type--names   { top: 11%; }
.v5-type--names .v5-script   { font-size: clamp(42px, 11.5vw, 72px); }
/* Absolute, not em — the ampersand's parent has no font-size of its own, so
   an em here silently resolves against the 16px root and vanishes. */
.v5-type--names .v5-amp      { font-size: clamp(22px, 6vw, 37px); margin: .04em 0; }

.v5-type--married { top: 11%; }
.v5-type--married .v5-script { font-size: clamp(30px, 8.4vw, 52px); }

.v5-type--card    { top: 11%; }
.v5-type--card .v5-script    { font-size: clamp(25px, 6vw, 34px); line-height: 1; }
.v5-type--card .v5-locality  { font-family: 'Noto Serif Armenian', serif; font-size: clamp(12px, 3.2vw, 19px); display: block; margin: .12em 0 .55em; color: var(--ink-soft); }
.v5-type--card .v5-date      { display: block; margin-top: .45em; font-size: clamp(10px, 2.6vw, 15px); letter-spacing: .18em; text-transform: uppercase; }

/* --- Replay --------------------------------------------------------------- */

.v5-replay {
  display: block;
  margin: 14px auto 0;
  padding: 7px 18px;
  background: none;
  border: 1px solid var(--card-border);
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s ease, color .2s ease, border-color .2s ease;
  pointer-events: none;
}
.v5-stage.is-ended ~ .v5-replay { opacity: 1; pointer-events: auto; }
.v5-replay:hover { color: var(--ink); border-color: var(--ink); }

/* --- Page below the film --------------------------------------------------- */

.v5-programme { padding: 46px var(--gutter) 10px; text-align: center; }
.v5-programme__heading {
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(30px, 6vw, 42px);
  margin: 0 0 26px;
}
.v5-programme__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.v5-programme__divider { width: 1px; height: 78px; background: var(--card-border); opacity: .5; }
.v5-programme__label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wall-shade); margin-bottom: 8px;
}
.v5-programme__time { font-size: 27px; letter-spacing: .04em; }
.v5-programme__venue { font-size: 19px; margin-top: 4px; }
.v5-programme__venue-hy { font-family: 'Noto Serif Armenian', serif; font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.v5-programme__locality { font-size: 13px; letter-spacing: .1em; color: var(--wall-shade); margin-top: 6px; }
.v5-programme__note {
  margin: 30px auto 0; max-width: 30em; font-style: italic;
  font-size: 17px; color: var(--ink-soft);
}

@media (max-width: 620px) {
  .v5-programme__grid { grid-template-columns: 1fr; }
  .v5-programme__divider { width: 60px; height: 1px; margin: 4px auto; }
}

/* --- RSVP ----------------------------------------------------------------- */

.rsvp { padding: 34px var(--gutter) 56px; text-align: center; }
.rsvp__heading { font-family: 'Pinyon Script', cursive; font-size: clamp(28px, 5.6vw, 40px); margin-bottom: 22px; }
.rsvp__form { max-width: 30em; margin: 0 auto; text-align: left; }
.label {
  display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wall-shade); margin-bottom: 7px;
}
.input {
  width: 100%; padding: 11px 13px; font-size: 17px;
  background: #FBF6EE; color: var(--ink);
  border: 1px solid var(--card-border); border-radius: 0;
}
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.field { margin-bottom: 18px; }
.row { display: flex; gap: 16px; }
.field--half { flex: 1; }

.stepper { display: flex; align-items: center; border: 1px solid var(--card-border); background: #FBF6EE; }
.stepper__btn {
  width: 42px; height: 44px; background: none; border: 0;
  font-size: 20px; color: var(--ink); cursor: pointer;
}
.stepper__value { flex: 1; text-align: center; font-size: 18px; }

.segmented { display: flex; gap: 8px; }
.segmented__btn {
  flex: 1; height: 44px; cursor: pointer; font-size: 15px; letter-spacing: .1em;
  background: #FBF6EE; color: var(--ink-soft);
  border: 1px solid var(--card-border);
}
.segmented__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.submit {
  width: 100%; margin-top: 8px; padding: 14px; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 0;
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
}
.submit:hover { background: #2A1F17; }

.hp { position: absolute; left: -9999px; }
.rsvp__status { max-width: 30em; margin: 16px auto 0; font-size: 16px; }
.rsvp__done { display: none; max-width: 30em; margin: 0 auto; }
.rsvp__done-title { font-family: 'Pinyon Script', cursive; font-size: 32px; }
.rsvp__done-body { margin-top: 8px; color: var(--ink-soft); }
.rsvp__back { display: inline-block; margin-top: 18px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--card-border); }
.rsvp__closing { margin-top: 30px; font-style: italic; color: var(--ink-soft); }

/* --- Cover ---------------------------------------------------------------- */

.cover-v5__scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cover-v5__arch {
  position: absolute; left: 50%; bottom: 0; width: 116px; height: 168px;
  transform: translateX(-50%);
  border-radius: 58px 58px 0 0;
  background: linear-gradient(180deg, #C0A88F 0%, #A98B72 100%);
  box-shadow: inset 0 0 0 6px rgba(30, 18, 12, .16);
}
.cover-v5__door {
  position: absolute; left: 50%; bottom: 0; width: 74px; height: 122px;
  transform: translateX(-50%);
  border-radius: 37px 37px 0 0;
  background: #6B4B33;
  box-shadow: inset 0 0 0 2px rgba(20, 12, 8, .4);
}
.cover-v5__leaf {
  position: absolute; top: -14px; left: var(--x); width: 9px; height: 9px;
  border-radius: 60% 10% 60% 10%;
  background: #9C5F3A;
  opacity: .8;
  animation: v5-leaf 8s linear infinite;
  animation-delay: var(--d);
}
@keyframes v5-leaf {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: .85; }
  to   { transform: translateY(330px) translateX(38px) rotate(220deg); opacity: 0; }
}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v5-stage.is-static .v5-exterior { display: none; }
  .cover-v5__leaf { animation: none; opacity: 0; }
  .v5-loader__mark { animation: none; }
  .v5-replay { display: none; }
}