/* ================= AMBER THEME =================
   Warm, photo-led look: landing photo, slow-zoom hero, frosted glass cards, falling petals.
   Switched on with `theme: 'amber'` in content.js. Every rule is scoped to it, so the classic
   theme is untouched. Photos come from `themePhotos` in content.js (set as CSS variables). */

html[data-theme=amber] {
  --olive: #3d2e27;          /* headings → espresso */
  --sage: #a0724a;           /* eyebrows → toasted honey */
  --gold: #b07a45;
  --gold-line: rgba(176, 122, 69, .35);
  --text: #6a574b;
  --muted: #9a8576;
  --line: #eadccd;
  --panel: #3d2e27;
  --footer: #2b211c;
  --linen-bg: #fbf5ee;
  --plain-bg: #f6ece1;
  --honey-soft: #e3c39c;
  --glass: rgba(255, 251, 246, .62);
  --glass-edge: rgba(255, 255, 255, .7);
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --hero-photo: none; --hero-focus: center 40%; --bg-countdown: none; --bg-day: none; --bg-rsvp: none; --bg-footer: none; /* set from themePhotos */
}

html[data-theme=amber] body { background: #efe3d6; }
html[data-theme=amber] main { box-shadow: 0 0 60px rgba(61, 46, 39, .12); }

/* soft blush light instead of linen threads */
html[data-theme=amber] .linen {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(233, 196, 170, .35), transparent 60%),
    radial-gradient(100% 50% at 100% 100%, rgba(227, 195, 156, .3), transparent 60%),
    var(--linen-bg);
}
html[data-theme=amber] .plain {
  background: radial-gradient(90% 50% at 50% 0%, rgba(255, 255, 255, .7), transparent 70%), var(--plain-bg);
}

/* type: mixed-case italic display, airy eyebrows */
html[data-theme=amber] .title { text-transform: none; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
html[data-theme=amber] .eyebrow { letter-spacing: .38em; font-size: 12px; font-weight: 400; }
html[data-theme=amber] .diamond,
html[data-theme=amber] .diamond-rule i { border-radius: 50%; transform: none; width: 7px; height: 7px; }

/* frosted glass in place of the double gold frame */
html[data-theme=amber] .frame {
  border: 1px solid var(--glass-edge);
  outline: 0;
  border-radius: 28px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 24px 60px rgba(61, 46, 39, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* reveal with a soft focus pull */
html[data-theme=amber] .reveal { filter: blur(6px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .8, .2, 1), filter 1.1s ease; }
html[data-theme=amber] .reveal.in { filter: none; }

/* ================= LANDING ================= */
#landing {
  position: fixed; inset: 0 max(0px, calc((100vw - 828px) / 2)); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; background: #2b211c; color: #fff; text-align: center;
}
.ld-photo {
  position: absolute; inset: -4%;
  background: var(--hero-photo) var(--hero-focus) / cover;
  animation: amberDrift 22s ease-in-out infinite alternate;
}
.ld-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(43, 33, 28, .15) 0%, rgba(43, 33, 28, .05) 35%, rgba(43, 33, 28, .78) 100%),
    radial-gradient(80% 50% at 50% 100%, rgba(176, 122, 69, .35), transparent 70%);
}
.ld-content { position: relative; padding: 0 24px calc(max(48px, env(safe-area-inset-bottom) + 36px)); width: 100%; }
.ld-eyebrow {
  margin: 0; font: 400 11.5px var(--sans); letter-spacing: .42em; text-transform: uppercase; color: rgba(255, 255, 255, .8);
  animation: amberRise 1.2s cubic-bezier(.2, .8, .2, 1) .3s both;
}
.ld-names {
  margin: 14px 0 0; display: flex; flex-direction: column; align-items: center;
  font: italic 400 clamp(48px, 15vw, 76px)/1 var(--display); letter-spacing: -.01em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
  animation: amberRise 1.4s cubic-bezier(.2, .8, .2, 1) .5s both;
}
.ld-names .amp { font-size: .5em; line-height: 1.5; color: var(--honey-soft); }
.ld-date {
  margin: 16px 0 0; font: 300 14px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .85);
  animation: amberRise 1.2s cubic-bezier(.2, .8, .2, 1) .8s both;
}
.ld-open {
  position: relative; margin-top: 34px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .14); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 400 12.5px var(--sans); letter-spacing: .3em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  animation: amberRise 1.2s cubic-bezier(.2, .8, .2, 1) 1.1s both;
  transition: background .3s, transform .2s;
}
.ld-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.ld-open::after { /* soft halo inviting the tap */
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: amberHalo 2.6s ease-out 2.2s infinite;
}
.ld-open:hover { background: rgba(255, 255, 255, .24); }
.ld-open:active { transform: scale(.98); }
.ld-open:focus-visible { outline: 2px solid var(--honey-soft); outline-offset: 4px; }
#landing.opening .ld-open::after { animation: none; opacity: 0; }

/* ================= PETALS ================= */
#petals { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
#petals i {
  position: absolute; top: -40px; left: var(--x);
  width: var(--size); height: calc(var(--size) * .78);
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #f6d9cf, #e9b8a6 60%, #dca08c);
  opacity: .75; box-shadow: inset -1px -1px 2px rgba(160, 90, 70, .15);
  animation: amberFall var(--fall) linear var(--delay) infinite;
}

/* ================= HERO ================= */
html[data-theme=amber] .hero {
  justify-content: flex-end; padding-bottom: 0;
  background: #2b211c; color: #fff; isolation: isolate;
}
html[data-theme=amber] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--hero-photo) var(--hero-focus) / cover;
  transform: scale(1.14);
}
html[data-theme=amber] body.play .hero::before { animation: amberZoom 26s ease-out forwards; }
html[data-theme=amber] .hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43, 33, 28, .1) 30%, rgba(43, 33, 28, .72) 100%);
}
html[data-theme=amber] .hero-canopy,
html[data-theme=amber] .hero .table { display: none; }
html[data-theme=amber] .hero-text { padding: 0 24px calc(14svh + env(safe-area-inset-bottom)); }
html[data-theme=amber] .hero .eyebrow { color: rgba(255, 255, 255, .82); }
html[data-theme=amber] .hero-names { color: #fff; text-transform: none; font-style: italic; font-size: clamp(48px, 13vw, 72px); text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
html[data-theme=amber] .hero-names .amp { color: var(--honey-soft); font-size: .55em; }
html[data-theme=amber] .hero .diamond-rule span { background: rgba(255, 255, 255, .55); }
html[data-theme=amber] .hero .diamond-rule i { background: var(--honey-soft); }
html[data-theme=amber] .hero-date { color: #fff; }
html[data-theme=amber] .hero-place { color: rgba(255, 255, 255, .75); }

/* ================= PHOTO-BACKED SECTIONS (glass sits on these) ================= */
html[data-theme=amber] #countdown,
html[data-theme=amber] #rsvp {
  background:
    linear-gradient(180deg, rgba(251, 245, 238, .55), rgba(251, 245, 238, .3) 50%, rgba(251, 245, 238, .6)),
    var(--bg-countdown) center / cover, var(--linen-bg);
}
html[data-theme=amber] #rsvp { background-image: linear-gradient(180deg, rgba(251, 245, 238, .6), rgba(251, 245, 238, .35) 50%, rgba(251, 245, 238, .65)), var(--bg-rsvp); }
html[data-theme=amber] .blossom { display: none; }

/* countdown numbers */
html[data-theme=amber] .countdown b { font-style: italic; }
html[data-theme=amber] .countdown div + div { border-left-color: rgba(176, 122, 69, .22); }

/* wedding day: dark glass arch over a warm photo */
html[data-theme=amber] #day {
  background: linear-gradient(rgba(43, 33, 28, .25), rgba(43, 33, 28, .45)), var(--bg-day) center / cover, #3d2e27;
}
html[data-theme=amber] .arch {
  background: rgba(43, 33, 28, .5);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px 999px 32px 32px / 260px 260px 32px 32px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
}
html[data-theme=amber] .arch-date { text-transform: none; font-style: italic; }
html[data-theme=amber] .s-time { color: var(--honey-soft); }
html[data-theme=amber] .s-title { text-transform: none; font-style: italic; }
html[data-theme=amber] .urn { display: none; }

/* venue */
html[data-theme=amber] .map-arch { border-radius: 28px; border-color: var(--glass-edge); box-shadow: 0 24px 50px rgba(61, 46, 39, .14); }
html[data-theme=amber] .event-title { font-style: italic; }
html[data-theme=amber] .btn-outline { border-radius: 999px; border-color: var(--gold); color: var(--olive); letter-spacing: .24em; font-size: 13px; }
html[data-theme=amber] .btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* love story */
html[data-theme=amber] .story-item::after { border-radius: 50%; transform: none; box-shadow: 0 0 0 5px rgba(176, 122, 69, .15); }
html[data-theme=amber] .st-title { font-style: italic; }

/* dress code */
html[data-theme=amber] .dress-item + .dress-item { border-left-color: rgba(176, 122, 69, .25); }

/* q&a */
html[data-theme=amber] .faq summary::after { border-radius: 50%; }

/* gallery */
html[data-theme=amber] .gallery { gap: 10px; }
html[data-theme=amber] .g-item { border-radius: 18px; box-shadow: 0 14px 30px rgba(61, 46, 39, .12); }
html[data-theme=amber] .lightbox { background: rgba(30, 22, 18, .95); }
html[data-theme=amber] .lightbox figcaption { font-family: var(--display); }

/* forms */
html[data-theme=amber] input,
html[data-theme=amber] textarea,
html[data-theme=amber] select {
  padding: 13px 14px; border-radius: 14px;
  border: 1px solid rgba(176, 122, 69, .22); background-color: rgba(255, 255, 255, .55);
}
html[data-theme=amber] select { background-position: right 14px center; padding-right: 34px; }
html[data-theme=amber] input:focus,
html[data-theme=amber] textarea:focus,
html[data-theme=amber] select:focus { border-color: var(--gold); background-color: rgba(255, 255, 255, .8); }
html[data-theme=amber] .radio i { border-color: var(--gold); }
html[data-theme=amber] .radio i::after { background: var(--gold); }
html[data-theme=amber] .btn-solid {
  border-radius: 999px; letter-spacing: .26em;
  background: linear-gradient(135deg, #c08a52, #9c6a3b); box-shadow: 0 12px 26px rgba(156, 106, 59, .3);
}
html[data-theme=amber] .btn-solid:hover { background: linear-gradient(135deg, #b47e47, #8d5f34); }

/* guestbook */
html[data-theme=amber] .wish {
  border-radius: 22px; border: 1px solid var(--glass-edge); border-left-width: 1px;
  background: var(--glass); box-shadow: 0 14px 34px rgba(61, 46, 39, .08);
}
html[data-theme=amber] .wish blockquote { font-style: italic; font-size: 19px; }

/* footer over the couple's photo */
html[data-theme=amber] .footer {
  background: linear-gradient(180deg, rgba(43, 33, 28, .78), rgba(43, 33, 28, .92)), var(--bg-footer) center / cover, var(--footer);
}
html[data-theme=amber] .chandelier.small { display: none; }
html[data-theme=amber] .footer-names { text-transform: none; font-style: italic; }
html[data-theme=amber] .footer .diamond-rule span { background: var(--honey-soft); }
html[data-theme=amber] .footer .diamond-rule i { background: var(--honey-soft); }

/* music button: honey, with a pulse while playing */
html[data-theme=amber] .music-toggle { background: rgba(156, 106, 59, .92); }
html[data-theme=amber] .music-toggle.playing::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(192, 138, 82, .8);
  animation: amberHalo 2s ease-out infinite;
}

/* ================= MOTION ================= */
@keyframes amberDrift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -2%); } }
@keyframes amberZoom { to { transform: scale(1); } }
@keyframes amberRise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes amberHalo { from { transform: scale(1); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
@keyframes amberFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: .75; }
  50% { transform: translate(var(--sway), 52vh) rotate(calc(var(--spin) * 200deg)); }
  90% { opacity: .6; }
  100% { transform: translate(calc(var(--sway) * -.4), 108vh) rotate(calc(var(--spin) * 420deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-photo, html[data-theme=amber] .hero::before { animation: none; transform: none; }
  #petals { display: none; }
  html[data-theme=amber] .reveal { filter: none; }
}