@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#3d2c20;--accent:#775623;--paper:#fdf9f0;--line:#cbb68d;--serif:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 "DM Sans",sans-serif}
a{color:var(--accent);text-underline-offset:4px}
a:focus-visible{outline:2px solid #916329;outline-offset:5px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(16px,5vw,80px);border-bottom:1px solid var(--line)}
header a{text-decoration:none;color:var(--ink)}
.brand{font:2rem var(--serif);white-space:nowrap}
nav{display:flex;gap:clamp(12px,3vw,38px);font-size:.87rem}
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:550px;border-bottom:1px solid var(--line)}
.cover{display:grid;justify-items:center;align-content:center;text-align:center;padding:44px 18px;outline:1px solid var(--line);outline-offset:-12px;background:radial-gradient(ellipse at 50% 45%,#fffdf8,#efe3c9)}
.hero-photo{min-height:300px;background:#b69261 url("filipiniana.webp") center/cover}
.monogram{display:block;border:1px solid #a78950;border-radius:50%;padding:12px 19px;color:var(--accent);font:1.5rem var(--serif)}
.eyebrow,.time{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.cover .eyebrow{margin-top:23px}
h1,h2,h3,.signature{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0}
h1{font-size:clamp(3.75rem,7.5vw,8rem)}
h1 i{color:var(--accent);font-size:.65em}
h2{font-size:clamp(2.65rem,5vw,4.5rem)}
h3{font-size:2.3rem}
.rule{display:flex;align-items:center;gap:12px;color:var(--accent);margin-top:16px}
.rule:before,.rule:after{content:"";width:60px;border-top:1px solid var(--line)}
.button{display:inline-block;background:#503a26;color:#fffaf0;text-decoration:none;padding:11px 23px;border:1px solid #503a26}
.button:hover{background:#74542f}
.wrap{width:min(1100px,100% - 36px);margin:auto}
.intro,.schedule,.attendance{padding:clamp(48px,7vw,95px) 0;text-align:center}
.intro p:last-child,.attendance p{max-width:560px;margin:22px auto}
.schedule{background:#f0e6d2;border-block:1px solid var(--line)}
.cards,.details{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cards{margin-top:32px}
.cards article,.details article{border:1px solid var(--line);padding:28px 20px;background:var(--paper)}
.time{display:block;margin-bottom:10px}
.program{margin:24px 0 0}
.details{padding:clamp(38px,6vw,70px) 0}
.details h2{font-size:clamp(2.3rem,4vw,3.4rem)}
.palette{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 16px;font-size:.88rem}
.palette li{display:flex;align-items:center;gap:6px}
.palette li:before{content:"";width:18px;height:18px;background:var(--tone);border:1px solid var(--line);border-radius:50%}
.attendance{background:#e8d7b9}
.actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:15px 24px}
footer{text-align:center;padding:34px 12px;background:#3d2c20;color:#fdf2df}
footer p{margin:5px}.signature{font-size:3rem;font-style:italic}
@media(max-width:700px){.hero,.cards,.details{grid-template-columns:1fr}.hero-photo{min-height:240px}.hero{min-height:0}.cover{padding-block:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Portrait invitation cover */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, 540px);
  aspect-ratio: 9 / 16;
  min-height: 0;
  margin-inline: auto;
  color: #fffaf0;
  border: 0;
}
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  min-height: 0;
  background-position: center;
  background-size: 100% 100%;
}
.cover {
  background: linear-gradient(180deg, transparent 12%, rgba(43, 27, 16, .66) 49%, transparent 88%);
  outline-color: #f1dbaf;
  padding: 24px 18px;
}
.cover .eyebrow, .cover h1 i, .cover .rule, .cover .monogram {
  color: #f7dfac;
}
.cover .monogram { border-color: #f1dbaf; }
.cover h1 { font-size: clamp(3.3rem, 14vw, 6.5rem); }
.cover .button { background: #f8ead0; color: #3d2c20; border-color: #f8ead0; }
.cover .button:hover { background: #fffaf0; }
@media (min-width: 701px) {
  .hero { width: min(540px, max(350px, 49svh)); }
}

.cards {
  gap: 36px 28px;
}
.cards article {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 0 16px 16px;
  margin-top: 26px;
}
.venue-art {
  display: block;
  width: min(100%, 420px);
  height: clamp(150px, 24vw, 235px);
  object-fit: contain;
  object-position: center bottom;
  margin: -27px auto 16px;
}

.countdown {
  padding: clamp(35px, 6vw, 72px) 0;
  text-align: center;
  background: #f7eedc;
  border-top: 1px solid var(--line);
}
.countdown-clock:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 16px);
  max-width: 470px;
  margin: 22px auto 0;
}
.countdown-clock > div {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 10px 3px;
}
.countdown-clock dt { color: var(--accent); font-size: .78rem; }
.countdown-clock dd {
  margin: 0;
  font: clamp(2rem, 6vw, 3.5rem)/1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.cards { gap: 22px; }
.cards article {
  margin: 0;
  padding: clamp(18px, 3vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(61, 44, 32, .07);
}
.venue-art { margin: 0 auto 16px; }

.intro,.countdown,.schedule,.details,.attendance,footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.accent {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: clamp(68px, 12vw, 155px);
  height: auto;
}
.accent-corner { top: 0; left: 0; opacity: .48; }
.accent-fan { right: -14px; bottom: -30px; transform: rotate(-13deg); opacity: .56; }
.accent-window-left,.accent-window-right { top: 30%; width: clamp(30px, 5vw, 60px); opacity: .24; }
.accent-window-left { left: 3%; }
.accent-window-right { right: 3%; }
.accent-gold { top: -30px; right: -35px; opacity: .47; }
.accent-sun,.accent-stars { width: clamp(30px, 5vw, 58px); opacity: .65; }
.accent-sun { left: 6%; bottom: 7%; }
.accent-stars { right: 7%; bottom: 7%; }
.accent-palm { bottom: -38px; left: -26px; opacity: .38; }
.accent-canopy { right: 0; top: 0; opacity: .35; }
.accent-lace-fan { left: 2%; top: 2%; width: clamp(60px, 11vw, 138px); }
.accent-dried { right: 0; bottom: 0; opacity: .5; }
.details { padding-block: clamp(58px, 7vw, 90px); }
.accent-woven { right: -25px; bottom: -35px; opacity: .42; }
.accent-lattice-left,.accent-lattice-right { top: 17%; width: clamp(26px, 5vw, 65px); opacity: .32; }
.accent-lattice-left { left: 2%; }
.accent-lattice-right { right: 2%; }
footer { padding-bottom: 62px; }
.accent-heritage { bottom: 14px; left: 4%; opacity: .46; }
.accent-flag { right: 6%; bottom: 35px; width: clamp(25px, 4vw, 45px); opacity: .65; }
.accent-wood { bottom: 0; left: 0; width: 100%; height: 24px; object-fit: cover; opacity: .75; }
@media (max-width: 600px) {
  .intro,.countdown,.attendance { padding-block: 65px; }
  .accent-window-left,.accent-lattice-left { left: -17px; }
  .accent-window-right,.accent-lattice-right { right: -17px; }
  .accent-heritage { left: -13px; }
  .accent-flag { right: 3%; }
}

/* Give the decorative cutouts room around the invitation copy. */
.accent { width: clamp(112px, 18vw, 220px); }
.accent-corner { opacity: .9; }
.accent-fan { right: 8px; bottom: -12px; opacity: .9; }
.accent-window-left,.accent-window-right {
  width: clamp(44px, 7vw, 85px);
  opacity: .78;
}
.accent-gold { top: -16px; right: -16px; opacity: .82; }
.accent-sun,.accent-stars { width: clamp(48px, 7vw, 76px); opacity: .9; }
.accent-palm,.accent-canopy { opacity: .7; }
.accent-lace-fan { width: clamp(106px, 16vw, 185px); }
.accent-dried,.accent-woven { opacity: .82; }
.accent-lattice-left,.accent-lattice-right { width: clamp(44px, 7vw, 92px); opacity: .72; }
.accent-heritage { opacity: .8; }
.accent-flag { width: clamp(37px, 5vw, 58px); opacity: .9; }
@media (max-width: 600px) {
  .intro { padding-block: 112px 100px; }
  .countdown { padding-block: 98px 86px; }
  .attendance { padding-block: 98px 106px; }
  .schedule { padding-block: 91px 82px; }
  .details { padding-block: 78px 82px; }
  .accent-window-left,.accent-window-right { top: auto; bottom: 15px; }
  .accent-window-left { left: 4px; }
  .accent-window-right { right: 112px; width: 32px; }
  .accent-fan { width: 105px; right: 0; bottom: -8px; }
  .accent-gold { width: 92px; top: -28px; right: -10px; }
  .accent-sun,.accent-stars { bottom: 14px; }
  .accent-lattice-left,.accent-lattice-right { top: 8px; }
  .accent-lattice-left { left: 5px; }
  .accent-lattice-right { right: 5px; }
  footer { padding-bottom: 105px; }
  .accent-heritage { left: 8px; }
}

.intro .window-copy > p:last-child { max-width: 560px; margin: 22px auto; }
.window-reveal { position: relative; max-width: 650px; margin-inline: auto; }
.shutters { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .window-ready .shutters {
    display: flex;
    position: absolute;
    inset: 0 0 0 0;
    perspective: 900px;
    justify-content: center;
    pointer-events: none;
    transition: opacity .6s ease .2s, visibility 0s linear .9s;
  }
  .shutter {
    width: min(50%, 180px);
    height: 100%;
    object-fit: fill;
    transition: transform .9s cubic-bezier(.22,.68,.27,1);
  }
  .shutter-left { transform-origin: left center; }
  .shutter-right { transform-origin: right center; }
  .window-ready .window-copy { opacity: 0; transform: translateY(12px); transition: opacity .65s ease .16s, transform .7s ease .16s; }
  .window-open .window-copy,.window-ready:focus-within .window-copy { opacity: 1; transform: none; }
  .window-open .shutters,.window-ready:focus-within .shutters { opacity: 0; visibility: hidden; }
  .window-open .shutter-left { transform: translateX(-28%) rotateY(-72deg); }
  .window-open .shutter-right { transform: translateX(28%) rotateY(72deg); }
}

/* Open shutters frame the copy after the reveal. */
.window-reveal { --open-pane: clamp(42px, 13vw, 108px); }
.window-copy { padding-inline: calc(var(--open-pane) + 8px); }
@media (prefers-reduced-motion: no-preference) {
  .window-ready .shutters { transition: none; }
  .window-open .shutters,.window-ready:focus-within .shutters {
    opacity: 1;
    visibility: visible;
  }
  .window-ready .shutter {
    position: absolute;
    width: var(--open-pane);
    height: clamp(112px, 26vw, 235px);
    top: 50%;
    object-fit: contain;
  }
  .window-ready .shutter-left { left: 0; transform: translate(calc(325px - var(--open-pane)), -50%); }
  .window-ready .shutter-right { right: 0; transform: translate(calc(var(--open-pane) - 325px), -50%); }
  .window-ready .shutters { container-type: inline-size; }
  .window-ready .shutter-left { transform: translate(calc(50cqw - var(--open-pane)), -50%); }
  .window-ready .shutter-right { transform: translate(calc(var(--open-pane) - 50cqw), -50%); }
  .window-open .shutter-left,.window-ready:focus-within .shutter-left { transform: translateY(-50%) rotateY(-26deg); }
  .window-open .shutter-right,.window-ready:focus-within .shutter-right { transform: translateY(-50%) rotateY(26deg); }
}
@media (prefers-reduced-motion: reduce) {
  .shutters { display: block; position: absolute; inset: 0; pointer-events: none; }
  .shutter { position: absolute; top: 50%; transform: translateY(-50%); width: var(--open-pane); height: clamp(112px, 26vw, 235px); object-fit: contain; }
  .shutter-left { left: 0; }
  .shutter-right { right: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-visible {
    animation: rise-into-view 1.1s cubic-bezier(.19,1,.3,1) backwards;
  }
  .accent.scroll-visible {
    animation: accent-into-view 1.35s cubic-bezier(.19,1,.3,1) backwards;
  }
  .details article:nth-of-type(2).scroll-visible {
    animation-delay: .15s;
  }
}
@keyframes rise-into-view {
  from { opacity: .25; translate: 0 42px; }
  to { translate: 0 0; }
}
@keyframes accent-into-view {
  from { opacity: .2; translate: 0 28px; scale: calc(var(--accent-scale, 1) * .8) .8; }
  to { translate: 0 0; scale: var(--accent-scale, 1) 1; }
}

.accent-woven-detail {
  top: 1%;
  left: 2%;
  width: clamp(66px, 10vw, 123px);
}

@keyframes accent-idle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

.details { padding-left: clamp(28px, 8vw, 108px); }
.accent-woven-detail {
  top: 13%;
  left: clamp(-76px, -11vw, -38px);
  width: clamp(120px, 21vw, 246px);
  scale: -1 1;
}


/* Overlap the card edge and tuck the intro accents into its corners. */
.details {
  padding-left: 0;
  padding-block: 30px;
}
.accent-woven-detail {
  z-index: 1;
  top: 16px;
  left: -18px;
  width: clamp(74px, 12vw, 155px);
  opacity: 1;
}
.details article:first-of-type { padding-top: clamp(42px, 7vw, 65px); }
.intro { padding-block: clamp(35px, 5vw, 62px); }
.intro .accent-corner { top: -22px; left: -18px; }
.intro .accent-fan { bottom: -35px; right: -15px; }
@media (max-width: 600px) {
  .intro .accent-corner { width: 84px; }
  .intro .accent-fan { width: 83px; }
  .intro .window-copy > p:last-child { margin-bottom: 0; }
}

/* Keep each accent inside the visible edge of its section. */
.intro { padding-block: 62px 58px; }
.intro .accent-corner { top: 0; left: 0; width: clamp(82px, 13vw, 150px); opacity: 1; }
.intro .accent-fan { bottom: 5px; right: 4px; width: clamp(86px, 13vw, 150px); opacity: 1; }
.accent-gold { top: 0; right: 0; width: clamp(66px, 8vw, 112px); }
.accent-palm { left: 0; bottom: 0; width: clamp(94px, 13vw, 160px); }
.accent-canopy { width: clamp(90px, 13vw, 155px); }
.schedule { padding-bottom: 75px; }
.accent-woven-detail,.accent-dried { z-index: 1; opacity: 1; width: clamp(90px, 13vw, 165px); }
.accent-woven-detail { top: 10px; left: 4px; }
.accent-dried { right: 5px; bottom: 6px; }
.details article:first-of-type { padding-top: clamp(88px, 12vw, 143px); }
.details article:last-of-type { padding-bottom: clamp(88px, 12vw, 143px); }
.accent-woven { bottom: 4px; right: 6px; width: clamp(87px, 13vw, 150px); opacity: .9; }
.attendance { padding-bottom: 94px; }
.accent-heritage { left: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .accent-woven-detail { --accent-scale: -1; }
}

.intro { overflow: visible; }
.intro .accent-corner {
  left: calc((100% - 100vw) / 2);
  z-index: 1;
}


/* Photograph of the woven fibers continues behind the invitation sections. */
main {
  background: linear-gradient(#fbf3e1c9, #f8edd6c9), url("woven-paper.webp") left top / 214px 206px repeat;
}
.schedule,.countdown,.attendance { background: transparent; }
header {
  background: linear-gradient(#fbf3e1e8,#fbf3e1e8), url("woven-paper.webp") left top / 214px 206px repeat;
}
footer {
  background: linear-gradient(#352419df,#352419df), url("woven-paper.webp") left top / 214px 206px repeat;
}

.petal-layer { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .petal-layer {
    display: block;
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 8;
  }
  .petal-layer i {
    position: absolute;
    top: -20px;
    left: var(--x);
    width: 11px;
    height: 16px;
    border-radius: 75% 25% 68% 32% / 65% 42% 58% 35%;
    background: linear-gradient(140deg, #fffbeb 20%, #ead8aa 73%, #b89453);
    box-shadow: 0 1px 2px #583b262e;
    opacity: .8;
    animation: petal-fall var(--fall) linear var(--delay) infinite;
  }
  .petal-layer i:nth-child(even) { width: 8px; height: 12px; }
}
@keyframes petal-fall {
  from { transform: translate3d(0, 0, 0) rotate(25deg); }
  50% { transform: translate3d(var(--drift), 52vh, 0) rotate(185deg) rotateY(48deg); }
  to { transform: translate3d(0, calc(100vh + 42px), 0) rotate(380deg); }
}

.cards .program {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.attendance .window-reveal:not(.window-ready) .shutters { display: block; position: absolute; inset: 0; pointer-events: none; }
.attendance .window-reveal:not(.window-ready) .shutter {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--open-pane);
  height: clamp(112px, 26vw, 235px);
  object-fit: contain;
}
.attendance .window-reveal:not(.window-ready) .shutter-left { left: 0; }
.attendance .window-reveal:not(.window-ready) .shutter-right { right: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cards.scroll-visible { animation: none; }
  .cards.scroll-visible > article {
    animation: rise-into-view .95s cubic-bezier(.19,1,.3,1) backwards;
  }
  .cards.scroll-visible > article + article { animation-delay: .28s; }
  .accent-corner,.accent-fan,.accent-gold,.accent-canopy {
    animation: accent-idle 7s ease-in-out infinite;
  }
  .accent-corner.scroll-visible,.accent-fan.scroll-visible,
  .accent-gold.scroll-visible,.accent-canopy.scroll-visible {
    animation: accent-into-view 1.35s cubic-bezier(.19,1,.3,1) backwards,
      accent-idle 7s ease-in-out 1.35s infinite;
  }
}

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: #b58c47;
  transform-origin: left center;
  scale: 0 1;
  z-index: 12;
  pointer-events: none;
}
.flower { position: absolute; pointer-events: none; width: clamp(56px, 12vw, 128px); }
.flower-cover { bottom: 4%; right: 5%; z-index: 1; transform: rotate(-20deg); }
.cards { position: relative; }
.flower-venues { bottom: -28px; right: 4px; width: clamp(42px, 8vw, 85px); z-index: 1; }
.venue-preview {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: zoom-in;
}
.venue-preview .venue-art { margin-bottom: 0; }
.venue-preview span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 4px 8px;
  background: var(--paper);
}
.venue-dialog {
  width: min(88vw, 850px);
  max-height: 90dvh;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: right;
}
.venue-dialog::backdrop { background: #352419c9; }
.venue-dialog img { display: block; width: 100%; max-height: 72dvh; object-fit: contain; }
.venue-dialog button { padding: 6px 12px; cursor: pointer; }
.calendar-link { display: inline-block; margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .venue-preview .venue-art { transition: scale .35s ease; }
  .venue-preview:is(:hover,:focus-visible) .venue-art { scale: 1.045; }
}

/* Larger cutouts with room for the invitation copy. */
.accent:not(.accent-wood) { zoom: 1.22; }
.intro { padding-block: 72px 66px; }
.details article:first-of-type { padding-top: clamp(102px, 14vw, 166px); }
.details article:last-of-type { padding-bottom: clamp(102px, 14vw, 166px); }
.schedule { padding-bottom: 98px; }
.attendance { padding-bottom: 110px; }
footer { padding-bottom: 122px; }
.window-reveal { --open-pane: clamp(48px, 15vw, 120px); }
.window-ready .shutter,.attendance .shutter { height: clamp(130px, 31vw, 258px); }
.venue-art { width: min(100%, 485px); height: clamp(175px, 28vw, 268px); }
.flower-cover { width: clamp(80px, 18vw, 160px); }
.flower-venues { width: clamp(64px, 11vw, 110px); bottom: -43px; }

.attire-models {
  display: block;
  width: min(100%, 430px);
  height: auto;
  margin: 20px auto;
}

.rsvp-emblem {
  display: block;
  width: min(100%, 150px);
  height: auto;
  margin: 0 auto 14px;
}

.intro-dancers {
  display: block;
  width: min(100%, clamp(112px, 26vw, 185px));
  height: auto;
  margin: 0 auto 18px;
}

.intro-dancers { width: clamp(72px, 17vw, 112px); }
.countdown > .wrap {
  box-sizing: border-box;
  width: min(96%, 820px);
  padding: clamp(53px, 10vw, 108px) 11%;
  background: url("accents/countdown-frame.webp") center / 100% 100% no-repeat;
}
.countdown h2 { font-size: clamp(1.65rem, 5vw, 3.5rem); }
.countdown-clock:not([hidden]) { margin-top: 12px; }
.countdown-clock > div { padding: 6px 1px; }
.countdown-clock dt { font-size: clamp(.58rem, 2vw, .78rem); }
.countdown-clock dd { font-size: clamp(1.35rem, 5vw, 3rem); }
.countdown .calendar-link { margin-top: 10px; }

.intro-dancers {
  position: relative;
  aspect-ratio: 1;
}
.intro-dancers img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.intro-dancers img + img { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .intro-dancers img { animation: dance-pose 4s steps(1, end) infinite; }
  .intro-dancers img + img { animation-delay: -2s; }
}
@keyframes dance-pose {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

.attendance {
  background: url("capiz-lampara.webp") center / 100% 100% no-repeat;
}
.attendance .window-copy {
  background: #f9eddaee;
  border: 1px solid var(--line);
  padding-block: 20px;
}
@media (min-width: 800px) {
  .attendance {
    background-size: min(100%, 960px) 100%;
    background-color: #513623;
  }
}

.schedule {
  background: #ece1d2 url("venue-damask.webp") center / cover no-repeat;
}

.countdown {
  background: #eed8ad url("countdown-capiz.webp") center / 100% 100% no-repeat;
}

.hero-monogram {
  display: block;
  width: clamp(55px, 13vw, 86px);
  height: auto;
}

.corner-glints { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .corner-glints {
    display: block;
    position: absolute;
    inset: 12px;
    z-index: 2;
    pointer-events: none;
  }
  .corner-glints i {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #c59a4e;
    clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
    animation: corner-glint 4.8s ease-in-out infinite;
  }
  .corner-glints i:nth-child(1) { top: 0; left: 0; }
  .corner-glints i:nth-child(2) { top: 0; right: 0; animation-delay: -1.2s; }
  .corner-glints i:nth-child(3) { bottom: 0; left: 0; animation-delay: -2.4s; }
  .corner-glints i:nth-child(4) { bottom: 0; right: 0; animation-delay: -3.6s; }
  .hero .corner-glints i, footer .corner-glints i { background: #ffe3a5; }
}
@keyframes corner-glint {
  0%, 100% { opacity: .22; transform: scale(.55) rotate(-12deg); }
  40% { opacity: .95; transform: scale(1.16) rotate(16deg); }
  68% { opacity: .38; transform: scale(.72) rotate(5deg); }
}

html:has(.invitation-intro[open]) { overflow: hidden; }
.invitation-intro {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  padding: 0;
  border: 0;
  background: #eee0c4;
  overflow: hidden;
}
.invitation-intro video { width: 100%; height: 100%; object-fit: contain; display: block; }
.intro-play:not([hidden]) {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 16px 12vh;
  border: 0;
  background: transparent;
  color: #503a26;
  font: 700 clamp(1.45rem, 4vw, 2rem) Georgia, serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #fff7e8, 0 0 4px #fff7e8;
  cursor: pointer;
}
.intro-play:focus-visible { outline-offset: -5px; }
.invitation-intro::backdrop { background: transparent; }
.invitation-intro.intro-leaving {
  pointer-events: none;
  animation: intro-dissolve .7s ease-in-out forwards;
}
@keyframes intro-dissolve {
  to { opacity: 0; transform: scale(1.025); }
}

@media (prefers-reduced-motion: no-preference) {
  .intro-play:not([hidden]) { animation: invitation-glow 2.4s ease-in-out infinite; }
  .invitation-revealed .hero-photo { animation: hero-arrival 1.8s cubic-bezier(.2,.7,.25,1) both; }
  .hero { overflow: hidden; }
  .invitation-revealed .cover > * { animation: rise-into-view 1s ease-out both; }
  .invitation-revealed .cover > :nth-child(2) { animation-delay: .12s; }
  .invitation-revealed .cover > :nth-child(3) { animation-delay: .25s; }
  .invitation-revealed .cover > :nth-child(n+4) { animation-delay: .4s; }
  .countdown > .wrap,.cards article,.details article { position: relative; overflow: hidden; }
  .countdown > .wrap::after,.cards article::after,.details article::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, #fff7ce88 50%, transparent 62%);
    opacity: .48;
    animation: gold-sweep 11s ease-in-out infinite;
  }
  .cards article:nth-of-type(2)::after,.details article:nth-of-type(2)::after { animation-delay: -5.5s; }
  .flower { animation: flower-sway 4.8s ease-in-out infinite; }
  .hero-monogram { filter: drop-shadow(0 0 7px #f4cf7170); }
  .corner-glints i::after { content: ""; position: absolute; inset: 3px; background: #fff2c8; }
  .corner-glints i { animation-duration: 3.8s; }
  .petal-layer i:nth-child(3n) { background: linear-gradient(140deg,#fff8e6,#d7ac66); }
  .button { transition: box-shadow .25s ease, translate .25s ease; }
  .button:is(:hover,:focus-visible) { translate: 0 -3px; box-shadow: 0 4px 18px #b58c4780; }
}
@keyframes invitation-glow {
  50% { opacity: .72; }
}
@keyframes hero-arrival {
  from { transform: scale(1.09); opacity: .82; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes gold-sweep {
  0%, 55% { transform: translateX(-110%); }
  78%, 100% { transform: translateX(110%); }
}
@keyframes flower-sway {
  50% { rotate: 8deg; translate: 0 -8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .invitation-revealed .cover > * { animation-delay: .30s; }
  .invitation-revealed .cover > :nth-child(2) { animation-delay: .40s; }
  .invitation-revealed .cover > :nth-child(3) { animation-delay: .50s; }
  .invitation-revealed .cover > :nth-child(n+4) { animation-delay: .62s; }
  .details article::after { animation-delay: -2.75s; }
  .petal-layer i:nth-child(3n) { opacity: .48; }
}

/* Reduce concurrent decorative layers on smaller screens. */
@media (max-width: 600px) {
  .petal-layer i:nth-child(n+11) { display: none; }
}
.motion-offscreen .accent,
.motion-offscreen .flower,
.motion-offscreen .corner-glints i,
.motion-offscreen > .wrap::after,
.motion-offscreen article::after {
  animation-play-state: paused;
}

.music-control {
  position: fixed;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}