/* ============================================================
   SECTION 5 — VENUE & DIRECTIONS  (final section)

   Architecture
     .venue
       .venue__parchment      full-bleed cream band, botanical edges
         .venue__leaf--left / --right   decorative, behind the content
         .venue__content      centred, measure-limited
       .venue__artwork        full-bleed ornamental plate
         <picture>            mobile portrait / desktop landscape art
         .venue__rsvp         overlay pinned to the plate's red panel

   The artwork is a real <img> at width:100% / height:auto, so the plate
   keeps its native aspect ratio at every width — no cover-cropping, no
   forced viewport height, no distortion.
   ============================================================ */

.venue {
  position: relative;
  width: 100%;
  overflow-x: clip;
  background-color: var(--venue-paper);

  --venue-paper: #f8f0dd;
  --venue-body: #5c2a1a;
  --venue-btn: #174868;
  --venue-btn-hover: #10344c;
  --venue-measure: min(88vw, 40rem);
  --venue-ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* ============================================================
   1 — PARCHMENT BAND
   ============================================================ */

.venue__parchment {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* clips the botanical bleed at the corners */

  background-color: var(--venue-paper);
  background-image: url("../images/bg.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  background-blend-mode: multiply;

  /* The whole band scales with viewport width so it holds the reference's
     proportions (~41vw tall) at every size; the max() floors only take over
     on phones, where pure vw would drop the type below readable size. */
  padding-top: max(22px, 4.2vw);
  padding-bottom: max(26px, 6vw);
  padding-inline: max(12px, 3vw);
}

/* ---- botanical edge decorations --------------------------------------
   banana-tree.png is a whole plant, and its trunk runs down the middle of
   the file at ~48% across. Any offset shallower than -0.48 * width leaves
   that trunk on screen, which is what made this read as a potted plant
   rather than foliage. The reference shows only the frond mass entering
   from each corner, so the image is scaled up (36vw) and hung half its own
   width off the page (-18vw): the trunk clears the edge entirely, the big
   blades fill the corner, and the outer leaves are cropped by the page.
   Height works out to 50vw against a ~42vw band, so the bare lower stem is
   clipped by the band's overflow instead of being drawn.

   top is 0, not negative: the band clips its own overflow, so any negative
   top slices the leaf tips off against the section boundary. At 0 the frond
   mass sits wholly inside the band and only the bare stem tail runs past the
   bottom edge, where the clip is invisible.

   The plant is asymmetric — a dense bushy cluster on its left, sparser long
   leaves on its right — and the reference uses the dense side. Hanging the
   image off an edge reveals the half facing away from that edge, so the
   LEFT decoration is mirrored to bring the dense half into view and the
   RIGHT one is left unmirrored. Mirroring the wrong side shows the sparse
   half on both edges. */

.venue__leaf {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 36vw;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.venue__leaf--left {
  left: -18vw;
  transform: scaleX(-1);
}

.venue__leaf--right {
  right: -18vw;
}

/* ---- centred content column ------------------------------------------ */

.venue__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--venue-measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Trishul crest above the heading */
.venue__crest {
  width: max(44px, 9.3vw);
  height: auto;
  margin-bottom: max(6px, 1.5vw);
}

.venue__title {
  margin: 0 0 max(14px, 4.2vw);
  font-family: 'Cinzel', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-weight: 600;
  font-size: max(1rem, 2.28vw);
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: var(--venue-body);
}

.venue__pin {
  width: max(32px, 5.5vw);
  height: auto;
  margin-bottom: max(12px, 2.8vw);
}

.venue__name {
  margin: 0 0 max(12px, 1.7vw);
  font-family: 'Cinzel', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-weight: 600;
  font-size: max(0.85rem, 2.35vw);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--venue-body);
}

.venue__name-line {
  display: block;
}

/* Compact, invitation-scale button — deliberately not a modern CTA */
.venue__btn {
  display: inline-block;
  padding: max(8px, 0.94vw) max(14px, 1.3vw);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: max(0.7rem, 1.05vw);
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #fff;
  background-color: var(--venue-btn);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}

.venue__btn:hover {
  background-color: var(--venue-btn-hover);
}

.venue__btn:active {
  opacity: 0.86;
}

.venue__btn:focus-visible {
  outline: 2px solid var(--venue-body);
  outline-offset: 3px;
}

/* ============================================================
   2 — ORNAMENTAL ARTWORK PLATE
   ============================================================ */

.venue__artwork {
  position: relative;
  width: 100%;
  line-height: 0;
  background-color: var(--venue-paper);
}

.venue__artwork-picture {
  display: block;
  width: 100%;
}

.venue__artwork-img {
  display: block;
  width: 100%;
  height: auto; /* native aspect ratio preserved — never cropped */
}

/* ============================================================
   3 — RSVP PANEL
   Pinned to the red field measured inside each artwork:
     mobile  1440x2160 -> x 398..1026, y 768..1583
     desktop 1536x1024 -> x 392..1089, y 434..779
   ============================================================ */

.venue__rsvp {
  position: absolute;
  z-index: 2;
  left: 27.64%;
  width: 43.68%;
  top: 35.56%;
  height: 37.78%;

  container-type: size;
  display: flex;
  line-height: normal;
  overflow: hidden;
  padding: 2.5%;
}

@media (min-width: 900px) {
  .venue__rsvp {
    left: 25.52%;
    width: 45.44%;
    top: 42.38%;
    height: 33.79%;
  }
}

/* Every value below is a multiple of --rs, which tracks the smaller of the
   panel's width and height. That keeps the card proportional whether the
   panel is portrait (mobile art) or landscape (desktop art). */
.venue__rsvp-inner {
  --rs: min(1.05cqw, 1.55cqh);

  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fdf6e7;
}

.venue__rsvp-crest {
  width: calc(9 * var(--rs));
  height: auto;
  margin-bottom: calc(1.6 * var(--rs));
  flex-shrink: 0;
}

.venue__rsvp-title {
  margin: 0 0 calc(1.4 * var(--rs));
  font-family: 'Mahameru', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  font-size: calc(6.8 * var(--rs));
  line-height: 1.1;
  letter-spacing: 0.09em;
  color: #fff;
  flex-shrink: 0;
}

.venue__rsvp-blessing {
  margin: 0 0 calc(1.2 * var(--rs));
  font-family: 'Roaster Brush', 'Brush Script MT', cursive;
  font-size: calc(6 * var(--rs));
  line-height: 1.15;
  color: #fce4b8;
  flex-shrink: 0;
}

.venue__rsvp-divider {
  width: calc(24 * var(--rs));
  height: calc(1.6 * var(--rs));
  margin: 0 auto calc(1.8 * var(--rs));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' fill='none'%3E%3Cpath d='M0 3H24M36 3H60' stroke='%23fce4b8' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Cpath d='M30 0.5C28 2.5 28 4.5 30 5.5C32 4.5 32 2.5 30 0.5Z' fill='%23fce4b8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}

.venue__rsvp-note,
.venue__rsvp-subnote {
  margin: 0 0 calc(1.2 * var(--rs));
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.22;
  max-width: 96%;
  flex-shrink: 0;
}

.venue__rsvp-note {
  font-size: calc(3.2 * var(--rs));
  color: #faebd7;
}

.venue__rsvp-subnote {
  font-size: calc(3 * var(--rs));
  color: rgba(250, 235, 215, 0.92);
}

/* ---- form ------------------------------------------------------------ */

.venue__rsvp-form {
  width: 96%;
  display: flex;
  flex-direction: column;
  gap: calc(1.4 * var(--rs));
  margin-top: calc(0.8 * var(--rs));
  flex-shrink: 0;
}

.venue__rsvp-row {
  display: flex;
  gap: calc(1.4 * var(--rs));
}

.venue__rsvp-group--half {
  flex: 1;
  min-width: 0;
}

.venue__rsvp-input,
.venue__rsvp-select {
  width: 100%;
  height: calc(8 * var(--rs));
  padding: 0 calc(2 * var(--rs));
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(3.2 * var(--rs));
  color: #fff;
  background-color: rgba(38, 8, 6, 0.6);
  border: 1px solid rgba(235, 195, 115, 0.45);
  border-radius: calc(0.8 * var(--rs));
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.venue__rsvp-input::placeholder {
  color: rgba(253, 246, 231, 0.65);
}

.venue__rsvp-input:focus,
.venue__rsvp-select:focus {
  border-color: #fce4b8;
  background-color: rgba(38, 8, 6, 0.85);
}

.venue__rsvp-input:focus-visible,
.venue__rsvp-select:focus-visible,
.venue__rsvp-submit:focus-visible {
  outline: 2px solid #fce4b8;
  outline-offset: 1px;
}

.venue__rsvp-select option {
  background-color: #4a1510;
  color: #fff;
}

.venue__rsvp-submit {
  align-self: center;
  padding: calc(1.6 * var(--rs)) calc(5 * var(--rs));
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(3.2 * var(--rs));
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #381206;
  background-color: #e0bd72;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.venue__rsvp-submit:hover {
  background-color: #efd8a2;
}

.venue__rsvp-status {
  margin-top: calc(1.2 * var(--rs));
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(3 * var(--rs));
  line-height: 1.25;
  color: #fce4b8;
}

.venue__rsvp-status.is-success,
.venue__rsvp-status.is-error {
  padding: calc(1.2 * var(--rs)) calc(2 * var(--rs));
  border-radius: calc(1 * var(--rs));
}

.venue__rsvp-status.is-success {
  background: rgba(30, 60, 20, 0.6);
  border: 1px solid rgba(160, 220, 120, 0.5);
  color: #eaf8df;
}

.venue__rsvp-status.is-error {
  background: rgba(70, 15, 10, 0.7);
  border: 1px solid rgba(240, 130, 110, 0.6);
  color: #ffd8d0;
}

/* Very narrow phones: drop the longest line so the card never overflows. */
@media (max-width: 340px) {
  .venue__rsvp-subnote {
    display: none;
  }
}

/* ============================================================
   4 — ENTRANCE CHOREOGRAPHY
   background -> botanicals -> title -> pin -> venue name -> button.
   Runs once; nothing keeps moving afterwards.
   ============================================================ */

.venue--idle .venue__parchment,
.venue--idle .venue__artwork,
.venue--idle .venue__leaf,
.venue--idle .venue__crest,
.venue--idle .venue__title,
.venue--idle .venue__pin,
.venue--idle .venue__name,
.venue--idle .venue__btn {
  opacity: 0;
}

.venue--live .venue__parchment {
  animation: venueFade 1.2s ease-out both;
}

.venue--live .venue__artwork {
  animation: venueFade 1.3s ease-out 0.15s both;
}

.venue--live .venue__leaf--left {
  animation: venueLeafLeft 1.2s var(--venue-ease) 0.2s both;
}

.venue--live .venue__leaf--right {
  animation: venueLeafRight 1.2s var(--venue-ease) 0.2s both;
}

.venue--live .venue__crest {
  animation: venueRise 0.85s var(--venue-ease) 0.35s both;
}

.venue--live .venue__title {
  animation: venueRise 0.9s var(--venue-ease) 0.4s both;
}

.venue--live .venue__pin {
  animation: venuePin 0.9s var(--venue-ease) 0.7s both;
}

.venue--live .venue__name {
  animation: venueRise 0.8s var(--venue-ease) 0.9s both;
}

.venue--live .venue__btn {
  animation: venueRise 0.75s var(--venue-ease) 1.1s both;
}

@keyframes venueFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes venuePin {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The left leaf is the mirrored one, so its resting transform must keep
   scaleX(-1). translateX runs along the element's own flipped axis, so a
   positive value here reads as a slide in from the left on screen. */
@keyframes venueLeafLeft {
  from { opacity: 0; transform: scaleX(-1) translateX(10px); }
  to   { opacity: 1; transform: scaleX(-1) translateX(0); }
}

@keyframes venueLeafRight {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   5 — REDUCED MOTION
   Opacity only; no movement, no scaling, nothing continuous.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .venue--idle .venue__parchment,
  .venue--idle .venue__artwork,
  .venue--idle .venue__leaf,
  .venue--idle .venue__crest,
  .venue--idle .venue__title,
  .venue--idle .venue__pin,
  .venue--idle .venue__name,
  .venue--idle .venue__btn,
  .venue--idle .venue__rsvp-inner {
    opacity: 1;
  }

  .venue--live .venue__parchment,
  .venue--live .venue__artwork,
  .venue--live .venue__leaf--left,
  .venue--live .venue__leaf--right,
  .venue--live .venue__crest,
  .venue--live .venue__title,
  .venue--live .venue__pin,
  .venue--live .venue__name,
  .venue--live .venue__btn,
  .venue--live .venue__rsvp-inner {
    animation: venueFade 0.5s ease-out both;
  }
}