:root{--ink:#0b090b;--paper:#f2eee8;--soft:#c8beb8;--red:#8d1d2c;--line:rgba(255,255,255,.17)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--ink);color:var(--paper);font-family:"Manrope",sans-serif;font-size:16px;overflow-x:hidden}.locked{overflow:hidden}.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#26171b 0,#100d10 40%,#070607 100%);transition:opacity 1.1s ease,visibility 1.1s}.gate.opened{opacity:0;visibility:hidden}.gate-glow{position:absolute;width:min(70vw,700px);height:min(70vw,700px);border:1px solid rgba(255,255,255,.06);border-radius:50%;box-shadow:0 0 120px rgba(141,29,44,.16);animation:breathe 4s ease-in-out infinite}.gate-content{position:relative;text-align:center;padding:30px}.heart-line{display:block;font:4rem "Italiana";color:#dbcfd2;animation:pulse 2.5s ease-in-out infinite}.eyebrow{text-transform:uppercase;letter-spacing:.28em;font-size:.72rem;color:#c9bec1}.gate h1,.hero h2,.text-panel h2,.journey h2,.family-title h2,.finale h2{font-family:"Italiana",serif;font-weight:400}.gate h1{margin:.65rem 0;font-size:clamp(3.4rem,10vw,7.6rem);line-height:.9}.gate-copy{font-weight:300;line-height:1.8;color:#d7cfd1}.open-button{margin-top:2rem;padding:1rem 1.35rem;background:transparent;border:1px solid rgba(255,255,255,.42);border-radius:100px;color:white;font:500 .8rem "Manrope";letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:1rem;align-items:center;cursor:pointer;transition:.3s}.open-button:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}.sound-note{font-size:.68rem;color:#7f7578;margin-top:1.1rem;letter-spacing:.08em}.music-toggle{position:fixed;right:18px;top:18px;z-index:80;border:1px solid rgba(255,255,255,.2);background:rgba(11,9,11,.58);backdrop-filter:blur(12px);color:white;border-radius:100px;padding:.7rem .9rem;display:flex;align-items:center;gap:.55rem;opacity:0;pointer-events:none;transition:.5s;cursor:pointer}.music-toggle.visible{opacity:1;pointer-events:auto}.music-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.13em}.music-bars{height:14px;display:flex;align-items:flex-end;gap:2px}.music-bars i{width:2px;background:white;animation:bars .8s ease-in-out infinite alternate}.music-bars i:nth-child(1){height:8px}.music-bars i:nth-child(2){height:13px;animation-delay:.2s}.music-bars i:nth-child(3){height:6px;animation-delay:.35s}.paused .music-bars i{animation-play-state:paused;height:3px}.panel{position:relative;min-height:100svh}.hero{display:grid;place-items:end center;overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05);transform:scale(1.03)}.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,4,5,.15),rgba(5,4,5,.2) 38%,rgba(5,4,5,.94))}.hero-content{position:relative;text-align:center;padding:15vh 24px 8vh;max-width:900px}.hero h2{font-size:clamp(4rem,13vw,9rem);line-height:.85;margin:1rem 0}.hero-content>p:last-of-type{font-family:"DM Sans";font-weight:300;font-size:clamp(1rem,2vw,1.4rem)}.scroll-cue{display:block;margin-top:5vh;color:#a69b9e;font-size:.7rem;text-transform:uppercase;letter-spacing:.16em}.scroll-cue b{display:block;font-size:1.1rem;margin-top:.45rem;animation:down 1.5s ease-in-out infinite}.text-panel{display:grid;place-items:center;padding:12vh 7vw}.narrow{width:min(720px,100%);text-align:center}.script-mark{display:inline-block;border-bottom:1px solid var(--red);padding-bottom:.5rem;color:#aa8e94;font-size:.65rem;letter-spacing:.18em}.text-panel h2{font-size:clamp(3rem,9vw,6.5rem);line-height:.95;margin:1.4rem 0 2.5rem}.text-panel h2 span,.text-panel blockquote span{color:#bd3b4d}.prose{font:300 clamp(1.05rem,2vw,1.35rem)/1.85 "DM Sans"}.prose .soft{color:#a99fa1}.memory-strip{min-height:auto;padding:10vh 4vw 14vh}.memory-strip-intro{text-align:center;max-width:900px;margin:0 auto 7vh}.memory-strip-intro h2{font:400 clamp(4rem,12vw,8rem)/.9 "Italiana",serif;letter-spacing:.02em;margin:0 0 1.2rem}.memory-strip-intro p{margin:0 auto;font:300 clamp(1rem,2vw,1.35rem)/1.6 "DM Sans";color:#d7cfd1;max-width:620px}.film-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2vw;max-width:1250px;margin:auto;align-items:start}.film-row figure{margin:0}.film-row img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.72)}.film-row figure:nth-child(2){transform:translateY(7vh)}.film-row figcaption{font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;color:#8f8587;margin-top:.7rem}.favorite-place{background:var(--paper);color:var(--ink)}.favorite-place .script-mark{color:#76565c}.statement{font:300 clamp(1rem,2.1vw,1.35rem)/1.45 "DM Sans";margin:.5rem}.text-panel .answer{font-size:clamp(4rem,12vw,8rem);margin:2.7rem 0}.answer em{color:var(--red);font-weight:400}.closing-line{font:300 clamp(1rem,2vw,1.3rem)/1.8 "DM Sans"}.collage{min-height:auto;padding:12vh 4vw}.collage-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-auto-rows:30vw;gap:1.2vw}.collage-grid img{width:100%;height:100%;object-fit:cover;filter:saturate(.75)}.collage-grid img:nth-child(2){grid-row:span 2}.collage-grid img:nth-child(5){grid-column:3}.day-lines p{font:300 clamp(1.1rem,2.5vw,1.6rem)/1.4 "DM Sans";margin:.75rem}.through-days blockquote{font:400 clamp(1.5rem,4vw,2.5rem) "DM Sans";margin:3rem 0 0}.cinema{overflow:hidden;display:grid;place-items:center}.cinema video,.home video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cinema-shade{position:absolute;inset:0;background:rgba(10,7,8,.46)}.cinema p{position:relative;text-align:center;font:300 clamp(1.2rem,3vw,2rem)/1.55 "DM Sans"}.cinema em{font:400 clamp(2.2rem,7vw,5.5rem) "Italiana"}.journey{padding:14vh 6vw;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}.journey-copy{position:sticky;top:20vh}.journey h2{font-size:clamp(3rem,7vw,6rem);line-height:.97}.journey-photos{display:grid;gap:3vh}.journey-photos img{width:100%;max-height:78vh;object-fit:cover;filter:saturate(.65)}.journey-photos img:nth-child(2){width:78%;margin-left:auto}.journey-photos img:nth-child(3){width:86%}.family-reveal{background:var(--paper);color:var(--ink);padding:11vh 6vw}.family-title{text-align:center}.family-title h2{font-size:clamp(4rem,10vw,8rem);margin:1rem 0 7vh}.family-portrait{display:block;width:min(1050px,100%);max-height:72vh;object-fit:cover;margin:auto}.family-life{padding:12vh 4vw}.family-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:1.2vw}.family-grid img{width:100%;height:42vw;max-height:650px;object-fit:cover}.family-grid img:nth-child(3),.family-grid img:nth-child(4){height:32vw;max-height:500px}.family-caption{text-align:center;font:300 clamp(1.3rem,3vw,2.2rem)/1.55 "DM Sans";margin:10vh auto;max-width:700px}.family-caption em{font-family:"Italiana";font-size:1.35em}.main-letter{background:#e9e2da;color:#171216;padding:12vh 6vw}.letter-card{width:min(780px,100%);border-top:1px solid #8e817c;border-bottom:1px solid #8e817c;padding:8vh 4vw}.letter-card h2{text-align:left;font-size:clamp(3.5rem,8vw,6rem);margin-bottom:3rem}.letter-card p{font:300 clamp(1rem,2vw,1.22rem)/1.9 "DM Sans"}.letter-card strong{font-weight:500;color:var(--red)}.aside{font-style:italic;color:#775b61}.signature{margin-top:3.5rem!important}.signature span{font:3.2rem "Italiana";color:var(--red)}.home{display:grid;place-items:center;overflow:hidden}.home-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,7,.78),rgba(8,6,7,.28))}.home-copy{position:relative;text-align:center;padding:20px}.home-copy p{font:300 clamp(1rem,2vw,1.3rem)/1.7 "DM Sans"}.home-copy h2{font:400 clamp(5rem,18vw,13rem)/.8 "Italiana";margin:1rem 0}.finale{min-height:180svh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.finale-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.62)}.finale-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,5,6,.2),rgba(6,5,6,.64) 35%,rgba(6,5,6,.98) 80%)}.finale-copy{position:relative;text-align:center;width:min(850px,100%);padding:35vh 6vw 12vh}.finale-copy>p{font:300 1rem "DM Sans"}.finale h2{font-size:clamp(3.7rem,11vw,8rem);line-height:.93;margin:2rem 0 9rem}.finale h2 em{color:#ead9dc;font-weight:400}.vow{font:300 clamp(1rem,2vw,1.3rem)/1.7 "DM Sans"}.vow p{margin:.45rem}.vow strong{display:block;font:400 clamp(1.8rem,5vw,3rem) "Italiana";margin-top:2rem}.birthday-wish{margin-top:16vh}.birthday-wish>p:first-child{text-transform:uppercase;letter-spacing:.16em;font-size:.75rem}.birthday-wish h3{font:400 clamp(4rem,12vw,9rem)/.88 "Italiana";margin:3rem 0}.always-us{display:inline-block;border:1px solid rgba(255,255,255,.4);border-radius:100px;padding:.8rem 1.3rem;font-size:.7rem;letter-spacing:.22em}.reveal{opacity:0;transform:translateY(35px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
@keyframes breathe{50%{transform:scale(1.06);opacity:.65}}@keyframes pulse{50%{transform:scale(1.1);color:#fff}}@keyframes bars{to{height:3px}}@keyframes down{50%{transform:translateY(6px)}}
@media(max-width:700px){.hero-image{object-position:47% center}.memory-strip{padding-inline:8vw}.memory-strip-intro{margin-bottom:5vh}.memory-strip-intro h2{font-size:clamp(3.6rem,16vw,5.5rem)}.memory-strip-intro p{font-size:1rem}.film-row{grid-template-columns:1fr;gap:8vh}.film-row figure:nth-child(2){transform:none}.film-row img{aspect-ratio:4/5}.collage-grid{grid-template-columns:1fr 1fr;grid-auto-rows:57vw}.collage-grid img:nth-child(2){grid-row:span 1}.collage-grid img:nth-child(5){grid-column:auto}.collage-grid img:first-child{grid-column:span 2;height:74vw}.journey{grid-template-columns:1fr;padding:12vh 7vw}.journey-copy{position:relative;top:auto}.journey-photos img,.journey-photos img:nth-child(2),.journey-photos img:nth-child(3){width:100%;margin:0}.family-grid{grid-template-columns:1fr 1fr}.family-grid img,.family-grid img:nth-child(3),.family-grid img:nth-child(4){height:58vw}.family-grid img:first-child{grid-column:span 2;height:120vw}.finale{min-height:165svh}.finale-image{object-position:center top}.music-label{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{transition:none}.gate-glow,.heart-line,.scroll-cue b,.music-bars i{animation:none}}


/* =========================================================
   STANDALONE REBUILD — requested edits
   ========================================================= */

/* New portrait hero framing */
.hero-image {
  object-position: center 40%;
}

/* The repeated vow text block was intentionally removed from the HTML,
   so there is no empty beige gap. */

/* Keep the finale page but remove only the duplicated large
   "Happy Birthday, Honey Ko" heading. */
.birthday-wish h3 {
  display: none !important;
}

/* Bring the remaining finale content up naturally after removing the heading. */
.birthday-wish {
  margin-top: 9vh !important;
}

/* Local rebuild fallbacks for the two video-style sections.
   These preserve the original full-screen cinematic layout until the
   original video files are added. */
.cinema-fallback,
.home-fallback {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.65);
}


/* =========================================================
   FINAL USER EDITS — 2026-09-13
   ========================================================= */

/* HERO — preserve photo, make all lettering clearly visible. */
.hero-content {
  z-index: 3 !important;
  color: #fff !important;
  text-shadow: 0 3px 22px rgba(0,0,0,.58);
}
.hero-content .eyebrow {
  color: rgba(255,255,255,.86) !important;
}
.hero-content h2 {
  color: rgba(255,255,255,.98) !important;
}
.hero-content > p:last-of-type {
  color: rgba(255,255,255,.9) !important;
}
.hero-content .scroll-cue {
  color: rgba(255,255,255,.72) !important;
}
.hero-shade {
  z-index: 1 !important;
  background:
    linear-gradient(
      to bottom,
      rgba(5,4,5,.08) 0%,
      rgba(5,4,5,.13) 38%,
      rgba(5,4,5,.72) 100%
    ) !important;
}

/* MUSIC CONTROL — label is permanently "OUR SONG". */
.music-label {
  display: inline !important;
  font-size: .72rem !important;
  letter-spacing: .14em !important;
}

/* THROUGH THE GOOD DAYS — match the elegant black editorial reference. */
.through-days {
  background: #080708 !important;
  color: #f5f1ee !important;
  padding: 7vh 2vw 9vh !important;
}
.through-days .narrow {
  width: min(980px, 100%) !important;
}
.through-days .script-mark {
  font-size: .95rem !important;
  letter-spacing: .22em !important;
  color: #e4d8da !important;
  padding-bottom: .75rem !important;
  margin-bottom: 2.2rem !important;
}
.through-days .day-lines p {
  font: 300 clamp(1.35rem, 2.55vw, 2rem)/1.35 "DM Sans", sans-serif !important;
  margin: 1.55rem 0 !important;
  color: #f7f3f0 !important;
}
.through-days .day-lines p:last-child {
  font-family: "Italiana", serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(5rem, 10.5vw, 8.5rem) !important;
  line-height: .86 !important;
  margin: 4rem 0 4.2rem !important;
  letter-spacing: -.025em !important;
  white-space: nowrap;
}
.through-days blockquote {
  margin: 0 !important;
  font-family: "DM Sans", sans-serif !important;
  font-style: normal !important;
  color: #f7f3f0 !important;
}
.through-days .quote-intro {
  display: block !important;
  color: #f7f3f0 !important;
  font: 300 clamp(1.15rem, 2.25vw, 1.65rem)/1.7 "DM Sans", sans-serif !important;
}
.through-days .quote-answer {
  display: block !important;
  color: #f7f3f0 !important;
  font: 500 clamp(2rem, 4.6vw, 3.55rem)/1.2 "DM Sans", sans-serif !important;
  margin-top: 3.7rem !important;
}
.through-days .quote-heart {
  color: #bd3b4d !important;
  font-weight: 500;
}

/* OUR LITTLE FAMILY — exact wide newborn portrait feel. */
.family-reveal {
  padding: 7vh 3.5vw 5vh !important;
}
.family-title h2 {
  margin: .8rem 0 5vh !important;
}
.family-portrait {
  width: min(1160px, 100%) !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Four-photo family collage after "Our little family". */
.family-life {
  padding: 5vh 1.5vw 10vh !important;
}
.family-grid {
  display: grid !important;
  grid-template-columns: 1.62fr 1fr !important;
  grid-template-rows: min(44vw, 555px) min(34vw, 425px) !important;
  gap: 1.2vw !important;
}
.family-grid img,
.family-grid img:nth-child(3),
.family-grid img:nth-child(4) {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
.family-grid img:first-child {
  object-position: center center !important;
}

/* Intermediate ALWAYS US page — no "one last thing", no oval, slightly larger. */
.birthday-wish {
  margin-top: 12vh !important;
}
.always-us {
  display: inline-block !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(1rem, 1.7vw, 1.3rem) !important;
  letter-spacing: .24em !important;
  line-height: 1.4 !important;
}

/* =========================================================
   Mobile refinements
   ========================================================= */
@media (max-width: 700px) {
  .hero-image {
    object-position: center 38% !important;
  }

  .music-toggle {
    padding: .68rem .82rem !important;
  }
  .music-label {
    display: inline !important;
    font-size: .6rem !important;
  }

  .through-days {
    padding-inline: 5vw !important;
  }
  .through-days .day-lines p:last-child {
    white-space: normal !important;
    font-size: clamp(4rem, 18vw, 6.4rem) !important;
    margin: 3.2rem -3vw 3.7rem !important;
  }
  .through-days .quote-answer {
    font-size: clamp(1.85rem, 8vw, 2.8rem) !important;
    margin-top: 3rem !important;
  }

  .family-grid {
    grid-template-columns: 1.62fr 1fr !important;
    grid-template-rows: 52vw 40vw !important;
    gap: 1.6vw !important;
  }
  .family-grid img:first-child {
    grid-column: auto !important;
    height: 100% !important;
  }
}


/* Restored original video-style sections */
.cinema-video, .home-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.cinema-video { filter:saturate(.65); }
.home-video { filter:saturate(.7) brightness(.8); }


body.password-locked .grain,
body.password-locked .gate,
body.password-locked .music-toggle,
body.password-locked #story {
  visibility: hidden;
}

body.password-locked {
  background: #050405;
}

/* =========================================================
   PRIVATE PASSWORD GATE
   ========================================================= */
.password-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(52,15,25,.18), rgba(7,6,7,.995) 36%, #050405 100%);
  transition: opacity .65s ease, visibility .65s ease;
}
.password-gate.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.password-glow {
  position: absolute;
  width: min(72vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  box-shadow: 0 0 130px rgba(111,28,48,.08);
}
.password-card {
  position: relative;
  z-index: 1;
  width: min(92vw, 520px);
  padding: 2rem;
  text-align: center;
}
.password-card h1 {
  margin: .7rem 0 1rem;
  font: 400 clamp(2.8rem, 8vw, 5rem)/.98 "Italiana", serif;
  color: #f7f1ed;
}
.password-copy {
  margin: 0 auto 1.7rem;
  font: 300 1rem/1.7 "DM Sans", sans-serif;
  color: #cfc4c7;
}
#passwordForm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .7rem;
  width: min(100%, 430px);
  margin: 0 auto;
}
#passwordInput {
  width: 100%;
  min-width: 0;
  padding: .95rem 1rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #fff;
  outline: none;
  font: 400 .95rem "DM Sans", sans-serif;
}
#passwordInput::placeholder {
  color: rgba(255,255,255,.45);
}
#passwordInput:focus {
  border-color: rgba(255,255,255,.52);
}
#passwordForm button {
  padding: .95rem 1.2rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 500 .75rem "Manrope", sans-serif;
  letter-spacing: .12em;
}
#passwordForm button:hover {
  background: #f7f1ed;
  color: #171216;
}
.password-error {
  min-height: 1.3em;
  margin-top: .9rem;
  color: #d56a7b;
  font-size: .78rem;
  letter-spacing: .04em;
}
@media (max-width: 520px) {
  #passwordForm {
    grid-template-columns: 1fr;
  }
  #passwordForm button {
    width: 100%;
  }
}


/* =========================================================
   MOBILE-FIRST RESPONSIVE FIX
   ========================================================= */
@media (max-width: 700px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .panel {
    min-height: auto;
  }

  .hero,
  .gate,
  .password-gate,
  .cinema,
  .home,
  .celebration {
    min-height: 100svh;
  }

  .hero-content {
    width: 100%;
    padding: 16vh 7vw 7vh !important;
  }

  .hero h2 {
    font-size: clamp(3.4rem, 18vw, 5.7rem) !important;
    line-height: .9 !important;
  }

  .hero-content > p:last-of-type {
    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .text-panel {
    padding: 9vh 7vw !important;
  }

  .text-panel h2 {
    font-size: clamp(3rem, 15vw, 5rem) !important;
  }

  .prose,
  .letter-card p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  /* OUR STORY */
  .memory-strip {
    padding: 9vh 6vw 10vh !important;
  }

  .memory-strip-intro {
    margin-bottom: 4.5vh !important;
  }

  .memory-strip-intro h2 {
    font-size: clamp(3.6rem, 18vw, 5.4rem) !important;
    line-height: .92 !important;
  }

  .memory-strip-intro p {
    font-size: .98rem !important;
    line-height: 1.55 !important;
    padding-inline: 3vw;
  }

  .film-row {
    grid-template-columns: 1fr !important;
    gap: 5vh !important;
  }

  .film-row figure:nth-child(2) {
    transform: none !important;
  }

  .film-row img {
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }

  .film-row figcaption {
    font-size: .7rem !important;
    letter-spacing: .13em !important;
    margin-top: .8rem !important;
  }

  /* 5-photo memories collage */
  .collage {
    padding: 8vh 5vw !important;
  }

  .collage-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 3vw !important;
  }

  .collage-grid img,
  .collage-grid img:first-child,
  .collage-grid img:nth-child(2),
  .collage-grid img:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }

  /* Through the days */
  .through-days {
    padding: 9vh 6vw !important;
  }

  .through-days .day-lines p {
    font-size: 1.16rem !important;
    line-height: 1.5 !important;
    margin: 1.1rem 0 !important;
  }

  .through-days .day-lines p:last-child {
    font-size: clamp(3.8rem, 18vw, 5.8rem) !important;
    line-height: .9 !important;
    margin: 3rem 0 !important;
    white-space: normal !important;
  }

  .through-days .quote-intro {
    font-size: 1.05rem !important;
  }

  .through-days .quote-answer {
    font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
    margin-top: 2.6rem !important;
  }

  /* Video sections */
  .cinema,
  .home {
    min-height: 100svh !important;
  }

  .cinema p {
    width: 88%;
    font-size: 1.05rem !important;
  }

  .cinema em {
    font-size: clamp(2.8rem, 13vw, 4.2rem) !important;
  }

  .cinema-video,
  .home-video {
    object-position: center center !important;
  }

  /* Journey section */
  .journey {
    grid-template-columns: 1fr !important;
    gap: 6vh !important;
    padding: 10vh 6vw !important;
  }

  .journey-copy {
    position: relative !important;
    top: auto !important;
  }

  .journey h2 {
    font-size: clamp(3rem, 14vw, 4.8rem) !important;
  }

  .journey-photos img,
  .journey-photos img:nth-child(2),
  .journey-photos img:nth-child(3) {
    width: 100% !important;
    margin: 0 !important;
    max-height: none !important;
  }

  /* Family hero */
  .family-reveal {
    padding: 9vh 5vw 7vh !important;
  }

  .family-title h2 {
    font-size: clamp(3.7rem, 16vw, 5.7rem) !important;
    margin-bottom: 4.5vh !important;
  }

  .family-portrait {
    width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* 4-photo family grid: stack on phones */
  .family-life {
    padding: 8vh 5vw !important;
  }

  .family-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 3vw !important;
  }

  .family-grid img,
  .family-grid img:first-child,
  .family-grid img:nth-child(3),
  .family-grid img:nth-child(4) {
    grid-column: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }

  .family-caption {
    margin: 7vh auto !important;
    font-size: 1.2rem !important;
  }

  /* Letter */
  .main-letter {
    padding: 8vh 5vw !important;
  }

  .letter-card {
    padding: 6vh 3vw !important;
  }

  .letter-card h2 {
    font-size: clamp(3.2rem, 15vw, 5rem) !important;
    margin-bottom: 2rem !important;
  }

  /* HOME */
  .home-copy {
    width: 100%;
    padding: 0 6vw !important;
  }

  .home-copy h2 {
    font-size: clamp(5rem, 28vw, 8rem) !important;
  }

  .home-copy p {
    font-size: 1.05rem !important;
  }

  /* Finale */
  .finale {
    min-height: 150svh !important;
  }

  .finale-copy {
    width: 100% !important;
    padding: 28vh 6vw 10vh !important;
  }

  .finale h2 {
    font-size: clamp(3.6rem, 17vw, 5.8rem) !important;
    margin: 2rem 0 6rem !important;
  }

  .vow strong {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  .birthday-wish {
    margin-top: 10vh !important;
  }

  .always-us {
    font-size: 1rem !important;
    letter-spacing: .18em !important;
  }

  /* Music control */
  .music-toggle {
    top: 12px !important;
    right: 12px !important;
    padding: .65rem .78rem !important;
    gap: .45rem !important;
  }

  .music-label {
    display: inline !important;
    font-size: .58rem !important;
  }

  /* Password gate */
  .password-card {
    width: min(90vw, 420px) !important;
    padding: 1.25rem !important;
  }

  .password-card h1 {
    font-size: clamp(2.6rem, 13vw, 4.2rem) !important;
  }

  #passwordForm {
    grid-template-columns: 1fr !important;
  }

  #passwordForm button {
    width: 100% !important;
  }
}

@media (max-width: 390px) {
  .hero h2 {
    font-size: 3.35rem !important;
  }

  .memory-strip-intro h2 {
    font-size: 3.5rem !important;
  }

  .home-copy h2 {
    font-size: 5rem !important;
  }

  .celebration h2 {
    font-size: 3.6rem !important;
  }
}



#bgMusic{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;bottom:-9999px}


/* Password-page wording hierarchy */
.password-card .password-kicker {
  margin: .1rem 0 .6rem;
  font: 400 clamp(1rem, 2.5vw, 1.25rem)/1.4 "DM Sans", sans-serif;
  color: #f2e9eb;
  letter-spacing: .08em;
}

.password-card .password-copy {
  margin-top: 0;
}

@media (max-width: 700px) {
  .password-card h1 {
    font-size: clamp(3rem, 14vw, 4.5rem) !important;
    line-height: .92 !important;
  }

  .password-card .password-kicker {
    font-size: 1rem !important;
  }

  .password-card .password-copy {
    font-size: .95rem !important;
  }
}

/* Exact password opening screen */
.password-gate {
  background: #050405 !important;
}
.password-glow {
  opacity: .42 !important;
}
.password-card h1 {
  text-transform: none !important;
  font-size: clamp(3.4rem, 10vw, 6rem) !important;
  line-height: .9 !important;
  margin: 0 0 1.2rem !important;
}
.password-card .password-kicker {
  text-transform: none !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  letter-spacing: .06em !important;
  margin: 0 0 .45rem !important;
  color: #f3ecee !important;
}
.password-card .password-copy {
  margin: 0 0 1.8rem !important;
  color: #bdb3b6 !important;
}
@media (max-width: 700px) {
  .password-card { padding: 1rem 6vw !important; }
  .password-card h1 { font-size: clamp(3.2rem, 16vw, 5rem) !important; }
}


/* =========================================================
   FINAL PASSWORD + MOBILE OVERRIDES
   ========================================================= */
body.password-locked {
  background: #050405 !important;
}

body.password-locked .grain,
body.password-locked .gate,
body.password-locked .music-toggle,
body.password-locked #story {
  visibility: hidden !important;
}

.password-gate {
  background: #050405 !important;
}

.password-glow {
  opacity: .35 !important;
}

.password-card h1 {
  text-transform: none !important;
}

.password-kicker {
  margin: .15rem 0 .55rem !important;
  color: #f3eaec !important;
  font: 400 clamp(1rem, 2.5vw, 1.25rem)/1.4 "DM Sans", sans-serif !important;
  letter-spacing: .06em !important;
}

.password-copy {
  margin-top: 0 !important;
}

/* Mobile */
@media (max-width: 700px) {
  .password-card {
    width: min(91vw, 420px) !important;
    padding: 1rem !important;
  }

  .password-card h1 {
    font-size: clamp(2.8rem, 14vw, 4.4rem) !important;
    line-height: .92 !important;
  }

  #passwordForm {
    grid-template-columns: 1fr !important;
  }

  #passwordForm button {
    width: 100% !important;
  }

  .film-row,
  .collage-grid,
  .family-grid {
    grid-template-columns: 1fr !important;
  }

  .film-row figure:nth-child(2) {
    transform: none !important;
  }

  .collage-grid img,
  .collage-grid img:first-child,
  .collage-grid img:nth-child(2),
  .collage-grid img:nth-child(5),
  .family-grid img,
  .family-grid img:first-child,
  .family-grid img:nth-child(3),
  .family-grid img:nth-child(4) {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }

  .journey {
    grid-template-columns: 1fr !important;
  }

  .journey-copy {
    position: relative !important;
    top: auto !important;
  }

  .journey-photos img,
  .journey-photos img:nth-child(2),
  .journey-photos img:nth-child(3) {
    width: 100% !important;
    margin: 0 !important;
  }

  .hero h2 {
    font-size: clamp(3.4rem, 18vw, 5.8rem) !important;
  }

  .memory-strip-intro h2 {
    font-size: clamp(3.6rem, 18vw, 5.5rem) !important;
  }

  .family-title h2 {
    font-size: clamp(3.8rem, 16vw, 5.6rem) !important;
  }

  .home-copy h2 {
    font-size: clamp(5rem, 28vw, 8rem) !important;
  }

  .music-label {
    display: inline !important;
  }
}


/* =========================================================
   FULL UPGRADE — ELEGANT ROMANTIC ATMOSPHERE
   ========================================================= */
.romance-fx {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.romance-fx.active {
  opacity: 1;
}

body.password-locked .romance-fx,
body.locked .romance-fx {
  opacity: 0 !important;
}

.floating-hearts,
.floating-sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fx-heart,
.fx-sparkle {
  position: absolute;
  bottom: -12vh;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.fx-heart {
  color: rgba(245, 211, 220, .58);
  font-family: "Italiana", serif;
  font-size: clamp(11px, 1.35vw, 19px);
  text-shadow:
    0 0 10px rgba(246, 206, 218, .18),
    0 0 25px rgba(246, 206, 218, .09);
  animation-name: romanceHeartFloat;
}

.fx-heart.outline {
  color: rgba(255,255,255,.40);
}

.fx-sparkle {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  box-shadow:
    0 0 8px rgba(255,255,255,.30),
    0 0 18px rgba(231,195,206,.15);
  animation-name: romanceSparkleFloat;
}

@keyframes romanceHeartFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(.75) rotate(-6deg);
    opacity: 0;
  }
  12% { opacity: .28; }
  45% { opacity: .60; }
  82% { opacity: .32; }
  100% {
    transform: translate3d(var(--drift, 24px), -118vh, 0) scale(1.18) rotate(9deg);
    opacity: 0;
  }
}

@keyframes romanceSparkleFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(.55);
    opacity: 0;
  }
  16% { opacity: .28; }
  55% { opacity: .66; }
  100% {
    transform: translate3d(var(--drift, -14px), -112vh, 0) scale(1.05);
    opacity: 0;
  }
}

/* Gentle "memory glow" on emotional sections */
.memory-strip::before,
.family-reveal::before,
.main-letter::before,
.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .35;
  background:
    radial-gradient(circle at 50% 38%, rgba(165, 79, 104, .10), transparent 42%),
    radial-gradient(circle at 20% 75%, rgba(255,255,255,.025), transparent 28%);
}

.memory-strip > *,
.family-reveal > *,
.main-letter > *,
.finale > * {
  position: relative;
  z-index: 1;
}

/* Tiny divider heart for the letter, subtle and editorial */
.letter-card::after {
  content: "♡";
  display: block;
  width: max-content;
  margin: 4rem auto 0;
  color: rgba(123, 65, 79, .55);
  font: 400 1.35rem "Italiana", serif;
}

/* Softer cinematic text lift */
.cinema p,
.home-copy,
.finale-copy,
.celebration-copy {
  text-shadow: 0 4px 24px rgba(0,0,0,.36);
}

/* Keep the effect light on phones for smooth scrolling */
@media (max-width: 700px) {
  .romance-fx {
    z-index: 5;
  }

  .fx-heart {
    font-size: 12px;
  }

  .fx-sparkle {
    width: 2.5px;
    height: 2.5px;
  }

  .memory-strip::before,
  .family-reveal::before,
  .main-letter::before,
  .finale::before {
    opacity: .24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .romance-fx {
    display: none !important;
  }
}


/* =========================================================
   GENTLE PHOTO ANIMATIONS
   Elegant, slow, low-motion movement for images only.
   ========================================================= */

/* Base image reveal: soft fade + tiny lift/scale */
.memory-strip img.reveal,
.journey-photos img.reveal,
.family-portrait.reveal,
.family-grid img.reveal,
.collage-grid img,
.hero-image,
.finale-image {
  backface-visibility: hidden;
  transform-origin: center center;
}

/* Sections that already use .reveal get a softer photo-specific entrance */
.journey-photos img.reveal,
.family-portrait.reveal,
.family-grid img.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    opacity 1.25s ease,
    transform 1.45s cubic-bezier(.2,.72,.2,1);
}

.journey-photos img.reveal.in,
.family-portrait.reveal.in,
.family-grid img.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Collage enters as a group, then each photo gets a tiny staggered feel */
.collage-grid img {
  opacity: .001;
  transform: translateY(16px) scale(.988);
  transition:
    opacity 1.2s ease,
    transform 1.35s cubic-bezier(.2,.72,.2,1);
}

.collage-grid.reveal.in img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.collage-grid.reveal.in img:nth-child(2) { transition-delay: .08s; }
.collage-grid.reveal.in img:nth-child(3) { transition-delay: .16s; }
.collage-grid.reveal.in img:nth-child(4) { transition-delay: .24s; }
.collage-grid.reveal.in img:nth-child(5) { transition-delay: .32s; }

/* OUR STORY strip: similarly gentle, no large lateral motion */
.film-row figure {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.15s ease,
    transform 1.3s cubic-bezier(.2,.72,.2,1);
}

.film-row.reveal.in figure {
  opacity: 1;
  transform: translateY(0);
}

.film-row.reveal.in figure:nth-child(2) {
  transition-delay: .10s;
}

.film-row.reveal.in figure:nth-child(3) {
  transition-delay: .20s;
}

/* Preserve the editorial stagger of the center card on desktop */
@media (min-width: 701px) {
  .film-row.reveal.in figure:nth-child(2) {
    transform: translateY(7vh);
  }
}

/* Almost imperceptible "living photo" motion on the big cinematic backgrounds */
.hero-image {
  animation: heroBreath 18s ease-in-out infinite alternate;
}

.finale-image {
  animation: finaleBreath 22s ease-in-out infinite alternate;
}

@keyframes heroBreath {
  from { transform: scale(1.025); }
  to   { transform: scale(1.045); }
}

@keyframes finaleBreath {
  from { transform: scale(1.00); }
  to   { transform: scale(1.018); }
}

/* Desktop hover: very light zoom only, intentionally subtle */
@media (hover: hover) and (pointer: fine) {
  .film-row img,
  .collage-grid img,
  .journey-photos img,
  .family-grid img,
  .family-portrait {
    transition:
      transform .9s cubic-bezier(.2,.72,.2,1),
      filter .9s ease,
      opacity 1.2s ease;
  }

  .film-row img:hover,
  .collage-grid img:hover,
  .journey-photos img:hover,
  .family-grid img:hover,
  .family-portrait:hover {
    transform: scale(1.018);
    filter: saturate(.86) brightness(1.02);
  }
}

/* Mobile: even calmer */
@media (max-width: 700px) {
  .hero-image {
    animation-duration: 24s;
  }

  .finale-image {
    animation-duration: 28s;
  }

  .collage-grid.reveal.in img:nth-child(n),
  .film-row.reveal.in figure:nth-child(n) {
    transition-delay: 0s;
  }
}

/* Accessibility: no motion when reduced motion is requested */
@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .finale-image {
    animation: none !important;
  }

  .journey-photos img.reveal,
  .family-portrait.reveal,
  .family-grid img.reveal,
  .collage-grid img,
  .film-row figure {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================
   FINALE LAYOUT REPAIR + CLEARER PHOTO MOTION
   ========================================================= */

.finale {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.finale > .finale-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

.finale > .finale-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

.finale > .finale-copy {
  position: relative !important;
  z-index: 3 !important;
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.finale-copy > p,
.finale-copy h2,
.finale-copy .vow,
.finale-copy .birthday-wish {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.finale h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

/* More visible, still gentle photo animation */
.journey-photos img.reveal,
.family-portrait.reveal,
.family-grid img.reveal {
  opacity: 0 !important;
  transform: translateY(32px) scale(.955) !important;
  filter: saturate(.68) brightness(.92) !important;
  transition:
    opacity 1.35s ease,
    transform 1.65s cubic-bezier(.16,.78,.2,1),
    filter 1.65s ease !important;
}

.journey-photos img.reveal.in,
.family-portrait.reveal.in,
.family-grid img.reveal.in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: saturate(.82) brightness(1) !important;
}

.collage-grid img {
  opacity: 0 !important;
  transform: translateY(28px) scale(.955) !important;
  filter: saturate(.66) brightness(.93) !important;
  transition:
    opacity 1.25s ease,
    transform 1.55s cubic-bezier(.16,.78,.2,1),
    filter 1.55s ease !important;
}

.collage-grid.reveal.in img {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: saturate(.82) brightness(1) !important;
}

.film-row figure {
  opacity: 0 !important;
  transform: translateY(26px) scale(.965) !important;
  transition:
    opacity 1.25s ease,
    transform 1.55s cubic-bezier(.16,.78,.2,1) !important;
}

.film-row.reveal.in figure {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

@media (min-width: 701px) {
  .film-row.reveal.in figure:nth-child(2) {
    transform: translateY(7vh) scale(1) !important;
  }
}

@media (max-width: 700px) {
  .finale {
    min-height: 150svh !important;
  }

  .finale > .finale-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28vh 7vw 10vh !important;
  }

  .finale h2 {
    font-size: clamp(3.1rem, 15vw, 5.2rem) !important;
    line-height: .96 !important;
    margin: 2rem auto 6rem !important;
  }

  .vow strong {
    font-size: clamp(1.9rem, 9vw, 2.9rem) !important;
    line-height: 1.08 !important;
  }

  .journey-photos img.reveal,
  .family-portrait.reveal,
  .family-grid img.reveal,
  .collage-grid img,
  .film-row figure {
    transform: translateY(24px) scale(.965) !important;
  }

  .journey-photos img.reveal.in,
  .family-portrait.reveal.in,
  .family-grid img.reveal.in,
  .collage-grid.reveal.in img,
  .film-row.reveal.in figure {
    transform: translateY(0) scale(1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-photos img.reveal,
  .family-portrait.reveal,
  .family-grid img.reveal,
  .collage-grid img,
  .film-row figure {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}


/* =========================================================
   ALWAYS-ON ELEGANT PHOTO MOTION
   Gentle movement even without hover.
   ========================================================= */

/* Reusable keyframes */
@keyframes photoDriftA {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  50%  { transform: scale(1.035) translate3d(0, -0.7%, 0); }
  100% { transform: scale(1.015) translate3d(0.6%, 0.4%, 0); }
}

@keyframes photoDriftB {
  0%   { transform: scale(1.015) translate3d(0, 0, 0); }
  50%  { transform: scale(1.045) translate3d(-0.7%, 0.4%, 0); }
  100% { transform: scale(1.00) translate3d(0.5%, -0.5%, 0); }
}

@keyframes photoDriftC {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  50%  { transform: scale(1.03) translate3d(0.5%, 0.6%, 0); }
  100% { transform: scale(1.02) translate3d(-0.5%, -0.4%, 0); }
}

/* Keep cropping clean while images drift */
.film-row figure,
.collage-grid,
.journey-photos,
.family-grid,
.family-reveal {
  overflow: hidden;
}

.film-row img,
.collage-grid img,
.journey-photos img,
.family-grid img,
.family-portrait {
  will-change: transform;
  transform-origin: center center;
}

/* Once each section has revealed, photos continue moving slowly */
.film-row.reveal.in figure:nth-child(1) img,
.collage-grid.reveal.in img:nth-child(1),
.journey-photos img.reveal.in:nth-child(1),
.family-grid img.reveal.in:nth-child(1) {
  animation: photoDriftA 16s ease-in-out infinite alternate;
}

.film-row.reveal.in figure:nth-child(2) img,
.collage-grid.reveal.in img:nth-child(2),
.journey-photos img.reveal.in:nth-child(2),
.family-grid img.reveal.in:nth-child(2),
.family-portrait.reveal.in {
  animation: photoDriftB 18s ease-in-out infinite alternate;
}

.film-row.reveal.in figure:nth-child(3) img,
.collage-grid.reveal.in img:nth-child(3),
.journey-photos img.reveal.in:nth-child(3),
.family-grid img.reveal.in:nth-child(3) {
  animation: photoDriftC 17s ease-in-out infinite alternate;
}

.collage-grid.reveal.in img:nth-child(4),
.family-grid img.reveal.in:nth-child(4) {
  animation: photoDriftA 19s ease-in-out infinite alternate-reverse;
}

.collage-grid.reveal.in img:nth-child(5) {
  animation: photoDriftB 20s ease-in-out infinite alternate-reverse;
}

/* Slightly more noticeable on the large backgrounds */
.hero-image {
  animation: heroBreath 16s ease-in-out infinite alternate !important;
}

.finale-image {
  animation: finaleBreath 19s ease-in-out infinite alternate !important;
}

/* Mobile remains smooth and calm */
@media (max-width: 700px) {
  .film-row.reveal.in figure img,
  .collage-grid.reveal.in img,
  .journey-photos img.reveal.in,
  .family-grid img.reveal.in,
  .family-portrait.reveal.in {
    animation-duration: 20s !important;
  }

  .hero-image {
    animation-duration: 22s !important;
  }

  .finale-image {
    animation-duration: 24s !important;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .film-row img,
  .collage-grid img,
  .journey-photos img,
  .family-grid img,
  .family-portrait,
  .hero-image,
  .finale-image {
    animation: none !important;
  }
}


/* =========================================================
   VISIBLE ELEGANT PHOTO MOTION — NO HOVER NEEDED
   ========================================================= */

@keyframes visiblePhotoFloatA {
  0%   { scale: 1;    translate: 0 0;      rotate: 0deg;    object-position: 48% 50%; }
  35%  { scale: 1.055; translate: 0 -1.3%;  rotate: .18deg; object-position: 52% 47%; }
  70%  { scale: 1.025; translate: 1.1% .8%; rotate: -.12deg; object-position: 46% 53%; }
  100% { scale: 1.06;  translate: -.8% -1%; rotate: .12deg; object-position: 51% 48%; }
}

@keyframes visiblePhotoFloatB {
  0%   { scale: 1.025; translate: 0 0;       rotate: 0deg;     object-position: 52% 50%; }
  40%  { scale: 1.065; translate: -1.2% .7%; rotate: -.16deg; object-position: 47% 52%; }
  75%  { scale: 1.035; translate: .8% -1.1%; rotate: .14deg;  object-position: 54% 47%; }
  100% { scale: 1.055; translate: -.5% .6%;  rotate: -.08deg; object-position: 49% 53%; }
}

@keyframes visiblePhotoFloatC {
  0%   { scale: 1.01;  translate: 0 0;        rotate: 0deg;    object-position: 50% 51%; }
  30%  { scale: 1.055; translate: .9% -1.1%;  rotate: .14deg; object-position: 46% 48%; }
  65%  { scale: 1.03;  translate: -.9% .9%;   rotate: -.15deg;object-position: 53% 53%; }
  100% { scale: 1.065; translate: .6% -.7%;   rotate: .08deg; object-position: 48% 47%; }
}

/* These run continuously once the section has revealed. */
.film-row.reveal.in figure:nth-child(1) img,
.collage-grid.reveal.in img:nth-child(1),
.journey-photos img.reveal.in:nth-child(1),
.family-grid img.reveal.in:nth-child(1) {
  animation: visiblePhotoFloatA 11s ease-in-out infinite alternate !important;
}

.film-row.reveal.in figure:nth-child(2) img,
.collage-grid.reveal.in img:nth-child(2),
.journey-photos img.reveal.in:nth-child(2),
.family-grid img.reveal.in:nth-child(2),
.family-portrait.reveal.in {
  animation: visiblePhotoFloatB 12.5s ease-in-out infinite alternate !important;
}

.film-row.reveal.in figure:nth-child(3) img,
.collage-grid.reveal.in img:nth-child(3),
.journey-photos img.reveal.in:nth-child(3),
.family-grid img.reveal.in:nth-child(3) {
  animation: visiblePhotoFloatC 11.8s ease-in-out infinite alternate !important;
}

.collage-grid.reveal.in img:nth-child(4),
.family-grid img.reveal.in:nth-child(4) {
  animation: visiblePhotoFloatA 13s ease-in-out infinite alternate-reverse !important;
}

.collage-grid.reveal.in img:nth-child(5) {
  animation: visiblePhotoFloatB 13.5s ease-in-out infinite alternate-reverse !important;
}

/* Larger backgrounds visibly breathe a little more. */
.hero-image {
  animation: visiblePhotoFloatA 14s ease-in-out infinite alternate !important;
}

.finale-image {
  animation: visiblePhotoFloatB 16s ease-in-out infinite alternate !important;
}

/* Soft tonal breathing makes movement easier to notice without feeling busy. */
.film-row img,
.collage-grid img,
.journey-photos img,
.family-grid img,
.family-portrait,
.hero-image,
.finale-image {
  will-change: scale, translate, rotate, object-position, filter;
}

/* =========================================================
   SMALL ELEGANT FLOATING BALLOONS
   ========================================================= */
.floating-balloons {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fx-balloon {
  position: absolute;
  bottom: -14vh;
  width: var(--balloon-size, 18px);
  height: calc(var(--balloon-size, 18px) * 1.24);
  border-radius: 52% 48% 50% 50% / 57% 57% 43% 43%;
  border: 1px solid rgba(246, 220, 226, .45);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(145deg, rgba(180,78,104,.30), rgba(87,33,50,.18));
  box-shadow:
    0 0 12px rgba(222, 155, 173, .11),
    inset 0 -5px 10px rgba(56,17,29,.12);
  opacity: 0;
  animation: elegantBalloonRise var(--speed, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.fx-balloon:nth-child(3n+2) {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(145deg, rgba(222,190,177,.24), rgba(104,72,65,.14));
}

.fx-balloon:nth-child(3n+3) {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.25), transparent 18%),
    linear-gradient(145deg, rgba(176,151,199,.22), rgba(75,53,93,.14));
}

.fx-balloon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 5px;
  height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(181,112,130,.34);
}

.fx-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: calc(var(--balloon-size, 18px) * 1.4);
  background: linear-gradient(to bottom, rgba(235,216,221,.34), transparent);
  transform-origin: top center;
  transform: translateX(-50%) rotate(var(--string-tilt, 4deg));
}

@keyframes elegantBalloonRise {
  0% {
    transform: translate3d(0, 0, 0) rotate(-3deg) scale(.84);
    opacity: 0;
  }
  12% { opacity: .30; }
  45% {
    transform: translate3d(var(--balloon-drift, 18px), -48vh, 0) rotate(3deg) scale(1);
    opacity: .48;
  }
  78% { opacity: .30; }
  100% {
    transform: translate3d(calc(var(--balloon-drift, 18px) * -.7), -118vh, 0) rotate(-2deg) scale(1.04);
    opacity: 0;
  }
}

/* A few more hearts/sparkles, still refined. */
.fx-heart {
  color: rgba(245, 211, 220, .68) !important;
}
.fx-sparkle {
  background: rgba(255,255,255,.76) !important;
}

/* Mobile: motion is still visible, but slightly slower. */
@media (max-width: 700px) {
  .film-row.reveal.in figure img,
  .collage-grid.reveal.in img,
  .journey-photos img.reveal.in,
  .family-grid img.reveal.in,
  .family-portrait.reveal.in {
    animation-duration: 14s !important;
  }

  .fx-balloon {
    --balloon-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-row img,
  .collage-grid img,
  .journey-photos img,
  .family-grid img,
  .family-portrait,
  .hero-image,
  .finale-image,
  .fx-balloon {
    animation: none !important;
    scale: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
  }
}


/* =========================================================
   ELEGANT INTRO + FONT REFINEMENT
   ========================================================= */

.gate::before,
.password-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 34%, rgba(175,79,108,.10), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.025), transparent 32%);
}

.gate-glow {
  width: min(74vw, 760px) !important;
  height: min(74vw, 760px) !important;
  border-color: rgba(255,255,255,.075) !important;
  box-shadow:
    0 0 140px rgba(141,29,44,.12),
    inset 0 0 0 1px rgba(255,255,255,.018);
}

.gate-content,
.password-card {
  width: min(92vw, 620px);
}

.heart-line {
  margin-bottom: 1rem;
  font-size: clamp(2.3rem, 5vw, 3.6rem) !important;
  color: rgba(252,241,244,.92) !important;
  text-shadow: 0 0 18px rgba(255,219,228,.12);
}

.gate .eyebrow,
.password-card .password-kicker {
  font-family: "DM Sans", sans-serif !important;
  text-transform: uppercase;
  letter-spacing: .34em !important;
  font-size: .73rem !important;
  color: rgba(228,216,220,.86) !important;
}

.gate h1 {
  margin: .55rem 0 1.15rem !important;
  font-size: clamp(4rem, 10vw, 7.9rem) !important;
  line-height: .9 !important;
  letter-spacing: -.02em;
  color: #f9f3f0;
  text-shadow: 0 8px 30px rgba(0,0,0,.22);
}

.gate-copy {
  max-width: 24ch;
  margin: 0 auto !important;
  font: 300 clamp(1.02rem, 2vw, 1.18rem)/1.8 "DM Sans", sans-serif !important;
  color: rgba(226,216,219,.92) !important;
}

.open-button {
  margin-top: 2.15rem !important;
  padding: 1rem 1.55rem !important;
  min-width: min(84vw, 340px);
  justify-content: center;
  font: 500 .76rem "DM Sans", sans-serif !important;
  letter-spacing: .18em !important;
  border-color: rgba(255,255,255,.36) !important;
  background: rgba(255,255,255,.02) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  backdrop-filter: blur(5px);
}

.open-button span {
  font-family: "Italiana", serif;
  font-size: 1.3rem;
  line-height: 1;
}

.password-card {
  padding: 2.35rem 2rem 2rem !important;
}

.password-card h1 {
  color: #fbf4f1 !important;
  letter-spacing: -.02em;
  margin-bottom: .8rem !important;
  text-shadow: 0 8px 26px rgba(0,0,0,.18);
}

.password-kicker {
  margin-bottom: .8rem !important;
}

.password-copy {
  max-width: 28ch;
  margin: 0 auto 1.9rem !important;
  font: 300 1rem/1.75 "DM Sans", sans-serif !important;
  color: rgba(219,208,212,.88) !important;
}

#passwordInput {
  padding: 1rem 1.1rem !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#passwordForm button {
  min-width: 170px;
  font-family: "DM Sans", sans-serif !important;
  letter-spacing: .16em !important;
  background: rgba(255,255,255,.015);
}

@media (max-width: 700px) {
  .gate-content,
  .password-card {
    width: min(90vw, 430px) !important;
  }

  .heart-line {
    margin-bottom: .8rem;
  }

  .gate .eyebrow,
  .password-card .password-kicker {
    font-size: .66rem !important;
    letter-spacing: .28em !important;
  }

  .gate h1 {
    font-size: clamp(3.55rem, 16vw, 5.6rem) !important;
  }

  .gate-copy,
  .password-copy {
    font-size: .98rem !important;
    line-height: 1.7 !important;
  }

  .open-button {
    width: 100%;
    min-width: 0;
    padding: .98rem 1.1rem !important;
  }

  .password-card {
    padding: 1.2rem .8rem 1rem !important;
  }

  #passwordForm button {
    min-width: 0;
  }
}


/* =========================================================
   SMOOTH PERFORMANCE MODE
   Keep the romantic feel without stuttering.
   ========================================================= */

/* Let the browser skip rendering sections far outside the viewport. */
.panel {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

/* Disable all earlier heavy/redundant photo animation layers. */
.film-row img,
.collage-grid img,
.journey-photos img,
.family-grid img,
.family-portrait,
.hero-image,
.finale-image {
  animation: none !important;
  will-change: auto !important;
  filter: none;
}

/* Keep the original cinematic tonal treatment where useful. */
.hero-image {
  filter: saturate(.62) contrast(1.03) !important;
}
.finale-image {
  filter: saturate(.70) !important;
}
.journey-photos img {
  filter: saturate(.78) !important;
}
.collage-grid img,
.film-row img {
  filter: saturate(.82) !important;
}

/* Simple transform-only motion = much smoother on phones. */
@keyframes smoothPhotoBreath {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  50%  { transform: scale(1.035) translate3d(0, -0.7%, 0); }
  100% { transform: scale(1.015) translate3d(0.5%, 0.35%, 0); }
}

@keyframes smoothPhotoBreathAlt {
  0%   { transform: scale(1.015) translate3d(0, 0, 0); }
  50%  { transform: scale(1.045) translate3d(-0.55%, 0.45%, 0); }
  100% { transform: scale(1.00) translate3d(0.35%, -0.4%, 0); }
}

/* Only animate photos after their section is actually revealed. */
.film-row.reveal.in figure:nth-child(odd) img,
.collage-grid.reveal.in img:nth-child(odd),
.journey-photos img.reveal.in:nth-child(odd),
.family-grid img.reveal.in:nth-child(odd),
.family-portrait.reveal.in {
  animation: smoothPhotoBreath 14s ease-in-out infinite alternate !important;
  will-change: transform !important;
}

.film-row.reveal.in figure:nth-child(even) img,
.collage-grid.reveal.in img:nth-child(even),
.journey-photos img.reveal.in:nth-child(even),
.family-grid img.reveal.in:nth-child(even) {
  animation: smoothPhotoBreathAlt 15.5s ease-in-out infinite alternate !important;
  will-change: transform !important;
}

/* Big background images: slower and lighter. */
.hero-image {
  animation: smoothPhotoBreath 20s ease-in-out infinite alternate !important;
  will-change: transform !important;
}
.finale-image {
  animation: smoothPhotoBreathAlt 22s ease-in-out infinite alternate !important;
  will-change: transform !important;
}

/* No hover animation stacking. */
@media (hover: hover) and (pointer: fine) {
  .film-row img:hover,
  .collage-grid img:hover,
  .journey-photos img:hover,
  .family-grid img:hover,
  .family-portrait:hover {
    transform: none !important;
    filter: inherit !important;
  }
}

/* Keep particles subtle and cheap to render. */
.fx-heart,
.fx-sparkle,
.fx-balloon {
  box-shadow: none !important;
  text-shadow: none !important;
}

.romance-fx {
  contain: strict;
}

/* Mobile: fewer moving layers, slower animation. */
@media (max-width: 700px) {
  .film-row.reveal.in figure img,
  .collage-grid.reveal.in img,
  .journey-photos img.reveal.in,
  .family-grid img.reveal.in,
  .family-portrait.reveal.in {
    animation-duration: 18s !important;
  }

  .hero-image {
    animation-duration: 24s !important;
  }

  .finale-image {
    animation-duration: 26s !important;
  }

  /* The videos stay smooth by avoiding extra filters. */
  .cinema-video,
  .home-video {
    filter: none !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-row img,
  .collage-grid img,
  .journey-photos img,
  .family-grid img,
  .family-portrait,
  .hero-image,
  .finale-image {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   PASSWORD PAGE CENTER + ELEGANT DETAIL
   ========================================================= */
.password-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.password-card h1,
.password-kicker,
.password-copy,
.password-error {
  text-align: center !important;
}

.password-card h1 {
  width: 100%;
}

.password-copy {
  width: min(100%, 34ch);
  max-width: 34ch;
  margin: 0 auto 1.1rem !important;
  position: relative;
  z-index: 1;
  line-height: 1.78 !important;
}

.password-copy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 2.2rem);
  height: 2.9rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255,255,255,.05), rgba(255,255,255,0) 72%);
  filter: blur(8px);
  opacity: .75;
  pointer-events: none;
  animation: passwordCopyGlow 4.8s ease-in-out infinite;
}

.password-note-design {
  width: min(100%, 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 0 auto 1.55rem;
  opacity: .9;
}

.password-note-design span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform-origin: center;
  animation: passwordLineBreath 4s ease-in-out infinite;
}

.password-note-design i {
  font-style: normal;
  font-size: .95rem;
  color: rgba(247,234,238,.95);
  text-shadow: 0 0 10px rgba(255,215,227,.16);
  animation: passwordHeartFloat 3.2s ease-in-out infinite;
}

#passwordForm {
  width: min(100%, 520px);
}

#passwordInput {
  text-align: left;
}

@keyframes passwordCopyGlow {
  0%,100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes passwordHeartFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: .82; }
  50% { transform: translateY(-4px) scale(1.08); opacity: 1; }
}

@keyframes passwordLineBreath {
  0%,100% { opacity: .45; transform: scaleX(.9); }
  50% { opacity: .9; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .password-copy {
    width: min(100%, 28ch);
    font-size: .97rem !important;
  }

  .password-note-design {
    width: min(100%, 220px);
    margin-bottom: 1.25rem;
  }
}