/* The invitation's finishing details. Keep after style.css. */
:root {
  --gold: #91652e;
  --ink: #58422a;
  --olive: #596045;
  --line: #ae87594d;
}
body { background: #e5dac7; }
.invitation { background: radial-gradient(ellipse at 18% 22%, #fffaf0b0, transparent 42%), linear-gradient(100deg, #f1e4cf, #fff7e9 48%, #efdfc6); }
h2, .script-name, .monogram { color: #87602c; }
.eyebrow { color: #806644; font-size: 12px; letter-spacing: 2px; }
.invocation { font-size: 16px; }
.invocation span, .host small, .degree, .qualification, .with, .countdown-caption, .countdown small { font-size: 12px; }
.invitation-copy, .parentage, .ceremony>p:not(.ceremony-kicker):not(.asr-time), .venue-card p:not(.eyebrow), .family-others, .residence p:last-child, .farewell>p { font-size: 14px; }
.button { font-size: 14px; box-shadow: 0 5px 18px #51432112; border-radius: 4px; }
.button:not(.outline) { background: linear-gradient(135deg, #697253, #485338); border-color: #63704d; }
.button.outline { background: #fff9ec66; border-color: #ac8b51; }
.divider { opacity: 1; }
.arch-card { filter: drop-shadow(0 8px 18px #8c6b3610); }
.script-name { text-shadow: 0 1px 0 #fff6dd; }
.hero-copy { color: #76511f; }
.hero-copy .eyebrow { font-size: 10px; letter-spacing: 1.1px; }
.hero-copy .qualification { font-size: 12px; letter-spacing: .8px; }
.hero-date small { font-size: 14px; }
.scroll-cue span { font-size: 11px; letter-spacing: 2px; }

/* Ivory paper, fine pressed borders, and a moving reflected light. */
.envelope-paper {
  background: radial-gradient(ellipse at 20% 15%, #fffcf1 5%, transparent 63%), repeating-linear-gradient(92deg, #8a775003 0 1px, transparent 1px 4px), linear-gradient(145deg, #f9f3e6, #e7dcc6);
}
.envelope-bottom {
  background: radial-gradient(ellipse at 50% 55%, #fff9e9, transparent 70%), repeating-linear-gradient(0deg, #92734705 0 1px, transparent 1px 3px), linear-gradient(145deg, #eadfc9, #fff9eb);
}
.envelope-frame {
  position: absolute; z-index: 3; inset: 18px;
  border: 1px solid #b591554a; outline: 1px solid #fffdf0bf; outline-offset: -5px;
  box-shadow: inset 0 0 22px #8f744714; pointer-events: none;
  transition: opacity .55s, transform 1.2s;
}
.envelope-frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid #a282481e; }
.envelope-flap { filter: drop-shadow(0 13px 8px #53412f33) drop-shadow(0 1px 0 #fff); }
.opening .envelope-frame { opacity: 0; transform: scale(1.05); }
.seal-button { width: min(260px, 80%); color: #805b2c; }
.seal-button .seal-medallion {
  width: 136px; height: 145px; position: relative; display: block; margin: auto;
  isolation: isolate; transition: transform .4s ease;
}
.seal-medallion>img { display: block; width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 6px 4px #77521c55); }
.seal-medallion::before {
  content: ''; position: absolute; inset: 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, #ffebaf70 25%, #eac36935 55%, transparent 72%);
  box-shadow: 0 0 33px 8px #f4ce7860; animation: foil-halo 4.8s ease-in-out infinite;
}
.seal-sheen {
  position: absolute; inset: 0; z-index: 2; display: block;
  background: linear-gradient(110deg, transparent 25%, #fff9d800 40%, #fffbe0c9 48%, #fff8cc40 52%, transparent 64%);
  background-size: 300% 100%; background-position: 140% 0;
  -webkit-mask: url('assets/seal.png') center / contain no-repeat;
  mask: url('assets/seal.png') center / contain no-repeat;
  mix-blend-mode: screen; animation: foil-sweep 6s ease-in-out infinite;
}
.seal-button:hover .seal-medallion, .seal-button:focus-visible .seal-medallion { transform: translateY(-3px) scale(1.035); }
.seal-button .tap-label { font-size: 17px; margin-top: 14px; letter-spacing: .5px; }
.seal-button .seal-divider { width: 158px; margin-top: 19px; }
.envelope-caption { left: 7%; right: 7%; bottom: 8.5%; color: #755025; }
.envelope-caption>span, .envelope-caption small { font-size: 11px; letter-spacing: 2px; }
.envelope-caption p { font-size: clamp(33px, 9.7vw, 47px); line-height: 1.25; margin: 17px -6px 13px; text-shadow: 0 1px 0 #fff7df; }
.envelope-caption p>span { white-space: nowrap; }
.envelope-caption p>i { font-size: .65em; }
.opening .seal-medallion::before, .opening .seal-sheen { animation: none; }

/* Ceremony hierarchy requested by the family. */
.ceremony { padding-top: 46px; }
.ceremony .ceremony-kicker { font: 18px/1.5 var(--serif); margin: 0 0 17px; color: #725b3e; }
.nikah-title { font: 52px/1.12 var(--serif); letter-spacing: 3px; margin: 0 0 30px; color: #825923; }
.nikah-title span { display: block; font-size: .69em; letter-spacing: 4px; margin-top: 5px; }
.date-display { gap: 14px; }
.date-display>span { min-width: 70px; font-size: 12px; letter-spacing: 1px; }
.date-display strong { padding: 0 18px; color: #785323; }
.asr-time { font-size: 29px; }

/* A separate invitation for the evening celebration. */
.dinner-section { padding: 16px 24px 65px; }
.dinner-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 46px 24px 23px; border: 1px solid #b39252;
  outline: 1px solid #bb9b613d; outline-offset: -9px; border-radius: 150px 150px 5px 5px;
  background: radial-gradient(ellipse at 50% 8%, #fff9e6 5%, transparent 55%), linear-gradient(140deg, #f5e7cce6, #fff7e9 55%, #e5ceaa80);
  box-shadow: 0 14px 32px #72502014, inset 0 0 35px #bca37517;
}
.dinner-card::before { content: ''; position: absolute; inset: 16px; border: 1px solid #b08b4d33; border-radius: 135px 135px 0 0; z-index: -1; pointer-events: none; }
.dinner-flourish { display: block; width: 118px; height: auto; margin: 5px auto 29px; }
.dinner-card .eyebrow { font-size: 11px; letter-spacing: 1.5px; }
.dinner-card h2 { font: 53px/1.1 var(--script); color: #825c24; margin: 18px 0 24px; }
.dinner-card h2 span { display: block; }
.dinner-welcome { font: 18px/1.5 var(--serif); margin: 0 auto 29px; max-width: 270px; }
.dinner-date>span { font-size: 11px; letter-spacing: 2px; display: block; margin-bottom: 6px; }
.dinner-date strong { display: block; font: 29px/1.3 var(--serif); font-weight: 500; }
.dinner-time { font: italic 28px/1.3 var(--serif); margin: 16px 0 25px; color: #7c572b; }
.dinner-card h3 { font-size: 35px; }
.dinner-address { font-size: 14px; line-height: 1.85; }
.dinner-actions { display: grid; justify-items: center; gap: 12px; margin-top: 26px; }
.dinner-actions .button { width: 100%; max-width: 275px; margin: 0; padding-inline: 12px; }
.dinner-card .divider { margin: 28px auto 8px; width: 120px; }
.venue-card { border-color: #af8b5059; outline-color: #af8b5033; box-shadow: 0 10px 30px #7450240c; }
.countdown small { letter-spacing: .7px; }
.farewell { padding-bottom: 115px; }

/* Music and motion can be controlled independently. */
.music-button {
  position: fixed; left: max(15px, calc((100vw - 520px)/2 + 15px)); bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 10; display: flex; align-items: center; gap: 9px; min-height: 44px;
  border: 1px solid #a99157; padding: 10px 14px; border-radius: 30px;
  background: #fbf3e2ef; color: #6e502b; box-shadow: 0 4px 18px #62472424;
  font-size: 12px; backdrop-filter: blur(9px); text-decoration: none; line-height: 1.3;
}
.music-button[hidden] { display: none; }
.music-button small { display: block; font-size: 10px; margin-top: 3px; }
.music-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.music-button.is-playing { border-color: #8f712e; background: #fcf2ddeb; box-shadow: 0 4px 18px #62472424, 0 0 15px #e8bf6230; }
.motion-button { background: #596045f0; }
@keyframes foil-sweep { 0%, 25% { background-position: 140% 0; opacity: 0; } 32% { opacity: .8; } 55% { background-position: -45% 0; opacity: 0; } 100% { background-position: -45% 0; opacity: 0; } }
@keyframes foil-halo { 0%,100% { opacity: .4; transform: scale(.95); } 50% { opacity: .85; transform: scale(1.05); } }
@media (max-width: 374px) {
  .envelope-caption { left: 4%; right: 4%; bottom: 8%; }
  .envelope-caption p { font-size: 32px; }
  .envelope-caption>span, .envelope-caption small { font-size: 10px; letter-spacing: 1.4px; }
  .seal-button .seal-medallion { width: 117px; height: 125px; }
  .seal-button .tap-label { font-size: 15px; }
  .hero-copy .eyebrow { font-size: 9px; }
  .date-display { gap: 9px; }
  .date-display>span { font-size: 11px; min-width: 61px; }
  .date-display strong { font-size: 65px; padding: 0 11px; }
  .nikah-title { font-size: 44px; }
  .dinner-section { padding-inline: 15px; }
  .dinner-card { padding-inline: 21px; }
  .dinner-card h2 { font-size: 48px; }
  .dinner-date strong { font-size: 27px; }
  .music-button { padding-inline: 11px; }
}
@media (max-height: 660px) {
  .seal-button { top: 36%; }
  .seal-button .seal-medallion { width: 100px; height: 107px; }
  .seal-button .seal-divider { margin-top: 10px; width: 120px; }
  .envelope-caption { bottom: 6%; }
  .envelope-caption p { margin-block: 8px; font-size: 33px; }
}
/* The opening unfolds over four seconds, revealing light beneath the paper. */
.envelope { transition: background 2.4s .8s; }
.envelope-paper { transition: opacity 2.5s .9s; }
.envelope-flap { transition: transform 3s .35s cubic-bezier(.38,0,.18,1), opacity 1.7s 1.3s; }
.envelope-side, .envelope-bottom { transition: transform 3s .9s cubic-bezier(.38,0,.18,1); }
.seal-button { transition: opacity 1.1s .15s, transform 1.3s ease; }
.envelope-caption, .envelope-frame { transition: opacity 1.4s .2s, transform 2s; }
.envelope-inner-light {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 48%, #fffce5 0%, #ffe8aee6 12%, #e9b84499 33%, #d8993229 52%, transparent 72%);
}
.envelope-inner-light::before, .envelope-inner-light::after {
  content: ''; position: absolute; inset: 0; transform-origin: 50% 48%;
  background: conic-gradient(from 0deg at 50% 48%, transparent 0deg, #fff2bb80 10deg, transparent 23deg, transparent 66deg, #fff4c666 76deg, transparent 88deg, transparent 141deg, #fff0bb77 153deg, transparent 166deg, transparent 220deg, #fff4c666 235deg, transparent 248deg, transparent 290deg, #fff3c477 305deg, transparent 320deg);
  filter: blur(12px);
}
.envelope-inner-light::after { transform: rotate(38deg); opacity: .5; }
.opening .envelope-inner-light { animation: inner-gold-reveal 4.2s ease-in-out both; }
.opening .envelope-inner-light::before { animation: inner-gold-rays 4.2s ease-in-out both; }
@keyframes inner-gold-reveal {
  0% { opacity: 0; transform: scale(.35); }
  18% { opacity: .25; }
  46% { opacity: .95; transform: scale(.95); }
  65% { opacity: .65; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes inner-gold-rays { from { transform: rotate(-12deg) scale(.7); } to { transform: rotate(15deg) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .seal-sheen, .envelope-inner-light { display: none; } .seal-medallion::before { animation: none; opacity: .4; } }