/* ==========================================================
   FOR WINA — personal digital love letter
   Tokens
   ========================================================== */
:root{
  --ivory:      #FAF6F0;
  --ivory-2:    #F3ECE2;
  --blush:      #F1D6D6;
  --rose:       #B4707A;
  --rose-deep:  #8C4F5A;
  --charcoal:   #2A2220;
  --charcoal-2: #3B302C;
  --gold:       #C7A468;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1080px;
  --gutter: 24px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
button{ font-family: inherit; cursor:pointer; background:none; border:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-family: var(--font-display); }

.heart{ color: var(--rose); }

.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 10px;
  font-weight: 600;
}

.section-title{
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -.01em;
}

.section-head{ margin-bottom: 44px; max-width: 620px; }
.section-head.center{ margin-inline:auto; text-align:center; }

/* ==========================================================
   Reveal-on-scroll
   ========================================================== */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================
   Floating petals (decorative, restrained)
   ========================================================== */
.petals{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.petal{
  position: absolute;
  top: -5%;
  width: 8px;
  height: 10px;
  border-radius: 60% 5% 60% 5%;
  background: var(--rose);
  opacity: .28;
  animation: fall linear infinite;
  will-change: transform;
}
@keyframes fall{
  0%{ transform: translate(0,0) rotate(0deg); }
  100%{ transform: translate(var(--drift,20px), 115vh) rotate(220deg); }
}
@media (prefers-reduced-motion: reduce){
  .petal{ display:none; }
}

/* ==========================================================
   1. OPENING SCREEN
   ========================================================== */
.opening{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(199,164,104,.16), transparent 55%),
    linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal-2) 100%);
  color: var(--ivory);
  transition: opacity 1.1s var(--ease), visibility 1.1s var(--ease);
}
.opening.is-closed{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.opening__seal{
  width: 64px; height: 64px;
  margin-bottom: 26px;
  position: relative;
}
.opening__ring{
  position:absolute; inset:0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: .8;
}
.opening__ring::before{
  content:"♡";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold);
  font-size: 20px;
}

.opening__eyebrow{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
  font-weight: 600;
}
.opening__name{
  font-size: clamp(48px, 12vw, 96px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.opening__meta{
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(250,246,240,.65);
  margin-bottom: 22px;
}
.opening__dot{ margin: 0 8px; color: var(--gold); }
.opening__line{
  max-width: 380px;
  font-size: 16px;
  color: rgba(250,246,240,.85);
  margin-bottom: 40px;
  font-family: var(--font-display);
  font-style: italic;
}

.opening__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--ivory);
  font-size: 14px;
  letter-spacing: .04em;
  background: rgba(199,164,104,.08);
  transition: background .35s var(--ease), transform .35s var(--ease), opacity .3s ease;
}
.opening__btn:hover:not([disabled]){ background: rgba(199,164,104,.2); transform: translateY(-2px); }
.opening__btn:active:not([disabled]){ transform: translateY(0); }
.opening__btn[disabled]{
  opacity: 0.5;
  cursor: not-allowed;
  border-color: rgba(199,164,104, 0.4);
}
.opening__heart{ color: var(--gold); }

.countdown{
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 16px;
}

/* ==========================================================
   MAIN SITE
   ========================================================== */
.site{
  visibility: hidden;
}
.site.is-open{ visibility: visible; }

section{
  padding: 96px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

/* ---------- 2. HERO ---------- */
.hero{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding-top: 64px;
  align-items: center;
}
.hero__frame{
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--ivory-2);
  position: relative;
}
.hero__frame img, .hero__frame video{ width:100%; height:100%; object-fit: cover; }
.hero__frame::after{
  content:"";
  position:absolute; inset:0;
  border: 1px solid rgba(42,34,32,.08);
  pointer-events:none;
}
.hero__text{ text-align: left; }
.hero__title{
  font-size: clamp(32px, 6vw, 54px);
  font-weight: 500;
  line-height: 1.15;
  margin: 6px 0 18px;
}
.hero__sub{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--rose-deep);
  margin-bottom: 22px;
}
.hero__message{
  max-width: 440px;
  color: var(--charcoal-2);
  font-size: 16px;
}

/* image-missing graceful placeholder */
.img-missing{
  background: linear-gradient(135deg, var(--ivory-2), var(--blush));
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-missing img{ display:none; }
.img-missing::before{
  content: "photo coming soon";
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--rose-deep);
  opacity:.7;
}

/* ---------- 3. GALLERY ---------- */
.gallery__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.gallery__item{
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: var(--ivory-2);
  cursor: zoom-in;
}
.gallery__item:nth-child(5){ grid-column: 1 / -1; aspect-ratio: 16/9; }
.gallery__item img{
  width:100%; height:100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.gallery__item:hover img{ transform: scale(1.06); }
.gallery__item::after{
  content: attr(data-caption);
  position: absolute; left:0; right:0; bottom:0;
  padding: 14px 14px 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--ivory);
  background: linear-gradient(180deg, transparent, rgba(20,15,14,.72));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery__item:hover::after,
.gallery__item:focus-visible::after{ opacity:1; transform:translateY(0); }
.gallery__item.img-missing::before{ content: "photo coming soon"; }

/* lightbox */
.lightbox{
  position: fixed; inset:0; z-index: 80;
  background: rgba(24,18,16,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity:0; visibility:hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-active{ opacity:1; visibility:visible; }
.lightbox__figure{ max-width: 90vw; max-height: 86vh; text-align:center; }
.lightbox__figure img{
  max-width: 90vw; max-height: 76vh;
  border-radius: 4px;
  margin: 0 auto;
}
.lightbox__figure figcaption{
  color: var(--ivory);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  margin-top: 14px;
  opacity:.85;
}
.lightbox__close{
  position: absolute; top: 22px; right: 22px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(250,246,240,.35);
  color: var(--ivory);
  font-size: 16px;
}

/* ---------- 4. OUR STORY ---------- */
.story{
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.story__frame{
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--ivory-2);
}
.story__frame img{ width:100%; height:100%; object-fit: cover; }
.story__text{
  font-size: 17px;
  color: var(--charcoal-2);
  max-width: 560px;
}

/* ---------- 5. LITTLE THINGS ---------- */
.little-things{
  background: var(--blush);
  border-radius: 8px;
  margin: 96px var(--gutter);
  padding: 72px 40px;
}
.little-things__list{
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 4px;
}
.little-things__list li{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3.2vw, 28px);
  color: var(--rose-deep);
  padding: 16px 0;
  border-bottom: 1px solid rgba(140,79,90,.18);
  text-align: center;
}
.little-things__list li:last-child{ border-bottom:none; }

/* ---------- 6. TIMELINE ---------- */
.timeline__list{
  position: relative;
  padding-left: 28px;
  border-left: 1px solid rgba(180,112,122,.35);
  max-width: 620px;
}
.timeline__item{ position: relative; padding-bottom: 40px; }
.timeline__item:last-child{ padding-bottom: 0; }
.timeline__item::before{
  content:"";
  position: absolute; left: -33px; top: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline__year{
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.timeline__text{ color: var(--charcoal-2); font-size: 16px; }

/* ---------- 7. BIRTHDAY LETTER ---------- */
.letter{ background: var(--ivory-2); }
.letter__card{
  max-width: 640px;
  margin: 0 auto;
  background: var(--ivory);
  padding: clamp(36px, 6vw, 72px);
  border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(42,34,32,.18);
  position: relative;
}
.letter__card::before{
  content:"";
  position:absolute; top:0; left: 40px; right: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.letter__salutation{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 4vw, 32px);
  margin-bottom: 26px;
  color: var(--rose-deep);
}
.letter__body{
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.85;
  color: var(--charcoal-2);
  white-space: pre-line;
  margin-bottom: 30px;
}
.letter__sign{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--rose);
}

/* ---------- 8. PHOTO + QUOTE ---------- */
.quote{
  max-width: none;
  padding: 0;
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.quote__bg{ position:absolute; inset:0; }
.quote__bg img{ width:100%; height:100%; object-fit: cover; }
.quote__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(30,22,20,.35), rgba(30,22,20,.72));
}
.quote__overlay{
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 0 28px;
  text-align: center;
}
.quote__text{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 4.4vw, 36px);
  color: var(--ivory);
  line-height: 1.4;
}

/* ---------- 9. WISHES ---------- */
.wishes__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 680px;
  margin: 0 auto;
}
.wishes__item{
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 20px);
  color: var(--charcoal);
  border: 1px solid rgba(180,112,122,.3);
  border-radius: 4px;
  padding: 26px 20px;
  text-align: center;
}

/* ---------- 10. FINAL ---------- */
.final{
  max-width: none;
  padding: 0;
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.final__bg{ position:absolute; inset:0; }
.final__bg img{ width:100%; height:100%; object-fit: cover; }
.final__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(30,22,20,.55), rgba(30,22,20,.85));
}
.final__content{
  position: relative; z-index: 2;
  text-align: center;
  color: var(--ivory);
  max-width: 560px;
  padding: 0 28px;
}
.final__title{
  font-size: clamp(26px, 4.4vw, 38px);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 22px;
}
.final__message{
  font-size: 17px;
  color: rgba(250,246,240,.9);
  margin-bottom: 40px;
}
.final__birthday{
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  margin-bottom: 26px;
}
.final__love{ font-size: 14px; color: rgba(250,246,240,.7); margin-bottom: 4px; }
.final__name{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}

/* ==========================================================
   MUSIC TOGGLE
   ========================================================== */
.music-toggle{
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 40;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -10px rgba(42,34,32,.5);
  border: 1px solid rgba(199,164,104,.5);
}
.music-toggle__ring{
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
}
.music-toggle.is-playing .music-toggle__ring{
  opacity: .6;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(.9); opacity:.55; }
  100%{ transform: scale(1.25); opacity:0; }
}
.icon{ width: 18px; height: 18px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 760px){
  .hero{ grid-template-columns: 0.9fr 1fr; }
  .story{ grid-template-columns: 1fr 1fr; align-items: center; }
  .story:nth-of-type(odd) .story__media{ order: 2; }
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery__item:nth-child(5){ grid-column: 1 / -1; aspect-ratio: 21/9; }
  section{ padding: 128px var(--gutter); }
  .little-things{ margin: 128px auto; }
}

@media (max-width: 480px){
  .wishes__grid{ grid-template-columns: 1fr; }
  .opening__name{ font-size: 15vw; }
  section{ padding: 72px 20px; }
  .little-things{ padding: 56px 24px; margin: 72px 16px; }
}