/* ============================================================
   Mazen & Michella — wedding invitation
   The filmed opening plays, then freezes on its own last frame.
   That frozen frame IS the invitation — there is no HTML card
   over it. The frame keeps the video's 1080:1920 box, so the
   buttons sit in the empty plum band below the card at a fixed
   percentage that was measured off that frame.
   ============================================================ */

:root{
  --video-w: 1080;
  --video-h: 1920;

  /* top of the empty plum band under the invitation */
  --band-top: 65.5%;

  --plum:      #4e1e33;
  --plum-deep: #2b0c18;
  --rose-hi:   #efd9d7;   /* same hue/sat, lighter  */
  --rose:      #e6c2bf;   /* the colour              */
  --rose-lo:   #ddaba7;   /* same hue/sat, deeper    */
  --cream:     #f6e4d8;

  --ease: cubic-bezier(.22,.88,.26,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--cream);
  background:linear-gradient(180deg, #f9e8dd 0%, #f3d5c8 52%, #e6bcae 100%);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ------------------------------------------------------------
   Stage + the 9:16 film frame
   ------------------------------------------------------------ */
.stage{
  position:relative;
  height:100%;
  height:100dvh;
  display:grid;
  place-items:center;
  overflow:hidden;
}

/* second backdrop, faded in once the film settles on the plum pocket */
.stage::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    #f7e2d6 0%, #f2d2c5 20%, #dcae9f 42%, #8e4a5f 64%, #4e1e33 84%, #2b0c18 100%);
  opacity:0;
  transition:opacity 1s ease;
}
.stage.is-done::after{ opacity:1; }

.frame{
  position:relative;
  z-index:1;
  container-type:inline-size;
  width:min(100vw, calc(100dvh * var(--video-w) / var(--video-h)));
  aspect-ratio:var(--video-w) / var(--video-h);
  max-height:100dvh;
  overflow:hidden;
  background:#2b0c18;
  box-shadow:0 2vh 6vh rgba(52,12,26,.35);
}

.layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;        /* every asset shares the frame's 1080:1920 */
  display:block;
  border:0;
}

.layer--poster{ z-index:1; }
.layer--video { z-index:2; opacity:0; }
.layer--still { z-index:3; opacity:0; transition:opacity .45s ease; }

.is-playing .layer--video{ opacity:1; }
.is-done    .layer--video{ opacity:1; }
.is-done    .layer--still{ opacity:1; }
.is-done    .layer--poster{ opacity:0; }

/* once the still is up, drop the video element and free the decoder */
.vid-gone .layer--video{ display:none; }

.is-idle .frame{ cursor:pointer; }

/* the audio element is never seen, only heard */
#music{ display:none; }

/* ------------------------------------------------------------
   Tray — centred in the empty plum band under the invitation
   ------------------------------------------------------------ */
.tray{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  top:var(--band-top);
  bottom:0;
  padding:0 3.5%;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:4cqw;

  opacity:0;
  transform:translateY(1.2%);
  pointer-events:none;
  transition:opacity .55s ease .3s, transform .55s var(--ease) .3s;
}
.is-done .tray{ opacity:1; transform:none; pointer-events:auto; }

/* ---------- the two dial pairs ---------- */
.dials{
  position:relative;
  display:flex;
  align-items:center;
}
.dials__cap{
  position:absolute;
  bottom:calc(100% + 2.2cqw);
  left:0;
  right:0;
  text-align:center;
  font-weight:600;
  font-size:clamp(8px, 2.5cqw, 11px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(246,228,216,.72);
  padding-inline-start:.22em;   /* optical: letter-spacing trails on the right */
}
.dials__pair{
  display:flex;
  gap:2.6cqw;
}

.dial{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.3cqw;
  text-decoration:none;
  color:var(--rose);
  transition:transform .12s ease;
}
.dial__btn{
  width:clamp(28px, 8.4cqw, 38px);
  height:clamp(28px, 8.4cqw, 38px);
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(230,194,191,.45);
  background:rgba(255,236,224,.07);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background .22s ease, border-color .22s ease, color .22s ease;
}
.dial__btn svg{ width:46%; height:46%; fill:currentColor; display:block; }
.dial__num{
  font-size:clamp(7px, 2.05cqw, 10px);
  letter-spacing:.02em;
  white-space:nowrap;
  color:rgba(246,228,216,.72);
  font-variant-numeric:lining-nums tabular-nums;
  transition:color .22s ease;
}
.dial:hover .dial__btn{
  background:linear-gradient(160deg, var(--rose-hi), var(--rose));
  border-color:rgba(255,240,238,.7);
  color:#2f0f1c;
}
.dial:hover .dial__num{ color:rgba(246,228,216,.92); }
.dial:active{ transform:translateY(1px); }
.dial:focus-visible{ outline:2px solid var(--rose); outline-offset:4px; border-radius:6px; }

/* ---------- the Wishmoney button ---------- */
.copy{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.62em 1.15em;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:clamp(12px, 3.7cqw, 16px);
  font-weight:600;
  letter-spacing:.05em;
  white-space:nowrap;
  color:#2f0f1c;
  background:linear-gradient(160deg, var(--rose-hi), var(--rose) 55%, var(--rose-lo));
  border:1px solid rgba(255,241,239,.6);
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 .6vh 1.8vh rgba(28,6,14,.38);
  transition:background .22s ease, transform .12s ease;
}
.copy:hover{ background:linear-gradient(160deg,#f7e7e5, #eaccc9 55%, #dfb2ae); }
.copy:active{ transform:translateY(1px); }
.copy:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }
.copy.is-done{ background:linear-gradient(160deg,#efd9d7,#deada9 60%,#cf9a95); }

.copy__icon{
  width:1.05em;
  height:1.05em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}

/* very narrow frames: tighten before anything wraps */
@container (max-width: 340px){
  .tray{ gap:3cqw; }
  .dials__cap{ letter-spacing:.14em; }
}

/* ------------------------------------------------------------
   "tap to open"
   ------------------------------------------------------------ */
.opener{
  position:absolute;
  z-index:10;
  left:50%;
  bottom:max(3.5vh, env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55em;
  padding:.7em 1.4em;
  font-family:'Almarai', system-ui, sans-serif;
  font-size:clamp(12px,3.4vw,15px);
  letter-spacing:.06em;
  color:#f7e3d6;
  text-shadow:0 1px 6px rgba(40,10,22,.6);
  background:none;
  border:0;
  cursor:pointer;
  transition:opacity .45s ease, transform .45s ease;
}
.opener__text{ animation:breathe 2.8s ease-in-out infinite; }
.opener__caret{
  width:9px; height:9px;
  border-inline-start:1.4px solid currentColor;
  border-block-start:1.4px solid currentColor;
  transform:rotate(45deg);
  animation:nudge 2.8s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes nudge{ 0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(3px,3px)} }

.stage:not(.is-idle) .opener{
  opacity:0;
  transform:translateX(-50%) translateY(10px);
  pointer-events:none;
}

/* ---------- mute ---------- */
.mute{
  position:absolute;
  z-index:11;
  top:max(2vh, env(safe-area-inset-top, 0px));
  inset-inline-end:3vw;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(246,228,216,.34);
  background:rgba(40,12,24,.34);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  color:#f7e3d6;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.stage:not(.is-idle) .mute{ opacity:1; pointer-events:auto; }
.stage.music-done .mute{ opacity:0; pointer-events:none; }
.mute svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mute .mute__spk{ fill:currentColor; stroke-linejoin:round; }
.mute .mute__off{ display:none; }
.mute.is-muted .mute__on{ display:none; }
.mute.is-muted .mute__off{ display:block; }

@media (min-aspect-ratio: 3/4){
  .frame{ border-radius:4px; }
}

/* ------------------------------------------------------------
   iOS action sheet for the phone buttons
   ------------------------------------------------------------ */
.sheet{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.sheet[hidden]{ display:none; }

.sheet__scrim{
  position:absolute;
  inset:0;
  background:rgba(22,5,12,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .25s ease;
}
.sheet.is-open .sheet__scrim{ opacity:1; }

.sheet__panel{
  position:relative;
  width:min(100%, 420px);
  margin:0 .55rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  padding:1.1rem 1rem 1rem;
  border-radius:18px;
  background:linear-gradient(180deg, #52223a, #3a1226);
  border:1px solid rgba(230,194,191,.22);
  box-shadow:0 2vh 7vh rgba(20,4,10,.6);
  transform:translateY(14px);
  opacity:0;
  transition:transform .28s var(--ease), opacity .28s ease;
}
.sheet.is-open .sheet__panel{ transform:none; opacity:1; }

.sheet__who{
  margin:0;
  text-align:center;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--cream);
}
.sheet__num{
  margin:.15rem 0 .95rem;
  text-align:center;
  font-size:.85rem;
  letter-spacing:.06em;
  color:rgba(246,228,216,.62);
  font-variant-numeric:lining-nums tabular-nums;
}

.sheet__act{
  display:flex;
  align-items:center;
  gap:.7rem;
  width:100%;
  margin-bottom:.45rem;
  padding:.78rem .95rem;
  font-family:inherit;
  font-size:.97rem;
  font-weight:500;
  letter-spacing:.03em;
  text-align:start;
  text-decoration:none;
  color:var(--cream);
  background:rgba(255,236,224,.07);
  border:1px solid rgba(230,194,191,.2);
  border-radius:12px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.sheet__act svg{
  width:19px; height:19px;
  fill:var(--rose);
  flex:none;
}
.sheet__act:active{ background:rgba(255,236,224,.15); }
.sheet__act:focus-visible{ outline:2px solid var(--rose); outline-offset:2px; }

.sheet__act--cancel{
  justify-content:center;
  margin:.7rem 0 0;
  background:none;
  border-color:transparent;
  color:rgba(246,228,216,.55);
}

/* ------------------------------------------------------------
   Reduced motion — skip the film, go straight to the invitation
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .opener__text,.opener__caret{ animation:none; }
  .tray,.layer,.stage::after{ transition-duration:.01ms !important; }
}