:root {
  color-scheme: dark;
  --ink: #07080a;
  --paper: #f5efe5;
  --cream: #f0e1c8;
  --gold: #d9b878;
  --red: #9c2f2b;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
h1, h2, p { margin: 0; }
em { font-weight: 400; }
.film { position: relative; isolation: isolate; }
.story-scene { position: relative; height: 420svh; background: var(--ink); }
.frame {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}
.eyebrow {
  font-size: .65rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .32em;
}

/* 01 — Birthday */
.scene-birthday { height: 380svh; }
.frame-dark { background: #030405; display: grid; place-items: center; text-align: center; }
.birthday-halo {
  position: absolute; width: min(90vw, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,113,72,.13), transparent 65%); filter: blur(30px);
}
.age { position: absolute; font: 400 clamp(8rem, 44vw, 15rem)/.7 var(--serif); letter-spacing: -.08em; color: #f6f1e9; }
.age span { color: var(--gold); }
.birthday-wish { position: absolute; width: 90%; font: 400 clamp(2.2rem, 10.5vw, 4.8rem)/.94 var(--serif); letter-spacing: -.035em; }
.birthday-wish em { color: var(--cream); }
.birthday-secret { position: absolute; font-size: clamp(.95rem, 4vw, 1.15rem); letter-spacing: .04em; }
.swipe-hint { position: absolute; bottom: max(34px, calc(env(safe-area-inset-bottom) + 18px)); display: grid; gap: 11px; place-items: center; color: rgba(255,255,255,.48); }
.swipe-hint span { font-size: .58rem; text-transform: uppercase; letter-spacing: .27em; }
.swipe-hint i { display: block; width: 1px; height: 34px; background: linear-gradient(transparent, rgba(255,255,255,.7)); transform-origin: bottom; }

/* 02 — Early morning */
.scene-morning { height: 360svh; }
.frame-morning { background: linear-gradient(175deg, #17212c 0%, #101820 50%, #070b10 100%); }
.dawn-orb { position: absolute; width: 120vw; height: 70vw; left: -10vw; bottom: -22vw; border-radius: 50%; background: radial-gradient(ellipse, rgba(133,164,182,.28), rgba(71,93,110,.08) 55%, transparent 70%); filter: blur(10px); }
.mist { position: absolute; width: 150%; height: 25%; left: -25%; border-radius: 50%; background: rgba(181,205,216,.07); filter: blur(32px); }
.mist-one { bottom: 8%; }.mist-two { bottom: 26%; opacity: .55; }
.morning-copy { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.morning-copy h2 { position: absolute; white-space: nowrap; font: 400 clamp(2.35rem, 10.6vw, 4.9rem)/.95 var(--serif); }
.very-early { position: absolute; font: italic 400 clamp(2rem, 9vw, 4rem)/1 var(--serif); color: #c6d5dd; }
.pack-copy { position: absolute; font: 400 clamp(2rem, 9.2vw, 4.2rem)/1.08 var(--serif); }
.pack-copy p + p { margin-top: .25em; color: #dce6ea; }
/* 03 — Destination */
.scene-destination { height: 480svh; }
.frame-destination { background: radial-gradient(circle at 80% 17%, #253445 0, #101923 36%, #05080c 75%); }
.route-glow { position: absolute; width: 80vw; height: 80vw; right: -30vw; top: 2vh; border-radius: 50%; background: rgba(133,170,195,.16); filter: blur(40px); }
.route-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-map-ghost, .route-map-line { fill: none; stroke-linecap: round; }
.route-map-ghost { stroke: rgba(172,203,220,.08); stroke-width: 8; filter: blur(8px); }
.route-map-line { stroke: rgba(190,219,232,.7); stroke-width: 1.2; }
.departure { position: absolute; left: 8%; bottom: 9%; font-size: .57rem; letter-spacing: .25em; text-transform: uppercase; color: #a7bac4; }
.destination-question { position: absolute; right: 11%; top: 9%; font: 400 3rem/1 var(--serif); }
.destination-reveal { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 17px; text-align: center; }
.destination-reveal h2 { font: 500 clamp(3rem, 14vw, 7rem)/.78 var(--serif); text-transform: uppercase; letter-spacing: -.045em; text-shadow: 0 0 50px rgba(231,224,207,.16); }
.destination-after { position: absolute; left: 8%; right: 8%; bottom: 13%; text-align: center; font: 400 clamp(1.65rem, 7vw, 2.5rem)/1.04 var(--serif); }

/* 04 — Spa */
.scene-spa { height: 650svh; }
.frame-spa { background: #15242a; }
.spa-image { position: absolute; inset: -5%; overflow: hidden; }
.spa-image img { transform: scale(1.05); will-change: transform; }
.spa-outdoor img { object-position: 56% center; }
.spa-interior, .spa-detail { opacity: 0; }
.spa-interior img { object-position: 60% center; }
.spa-detail img { object-position: 50% 46%; }
.spa-vignette { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(4,9,11,.3), transparent 28%, transparent 72%, rgba(5,9,10,.26)); }
.steam { position: absolute; width: 60vw; height: 40vh; border-radius: 50%; background: rgba(237,244,239,.16); filter: blur(35px); mix-blend-mode: screen; }
.steam-a { left: -20%; bottom: 4%; }.steam-b { right: -15%; top: 18%; }
.spa-stop { position: absolute; top: 16%; left: 50%; transform: translateX(-50%); white-space: nowrap; font: italic 400 clamp(1.7rem, 7vw, 2.5rem)/1 var(--serif); }
.spa-title { position: absolute; z-index: 3; top: 50%; left: 0; width: 100%; transform: translateY(-50%); text-align: center; text-transform: uppercase; font: 500 clamp(3rem, 14vw, 6.3rem)/.72 var(--serif); letter-spacing: -.055em; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.spa-title span { display: block; }
.spa-title span:last-child { color: #f0c987; }
.spa-ritual { position: absolute; z-index: 3; left: 8%; bottom: 12%; color: #fffaf0; font: 400 clamp(2rem, 9vw, 3.7rem)/.98 var(--serif); text-shadow: 0 2px 3px rgba(0,0,0,.65), 0 7px 28px rgba(0,0,0,.8); isolation: isolate; }
.spa-ritual::before { content: ""; position: absolute; z-index: -1; inset: -65% -48% -55% -28%; background: radial-gradient(ellipse at 25% 55%, rgba(4,9,10,.58), rgba(4,9,10,.22) 46%, transparent 72%); filter: blur(8px); pointer-events: none; }
.spa-rest { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; text-align: center; font: 400 clamp(2.3rem, 10vw, 4.35rem)/.94 var(--serif); text-shadow: 0 2px 3px rgba(0,0,0,.7), 0 8px 32px rgba(0,0,0,.85); isolation: isolate; }
.spa-rest::before { content: ""; position: absolute; z-index: -1; width: min(118vw, 620px); height: 38vh; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(5,7,8,.53), rgba(5,7,8,.16) 50%, transparent 73%); filter: blur(9px); pointer-events: none; }
.spa-rest span { display: block; white-space: nowrap; }
.spa-rest em { color: #f3ce92; }

/* 05 — Hotel */
.scene-hotel { height: 500svh; }
.frame-hotel { background: radial-gradient(ellipse at 18% 12%, #3a281d 0%, #1b1411 36%, transparent 62%), linear-gradient(145deg, #1d1511, #0d0b0b 58%, #060708); }
.arrival-glow { position: absolute; z-index: 0; width: 115%; height: 105%; left: -46%; top: -18%; border-radius: 50%; background: radial-gradient(ellipse, rgba(222,159,86,.34), rgba(151,85,42,.1) 48%, transparent 70%); filter: blur(24px); }
.architectural-shadow { position: absolute; z-index: 0; inset: 0 -18% 0 44%; background: linear-gradient(112deg, rgba(0,0,0,.04), rgba(0,0,0,.64)); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); }
.light-seam { position: absolute; z-index: 1; top: 8%; right: 15%; width: 1px; height: 84%; transform-origin: top; background: linear-gradient(transparent, rgba(235,188,117,.65) 18%, rgba(217,158,82,.38) 72%, transparent); box-shadow: 0 0 18px rgba(215,147,69,.3), 0 0 55px rgba(186,105,44,.14); }
.evening-shade { position: absolute; z-index: 1; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(4,5,7,.04), rgba(4,5,7,.42) 54%, rgba(3,4,6,.86)); }
.hotel-copy { position: absolute; top: 18%; left: 8%; right: 8%; z-index: 3; }
.hotel-copy h2 { font: 400 clamp(2.4rem, 11vw, 5rem)/.95 var(--serif); }
.to-nuremberg { margin-top: .25em; font: italic 400 clamp(2.1rem, 9vw, 4rem)/1 var(--serif); color: #e4bc76; }
.hotel-steps { position: absolute; z-index: 3; left: 9%; bottom: 17%; font: 400 clamp(2rem, 9vw, 3.9rem)/1.22 var(--serif); text-shadow: 0 5px 22px rgba(0,0,0,.58); }
.not-finished { position: absolute; z-index: 4; inset: 0 7%; display: grid; place-content: center; text-align: center; font: 400 clamp(2.15rem, 9.5vw, 4rem)/1.02 var(--serif); text-shadow: 0 3px 24px rgba(0,0,0,.72); }
.first-lights { position: absolute; inset: 0; z-index: 3; }
.first-lights i { position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 16px 7px rgba(255,171,45,.35); }
.first-lights i:nth-child(1){left:10%;top:20%}.first-lights i:nth-child(2){left:76%;top:34%}.first-lights i:nth-child(3){left:32%;top:68%}.first-lights i:nth-child(4){left:88%;top:76%}.first-lights i:nth-child(5){left:56%;top:14%}

/* 06 — Christmas market at night */
.scene-market-night { height: 700svh; }
.frame-market-night { background: #1d0e08; }
.night-image { position: absolute; inset: -4%; }
.night-image img { transform: scale(1.04); will-change: transform; }
.night-wide img { object-position: 56% center; }
.night-close { opacity: 0; }
.night-close img { object-position: center 48%; }
.night-color { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(22,10,4,.34), transparent 33%, rgba(14,6,3,.1) 58%, rgba(9,4,3,.58)); }
.snow { position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.snow i { position: absolute; top: -5%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,245,224,.82); box-shadow: 0 0 6px rgba(255,244,220,.45); }
.night-time { position: absolute; z-index: 3; top: 12%; left: 0; width: 100%; text-align: center; font: italic 400 clamp(1.7rem, 7vw, 2.6rem)/1 var(--serif); }
.night-title { position: absolute; z-index: 3; left: 50%; top: 50%; width: calc(100% - 40px); max-width: 46rem; transform: translate(-50%,-50%); text-align: center; text-transform: uppercase; font: 500 clamp(2.6rem, 11vw, 5.5rem)/.75 var(--serif); letter-spacing: -.035em; text-shadow: 0 3px 35px rgba(0,0,0,.72); }
.night-title span { display: block; white-space: nowrap; }
.night-title span + span { margin-top: .06em; }
.night-moments { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; text-align: center; font: 400 clamp(2.7rem, 12vw, 5rem)/.9 var(--serif); text-shadow: 0 2px 3px rgba(0,0,0,.78), 0 6px 28px rgba(0,0,0,.9); isolation: isolate; }
.night-moments::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(116vw, 590px); height: 38vh; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(7,4,3,.42), rgba(7,4,3,.13) 52%, transparent 73%); filter: blur(8px); pointer-events: none; }
.night-moments p { position: absolute; max-width: 90%; }

/* 07 — Good night */
.scene-goodnight { height: 380svh; }
.frame-goodnight { background: #030405; display: grid; place-items: center; text-align: center; }
.night-echo { position: absolute; inset: -8%; background: linear-gradient(rgba(8,4,2,.65), rgba(3,4,5,.96)), url("assets/images/christmas-night-01.jpeg") center/cover; filter: blur(22px); transform: scale(1.15); }
.enough, .back-hotel, .frame-goodnight h2 { position: absolute; }
.enough, .back-hotel { font: italic 400 clamp(2rem, 9vw, 3.8rem)/1 var(--serif); }
.frame-goodnight h2 { width: 86%; font: 400 clamp(2.8rem, 12.5vw, 5.2rem)/.9 var(--serif); }
.frame-goodnight h2 span { display: block; }
.frame-goodnight h2 span + span { margin-top: .14em; color: var(--cream); }
.closing-line { position: absolute; bottom: 16%; width: 1px; height: 70px; background: linear-gradient(rgba(226,198,151,.5), transparent); }

/* 08 — Sunday */
.scene-sunday { height: 430svh; }
.frame-sunday { background: #eee5d7; color: #342b25; display: grid; place-items: center; text-align: center; }
.sunrise { position: absolute; width: 125vw; height: 90vw; top: -30vw; left: -12vw; border-radius: 50%; background: radial-gradient(circle, rgba(255,253,236,.96), rgba(228,183,121,.23) 48%, transparent 70%); filter: blur(8px); }
.coffee { position: absolute; top: 25%; left: 50%; width: 130px; height: 140px; transform: translateX(-50%); }
.cup { position: absolute; bottom: 18px; left: 24px; width: 82px; height: 52px; border: 1.5px solid rgba(75,56,43,.62); border-radius: 5px 5px 35px 35px; }
.cup i { position: absolute; right: -23px; top: 8px; width: 24px; height: 26px; border: 1.5px solid rgba(75,56,43,.62); border-left: 0; border-radius: 0 18px 18px 0; }
.saucer { position: absolute; bottom: 10px; left: 12px; width: 108px; height: 10px; border-bottom: 1.5px solid rgba(75,56,43,.55); border-radius: 50%; }
.steam-line { position: absolute; bottom: 76px; width: 18px; height: 45px; border-left: 1.5px solid rgba(100,75,57,.42); border-radius: 50%; }
.steam-line-a { left: 48px; transform: rotate(-8deg); }.steam-line-b { left: 74px; bottom: 81px; transform: rotate(9deg); }
.frame-sunday h2, .breakfast, .and-then { position: absolute; }
.frame-sunday h2 { font: 400 clamp(3.2rem, 14vw, 6rem)/.9 var(--serif); }
.breakfast { font: italic 400 clamp(2.2rem, 9.5vw, 4rem)/1 var(--serif); }
.and-then { font: 400 clamp(2.7rem, 12vw, 5rem)/1 var(--serif); }

/* 09 — Day market */
.scene-market-day { height: 610svh; background: #ddd6cc; }
.frame-market-day { background: #d7d2ca; color: #fff; }
.day-image { position: absolute; inset: -4%; }
.day-image img { transform: scale(1.04); will-change: transform; }
.day-snow img { object-position: 52% center; }
.day-street { opacity: 0; }
.day-street img { object-position: 50% center; }
.day-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,40,42,.18), transparent 44%, rgba(25,23,20,.5)); }
.day-copy { position: absolute; z-index: 2; inset: 0; text-shadow: 0 2px 24px rgba(0,0,0,.55); }
.again { position: absolute; top: 14%; width: 100%; text-align: center; font: italic 400 clamp(1.8rem, 7.5vw, 3rem)/1 var(--serif); }
.day-copy h2 { position: absolute; top: 50%; left: 50%; width: 92%; transform: translate(-50%,-50%); text-align: center; text-transform: uppercase; font: 500 clamp(2.55rem, 11.1vw, 5.8rem)/.76 var(--serif); letter-spacing: -.03em; }
.day-copy h2 span { display: block; white-space: nowrap; }
.day-copy h2 em { display: block; margin-top: .28em; color: #f4dba9; font-size: .68em; line-height: 1; text-transform: none; }
.stroll { position: absolute; left: 7%; bottom: 16%; width: 86%; font: 400 clamp(2.05rem, 8.8vw, 3.8rem)/1 var(--serif); }
.discover { position: absolute; z-index: 3; inset: 0 7%; display: grid; place-content: center; text-align: center; font: 400 clamp(2.5rem, 11vw, 4.8rem)/.93 var(--serif); text-shadow: 0 2px 3px rgba(0,0,0,.72), 0 7px 30px rgba(0,0,0,.84); isolation: isolate; }
.discover::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(116%, 520px); height: 38vh; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(18,18,17,.46), rgba(18,18,17,.14) 52%, transparent 74%); filter: blur(8px); pointer-events: none; }

/* 10 — Final */
.scene-final { height: 700svh; }
.frame-final { background: #030405; display: grid; place-items: center; text-align: center; }
.final-halo { position: absolute; width: 120vw; height: 120vw; border-radius: 50%; background: radial-gradient(circle, rgba(151,90,54,.2), rgba(58,35,25,.05) 48%, transparent 70%); filter: blur(18px); }
.so, .question, .final-reveal, .final-details, .final-date, .final-love { position: absolute; }
.so { font: italic 400 clamp(2.7rem, 12vw, 5rem)/1 var(--serif); }
.question { width: 90%; font: 400 clamp(2.55rem, 11vw, 4.6rem)/.96 var(--serif); }
.final-reveal { width: 94%; }
.gift-intro { font: italic 400 clamp(1.9rem, 8vw, 3.2rem)/1 var(--serif); color: #d4b77e; margin-bottom: .35em; }
.final-reveal h2 { font: 500 clamp(3.7rem, 16vw, 7rem)/.77 var(--serif); letter-spacing: -.045em; }
.final-details { bottom: 21%; width: 100%; font-size: .62rem; line-height: 1.9; text-transform: uppercase; letter-spacing: .2em; color: rgba(241,224,197,.72); }
.final-details i { color: #ba854e; font-style: normal; padding: 0 .25em; }
.final-date { bottom: 14%; font: 400 1.3rem/1 var(--serif); letter-spacing: .1em; color: #e2c58d; }
.final-love { bottom: max(4.5%, env(safe-area-inset-bottom)); max-width: 90%; font: italic 400 1.05rem/1 var(--serif); color: rgba(255,255,255,.72); }

/* Applied in <head> before styles paint; script.js removes it if GSAP is unavailable. */
:is(.js-pending, .js) :is(
  .birthday-wish, .birthday-secret,
  .morning-copy h2, .very-early, .pack-copy,
  .departure, .destination-question, .destination-reveal, .destination-after,
  .spa-stop, .spa-title, .spa-ritual, .spa-rest,
  .hotel-copy, .hotel-steps p, .not-finished, .first-lights,
  .night-time, .night-title, .night-moments p,
  .enough, .back-hotel, .frame-goodnight h2,
  .frame-sunday h2, .breakfast, .and-then,
  .again, .day-copy h2, .stroll, .discover,
  .so, .question, .final-reveal, .final-details, .final-date, .final-love
) { opacity: 0; }
.js-pending .route-map-line { opacity: 0; }

@media (min-width: 760px) {
  .frame { width: min(100%, 680px); left: 50%; transform: translateX(-50%); box-shadow: 0 0 120px rgba(0,0,0,.35); }
  .story-scene { background: #090a0c; }
}

@media (prefers-reduced-motion: reduce) {
  .story-scene { height: auto !important; min-height: 100svh; }
  .frame { position: relative; height: auto; min-height: 100svh; }
  .js .frame { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding-block: max(56px, env(safe-area-inset-top)) max(56px, env(safe-area-inset-bottom)); }
  .js .frame * { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .js .frame :is(h1, h2, p, .morning-copy, .destination-reveal, .hotel-copy, .hotel-steps, .night-moments, .day-copy, .final-reveal) {
    position: relative; inset: auto; width: auto; max-width: 100%; z-index: 3;
  }
  .js .frame :is(.morning-copy, .destination-reveal, .hotel-copy, .hotel-steps, .night-moments, .day-copy, .final-reveal) {
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center;
  }
  .js .frame :is(.spa-interior, .spa-detail, .night-close, .day-street) { opacity: 0 !important; }
  .js .evening-shade { opacity: .55 !important; }
  .js .route-map { opacity: .35 !important; }
}