/* ── Variables ── */
:root {
  --blush:     #f9c6cf;
  --blush-mid: #f4a8b5;
  --cream:     #fdf6f0;
  --cream-dk:  #f5e8dc;
  --rose:      #c9a08a;
  --rose-dk:   #a6705a;
  --text:      #3d2b24;
  --text-soft: #7a5c52;
  --white:     #fffaf7;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   SCENE 1 — HERO
══════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, #fff0f3 0%, var(--cream) 60%, #f9ede6 100%);
}

.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
}
.hero::before {
  width: 55vw; height: 55vw;
  background: var(--blush);
  top: -10vw; right: -10vw;
}
.hero::after {
  width: 40vw; height: 40vw;
  background: #fde2b5;
  bottom: 5vw; left: -8vw;
}

/* ── Egg scene ── */
.egg-scene {
  position: relative;
  width: 160px;
  height: 200px;
  margin-bottom: 36px;
  z-index: 2;
}

.egg-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Egg wobble before cracking */
.egg-svg {
  animation: egg-wobble 0.6s ease-in-out 0.5s 3;
}

/* Top shell lifts up and tilts */
.shell-top-half {
  transform-origin: 80px 96px;
  animation: shell-lift 1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: 2.2s;
}

/* Crack paths: draw on via stroke-dashoffset */
.crack {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: crack-draw 0.5s ease-out forwards;
}
.c1 { stroke-dasharray: 52;  stroke-dashoffset: 52;  animation-delay: 1.3s; }
.c2 { stroke-dasharray: 42;  stroke-dashoffset: 42;  animation-delay: 1.55s; }
.c3 { stroke-dasharray: 30;  stroke-dashoffset: 30;  animation-delay: 1.75s; }
.c4 { stroke-dasharray: 18;  stroke-dashoffset: 18;  animation-delay: 1.9s; }
.c5 { stroke-dasharray: 18;  stroke-dashoffset: 18;  animation-delay: 2.0s; }

/* Cracks fade out as shell lifts */
.cracks {
  animation: cracks-fade 0.6s ease-out forwards;
  animation-delay: 2.6s;
}

/* Baby: hidden, pops in centered after shell is gone */
.baby-reveal {
  opacity: 0;
  animation: baby-pop 0.7s cubic-bezier(.34,1.4,.64,1) forwards;
  animation-delay: 3.0s;
}

.eye-l, .eye-r {
  transition: ry 0.08s ease;
}

/* ── Hero text ── */
.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 28px;
}
.hero-eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rose);
  opacity: 0;
  animation: fade-up .8s ease forwards;
  animation-delay: .3s;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 10vw, 4rem);
  line-height: 1.08;
  color: var(--text);
  margin-top: 8px;
  opacity: 0;
  animation: fade-up .9s ease forwards;
  animation-delay: .55s;
}
.hero-title em {
  font-style: italic;
  color: var(--rose-dk);
}
.hero-sub {
  font-size: .88rem;
  color: var(--text-soft);
  margin-top: 14px;
  letter-spacing: .04em;
  opacity: 0;
  animation: fade-up .9s ease forwards;
  animation-delay: .8s;
}

/* ── Scroll arrow ── */
.scroll-arrow {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 2;
  opacity: 0;
  animation: fade-up .6s ease forwards;
  animation-delay: 1s;
  cursor: pointer;
}
.scroll-arrow span {
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--rose);
}
.scroll-arrow svg {
  width: 22px;
  height: 22px;
  stroke: var(--rose);
  animation: bounce 2s ease-in-out 1.6s infinite;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══════════════════════════════════════
   SCENE 2 — LETTER
══════════════════════════════════════ */
.letter-section {
  background: var(--white);
  padding: 72px 0 96px;
  position: relative;
  overflow: hidden;
}

.letter-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,160,138,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.letter-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.photo-hero {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 20px;
  border: 2px dashed var(--blush-mid);
  background: linear-gradient(135deg, #fff0f3 0%, #fdf0ea 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 56px;
  color: var(--rose);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 8px 32px rgba(201,160,138,.15);
}
.photo-hero svg { width: 32px; height: 32px; stroke: var(--blush-mid); fill: none; stroke-width: 1.5; }
.photo-hero img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }

.letter-date {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 6px;
}
.letter-to {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 32px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--blush-mid), transparent);
}
.divider-heart { color: var(--blush-mid); font-size: 1rem; }

.letter-body {
  font-size: clamp(.95rem, 3.5vw, 1.05rem);
  line-height: 1.85;
  color: var(--text-soft);
}
.letter-body p { margin-bottom: 1.4em; }
.letter-body strong {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15em;
  color: var(--text);
  font-weight: 400;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 48px 0;
}
.photo-small {
  aspect-ratio: 3/4;
  border-radius: 14px;
  border: 2px dashed var(--blush-mid);
  background: linear-gradient(135deg, #fff0f3 0%, #fdf0ea 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--rose);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.photo-small svg { width: 22px; height: 22px; stroke: var(--blush-mid); fill: none; stroke-width: 1.5; }
.photo-small img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.letter-signoff {
  margin-top: 48px;
  text-align: right;
}
.signoff-label {
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}
.signoff-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
}

.footer-bloom {
  text-align: center;
  padding: 48px 24px 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 4vw, 1.2rem);
  color: var(--rose);
  opacity: .7;
}

/* ══════════════════════════════════════
   SCROLL ANIMATIONS
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.from-left  { transform: translateX(-48px); }
.reveal.from-right { transform: translateX(48px);  }
.reveal.visible    { opacity: 1; transform: translate(0); }

/* ══════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════ */
@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}
@keyframes egg-wobble {
  0%,100% { transform: rotate(0deg) scale(1); }
  25%     { transform: rotate(-3deg) scale(1.02); }
  75%     { transform: rotate(3deg) scale(1.02); }
}
@keyframes crack-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes shell-lift {
  0%   { transform: translateY(0)   rotate(0deg)  scale(1);    opacity: 1; }
  40%  { transform: translateY(-20px) rotate(-6deg) scale(1.04); opacity: 1; }
  100% { transform: translateY(-110px) rotate(-18deg) scale(0.9); opacity: 0; }
}
@keyframes cracks-fade {
  to { opacity: 0; }
}
@keyframes baby-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 380px) {
  .egg-scene { width: 130px; height: 165px; }
}