:root {
  color-scheme: light;
  --ivory: #f7f4ec;
  --card: #fcfaf4;
  --ink: #24221f;
  --champagne: #b5a185;
  --champagne-rgb: 181, 161, 133;
  --champagne-light: #e0d3be;
  --champagne-deep: #887252;
  --mono-ratio: 121 / 133;
}
* { box-sizing: border-box; }
html { background: var(--ivory); }
body { margin: 0; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--champagne-deep); outline-offset: 6px; }
.experience { min-height: 100svh; position: relative; display: grid; place-items: center; padding: 34px 24px; isolation: isolate; }
.opening, .countdown-scene, .invitation-scene, .sound-button { position: relative; z-index: 1; }
.midnight-doors { position: fixed; inset: 0; z-index: 3; overflow: hidden; perspective: 1300px; pointer-events: none; opacity: 0; visibility: hidden; }
.door { position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); overflow: visible; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: #f6f1e7; background-image: radial-gradient(circle at 50% 50%, rgba(var(--champagne-rgb), .09), transparent 36%), linear-gradient(90deg, #eee8dc 0%, #faf7ef 48%, #e8dfd0 100%); border-color: rgba(var(--champagne-rgb), .62); border-style: solid; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; }
.door::before { content: ''; position: absolute; inset: 24px 15px; border-style: solid; border-color: rgba(var(--champagne-rgb), .67); }
.door::after { content: ''; position: absolute; left: 30px; right: 30px; top: 12%; bottom: 12%; border-style: solid; border-color: rgba(var(--champagne-rgb), .3); border-radius: 48% 48% 3px 3px / 13% 13% 3px 3px; background: linear-gradient(155deg, rgba(255,255,255,.2), rgba(var(--champagne-rgb), .04)); }
.door-left::before, .door-left::after { border-width: 1px 0 1px 1px; }
.door-right::before, .door-right::after { border-width: 1px 1px 1px 0; }
.door-left { left: 0; border-width: 0; transform-origin: left center; }
.door-right { right: 0; border-width: 0; transform-origin: right center; background: linear-gradient(90deg, #e8dfd0 0%, #faf7ef 52%, #eee8dc 100%); }
.door-depth { position: absolute; top: 0; bottom: 0; z-index: 1; width: clamp(18px, 4.6vw, 30px); opacity: 0; border: 1px solid rgba(91,70,43,.28); -webkit-backface-visibility: visible; backface-visibility: visible; box-shadow: inset 3px 0 6px rgba(255,255,255,.42), inset -4px 0 8px rgba(72,55,34,.24), 0 0 18px rgba(48,36,20,.18); }
.door-left .door-depth { right: 0; transform: rotateY(-90deg); transform-origin: right center; background: linear-gradient(90deg, #7d6749 0%, #b9a382 38%, #e5dac7 78%, #f4ede2 100%); }
.door-right .door-depth { left: 0; transform: rotateY(90deg); transform-origin: left center; background: linear-gradient(90deg, #f4ede2 0%, #e5dac7 22%, #b9a382 62%, #7d6749 100%); }
.door-handle { position: absolute; z-index: 2; top: 50%; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #806c4f; background: radial-gradient(circle at 35% 32%, #f1e4ca, #a58d69 55%, #705b3e); box-shadow: 0 1px 5px rgba(49,39,25,.2); }
.door-left .door-handle { right: 15px; }
.door-right .door-handle { left: 15px; }
.door-clock-half { position: absolute; top: 50%; z-index: 10; width: min(36vw, 150px); height: min(72vw, 300px); overflow: hidden; opacity: 1; visibility: visible; -webkit-transform: translateY(-50%) translateZ(3px); transform: translateY(-50%) translateZ(3px); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.door-clock-left { right: 0; }
.door-clock-right { left: 0; }
.door-clock-face { position: absolute; top: 0; width: min(72vw, 300px); height: min(72vw, 300px); display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(var(--champagne-rgb), .72); border-radius: 50%; background: #fcfaf4; box-shadow: inset 0 0 0 7px rgba(252,250,244,.62); }
.door-clock-left .door-clock-face { left: 0; }
.door-clock-right .door-clock-face { right: 0; }
.door-clock-ticks { position: absolute; inset: 10px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--champagne) 0deg .55deg, transparent .55deg 6deg); mask: radial-gradient(transparent 0 66%, #000 66%); -webkit-mask: radial-gradient(transparent 0 66%, #000 66%); opacity: .72; }
.door-clock-orbit { position: absolute; inset: 29px; border: 1px solid rgba(var(--champagne-rgb), .28); border-radius: 50%; }
.door-clock-sweep { position: absolute; inset: 0; border-radius: 50%; }
.door-clock-sweep::before { content: ''; position: absolute; left: calc(50% - 3px); top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--champagne-deep); box-shadow: 0 0 14px rgba(var(--champagne-rgb), .45); }
.door-clock-time { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; color: var(--champagne-deep); font-size: clamp(2.15rem, 9vw, 3.2rem); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.door-clock-line { position: absolute; top: 64%; width: 28px; height: 1px; background: var(--champagne); }
.door-clock-time.tick { animation: tick .35s ease; }
.experience[data-state="counting"] .midnight-doors,
.experience[data-state="midnight"] .midnight-doors { visibility: visible; opacity: 1; }
.experience[data-state="counting"] .midnight-doors { animation: countdown-arrive .52s cubic-bezier(.22,.61,.36,1) both; }
.experience[data-state="counting"] .door-clock-sweep { animation: sweep 5s linear forwards; }
.revealed .midnight-doors { visibility: visible; opacity: 1; }
.revealed .door-depth { opacity: 1; transition: opacity .18s ease .12s; }
.revealed .door-left { animation: door-left-open 6.2s cubic-bezier(.4,0,.2,1) .35s forwards; }
.revealed .door-right { animation: door-right-open 6.2s cubic-bezier(.4,0,.2,1) .35s forwards; }
.revealed .door-clock-time { animation: midnight-number 1.15s ease forwards; }
.opening { width: 100%; text-align: center; }
.opening-content { display: flex; flex-direction: column; align-items: center; padding: 44px 0; }
.monogram { position: relative; width: 168px; aspect-ratio: var(--mono-ratio); }
.monogram img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.opening-mark { width: clamp(160px, 32vw, 215px); background: var(--champagne); -webkit-mask: url("assets/monogram-transparent.png") center / contain no-repeat; mask: url("assets/monogram-transparent.png") center / contain no-repeat; }
.opening-mark img { opacity: 0; }
.reveal-button { display: flex; flex-direction: column; align-items: center; gap: 25px; margin-top: 62px; padding: 20px 24px; border: 0; background: transparent; color: var(--ink); font-family: Arial, sans-serif; font-size: .875rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.button-rule { display: block; width: 44px; height: 1px; background: var(--champagne-deep); transition: width .3s; }
.reveal-button:hover .button-rule { width: 70px; }
.opening.leaving .opening-mark { animation: opening-leave .45s ease forwards; }
.opening.leaving .reveal-button { animation: opening-leave .35s ease forwards; }
.countdown-scene { width: 100%; display: grid; place-items: center; }
.clock { position: relative; width: min(75vw, 318px); aspect-ratio: 1; display: grid; place-items: center; animation: clock-arrive .55s ease both; }
.clock::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(var(--champagne-rgb), .7); border-radius: 50%; }
.clock-ticks { position: absolute; inset: 10px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--champagne) 0deg .55deg, transparent .55deg 6deg); mask: radial-gradient(transparent 0 66%, #000 66%); -webkit-mask: radial-gradient(transparent 0 66%, #000 66%); opacity: .7; }
.clock-orbit { position: absolute; inset: 29px; border: 1px solid rgba(var(--champagne-rgb), .25); border-radius: 50%; }
.clock-sweep { position: absolute; inset: 0; border-radius: 50%; }
.clock-sweep::before { content: ''; position: absolute; left: calc(50% - 3px); top: -3px; width: 6px; height: 6px; background: var(--champagne-deep); border-radius: 50%; box-shadow: 0 0 14px rgba(var(--champagne-rgb), .45); }
.clock-time { position: relative; z-index: 2; font-size: clamp(2.25rem, 9vw, 3.35rem); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--champagne-deep); line-height: 1; }
.clock-line { position: absolute; width: 28px; height: 1px; background: var(--champagne); top: 64%; }
.clock-time.tick { animation: tick .35s ease; }
.invitation-scene { width: 100%; max-width: 420px; text-align: center; padding: 8px 0 0; }
.invitation { width: 100%; position: relative; background: var(--card); padding: 42px 30px 46px; box-shadow: 0 15px 50px #6751330d; }
.card-border { position: absolute; inset: 12px; border: 1px solid rgba(var(--champagne-rgb), .65); pointer-events: none; }
.names-script { margin: 0; font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; font-size: clamp(1.8rem, 8vw, 2.35rem); font-weight: 400; letter-spacing: .015em; line-height: 1.2; }
.names-script span { color: var(--champagne-deep); padding: 0 .06em; }
.invitation h1 { margin: 0; font-family: Arial, sans-serif; font-size: .75rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.photo-frame { position: relative; width: min(100%, 230px); aspect-ratio: 3 / 4; margin: 25px auto 24px; overflow: hidden; padding: 9px; background: var(--card); border: 1px solid rgba(var(--champagne-rgb), .72); box-shadow: 0 7px 20px rgba(55, 45, 32, .1), inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(var(--champagne-rgb), .24); }
.couple-photo { position: absolute; inset: 9px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.couple-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 49%; filter: grayscale(1) contrast(1.03); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.save-line { margin: 18px 0 13px; font-size: 1.08rem; font-style: italic; color: #61574b; }
.wedding-date { display: flex; justify-content: center; align-items: center; gap: .38em; margin: 0; font-size: clamp(2rem, 8.4vw, 2.6rem); font-weight: 400; line-height: 1.3; letter-spacing: .05em; white-space: nowrap; }
.date-dot { font-size: .56em; padding: 0 .03em; }
.mcdermott-eve { margin: 14px 0 0; font-family: Arial, sans-serif; font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; line-height: 1.55; }
.mcdermott-eve span { display: block; margin-top: 13px; color: var(--champagne-deep); font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive; font-size: 2.2rem; font-weight: 400; letter-spacing: .035em; line-height: 1.2; text-transform: none; }
.occasion { margin: 20px 0 0; font-family: Arial, sans-serif; font-size: .75rem; letter-spacing: .23em; text-transform: uppercase; line-height: 1.6; }
.venue-rule { display: block; width: 34px; height: 1px; margin: 14px auto 25px; background: var(--champagne); }
.venue { margin: 0; font-family: Arial, sans-serif; font-size: .875rem; font-weight: 400; letter-spacing: .19em; text-transform: uppercase; line-height: 1.6; }
.postcode { margin: 7px 0 0; font-family: Arial, sans-serif; font-size: .66rem; letter-spacing: .2em; line-height: 1.5; }
.venue a, .postcode a { color: inherit; text-decoration: none; }
.after-reveal { opacity: 1; transform: none; margin-top: 24px; }
.live-countdown { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 0 auto 20px; color: #61574b; font-family: Arial, sans-serif; font-variant-numeric: tabular-nums; }
.live-countdown span { min-width: 45px; }
.live-countdown strong { display: block; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; font-weight: 400; line-height: 1.15; }
.live-countdown small { display: block; margin-top: 4px; font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.live-countdown i { margin-top: 1px; color: var(--champagne-deep); font-style: normal; }
.calendar-button { display: inline-block; color: var(--ink); padding: 15px 23px; min-height: 48px; border: 1px solid var(--champagne); font-family: Arial, sans-serif; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.calendar-button:hover { background: rgba(var(--champagne-rgb), .13); }
.unable-note { margin: 17px auto 0; max-width: 310px; color: #625b50; font-size: .8125rem; font-weight: 700; line-height: 1.55; }
.unable-note a { color: inherit; text-underline-offset: 3px; }
.replay-button { display: block; padding: 12px; min-height: 44px; margin: 13px auto 0; background: transparent; border: none; color: #645b4f; font-size: .8125rem; font-style: italic; text-decoration: underline; text-underline-offset: 4px; }
.sound-button { position: absolute; top: 34px; right: 35px; z-index: 4; min-height: 44px; padding: 10px; background: var(--ivory); border: 1px solid var(--champagne); font-family: Arial, sans-serif; font-size: .75rem; }
#fireworks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#ambient-fireworks { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes opening-leave { to { opacity: 0; transform: translateY(-15px); } }
@keyframes countdown-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes clock-arrive { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes tick { 0% { opacity: .65; } 100% { opacity: 1; } }
@keyframes midnight { to { opacity: 0; transform: scale(1.12); } }
@keyframes door-left-open { 0% { transform: rotateY(0); box-shadow: inset -5px 0 10px rgba(66,49,28,.07); } 100% { transform: rotateY(-90deg); box-shadow: inset -9px 0 15px rgba(66,49,28,.12), 18px 0 34px rgba(42,31,18,.2); } }
@keyframes door-right-open { 0% { transform: rotateY(0); box-shadow: inset 5px 0 10px rgba(66,49,28,.07); } 100% { transform: rotateY(90deg); box-shadow: inset 9px 0 15px rgba(66,49,28,.12), -18px 0 34px rgba(42,31,18,.2); } }
@keyframes midnight-number { 0% { color: var(--champagne-deep); text-shadow: none; } 38% { color: #80683f; text-shadow: 0 0 22px rgba(var(--champagne-rgb), .7); transform: scale(1.045); } 100% { color: var(--champagne-deep); text-shadow: none; transform: scale(1); } }
@keyframes details-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@media(max-width: 600px) {
  .experience.revealed { align-items: start; padding-top: 10px; }
  .experience.revealed .invitation-scene { padding-top: 0; }
}
@media(max-width: 420px) {
  .experience { padding: 30px 22px; }
  .invitation { padding: 37px 25px 39px; }
  .photo-frame { width: min(100%, 215px); margin-top: 22px; margin-bottom: 21px; }
  .venue-rule { margin-top: 14px; margin-bottom: 21px; }
  .occasion { letter-spacing: .19em; }
  .venue { letter-spacing: .12em; }
}
@media(max-width: 340px) { .invitation { padding-inline: 20px; } .wedding-date { font-size: 1.9rem; gap: .25em; } }
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revealed .invitation, .revealed .after-reveal { opacity: 1; transform: none; }
  .clock-sweep { display: none; }
  .midnight-doors { display: none; }
}