:root {
  --ivory: #fffaf6;
  --blush: #fbe9ec;
  --blush-deep: #f3cdd4;
  --rose: #a3213f;
  --rose-dark: #6e1029;
  --burgundy: #5c0b22;
  --gold: #b8925a;
  --gold-light: #e3cfa0;
  --gold-dark: #8a6428;
  --text: #4a2e33;
  --muted: #8c6a70;
  --ruqaa: "Aref Ruqaa", "Amiri", serif;
  --naskh: "Amiri", "Traditional Arabic", serif;
  --ui: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b8925a' stroke-opacity='.13' stroke-width='1'%3E%3Crect x='24' y='24' width='32' height='32'/%3E%3Crect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3Cpath d='M0 0L17 17M80 0L63 17M0 80L17 63M80 80L63 63'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--naskh);
  font-size: 1.2rem;
  line-height: 1.9;
  color: var(--text);
  background-color: var(--ivory);
  background-image:
    radial-gradient(circle at 10% 30%, rgba(243, 205, 212, .45), transparent 35%),
    radial-gradient(circle at 90% 70%, rgba(243, 205, 212, .45), transparent 35%),
    var(--pattern);
  overflow-x: hidden;
  position: relative;
}
main, .section, .footer { overflow-x: clip; }

/* ================= Shared text styles ================= */
.gold-text {
  display: inline-block;
  padding: 0 .12em;
  background: linear-gradient(100deg, #8a6428 0%, #d9b46a 18%, #fff1c9 30%, #c9a25a 42%, #8a6428 55%, #d9b46a 72%, #fff1c9 82%, #8a6428 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
  filter: drop-shadow(0 2px 1px rgba(110, 16, 41, .15));
}

.eyebrow {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--gold);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}

.eyebrow::before, .eyebrow::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.eyebrow::after { transform: scaleX(-1); }

.title {
  font-family: var(--ruqaa);
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  color: var(--rose);
  margin: .1rem 0 2.5rem;
  line-height: 1.5;
}

.ornament svg { display: block; width: min(320px, 82%); height: auto; margin: 0 auto .4rem; overflow: visible; }

/* ================= Animated flowers (built in script.js) ================= */
.vine {
  fill: none;
  stroke: #6f8a62;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.vine.gold { stroke: var(--gold); stroke-width: 1.3; }
.in .vine { animation: draw var(--dur, 2s) ease-out var(--d, 0s) forwards; }

.rose, .rose .lyr, .leaf, .bud, .pearl { transform-box: fill-box; transform-origin: center; }

.rose .lyr { opacity: 0; transform: scale(.15) rotate(-70deg); }
.in .rose .lyr {
  animation: bloom 1.5s cubic-bezier(.2, .9, .3, 1.15) forwards;
  animation-delay: calc(var(--d, 0s) + var(--ld));
}
.rose .l4 { --ld: 0s; }
.rose .l3 { --ld: .12s; }
.rose .l2 { --ld: .26s; }
.rose .l1 { --ld: .4s; }

.leaf { transform-origin: 0 50%; transform: scale(0); }
.in .leaf { animation: grow .9s ease-out var(--d, 0s) forwards; }

.bud { transform-origin: 50% 100%; transform: scale(0); }
.in .bud { animation: grow .9s ease-out var(--d, 0s) forwards; }

.pearl { transform: scale(0); }
.in .pearl { animation: grow .5s ease-out var(--d, 0s) forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bloom { to { opacity: 1; transform: none; } }
@keyframes grow { to { transform: scale(1); } }
@keyframes breathe { 0%, 100% { transform: none; } 50% { transform: rotate(8deg) scale(1.04); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.5deg) translateY(4px); } }
@keyframes shimmer { to { background-position: -250% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

[data-cluster] svg { display: block; width: 100%; height: auto; overflow: visible; animation: sway 8s ease-in-out infinite; transform-origin: 50% 70%; will-change: transform; }

/* Petals falling across the page */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.petal {
  position: absolute;
  top: -40px;
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #f7a9b8, #c8324f 70%, #8d1834);
  opacity: .85;
  animation: fall linear forwards;
}
.petal.light { background: linear-gradient(135deg, #fff0f3, #f2b3bf 60%, #d97a8c); }
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(var(--sway), 25vh) rotate(90deg); }
  50%  { transform: translate(calc(var(--sway) * -1), 50vh) rotate(200deg); }
  75%  { transform: translate(var(--sway), 75vh) rotate(290deg); }
  100% { transform: translate(0, 110vh) rotate(380deg); }
}

/* ================= Hero ================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(150px, 17vw, 260px) 1rem 9rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--blush) 0%, rgba(251, 233, 236, 0) 100%);
}

.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sparkle {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8, #d9b46a 50%, transparent 72%);
  opacity: 0;
  animation: twinkle var(--t) ease-in-out var(--dl) infinite;
}
.sparkle.star {
  border-radius: 0;
  background: linear-gradient(135deg, #f3dfa9, #b8925a);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.swag-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; }
.swag { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 0; animation: swing 9s ease-in-out infinite; }

.arch { position: relative; width: min(560px, 90vw); z-index: 2; }
.arch-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 30px 40px rgba(110, 16, 41, .16)); }
.arch-bg { fill: rgba(255, 252, 248, .9); opacity: 0; }
.in .arch-bg { animation: fade 1.2s ease forwards; }
.arch-line { fill: none; stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 1; }
.arch-line.o { stroke-width: 2; }
.arch-line.i { stroke-width: 1; }
.in .arch-line { animation: draw 2.8s ease-in-out .2s forwards; }
.arch-dots { fill: none; stroke: var(--gold-light); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 11; opacity: 0; }
.in .arch-dots { animation: fade 1.5s ease 2.2s forwards; }

.crown { position: absolute; top: calc(min(360px, 72vw) * -.265); left: 50%; width: min(360px, 72vw); transform: translateX(-50%); z-index: 4; }
.arch-foot { position: absolute; bottom: -62px; left: 50%; width: 190px; transform: translateX(-50%); z-index: 4; }

.vine-side { position: absolute; bottom: -10px; width: clamp(62px, 11vw, 120px); height: 82%; z-index: 3; pointer-events: none; }
.vine-side svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.vine-side.r { right: calc(clamp(62px, 11vw, 120px) * -.55); }
.vine-side.l { left: calc(clamp(62px, 11vw, 120px) * -.55); transform: scaleX(-1); }
.vine-side.l svg { animation-duration: 8.5s; }

.arch-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: calc(min(560px, 90vw) * .3) 2.4rem 4rem;
}
.arch-content > * { opacity: 0; }
.hero.in .arch-content > * { animation: rise 1.1s ease forwards; animation-delay: calc(.35s + var(--i, 0) * .18s); }

.bismillah { font-size: 1.35rem; color: var(--rose-dark); margin: 0 0 .4rem; }
.verse { font-size: 1.15rem; color: var(--muted); line-height: 2.1; max-width: 26em; margin: 0 auto 1.2rem; }

.names {
  font-family: var(--ruqaa);
  font-weight: 700;
  font-size: clamp(2.7rem, 8.5vw, 4.6rem);
  line-height: 1.5;
  margin: .2rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25em;
}
.rings { width: .95em; height: .72em; flex: none; animation: float 4s ease-in-out infinite; }
.rings .glint { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }

.hero-date { display: flex; flex-direction: column; align-items: center; margin: .4rem 0 0; }
.hero-date span { font-family: var(--ui); font-size: 1rem; color: var(--gold); }
.hero-date strong {
  font-size: 1.9rem;
  color: var(--rose-dark);
  padding: .1rem 1.4rem;
  border-top: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
  margin-top: .3rem;
}

/* ================= Sections ================= */
.section { position: relative; padding: 6rem 1.25rem; text-align: center; }

.fade { opacity: 0; transform: translateY(40px); transition: opacity 1.1s ease, transform 1.1s ease; transition-delay: calc(var(--i, 0) * .15s); }
.fade.in { opacity: 1; transform: none; }

/* Gold frame corners (added by script.js) */
.corner { position: absolute; width: 46px; height: 46px; pointer-events: none; z-index: 1; }
.corner.tl { top: 6px; left: 6px; }
.corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner.br { bottom: 6px; right: 6px; transform: scale(-1, -1); }

/* Countdown */
.cd-card {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 3rem;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(184, 146, 90, .55);
  outline: 1px solid rgba(184, 146, 90, .35);
  outline-offset: -12px;
  border-radius: 22px;
  box-shadow: 0 30px 60px -35px rgba(110, 16, 41, .45);
}
.cd-card .title { margin-bottom: 2rem; }
.cd-card .cl { position: absolute; width: clamp(130px, 22vw, 190px); z-index: 2; }
.cl-r { top: -58px; right: -34px; }
.cl-l { bottom: -52px; left: -34px; transform: rotate(180deg); }

.countdown { display: flex; justify-content: center; gap: clamp(.8rem, 3.5vw, 2rem); flex-wrap: wrap; }
.unit {
  position: relative;
  width: clamp(74px, 19vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, #fff 58%, #fdf1f3);
  box-shadow: 0 16px 30px -14px rgba(110, 16, 41, .35);
}
.unit::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(#b8925a, #f6e7bf, #b8925a, #8a6428, #f3dfa9, #b8925a);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 9s linear infinite;
}
.unit .num { font-weight: 700; font-size: clamp(1.8rem, 5.5vw, 3rem); color: var(--rose-dark); line-height: 1.1; }
.unit .label { font-family: var(--ui); font-size: .9rem; color: var(--gold); }
.cd-note { font-family: var(--ui); color: var(--muted); margin: 2rem 0 0; font-size: 1.05rem; }

/* ================= Four days ================= */
.days {
  background:
    linear-gradient(180deg, rgba(251, 233, 236, 0), rgba(251, 233, 236, .75) 12%, rgba(251, 233, 236, .75) 88%, rgba(251, 233, 236, 0));
}

.timeline { position: relative; max-width: 1240px; margin: 0 auto; }
.tl-line { position: absolute; top: 40px; bottom: 40px; left: 50%; width: 2px; margin-left: -1px; background: rgba(184, 146, 90, .25); }
.tl-fill { position: absolute; inset: 0; background: linear-gradient(var(--gold), var(--rose)); transform-origin: top; transform: scaleY(0); }

.day { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; margin-bottom: 4.5rem; }
.day:last-child { margin-bottom: 0; }
.day .node { grid-column: 2; grid-row: 1; width: 120px; justify-self: center; z-index: 2; }
.day .card { grid-column: 1; grid-row: 1; }
.day:nth-child(even) .card { grid-column: 3; }

.day[data-theme="kath"]        { --accent: #b8925a; --accent-dark: #7d5a24; }
.day[data-theme="henna-bride"] { --accent: #c0603a; --accent-dark: #8f3b1f; }
.day[data-theme="henna-groom"] { --accent: #6f8a62; --accent-dark: #3f5a37; }
.day[data-theme="farah"]       { --accent: #c8324f; --accent-dark: #6e1029; }

.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(440px, 62vh, 580px);
  background: linear-gradient(180deg, #fff, #fffaf6);
  border: 1px solid rgba(184, 146, 90, .5);
  outline: 1px solid rgba(184, 146, 90, .3);
  outline-offset: -11px;
  border-radius: 16px;
  padding: 3.4rem 2.6rem 3rem;
  box-shadow: 0 28px 50px -32px rgba(110, 16, 41, .5);
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 1s ease, transform 1s ease, box-shadow .4s ease;
}
.day:nth-child(even) .card { transform: translateX(-60px); }
.day.in .card { opacity: 1; transform: none; }
.day.in .card:hover { transform: translateY(-6px); box-shadow: 0 36px 55px -30px rgba(110, 16, 41, .55); }

/* engagement photo filling the card, under a soft veil so the text stays readable */
.card-bg { position: absolute; inset: 0; pointer-events: none; }
.card-bg img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 52%, rgba(255, 250, 246, .88) 30%, rgba(255, 250, 246, .55) 72%, rgba(255, 250, 246, .25)),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent));
}

.day-badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  padding: .3rem 1.6rem;
  border-radius: 30px;
  box-shadow: 0 8px 16px -8px var(--accent-dark);
}
.day-icon { position: relative; display: block; width: 110px; height: 110px; margin: 1rem auto .2rem; color: var(--accent); animation: float 5s ease-in-out infinite; }
.day-icon.spin { animation: spin 40s linear infinite; }
.watermark { position: absolute; width: 330px; height: 330px; top: 50%; left: 50%; margin: -165px 0 0 -165px; color: var(--accent); opacity: .07; animation: spin 90s linear infinite; pointer-events: none; }

.card h3 { position: relative; font-family: var(--ruqaa); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 3.5rem); color: var(--accent-dark); margin: 0; line-height: 1.4; }
.day-date { position: relative; font-weight: 700; font-size: 1.35rem; margin: .3rem 0 1rem; }
.meta { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.4rem; font-family: var(--ui); font-size: 1.15rem; margin-bottom: 0; }
.meta span { display: inline-flex; align-items: center; gap: .4rem; }
.meta svg { width: 20px; height: 20px; color: var(--accent); }


.ribbon {
  position: absolute;
  top: 22px;
  left: -42px;
  z-index: 2;
  width: 170px;
  text-align: center;
  transform: rotate(-45deg);
  font-family: var(--ui);
  font-size: .85rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(90deg, var(--rose-dark), #c8324f, var(--rose-dark));
  padding: .15rem 0;
  box-shadow: 0 4px 10px rgba(110, 16, 41, .35);
}
.day[data-theme="farah"] .card { background: linear-gradient(180deg, #fff, #fdeef1); }

/* ================= Footer ================= */
.footer {
  position: relative;
  margin-top: 7rem;
  padding: 8rem 1.5rem 3.5rem;
  text-align: center;
  color: var(--gold-light);
  background:
    var(--pattern),
    radial-gradient(ellipse at 50% 0%, #8d1834 0%, var(--burgundy) 60%, #3f0716 100%);
  border-top: 3px double var(--gold);
}
.footer-roses { position: absolute; top: -86px; left: 50%; width: min(340px, 78vw); transform: translateX(-50%); }
.footer .dua { font-size: 1.45rem; margin: 0 0 .4rem; }
.footer-names { font-family: var(--ruqaa); font-weight: 700; font-size: clamp(3rem, 9vw, 4.8rem); line-height: 1.6; margin: 0; }
.footer .thanks { font-size: 1.3rem; margin: .4rem 0 .2rem; }
.footer .sub { font-family: var(--ui); font-size: 1rem; opacity: .8; margin: 0; }

/* ================= Hearts, bokeh, butterflies, trail ================= */
.hearts, .bokeh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hearts { z-index: 0; }
.bokeh { z-index: 0; }

.heart, .trail i {
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e48b9c' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
.heart.g, .trail i.g {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d9b46a' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
.heart.r {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8324f' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
.heart { position: absolute; bottom: -30px; width: var(--s); height: var(--s); opacity: 0; animation: heartRise var(--t) ease-in var(--dl) infinite; }
@keyframes heartRise {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-12deg) scale(.5); }
  12%  { opacity: .85; }
  50%  { transform: translate(var(--x), -35vh) rotate(12deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--x) * -1), -75vh) rotate(-8deg) scale(.8); }
}

.bokeh span {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  opacity: .3;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(243, 205, 212, .55) 45%, transparent 70%);
  animation: bokeh var(--t) ease-in-out var(--dl) infinite alternate;
}
.bokeh span.g { background: radial-gradient(circle, rgba(255, 246, 216, .95), rgba(217, 180, 106, .45) 45%, transparent 70%); }
@keyframes bokeh { to { transform: translate(var(--x), var(--y)) scale(1.3); opacity: .95; } }

.bf { position: absolute; width: 0; height: 0; z-index: 4; pointer-events: none; }
.bf-fly { position: absolute; offset-path: var(--path); offset-rotate: auto 90deg; animation: fly var(--t) linear var(--dl) infinite; }
.bf-fly svg { display: block; width: 36px; height: 31px; overflow: visible; }
.wing { transform-box: fill-box; animation: flap .22s ease-in-out infinite alternate; }
.wl { transform-origin: 100% 50%; }
.wr { transform-origin: 0% 50%; }
@keyframes flap { to { transform: scaleX(.25); } }
@keyframes fly { to { offset-distance: 100%; } }

.trail { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.trail i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); animation: trail 1.1s ease-out forwards; }
.trail i.sp { background: radial-gradient(circle, #fff6d8, #d9b46a 55%, transparent 70%); border-radius: 50%; }
@keyframes trail { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--x), -46px) scale(.3); } }

/* ================= Romantic touches ================= */
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.18); } 20% { transform: scale(1.05); } }
@keyframes halo { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes write { from { clip-path: inset(-20% -10% -20% 100%); } to { clip-path: inset(-20% -10% -20% -10%); } }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -2%); } }
@keyframes sheen { 0%, 70% { transform: translateX(0) skewX(-12deg); } 100% { transform: translateX(420%) skewX(-12deg); } }
@keyframes ripple { from { opacity: .7; transform: translate(-50%, -50%) scale(.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes burst { from { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1) rotate(var(--r)); } }
@keyframes tick { from { opacity: 0; transform: translateY(-45%) scale(.8); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* soft rose-gold glow breathing behind the arch */
.arch::before {
  content: "";
  position: absolute;
  inset: -8% -14%;
  z-index: -1;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(closest-side, rgba(243, 182, 196, .7), rgba(246, 231, 191, .3) 50%, transparent 100%);
  animation: halo 6s ease-in-out infinite;
  pointer-events: none;
}

/* names are written in by hand, right to left, then the rings beat like a heart */
.hero.in .names .gold-text { animation: write 1.3s cubic-bezier(.6, 0, .3, 1) .8s both, shimmer 7s linear infinite; }
.hero.in .names .gold-text:last-child { animation-delay: 1.5s, 0s; }
.names .rings { animation: float 4s ease-in-out infinite, heartbeat 2.4s ease-in-out 2.8s infinite; }

/* day cards: the photo slowly drifts, a light sheen sweeps across now and then */
.card-bg { animation: kenburns 20s ease-in-out infinite alternate; }
.card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
  animation: sheen 7s ease-in-out infinite;
}
.day:nth-child(2) .card::before { animation-delay: 1.7s; }
.day:nth-child(3) .card::before { animation-delay: 3.4s; }
.day:nth-child(4) .card::before { animation-delay: 5.1s; }
.day.in .card:hover { box-shadow: 0 36px 55px -30px rgba(110, 16, 41, .55), 0 0 0 4px rgba(243, 205, 212, .55), 0 0 40px rgba(228, 139, 156, .45); }

/* timeline: each node sends out soft rings, and a glowing heart rides the line */
.day .node { position: relative; }
.day.in .node::before, .day.in .node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  aspect-ratio: 1;
  border: 2px solid rgba(228, 139, 156, .6);
  border-radius: 50%;
  animation: ripple 3s ease-out infinite;
  pointer-events: none;
}
.day.in .node::after { animation-delay: 1.5s; }
.tl-heart {
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8324f' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 8px rgba(228, 139, 156, .9));
  animation: heartbeat 1.6s ease-in-out infinite;
}

/* countdown digits slide in as they change */
.num.tick { animation: tick .5s ease-out; }

/* hearts that burst out wherever you tap */
.trail i.burst { animation: burst 1.2s cubic-bezier(.2, .7, .3, 1) forwards; }

/* footer names glow softly with every heartbeat */
.footer-names { animation: shimmer 7s linear infinite, heartbeat 3s ease-in-out infinite; }

/* ================= Doves ================= */
.doves { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.dove { position: absolute; top: 24%; left: 0; width: clamp(54px, 6vw, 80px); animation: doveFly 19s linear infinite; }
.dove.d2 { top: 29%; width: clamp(44px, 5vw, 66px); animation-delay: .5s; }
.dove svg { display: block; width: 100%; height: auto; overflow: visible; animation: doveBob 2.4s ease-in-out infinite; }
.dove.d2 svg { animation-delay: -1.2s; }
.dw { transform-box: fill-box; transform-origin: 20% 100%; animation: doveFlap .5s ease-in-out infinite alternate; }
.dw.back { animation-delay: -.08s; }
@keyframes doveFly {
  0%   { transform: translate(110vw, 0); opacity: 0; }
  4%   { opacity: 1; }
  55%  { transform: translate(-25vw, -6vh); opacity: 1; }
  56%, 100% { transform: translate(-25vw, -6vh); opacity: 0; }
}
@keyframes doveBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes doveFlap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }

/* ================= Love letter ================= */
.letter-sec { padding-bottom: 3rem; }
.envelope {
  --w: min(560px, 90vw);
  position: relative;
  width: var(--w);
  aspect-ratio: 1.5;
  margin: calc(var(--w) * .38) auto 0;
  perspective: 1400px;
}
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; border-radius: 10px; }
.env-back { inset: 0; z-index: 1; background: linear-gradient(180deg, #e7a9b6, #f3c9d2); box-shadow: 0 34px 60px -30px rgba(110, 16, 41, .55); }
.env-front {
  inset: 0;
  z-index: 3;
  background: linear-gradient(160deg, #fbe3e8, #f4c6cf 70%, #eeb3bf);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center 80% / 16% no-repeat;
  opacity: .4;
}
.env-flap {
  top: 0;
  height: 60%;
  z-index: 4;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, #f6d3da, #eaa9b6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-radius: 10px 10px 0 0;
}
.letter {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 5%;
  height: 92%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1rem 1.4rem;
  text-align: center;
  background: var(--pattern), linear-gradient(180deg, #fffdf9, #fff6ee);
  border: 1px solid var(--gold-light);
  outline: 1px solid rgba(184, 146, 90, .35);
  outline-offset: -8px;
  border-radius: 6px;
  box-shadow: 0 18px 40px -20px rgba(110, 16, 41, .45);
}
.letter-text { margin: 0; font-size: clamp(.95rem, 3.2vw, 1.3rem); line-height: 1.9; color: var(--rose-dark); }
.letter-sign { margin: .2rem 0 0; font-family: var(--ruqaa); font-weight: 700; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.5; }
.sign-heart { display: inline-block; width: .6em; height: .6em; vertical-align: middle; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c8324f' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); animation: heartbeat 1.6s ease-in-out infinite; }

.seal {
  --size: clamp(62px, 15%, 84px);
  position: absolute;
  top: 60%;
  left: 50%;
  z-index: 5;
  width: var(--size);
  aspect-ratio: 1;
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  font-family: var(--ruqaa);
  font-size: clamp(1rem, 3vw, 1.35rem);
  color: #f6dfe4;
  background: radial-gradient(circle at 35% 30%, #c8324f, #8d1834 60%, #5c0b22);
  box-shadow: 0 0 0 4px rgba(141, 24, 52, .35), 0 8px 16px rgba(92, 11, 34, .45), inset 0 -4px 8px rgba(0, 0, 0, .25);
}
.seal i { width: .7em; height: .7em; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3dfa9' d='M12 21s-7.5-4.6-9.6-9.2C.8 7.6 3.4 3.5 7.3 3.5c2 0 3.6 1 4.7 2.6 1.1-1.6 2.7-2.6 4.7-2.6 3.9 0 6.5 4.1 4.9 8.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }

/* opening sequence: seal breaks, flap lifts, letter slides out and comes forward */
.envelope.in .seal { animation: sealOff .7s ease-in .5s forwards; }
.envelope.in .env-flap { animation: flapOpen 1s ease-in-out 1s forwards; }
.envelope.in .letter { animation: letterOut 1.8s cubic-bezier(.45, 0, .2, 1) 1.9s forwards; }
@keyframes sealOff { 30% { transform: scale(1.15); } to { transform: scale(.4) rotate(-30deg) translateY(30px); opacity: 0; } }
@keyframes flapOpen { 0% { transform: rotateX(0); z-index: 4; } 99% { z-index: 4; } 100% { transform: rotateX(180deg); z-index: 0; } }
@keyframes letterOut {
  0%   { transform: translateY(0); z-index: 2; }
  55%  { transform: translateY(-78%); z-index: 2; }
  56%  { transform: translateY(-78%); z-index: 6; }
  100% { transform: translateY(-34%) scale(1.06); z-index: 6; }
}

/* ================= Music button ================= */
.music-btn {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 120;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--rose);
  background: radial-gradient(circle at 35% 30%, #fff, #fbe9ec);
  box-shadow: 0 10px 24px -10px rgba(110, 16, 41, .55);
  cursor: pointer;
}
.music-btn svg { width: 24px; height: 24px; }
.music-btn::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(184, 146, 90, .6);
}
.music-btn.playing::before { animation: spin 8s linear infinite; }
.music-btn.playing svg { animation: heartbeat 1.8s ease-in-out infinite; }
/* a slash through the note while paused */
.music-btn:not(.playing)::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 1.8px;
  background: var(--rose);
  transform: rotate(-45deg);
}
.eq { position: absolute; bottom: -20px; display: flex; gap: 2px; align-items: flex-end; height: 12px; opacity: 0; transition: opacity .3s; }
.eq i { width: 3px; height: 100%; background: var(--gold); border-radius: 2px; transform-origin: bottom; animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.6s; }
.music-btn.playing .eq { opacity: 1; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* sections off screen pause their animations (toggled by script.js) */
.paused, .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

/* ================= Responsive ================= */
@media (max-width: 860px) {
  .tl-line { left: auto; right: 44px; margin: 0; }
  .day { grid-template-columns: 90px 1fr; }
  .day .node { grid-column: 1; width: 90px; align-self: start; margin-top: 1rem; }
  .day .card, .day:nth-child(even) .card { grid-column: 2; }
}

@media (max-width: 560px) {
  body { font-size: 1.1rem; }
  .arch-content { padding-inline: 1.6rem; }
  .names { flex-direction: column; gap: 0; line-height: 1.35; }
  .rings { margin: .1em 0; }
  .verse { font-size: 1.05rem; }
  .cd-card { padding-inline: .8rem; }
  .countdown { gap: .55rem; flex-wrap: nowrap; }
  .unit { width: 66px; }
  .unit .num { font-size: 1.6rem; }
  .unit .label { font-size: .75rem; }
  .card { min-height: 400px; padding: 2.8rem 1.2rem 2.4rem; }
  .day { grid-template-columns: 56px 1fr; }
  .day .node { width: 64px; margin-inline-start: -4px; }
  .tl-line { right: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rose .lyr, .leaf, .bud, .pearl, .arch-content > *, .fade, .card, .arch-bg, .arch-dots { opacity: 1 !important; transform: none !important; filter: none !important; }
  .vine, .arch-line { stroke-dashoffset: 0; }
  .petals, .sparkles, .hearts, .bokeh, .bf, .trail, .doves, .seal, .env-flap { display: none; }
  .letter { transform: translateY(-34%); z-index: 6; }
}