/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --bg:            #130C0F;
  --bg-soft:       #1C1215;
  --paper:         #FBF1E7;
  --paper-dim:     #F3E5E1;
  --burgundy:      #3A1620;
  --burgundy-deep: #24090F;
  --rose:          #B85C72;
  --rose-soft:     #E8A9B8;
  --pink:          #F2A7B8;
  --gold:          #C9A165;
  --ink:           #2A1418;
  --ink-soft:      #5B3A41;
  --line:          rgba(247,238,240,0.14);

  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body:    "Manrope", -apple-system, sans-serif;
  --font-hand:    "Caveat", cursive;

  --container: 720px;
  --edge: clamp(20px, 6vw, 64px);

  --ease: cubic-bezier(.22,.68,0,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; }
::selection{ background: var(--rose); color: var(--burgundy-deep); }

.section{
  position: relative;
  padding: clamp(72px, 14vh, 160px) var(--edge);
  max-width: var(--container);
  margin: 0 auto;
}
.section--wide{ max-width: 980px; }
.eyebrow{
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--rose-soft);
  letter-spacing: 0.02em;
  margin: 0 0 6px 2px;
}
h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
  margin: 0;
  letter-spacing: -0.01em;
}
h2{ font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 1.15; }
p{ margin: 0 0 1em; }

/* subtle warm atmosphere behind everything */
.atmosphere{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(184,92,114,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(58,22,32,0.35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(201,161,101,0.06), transparent 60%),
    var(--bg);
}
.grain{
  position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* floating hearts (cursor + click bursts) */
.floating-heart{
  position: fixed; z-index: 999; pointer-events:none;
  font-size: 16px; color: var(--rose-soft);
  animation: float-up 1.6s ease-out forwards;
}
@keyframes float-up{
  0%{ transform: translateY(0) scale(0.6) rotate(0deg); opacity:0; }
  15%{ opacity:0.9; }
  100%{ transform: translateY(-120px) scale(1) rotate(var(--rot,10deg)); opacity:0; }
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible{ opacity:1; transform: none; }
.reveal-delay-1{ transition-delay: 0.08s; }
.reveal-delay-2{ transition-delay: 0.16s; }
.reveal-delay-3{ transition-delay: 0.24s; }

/* generic small heart mark */
.mark{ color: var(--rose-soft); }

/* buttons — human language, tactile */
.btn{
  display: inline-flex; align-items:center; gap:8px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.btn:hover{ transform: translateY(-2px); border-color: var(--rose-soft); background: rgba(232,169,184,0.06); }
.btn:active{ transform: translateY(0) scale(0.97); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: var(--edge);
  position: relative;
}
.hero__eyebrow{
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--rose-soft);
  margin-bottom: 4px;
}
.hero__title{
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 7vw, 4.4rem);
  color: var(--paper);
  line-height: 1.08;
  max-width: 14ch;
}
.hero__subtitle{
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--paper-dim);
  max-width: 42ch;
  margin: 20px 0 0;
  opacity: 0.85;
}
.hero__scroll{
  position:absolute; bottom: clamp(24px,6vh,56px);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  color: var(--rose-soft);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(8px);} }
.hero__scroll::after{
  content:""; width:1px; height:32px;
  background: linear-gradient(var(--rose-soft), transparent);
}

/* little ambient sparkle dots in hero */
.sparkle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--gold); opacity:0.5;
  animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:0.15; transform:scale(0.8);} 50%{ opacity:0.7; transform:scale(1.3);} }

/* ============================================================
   OPENING NOTE — handwritten-feeling, left-asymmetric
   ============================================================ */
.note{
  max-width: 580px;
}
.note__lines p{
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--paper);
  font-weight: 400;
  line-height: 1.55;
}
.note__lines p:first-child{ font-family: var(--font-hand); font-size: 2rem; color: var(--rose-soft); }
.note__signoff{
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--rose-soft);
  margin-top: 18px;
  text-align: right;
}

/* ============================================================
   COMPLIMENTS — asymmetric little notes, tap to "open"
   ============================================================ */
.compliments-head{ margin-bottom: 44px; }
.compliments-head .eyebrow{ margin-bottom: 8px; }
.compliment-list{
  display:flex; flex-direction:column; gap: 18px;
}
.compliment{
  position: relative;
  background: linear-gradient(180deg, rgba(251,241,231,0.03), rgba(251,241,231,0.015));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 24px;
  cursor: default;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease);
}
.compliment:nth-child(3n+1){ margin-right: 6%; }
.compliment:nth-child(3n+2){ margin-left: 6%; }
.compliment:hover{ border-color: rgba(232,169,184,0.35); transform: translateY(-2px); background: rgba(251,241,231,0.045); }
.compliment__index{
  font-family: var(--font-hand);
  color: var(--rose-soft);
  font-size: 1.1rem;
  opacity: 0.7;
  margin-right: 4px;
}
.compliment__text{
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.08rem;
  line-height: 1.55;
  display:inline;
}
.compliment__note{
  display:block;
  font-family: var(--font-hand);
  color: var(--gold);
  font-size: 1.15rem;
  margin-top: 8px;
}

/* ============================================================
   TIMELINE / MEMORIES — pinboard feel
   ============================================================ */
.timeline{
  position: relative;
  padding-left: 28px;
  margin-top: 40px;
}
.timeline::before{
  content:"";
  position:absolute; left: 4px; top: 6px; bottom: 6px; width:1px;
  background: linear-gradient(var(--line), var(--rose), var(--line));
  opacity: 0.5;
}
.memory{
  position: relative;
  margin-bottom: 56px;
  padding-left: 24px;
}
.memory::before{
  content:""; position:absolute; left:-28px; top: 6px;
  width:9px; height:9px; border-radius:50%;
  background: var(--rose-soft);
  box-shadow: 0 0 0 4px rgba(232,169,184,0.12);
}
.memory:last-child{ margin-bottom: 0; }
.memory__date{
  font-family: var(--font-hand);
  color: var(--rose-soft);
  font-size: 1.2rem;
}
.memory__title{
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1.3rem;
  margin: 2px 0 8px;
}
.memory__text{ color: var(--paper-dim); opacity: 0.85; max-width: 52ch; }
.memory__frame{
  margin-top: 14px;
  width: 220px; max-width: 60vw;
  aspect-ratio: 4/5;
  border-radius: 4px;
  transform: rotate(var(--rot, -2deg));
  transition: transform 0.35s var(--ease);
}
.memory:nth-child(even) .memory__frame{ --rot: 2deg; }
.memory__frame:hover{ transform: rotate(0deg) scale(1.03); }
.memory__frame img{ width:100%; height:100%; object-fit:cover; border-radius:4px; box-shadow: 0 14px 30px rgba(0,0,0,0.45); }
.memory__frame--empty{
  display:flex; align-items:center; justify-content:center;
  border: 1.5px dashed rgba(232,169,184,0.35);
  background: rgba(251,241,231,0.02);
  color: var(--rose-soft);
  font-family: var(--font-hand);
  font-size: 1rem;
  text-align:center;
  padding: 12px;
  box-shadow: none;
}

/* placeholder text styling — visually distinct, dashed underline */
.placeholder{
  border-bottom: 1.5px dashed rgba(232,169,184,0.4);
  padding-bottom: 1px;
}

/* ============================================================
   LITTLE THINGS — tap to reveal
   ============================================================ */
.little-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.little-card{
  background: rgba(251,241,231,0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  min-height: 128px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.little-card:hover{ transform: translateY(-3px); border-color: rgba(232,169,184,0.35); }
.little-card:active{ transform: scale(0.98); }
.little-card__prompt, .little-card__reveal{
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: var(--paper);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.little-card__reveal{
  position:absolute; inset: 18px;
  display:flex; align-items:center; justify-content:center;
  color: var(--rose-soft);
  opacity:0; transform: translateY(8px) scale(0.98);
}
.little-card.is-open .little-card__prompt{ opacity:0; transform: translateY(-8px) scale(0.98); }
.little-card.is-open .little-card__reveal{ opacity:1; transform: none; }

/* ============================================================
   COMFORT SECTION — calm, minimal, low motion
   ============================================================ */
.comfort{
  background: linear-gradient(180deg, transparent, rgba(58,22,32,0.35), transparent);
}
.comfort__inner{
  max-width: 520px; margin: 0 auto; text-align:center;
}
.comfort h2{ font-size: clamp(1.6rem, 4vw, 2.1rem); }
.comfort p{
  color: var(--paper-dim);
  font-size: 1.05rem;
  opacity: 0.9;
}
.comfort__closing{
  font-family: var(--font-hand);
  color: var(--rose-soft);
  font-size: 1.4rem;
  margin-top: 12px;
}
.breathe{
  width: 64px; height:64px; margin: 28px auto;
  border-radius: 50%;
  border: 1px solid rgba(232,169,184,0.4);
  position: relative;
}
.breathe::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,169,184,0.35), transparent 70%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform: scale(0.7); opacity:0.5; } 50%{ transform: scale(1); opacity:1; } }

/* ============================================================
   BUCKET LIST
   ============================================================ */
.bucket-list{ margin-top: 32px; display:flex; flex-direction:column; gap:2px; }
.bucket-item{
  display:flex; align-items:baseline; gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.bucket-item__mark{
  font-family: var(--font-hand); color: var(--rose-soft); font-size: 1.3rem; flex-shrink:0;
}
.bucket-item__text{ font-family: var(--font-display); color: var(--paper); font-size: 1.08rem; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.gallery-item{
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow:hidden;
  position: relative;
  transform: rotate(var(--rot,0deg));
  transition: transform 0.3s var(--ease);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.gallery-item:nth-child(5n+1){ --rot: -2deg; }
.gallery-item:nth-child(5n+2){ --rot: 1.5deg; }
.gallery-item:nth-child(5n+3){ --rot: -1deg; }
.gallery-item:nth-child(5n+4){ --rot: 2deg; }
.gallery-item:hover{ transform: rotate(0deg) scale(1.04); z-index: 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item--empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border: 1.5px dashed rgba(232,169,184,0.3);
  background: rgba(251,241,231,0.02);
  box-shadow:none;
  color: var(--rose-soft);
  font-family: var(--font-hand);
  font-size: 1rem;
  text-align:center;
  padding: 10px;
}
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 18px 10px 8px;
  background: linear-gradient(transparent, rgba(18,12,15,0.85));
  color: var(--paper);
  font-family: var(--font-hand);
  font-size: 1rem;
  opacity:0; transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:none; }

/* ============================================================
   FINAL LETTER — paper card, most intimate section
   ============================================================ */
.letter-wrap{ display:flex; justify-content:center; }
.letter{
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  padding: clamp(32px, 6vw, 56px);
  max-width: 620px;
  width:100%;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 2px 0 rgba(0,0,0,0.05);
  transform: rotate(-0.6deg);
  position: relative;
}
.letter::before{
  content:"";
  position:absolute; top:-10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width:70px; height:24px;
  background: rgba(201,161,101,0.35);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.letter__title{
  font-family: var(--font-hand);
  font-size: 2rem;
  color: var(--burgundy);
  margin-bottom: 18px;
}
.letter p{
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-line;
}
.letter p:last-of-type{
  margin-top: 26px;
  font-family: var(--font-hand);
  font-size: 1.5rem;
  color: var(--burgundy);
}

/* ============================================================
   ENDING
   ============================================================ */
.ending{
  text-align:center;
  padding-bottom: clamp(100px, 18vh, 200px);
}
.ending__line1{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--paper);
}
.ending__line2{
  color: var(--paper-dim); opacity:0.75; margin-top: 10px;
}
.ending__signature{
  display:block; margin-top: 4px;
  font-family: var(--font-hand);
  font-size: 1.8rem;
  color: var(--rose-soft);
}
.ending__heart{
  margin-top: 32px;
  display:inline-block;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.ending__heart:hover{ transform: scale(1.2); }
.ending__secret{
  margin-top: 14px;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--gold);
  opacity:0;
  transition: opacity 0.4s var(--ease);
}
.ending__secret.is-shown{ opacity:1; }

/* footer note */
.footer-note{
  text-align:center;
  font-family: var(--font-hand);
  color: var(--rose-soft);
  opacity: 0.5;
  font-size: 1rem;
  padding: 24px var(--edge) 48px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px){
  .section{ padding: clamp(56px, 12vh, 100px) var(--edge); }
  .compliment:nth-child(3n+1), .compliment:nth-child(3n+2){ margin-left:0; margin-right:0; }
  .little-grid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .letter{ transform: rotate(0deg); }
  .memory__frame{ width: 170px; }
}