/* Finished character footage is treated as a small film inside the invitation. */
html,body { overflow-x: clip; }
html:has(body.locked),html:has(body.photo-opened) { overflow:hidden; }
html:has(body.rsvp-opened) { overflow:hidden; }
.film-performance { display:block; position:relative; padding:0; border:0; background:transparent; touch-action:manipulation; }
.film-stage { position:relative; display:block; width:100%; height:100%; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 42%,#5a4b49 0%,#2b2025 62%,#160d15 100%); border:1px solid #d6aa5a70; border-radius:18px; box-shadow:0 15px 35px #16020a38, inset 0 0 0 1px #fff2d01c; }
.film-stage:before { content:""; position:absolute; inset:7px; z-index:3; border:1px solid #edcb8060; pointer-events:none; }
.film-video { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; object-fit:contain; object-position:center; pointer-events:none; filter:saturate(1.08) contrast(1.03); transform:scale(1.01); transition:opacity .8s var(--ease),transform 1.2s var(--ease),filter .8s ease; }
.film-video::-webkit-media-controls { display:none!important; }
.film-vignette { position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at center,transparent 68%,#170d1614 100%),linear-gradient(180deg,#1a0d1606,transparent 28%,#160b150d 100%); }
.film-vignette:before { content:""; position:absolute; z-index:2; top:0; left:0; width:100%; height:10%; background:linear-gradient(180deg,#12393beF 0%,#12393bd8 44%,#12393b72 76%,transparent 100%); }
.film-vignette:after { content:""; position:absolute; z-index:2; inset:0; opacity:.13; background-image:linear-gradient(108deg,transparent 0%,#fff8e719 43%,#fff8e72b 50%,transparent 59%),radial-gradient(#fff 0.55px,transparent .7px); background-size:180% 100%,5px 5px; background-position:-80% 0,0 0; background-repeat:no-repeat,repeat; animation:film-sheen 10s ease-in-out infinite; }
.film-credit { position:absolute; z-index:4; right:19px; bottom:16px; color:#fff1cfb8; font:italic .75rem/1 var(--serif); letter-spacing:.08em; text-transform:lowercase; }
.film-replay-icon { position:absolute; right:9px; bottom:9px; z-index:6; display:grid; place-items:center; width:34px; height:34px; border:1px solid #b28a3975; border-radius:50%; color:#fff2d0; background:#2d1721c9; font:22px/1 var(--serif); opacity:.78; }
.film-performance:hover .film-replay-icon,.film-performance:focus-visible .film-replay-icon { opacity:1; }
.film-performance:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.opening .invitation-card:before,.opening .invitation-card:after { content:none; }
.opening .cover-content { inset:12% 12% auto; height:62%; gap:12px; justify-content:center; }
.opening .cover-crest { width:102px; height:48px; filter:none; }
.opening .cover-content h1 { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-size:clamp(3.15rem,8.3svh,4.9rem); font-weight:500; line-height:.78; letter-spacing:-.055em; }
.opening .cover-content h1 span { white-space:nowrap; }
.opening .cover-content h1 em { display:flex; align-items:center; justify-content:center; gap:.6em; margin:.48em 0; font-size:.27em; font-style:normal; line-height:1; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; }
.opening .cover-content h1 em:before,.opening .cover-content h1 em:after { content:""; width:23px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); opacity:.8; }
.opening .cover-content h1 em:after { background:linear-gradient(90deg,var(--gold),transparent); }
.opening .cover-content .eyebrow { font-size:.65rem; letter-spacing:.16em; line-height:1.35; }
.opening .cover-invite { max-width:280px; color:var(--wine); font:500 clamp(1.04rem,2.55svh,1.3rem)/1.4 var(--serif); letter-spacing:.01em; }
.opening .cover-content .open-button { width:auto; max-width:250px; margin-top:5px; font-family:var(--serif); font-size:.95rem; letter-spacing:.04em; }
.opening .cover-date { font-size:.7rem; letter-spacing:.17em; }
.opening .cover-content .sequence-invite,.opening .cover-content .sequence-open { opacity:0; transform:translateY(12px); }
.invitation-card.scene-playing .sequence-invite { animation:cover-detail-pop .8s var(--ease) 1.9s both; }
.invitation-card.scene-playing .sequence-open { animation:cover-detail-pop .8s var(--ease) 2.35s both; }
.invitation-card.scene-playing .sequence-crest { animation:cover-detail-pop .8s var(--ease) .1s both; }
.invitation-card.scene-playing .sequence-guest { animation:cover-detail-pop .8s var(--ease) .6s both; }
.invitation-card.scene-playing .sequence-title { animation:cover-detail-pop 1s var(--ease) 1.5s both; }
.invitation-card.scene-playing .sequence-date { animation:cover-detail-pop .8s var(--ease) 3s both; }
.hero-performance { width:min(360px,100%); aspect-ratio:1.12; margin:24px auto 0; }
.story-mini { width:min(430px,90%); margin:35px auto 0; }
.story-performance { width:100%; aspect-ratio:1.12; margin:auto; }
.hero-performance .film-video,.story-performance .film-video { object-fit:cover; object-position:center; transform:scale(1.025); }
.story-mini figcaption { margin:10px 0 0; }
.character-stage.film-performance { width:min(720px,100%); height:auto; aspect-ratio:1.58; padding:15px 10px; border:1px solid #b28a3950; background:radial-gradient(ellipse at 50% 65%,#f4dfb760,transparent 65%); box-shadow:none; }
.character-stage.film-performance .film-stage { border-radius:22px; }
.character-stage .stage-border { border-color:#b28a392c; z-index:5; }
.character-stage .stage-glint.one { top:20%; left:9%; z-index:6; }
.character-stage .stage-glint.two { right:10%; bottom:20%; z-index:6; }
.film-performance.is-replaying .film-video { animation:film-punch-in 5.05s var(--ease) both; }
@keyframes film-punch-in { 0%{transform:scale(1.01)} 18%{transform:scale(1.035)} 55%{transform:scale(1.015)} 82%{transform:scale(1.045)} 100%{transform:scale(1.01)} }
@keyframes film-sheen { 0%,58%{background-position:-80% 0,0 0} 78%,100%{background-position:180% 0,0 0} }
@media(max-width:600px) {
  .opening .cover-content { inset:12% 10% auto; height:62%; gap:10px; }
  .opening .cover-crest { width:94px; height:43px; }
  .opening .cover-content h1 { font-size:clamp(2.8rem,14vw,4.1rem); line-height:.8; }
  .opening .cover-content h1 em { margin:.5em 0; font-size:.25em; letter-spacing:.2em; }
  .opening .cover-content h1 em:before,.opening .cover-content h1 em:after { width:17px; }
  .opening .cover-content .eyebrow { font-size:.61rem; letter-spacing:.14em; }
  .opening .cover-invite { max-width:245px; font-size:1rem; }
  .opening .cover-content .open-button { font-size:.9rem; }
  .hero-performance { width:min(330px,100%); margin-top:18px; }
  .character-stage.film-performance { aspect-ratio:1.38; padding:10px 0; }
  .film-credit { right:15px; bottom:14px; font-size:.68rem; }
}
@media(max-height:660px) and (min-width:601px) { .cover-wrap{width:310px;} .opening{align-items:start;} }
@media(prefers-reduced-motion:reduce) {
  .film-performance.is-replaying .film-video { animation:none; }
  .invitation-card .sequence-crest,.invitation-card .sequence-guest,.invitation-card .sequence-title,.invitation-card .sequence-date { opacity:1; transform:none; }
}

/* The new square dance clip gets a portrait-friendly cinema frame on phones. */
#characterStage.character-stage.film-performance { width:min(520px,100%); aspect-ratio:1.02; padding:12px; }
#characterStage.character-stage.film-performance .film-stage { border-radius:28px; }
#characterStage.character-stage.film-performance .film-video { object-fit:cover; object-position:center; }
.dance-cover-note { position:absolute; z-index:5; left:50%; bottom:7%; display:flex; align-items:center; gap:.58rem; min-width:196px; padding:.72rem 1rem .72rem .86rem; border:1px solid #fff4d6b8; border-radius:999px; color:#fffaf0; background:linear-gradient(110deg,#681d35e8,#982b4edb); box-shadow:0 10px 28px #4b102f66,inset 0 1px #fff8e75c; font:600 .78rem/1.14 var(--sans); letter-spacing:.025em; text-align:left; text-shadow:0 1px 1px #3a0717aa; transform:translateX(-50%); transition:opacity .35s ease,transform .35s var(--ease); }
.dance-cover-note strong { display:block; margin-top:.12rem; color:#ffe6a5; font:italic 1.05rem/1 var(--serif); letter-spacing:.02em; }
.dance-cover-heart { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; color:#861a38; background:#ffe9be; box-shadow:inset 0 1px #fff9e8; font-size:.88rem; }
.dance-cover-arrow { margin-left:.08rem; color:#ffe7a7; font-size:1.18rem; animation:dance-cover-nudge 1.5s ease-in-out infinite; }
#characterStage.is-replaying .dance-cover-note { opacity:0; transform:translate(-50%,12px); pointer-events:none; }
@keyframes dance-cover-nudge { 0%,100% { transform:translate(0,0); } 50% { transform:translate(3px,-2px); } }
.story-photo.first-meeting-photo { aspect-ratio:1.65; }
.story-photo.first-meeting-photo img { object-position:center; }

/* A real 3D deck keeps the active photo centered while adjacent memories glide around it. */
.photo-track {
  position:relative;
  display:block;
  height:clamp(440px,55vw,620px);
  padding:18px 0 30px;
  overflow:hidden;
  perspective:1200px;
  transform-style:preserve-3d;
  touch-action:pan-y;
  user-select:none;
  cursor:grab;
  isolation:isolate;
}
.photo-track:active { cursor:grabbing; }
.photo-track:before {
  content:"";
  position:absolute;
  inset:18px 4% 26px;
  z-index:-1;
  border:1px solid #d4ae6b52;
  border-radius:28px;
  background:linear-gradient(135deg,#fffaf080,#f0dfc742 50%,#fffaf04a);
  box-shadow:inset 0 1px #fffdf2a8,0 18px 45px #63332212;
  backdrop-filter:blur(8px) saturate(1.08);
  -webkit-backdrop-filter:blur(8px) saturate(1.08);
  pointer-events:none;
}
.photo-card {
  position:absolute;
  left:50%;
  top:50%;
  width:var(--gallery-card);
  flex:none;
  margin:0;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  transition:transform .62s cubic-bezier(.22,.75,.2,1),opacity .48s ease;
}
/* Every card shares one deck width. Different image ratios stay inside the
   card, but the card itself never changes geometry at the wrap point. */
.photo-card.watercolor-memory { width:var(--gallery-card); }
.gallery-progress span { width:16.6667%; }
.photo-card[aria-hidden="true"] { visibility:hidden; }
.photo-open { border-radius:18px; box-shadow:0 20px 42px #65402726; }
.photo-open img { border-radius:11px; }
.photo-card figcaption { bottom:22px; border-radius:999px; }

@media(max-width:600px) {
  #characterStage.character-stage.film-performance { aspect-ratio:1.02; padding:8px; }
  #characterStage.character-stage.film-performance .film-stage { border-radius:23px; }
  .dance-cover-note { bottom:6%; min-width:186px; padding:.62rem .82rem .62rem .72rem; font-size:.72rem; }
  .dance-cover-note strong { font-size:1rem; }
  .photo-track {
    width:calc(100% + 40px);
    height:clamp(420px,130vw,540px);
    margin-inline:-20px;
    padding:16px 0 24px;
  }
  .photo-card { width:min(340px,82vw); }
  .photo-card.watercolor-memory { width:min(340px,82vw); }
  .photo-card figcaption { bottom:18px; }
  .story-photo.first-meeting-photo { aspect-ratio:1.55; }
}

@media(prefers-reduced-motion:reduce) {
  .photo-track { perspective:none; cursor:default; }
  .photo-card { transition:none!important; }
}