* { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --pink: #f9a8c9;
    --pink-light: #fde8f2;
    --pink-deep: #e9729c;
    --rose: #f7c5d8;
    --cream: #fff8f5;
    --text-dark: #3a1f2e;
    --text-mid: #7a4060;
    --text-soft: #b07090;
  }

  html { scroll-behavior: smooth; }

  body {
    background: var(--cream);
    font-family: 'Lato', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ── MUSIC BUTTON ── */
  #music-btn {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 999;
    background: rgba(255,255,255,0.85);
    border: 1.5px solid var(--pink);
    color: var(--text-mid);
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    padding: 8px 16px;
    border-radius: 30px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.3s;
  }
  #music-btn:hover { background: var(--pink-light); }

  /* ── HERO ── */
  #hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
  }

  .hero-collage {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .collage-img {
    position: absolute;
    border-radius: 12px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.7);
    box-shadow: 0 8px 30px rgba(180,80,120,0.18);
    transition: transform 0.4s;
  }

  /* collage layout - scattered, slightly rotated */
  .collage-img:nth-child(1)  { width: 180px; height: 220px; top: 5%;  left: 2%;   transform: rotate(-7deg);  opacity: 0.45; }
  .collage-img:nth-child(2)  { width: 150px; height: 190px; top: 20%; left: 12%;  transform: rotate(4deg);   opacity: 0.40; }
  .collage-img:nth-child(3)  { width: 160px; height: 200px; top: 55%; left: 3%;   transform: rotate(-3deg);  opacity: 0.45; }
  .collage-img:nth-child(4)  { width: 140px; height: 175px; top: 70%; left: 18%;  transform: rotate(6deg);   opacity: 0.38; }
  .collage-img:nth-child(5)  { width: 170px; height: 210px; top: 5%;  right: 3%;  transform: rotate(6deg);   opacity: 0.45; }
  .collage-img:nth-child(6)  { width: 145px; height: 185px; top: 22%; right: 13%; transform: rotate(-5deg);  opacity: 0.40; }
  .collage-img:nth-child(7)  { width: 165px; height: 205px; top: 55%; right: 2%;  transform: rotate(4deg);   opacity: 0.45; }
  .collage-img:nth-child(8)  { width: 140px; height: 170px; top: 72%; right: 17%; transform: rotate(-6deg);  opacity: 0.38; }
  .collage-img:nth-child(9)  { width: 130px; height: 165px; top: 3%;  left: 38%;  transform: rotate(3deg);   opacity: 0.30; }
  .collage-img:nth-child(10) { width: 128px; height: 162px; top: 78%; left: 42%;  transform: rotate(-4deg);  opacity: 0.30; }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(253,232,242,0.82) 0%, rgba(255,248,245,0.70) 60%, rgba(255,248,245,0.50) 100%);
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 640px;
  }

  .cake-emoji {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 24px;
    display: block;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 8vw, 88px);
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.1;
    letter-spacing: -0.5px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease forwards 0.3s;
  }

  .hero-title span {
    color: var(--pink-deep);
    font-style: italic;
  }

  .hero-sub {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: clamp(15px, 2.5vw, 20px);
    color: var(--text-mid);
    margin-top: 20px;
    letter-spacing: 0.08em;
    opacity: 0;
    animation: fadeUp 1s ease forwards 0.7s;
  }

  .hero-hearts {
    margin-top: 36px;
    font-size: 22px;
    letter-spacing: 8px;
    opacity: 0;
    animation: fadeUp 1s ease forwards 1.1s;
  }

  .scroll-hint {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    opacity: 0;
    animation: fadeUp 1s ease forwards 1.5s;
  }

  .scroll-hint span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--text-soft);
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .scroll-arrow {
    width: 18px;
    height: 18px;
    border-right: 1.5px solid var(--pink-deep);
    border-bottom: 1.5px solid var(--pink-deep);
    transform: rotate(45deg);
    margin: 0 auto;
    animation: bounce 1.5s ease-in-out infinite;
  }

  @keyframes bounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(5px); }
  }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── MESSAGE SECTION ── */
  #message {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--cream) 0%, #fff5fa 40%, #fff5fa 80%, var(--cream) 100%);
    position: relative;
  }

  .message-layout {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 40px;
    padding: 0 30px;
    align-items: start;
  }

  /* ── FLOAT KEYFRAMES (8 variants so each photo bobs independently) ── */
  @keyframes floatA { 0%,100%{transform:var(--rot) translateY(0px)}    50%{transform:var(--rot) translateY(-10px)} }
  @keyframes floatB { 0%,100%{transform:var(--rot) translateY(-5px)}   50%{transform:var(--rot) translateY(6px)}  }
  @keyframes floatC { 0%,100%{transform:var(--rot) translateY(0px)}    50%{transform:var(--rot) translateY(-8px)} }
  @keyframes floatD { 0%,100%{transform:var(--rot) translateY(-4px)}   50%{transform:var(--rot) translateY(7px)}  }

  /* Photo strips */
  .photo-strip {
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: sticky;
    top: 60px;
  }

  /* Polaroid card */
  .strip-photo {
    background: #fff;
    padding: 10px 10px 32px 10px;   /* thick bottom = Polaroid border */
    box-shadow: 0 6px 28px rgba(100,40,70,0.18), 0 1px 4px rgba(0,0,0,0.08);
    opacity: 0;
    position: relative;
  }

  /* Fade-in from side before animation kicks in */
  .photo-strip.left  .strip-photo { transform: translateX(-30px); }
  .photo-strip.right .strip-photo { transform: translateX(30px);  }

  /* Per-card rotation & float — assigned via JS */
  .strip-photo.visible {
    opacity: 1;
    animation-play-state: running;
  }

  /* When not yet visible, pause float */
  .strip-photo { animation-play-state: paused; }

  .strip-photo:hover {
    box-shadow: 0 16px 44px rgba(180,80,120,0.30), 0 2px 6px rgba(0,0,0,0.10);
    z-index: 10;
  }

  .strip-photo img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
  }

  /* Faint pencil caption area at Polaroid bottom */
  .strip-photo::after {
    content: '♡';
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #e9b0c8;
    letter-spacing: 4px;
  }

  /* Message center */
  .message-center {
    max-width: 580px;
    margin: 0 auto;
  }

  .message-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-soft);
    text-align: center;
    margin-bottom: 40px;
  }

  .letter-line {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.9;
    color: var(--text-dark);
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .letter-line.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .letter-line.opening {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-style: italic;
    color: var(--pink-deep);
    margin-bottom: 32px;
  }

  .letter-line.closing {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    color: var(--pink-deep);
    margin-top: 16px;
  }

  .message-divider {
    width: 60px;
    height: 1.5px;
    background: var(--pink);
    margin: 36px auto;
    opacity: 0;
    transition: opacity 0.6s;
  }

  .message-divider.visible { opacity: 1; }

  /* ── FINAL SECTION ── */
  #finale {
    padding: 120px 20px 100px;
    text-align: center;
    background: var(--cream);
    position: relative;
    overflow: hidden;
  }

  .finale-bg-petals {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .petal {
    position: absolute;
    font-size: 22px;
    opacity: 0.18;
    animation: petalFall linear infinite;
  }

  @keyframes petalFall {
    0%   { transform: translateY(-40px) rotate(0deg); opacity: 0.18; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
  }

  .dog-photo-wrap {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .dog-photo-wrap.visible {
    opacity: 1;
    transform: scale(1);
  }

  .dog-photo-ring {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 6px solid var(--pink);
    padding: 6px;
    background: white;
    box-shadow: 0 16px 60px rgba(180,80,120,0.22);
    overflow: hidden;
    margin: 0 auto;
    position: relative;
  }

  .dog-photo-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

  .dog-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #fde8f2, #f9a8c9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: white;
  }

  .dog-placeholder p {
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    color: rgba(255,255,255,0.85);
    margin-top: 8px;
    letter-spacing: 0.1em;
  }

  .finale-caption {
    font-family: 'Playfair Display', serif;
    font-size: clamp(22px, 4vw, 32px);
    font-style: italic;
    color: var(--text-dark);
    margin-top: 44px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
  }

  .finale-caption.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .finale-tagline {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--text-soft);
    margin-top: 14px;
    opacity: 0;
    transition: opacity 0.7s ease 0.5s;
  }

  .finale-tagline.visible { opacity: 1; }

  .finale-hearts {
    margin-top: 40px;
    font-size: 28px;
    letter-spacing: 10px;
    opacity: 0;
    transition: opacity 0.7s ease 0.7s;
  }

  .finale-hearts.visible { opacity: 1; }

  /* ── RESPONSIVE ── */
  @media (max-width: 860px) {
    .message-layout {
      grid-template-columns: 1fr;
    }
    .photo-strip {
      display: none;
    }
    .message-center {
      max-width: 100%;
    }
  }