/* ── BASE ──────────────────────────────────────────────────
   Reset, CSS variables, grain overlay, section backgrounds
─────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #fdf0eb;
  --bg2:        #fae4dc;
  --bg3:        #f5d6cc;
  --petal:      #e8a99a;
  --rose:       #d4786a;
  --gold:       #c9956a;
  --blush:      #f0c4b8;
  --text-dark:  #3a1f1a;
  --text-mid:   #6b3530;
  --text-light: #a06060;
  --cream:      #fdf8f4;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  background: var(--bg);
  color: var(--text-dark);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

.hidden { display: none !important; }

section.snap     { scroll-snap-align: start; min-height: 100svh; position: relative; }
section.snap-off { scroll-snap-align: none;  min-height: 100svh; position: relative; }

/* Grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* Section backgrounds */
.sec-hero    { background: linear-gradient(175deg, var(--bg)  0%, var(--bg2)    100%); }
.sec-letter1 { background: linear-gradient(165deg, var(--bg2) 0%, #f7ddd5        100%); }
.sec-letter2 { background: linear-gradient(168deg, #f7ddd5   0%, var(--bg3)     100%); }
.sec-letter3 { background: linear-gradient(170deg, var(--bg3) 0%, var(--bg2)    100%); }
.sec-photos  { background: linear-gradient(165deg, var(--bg2) 0%, var(--bg)     100%); }
.sec-secret  { background: linear-gradient(170deg, #f0d0c8   0%, #e8b8a8        100%); }
.sec-choice  { background: linear-gradient(175deg, var(--bg)  0%, var(--bg2)    100%); }

/* Main page fade-in */
#main-page { position: relative; z-index: 2; }
#main-page.fade-in { animation: pgIn 1.6s ease forwards; }
@keyframes pgIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}