/* ============================ Palette ============================ */
:root{
  --linen:      #FDFBF7;
  --linen-2:    #F5F0E6;
  --brown:      #4A3F35;
  --taupe:      #8B7E74;
  --cream:      #F0EBD8;
  --btn:        #4A3F35;
  --btn-text:   #FDFBF7;
  --btn-hover:  #5C4D42;

  /* ellipse window inside hero.jpg (photo area, measured) */
  --ell-left:   24.66%;
  --ell-top:    14.24%;
  --ell-w:      52.28%;
  --ell-h:      66.75%;
  --frame-ratio: 177.68%; /* height / width * 100 */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  min-height:100vh;
  background:#EDE4D6;
  color:var(--brown);
  font-family:'Montserrat', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior:none;
  user-select:none;
  -webkit-user-select:none;
}

/* woven linen grain */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ============================ Layout ============================ */
.stage{
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 24px 64px;
  text-align:center;
}

.flourish{ display:none; }

/* ---- frame ---- */
.frame-wrap{
  width:min(340px, 26vw);
  perspective:1600px;
}
.frame{
  position:relative;
  width:100%;
  padding-bottom:var(--frame-ratio);
  transform-style:preserve-3d;
  transition:transform .25s ease;
  opacity:0;
  animation:frameIn 1.6s cubic-bezier(.16,1,.3,1) .35s forwards;
  will-change:transform;
}

.scratch, .frame-img{ position:absolute; }

.frame-img{
  left:0; top:0; width:100%; height:100%;
  object-fit:contain;
  z-index:1;
  pointer-events:none;
}
.scratch{
  left:var(--ell-left); top:var(--ell-top);
  width:var(--ell-w); height:var(--ell-h);
  border-radius:50%;
  z-index:2;
  cursor:grab;
  transition:opacity .9s ease, transform .9s ease;
  touch-action:none;
  box-shadow:inset 0 0 22px rgba(120,95,45,.28);
}
.scratch:active{ cursor:grabbing; }
.scratch.cleared{ opacity:0; transform:scale(1.03); pointer-events:none; box-shadow:none; }

/* subtle reveal-instead link */
.skip{
  margin-top:20px;
  background:none; border:none; cursor:pointer;
  font-family:'Montserrat',sans-serif;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--taupe); opacity:0;
  transition:color .3s ease, opacity .6s ease;
  animation:fadeIn 1s ease 3s forwards;
}
.skip:hover{ color:var(--brown); }
body.revealed .skip{ display:none; }

/* ============================ Revealed content ============================ */
.content{
  margin-top:34px;
  max-width:560px;
  display:flex; flex-direction:column; align-items:center;
}
.content > *{ opacity:0; }

.subheading{
  font-size:12px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--taupe); font-weight:400;
  padding-left:.42em;
}
.names{
  font-family:'Cormorant Garamond', serif;
  font-weight:500; font-style:italic;
  font-size:clamp(48px, 11vw, 92px);
  line-height:1.02; color:var(--brown);
  margin:14px 0 8px;
  letter-spacing:.02em;
}
.names .amp{ font-style:italic; font-weight:400; color:var(--taupe); padding:0 .12em; }
.date{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(20px,3.4vw,26px);
  color:var(--brown); font-weight:500;
}
.date-compact{
  margin-top:6px;
  font-size:12px; letter-spacing:.3em; color:var(--taupe);
  padding-left:.3em;
}

/* calendar */
.cal{ position:relative; margin-top:38px; }
.cal-btn{
  font-family:'Montserrat',sans-serif;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:400;
  color:var(--btn-text); background:var(--btn);
  border:none; border-radius:999px;
  padding:17px 40px; cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease, box-shadow .3s ease;
  box-shadow:0 10px 26px rgba(74,63,53,.16);
}
.cal-btn:hover{ background:var(--btn-hover); transform:scale(1.03) translateY(-1px); box-shadow:0 16px 34px rgba(74,63,53,.22); }
.cal-btn:active{ transform:scale(.99); }

.cal-menu{
  position:absolute; left:50%; top:calc(100% + 12px);
  transform:translateX(-50%) translateY(-6px);
  background:rgba(253,251,247,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(139,126,116,.24);
  border-radius:16px;
  padding:8px; min-width:230px;
  box-shadow:0 20px 50px rgba(74,63,53,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  z-index:20;
}
.cal-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.cal-menu a{
  display:block; text-decoration:none;
  font-size:12px; letter-spacing:.12em; color:var(--brown);
  padding:12px 16px; border-radius:10px;
  transition:background-color .2s ease, color .2s ease;
}
.cal-menu a:hover{ background:var(--cream); }

.footer{
  margin-top:52px;
  font-size:11px; letter-spacing:.18em; color:var(--taupe);
  font-style:normal;
}
.footer em{ font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.02em; font-size:14px; }

/* staggered entrance when revealed */
body.revealed .content > *{ animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards; }
body.revealed .subheading  { animation-delay:.05s; }
body.revealed .names       { animation-delay:.22s; }
body.revealed .date        { animation-delay:.40s; }
body.revealed .date-compact{ animation-delay:.50s; }
body.revealed .cal         { animation-delay:.64s; }
body.revealed .footer      { animation-delay:.82s; }

/* names special: settle letter-spacing */
body.revealed .names{ animation:namesIn 1.1s cubic-bezier(.16,1,.3,1) .22s forwards; }

/* ============================ Music toggle ============================ */
.music-toggle{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brown);
  background:rgba(253,251,247,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(139,126,116,.3);
  cursor:pointer; opacity:0;
  transition:transform .3s ease, border-color .3s ease, opacity .6s ease;
  animation:fadeIn 1s ease 1.4s forwards;
}
.music-toggle:hover{ transform:scale(1.08); border-color:var(--brown); }
.music-toggle .ic-off{ display:none; }
.music-toggle.muted .ic-on{ display:none; }
.music-toggle.muted .ic-off{ display:block; }

/* soft ring pulse while playing */
.music-toggle.playing::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(139,126,116,.35);
  animation:ring 2.4s ease-out infinite;
}

/* ============================ Keyframes ============================ */
@keyframes fadeIn{ to{ opacity:1; } }
@keyframes frameIn{
  0%{ opacity:0; transform:translateY(26px) scale(.94); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes riseIn{
  0%{ opacity:0; transform:translateY(22px); }
  100%{ opacity:1; transform:translateY(0); }
}
@keyframes namesIn{
  0%{ opacity:0; transform:translateY(22px); letter-spacing:.34em; }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translateY(0); letter-spacing:.02em; }
}
@keyframes ring{
  0%{ transform:scale(1); opacity:.7; }
  100%{ transform:scale(1.6); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; }
}

@media (max-width:600px){
  .stage{ padding:26px 12px 44px; }
  .frame-wrap{ width:66vw; }
  .content{ margin-top:20px; }
  .cal-btn{ padding:15px 34px; }
}