/* Stella's Ballroom — the Welcome section and its video player.
   Three columns on desktop, from Leighton's mockup: the words, the wedding
   film in a tall frame, and the handwritten lines with the Dillon & Nicola
   note. Colours come from .palette-warm in tokens.css. */

/* ---- Shared by the warm sections ---- */
.display-h2{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.12;color:var(--ink);text-wrap:balance}

/* The leaf drawings live in the side margins only, so they never run
   behind the words. Each stem sits in the gutter and its leaves stop short
   of the text column. Below 1300px wide there is no margin to hold them. */
.sprig{position:absolute;width:230px;height:auto;pointer-events:none;z-index:0}
@media (max-width:1299px){ .sprig{display:none} }

/* A short accent stroke running into a hairline */
.accent-rule{
  height:1px;border:0;max-width:320px;margin:var(--s-5) 0 var(--s-4);
  background:linear-gradient(90deg,var(--crimson) 0 28px,var(--line) 28px 100%);
}


/* ---- Welcome ---- */
.welcome{position:relative;overflow:hidden;background:var(--paper);padding-block:var(--s-8)}
.welcome .container{position:relative;z-index:1}
/* Left: mirrored so the side branch reaches outwards, off the page. */
.welcome .sprig--left{left:calc((100vw - var(--maxw)) / 2 - 176px);bottom:-60px;transform:scaleX(-1)}
.welcome .sprig--right{right:calc((100vw - var(--maxw)) / 2 - 220px);top:-40px}

.welcome__grid{display:grid;gap:var(--s-6)}
/* On a very wide screen the three columns would drift apart; the block
   holds its own width and centres instead. */
.welcome__text .display-h2{margin-bottom:var(--s-4)}
.welcome__text p:not(.eyebrow){font-size:var(--t-body-s);color:var(--ink-soft);max-width:46ch}
.welcome__note{
  margin-top:var(--s-4);padding-left:var(--s-3);
  border-left:2px solid var(--crimson);
  font-family:var(--font-display);font-size:var(--t-body-l);line-height:1.45;
  color:var(--crimson) !important;   /* over .welcome__text p */
}

.welcome__aside p:not(.eyebrow):not(.welcome__script){font-size:var(--t-body-s);color:var(--ink-soft);max-width:34ch}
.welcome__script{
  margin:0 0 var(--s-4);
  font-family:"Pinyon Script",cursive;font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1.05;
  color:var(--wine);transform:rotate(-7deg);transform-origin:left bottom;
}
.welcome__script span{display:block}
.welcome__script span:nth-child(2){padding-left:.9em}
.welcome__script span:nth-child(3){padding-left:1.8em}

@media (min-width:1000px){
  .welcome__grid{
    grid-template-columns:minmax(0,1fr) 270px minmax(0,.9fr);
    gap:var(--s-7);align-items:center;
  }
}


/* ---- The video frame ----
   Plays once, silently, while on screen; the bar underneath hands over
   sound, volume and full screen. Behaviour is in js/site.js. */
.vframe{
  position:relative;width:100%;max-width:270px;margin-inline:auto;
  aspect-ratio:9/16;overflow:hidden;border-radius:var(--radius);
  background:var(--night);box-shadow:0 18px 40px rgba(24,28,36,.18);
}
.vframe video,.vframe .welcome-endcard{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
/* The couple's photograph takes over when the film finishes. */
.vframe .welcome-endcard{
  z-index:2;opacity:0;visibility:hidden;
  transition:opacity 300ms var(--ease),visibility 300ms var(--ease);
}
.vframe.is-ended .welcome-endcard{opacity:1;visibility:visible}

/* Centre play button. It exists only on phones, where the tour waits for a
   tap instead of starting by itself; on wider screens the film starts on its
   own and the button would only flash. Same shape as the tour phone's. */
.vframe__big{display:none}
@media (max-width:719px){
  .vframe__big{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
    width:56px;height:56px;min-width:44px;min-height:44px;border-radius:50%;
    background:rgba(20,22,26,.45);border:2px solid #fff;color:#fff;
    display:grid;place-items:center;
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  }
  .vframe__big svg{width:22px;height:22px;fill:currentColor;stroke:none;margin-left:3px}
  .vframe__big:hover{transform:translate(-50%,-50%) scale(1.06)}
  .vframe.is-playing .vframe__big{opacity:0;pointer-events:none}
}

/* Bottom bar: play/pause and time on the left, sound and full screen on the right */
.vframe__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-6) var(--s-3) var(--s-3);
  background:linear-gradient(0deg,rgba(12,14,18,.62),transparent);
  color:#fff;font-size:var(--t-fine);font-weight:var(--weight-label);
}
.vframe__btn{width:26px;height:26px;display:grid;place-items:center;color:#fff;flex:none}
.vframe__i{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.vframe__i--play{fill:currentColor;stroke:none}
.vframe__time{font-variant-numeric:tabular-nums;white-space:nowrap}
.vframe__spacer{flex:1}
.vframe__vol{
  width:48px;height:2px;flex:none;-webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.5);border-radius:1px;
}
.vframe__vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer}
.vframe__vol::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff;cursor:pointer}

/* One glyph per state, swapped by a class on the frame */
.vframe .vframe__i--pause,.vframe .vframe__i--sound{display:none}
.vframe.is-playing .vframe__i--play{display:none}
.vframe.is-playing .vframe__i--pause{display:block}
.vframe:not(.is-muted) .vframe__i--muted{display:none}
.vframe:not(.is-muted) .vframe__i--sound{display:block}

/* Full screen: the frame fills the screen and the film is shown whole.
   Kept as separate rules — a browser drops a whole rule it can't read. */
.vframe:fullscreen{max-width:none;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.vframe:fullscreen video{object-fit:contain}
.vframe:-webkit-full-screen{max-width:none;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.vframe:-webkit-full-screen video{object-fit:contain}