/* =========================================================
   TOKENS
========================================================= */
:root{
  --sky-pale:   #EAF6FD;   /* page background */
  --sky-cloud:  #D7ECF9;   /* cloud fill */
  --sky-mid:    #A9D8F0;   /* balloons / stars */
  --sky-mid-2:  #8CC7E8;
  --sky-deep:   #2E6E97;   /* headings */
  --sky-ink:    #1F4E6B;   /* body text */
  --cream:      #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-script:  'Yellowtail', cursive;
  --font-label:   'Quicksand', sans-serif;
}

*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overscroll-behavior:none;
}

body{
  margin:0;
  overscroll-behavior:none;
  background:linear-gradient(180deg, var(--sky-pale) 0%, #F4FBFF 40%, var(--sky-pale) 100%);
  color:var(--sky-ink);
  font-family:var(--font-label);
  overflow-x:hidden;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}

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

img{ max-width:100%; display:block; }

/* =========================================================
   ENTRY OVERLAY
========================================================= */
.entry-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:linear-gradient(180deg, #EAF6FD 0%, #D7ECF9 100%);
  cursor:pointer;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.entry-overlay.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.entry-star{
  width:40px;
  fill:var(--sky-mid-2);
  animation:spin-drift-a 6s ease-in-out infinite;
}

.entry-eyebrow{
  font-family:var(--font-label);
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:0.85rem;
  color:var(--sky-deep);
  margin:0;
}

.entry-tap{
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(1.6rem, 6vw, 2.2rem);
  color:var(--sky-deep);
  margin:0;
}

.entry-pulse{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--sky-mid-2);
  animation:entry-pulse 1.6s ease-in-out infinite;
}
@keyframes entry-pulse{
  0%,100%{ transform:scale(0.8); opacity:0.6; }
  50%{ transform:scale(1.3); opacity:1; }
}

/* =========================================================
   SOUND TOGGLE
========================================================= */
.sound-toggle{
  position:fixed;
  top:calc(16px + env(safe-area-inset-top));
  left:calc(16px + env(safe-area-inset-left));
  z-index:10;
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(4px);
  box-shadow:0 6px 16px -6px rgba(46,110,151,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sound-toggle svg{
  width:20px; height:20px;
  fill:none;
  stroke:var(--sky-deep);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sound-toggle .icon-muted path{ fill:var(--sky-deep); stroke:none; }
.sound-toggle .icon-playing path:first-child{ fill:var(--sky-deep); stroke:none; }

.sound-toggle .icon-playing{ display:none; }
.sound-toggle[aria-pressed="true"] .icon-muted{ display:none; }
.sound-toggle[aria-pressed="true"] .icon-playing{ display:block; }

/* =========================================================
   AMBIENT BACKGROUND — fixed, drifting, present start to end
========================================================= */
.sky-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.cloud{
  position:absolute;
  background:var(--sky-cloud);
  border-radius:50%;
  filter:blur(0.5px);
  opacity:0.8;
}
.cloud::before, .cloud::after{
  content:"";
  position:absolute;
  background:var(--sky-cloud);
  border-radius:50%;
}
.cloud--1{ width:220px; height:90px; top:6%; left:-4%; animation:drift-a 26s ease-in-out infinite; }
.cloud--1::before{ width:120px; height:120px; top:-50px; left:30px; }
.cloud--1::after{ width:90px; height:90px; top:-30px; left:120px; }

.cloud--2{ width:170px; height:70px; top:28%; right:-6%; animation:drift-b 32s ease-in-out infinite; }
.cloud--2::before{ width:100px; height:100px; top:-40px; left:20px; }
.cloud--2::after{ width:70px; height:70px; top:-24px; left:90px; }

.cloud--3{ width:200px; height:80px; top:58%; left:-6%; animation:drift-c 30s ease-in-out infinite; }
.cloud--3::before{ width:110px; height:110px; top:-46px; left:24px; }
.cloud--3::after{ width:80px; height:80px; top:-26px; left:105px; }

.cloud--4{ width:160px; height:65px; bottom:6%; right:-4%; animation:drift-a 24s ease-in-out infinite; }
.cloud--4::before{ width:95px; height:95px; top:-38px; left:18px; }
.cloud--4::after{ width:65px; height:65px; top:-20px; left:80px; }

.star{ position:absolute; width:34px; fill:var(--sky-mid); }
.star--1{ top:14%; left:10%;  animation:spin-drift-a 22s ease-in-out infinite; }
.star--2{ top:22%; right:12%; width:24px; animation:spin-drift-b 18s ease-in-out infinite; }
.star--3{ top:46%; left:6%;   width:20px; animation:spin-drift-c 20s ease-in-out infinite; }
.star--4{ top:63%; right:8%;  animation:spin-drift-a 26s ease-in-out infinite; }
.star--5{ top:80%; left:14%;  width:22px; animation:spin-drift-b 21s ease-in-out infinite; }
.star--6{ top:92%; right:16%; width:18px; animation:spin-drift-c 19s ease-in-out infinite; }
.star--footer{ position:static; width:30px; margin:0 auto 6px; display:block; opacity:0.9; }

.balloon-cluster{
  position:absolute;
  width:70px;
  opacity:0.85;
}
.balloon-cluster svg{ width:100%; height:auto; fill:none; stroke:var(--sky-mid-2); stroke-width:1.2; }
.balloon-cluster svg circle{ fill:var(--sky-mid); stroke:var(--sky-deep); stroke-opacity:0.25; }
.balloon-cluster--1{ top:36%; left:4%;  animation:drift-b 20s ease-in-out infinite; }
.balloon-cluster--2{ top:70%; right:5%; width:56px; animation:drift-c 23s ease-in-out infinite; }

@keyframes drift-a{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(18px,-24px) rotate(6deg); }
}
@keyframes drift-b{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-22px,20px) rotate(-6deg); }
}
@keyframes drift-c{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(14px,26px) rotate(5deg); }
}
@keyframes spin-drift-a{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(10px,-16px) rotate(20deg); }
}
@keyframes spin-drift-b{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(-12px,14px) rotate(-18deg); }
}
@keyframes spin-drift-c{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(8px,18px) rotate(15deg); }
}

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  z-index:1;
  min-height:100vh;   /* fallback for older browsers */
  min-height:100svh;  /* actual visible viewport on mobile, no address-bar jump */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:calc(40px + env(safe-area-inset-top)) 20px 60px;
}

.bunting{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:clamp(4px, 1.5vw, 6px);
  margin-bottom:clamp(22px, 6vw, 34px);
  max-width:100%;
}
.bunting span{
  width:0; height:0;
  border-left:clamp(14px, 4.2vw, 22px) solid transparent;
  border-right:clamp(14px, 4.2vw, 22px) solid transparent;
  border-top:clamp(22px, 6.4vw, 34px) solid var(--sky-mid);
  flex-shrink:0;
}
.bunting span:nth-child(2n){ border-top-color:var(--sky-deep); }
.bunting span:nth-child(3n){ border-top-color:var(--sky-mid-2); }

.eyebrow{
  font-family:var(--font-label);
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:clamp(0.75rem, 1.6vw, 0.95rem);
  color:var(--sky-deep);
  margin:0 0 6px;
}

.title-baptism{
  font-family:'Pacifico', cursive;
  font-weight:700;
  font-size:clamp(5rem, 9vw, 5rem);
  letter-spacing:0.02em;
  color:var(--sky-deep);
  margin:0;
  line-height:1;
}

.and-text{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.4rem, 3.6vw, 2rem);
  color:var(--sky-ink);
  margin:6px 0 10px;
}

.numeral-scene{
  position:relative;
  width:100%;
  height:clamp(230px, 42vw, 300px);
  margin:8px auto clamp(16px, 5vw, 28px);
  display:flex;
  align-items:center;
  justify-content:center; /* centers the whole group as one unit, at any width */

}

/* numeral-group sizes itself to the "1st" numeral (the only element in
   normal flow). The balloons and bear are pinned to ITS edges as
   percentages of ITS own box, not the outer scene — so the trio always
   stays glued together and re-centers as a single piece on any screen. */
.numeral-group{
  position:relative;
  display:inline-block;
}

.big-numeral{
  position:relative;
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(15rem, 24vw, 15rem);
  color:var(--sky-mid);
  line-height:1;
  opacity:0.9;
}
.big-numeral sup{
  /* position:absolute; */
  font-size:0.28em;
  top:-0.5em;
}

.hero-balloons{
  position:absolute;
  right:-50%;
  top:20%;
  width:52%;
  fill:none;
  stroke:var(--sky-mid-2);
  stroke-width:1;
  animation:drift-b 9s ease-in-out infinite;
}
.hero-balloons circle{ fill:var(--sky-cloud); stroke:var(--sky-deep); stroke-opacity:0.3; }

.hero-bear{
  position:absolute;
  right:-34%;
  top:50%;
  bottom:-10%;
  width:80%;
  fill:var(--cream);
  stroke:var(--sky-deep);
  stroke-width:2.5;
}
.hero-bear .bear-inner{ fill:var(--sky-cloud); stroke:var(--sky-deep); stroke-width:1.5; }
.hero-bear .bear-eye{ fill:var(--sky-ink); stroke:none; }
.hero-bear .bear-nose{ fill:var(--sky-deep); stroke:none; }

.title-birthday{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.3rem, 8vw, 4.4rem);
  color:var(--sky-deep);
  margin:6px 0 0;
  line-height:1;
}

.of-son{
  font-family:var(--font-label);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-size:clamp(0.85rem, 1.8vw, 1.05rem);
  color:var(--sky-ink);
  margin:6px 0 4px;
}

.child-name{
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(2.6rem, 8vw, 4.2rem);
  color:var(--sky-deep);
  margin:0 0 30px;
  line-height:1.05;
}

.hero-photo-frame{
  width:min(260px, 62vw);
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
  background:var(--cream);
  box-shadow:0 18px 40px -14px rgba(46,110,151,0.35), 0 0 0 6px rgba(255,255,255,0.7);
  transform:rotate(-3deg);
}
.hero-photo-frame img{
  width:100%; height:100%; object-fit:cover;
}

.scroll-cue{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  opacity:0.75;
}
.scroll-cue span{
  width:1px; height:34px;
  background:var(--sky-deep);
  position:relative;
  overflow:hidden;
}
.scroll-cue span::after{
  content:"";
  position:absolute;
  left:0; top:-100%;
  width:100%; height:100%;
  background:var(--sky-mid-2);
  animation:scroll-flow 1.8s ease-in-out infinite;
}
@keyframes scroll-flow{
  0%{ top:-100%; } 100%{ top:100%; }
}
.scroll-cue p{
  font-family:var(--font-label);
  font-size:0.75rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  margin:0;
  color:var(--sky-deep);
}

/* =========================================================
   TIMELINE / MONTH CARDS
========================================================= */
.timeline{
  position:relative;
  z-index:1;
  max-width:1000px;
  margin:0 auto;
  padding:40px 24px 100px;
  display:flex;
  flex-direction:column;
  gap:100px;
}

.month-card{
  width:min(340px, 78vw);
  opacity:0;
  transition:opacity 0.9s ease, transform 0.9s cubic-bezier(.22,1,.36,1);
}

.month-card[data-direction="left"]{
  align-self:flex-start;
  transform:translateX(-90px) rotate(-6deg);
}
.month-card[data-direction="right"]{
  align-self:flex-end;
  transform:translateX(90px) rotate(6deg);
}

.month-card.in-view{
  opacity:1;
}
.month-card[data-direction="left"].in-view{
  transform:translateX(0) rotate(-4deg);
}
.month-card[data-direction="right"].in-view{
  transform:translateX(0) rotate(3.5deg);
}
.month-card:nth-child(4n+1).in-view{ transform:translateX(0) rotate(-5.5deg); }
.month-card:nth-child(4n+2).in-view{ transform:translateX(0) rotate(4.5deg); }

.photo-frame{
  background:var(--cream);
  padding:14px 14px 46px;
  border-radius:6px;
  box-shadow:0 20px 34px -16px rgba(46,110,151,0.4), 0 0 0 1px rgba(169,216,240,0.4);
  position:relative;
}
.photo-frame img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:2px;
  background:var(--sky-cloud);
}

.month-label{
  position:absolute;
  left:0; right:0; bottom:12px;
  text-align:center;
  font-family:var(--font-script);
  font-size:1.7rem;
  color:var(--sky-deep);
}

.month-card:hover .photo-frame{
  transform:translateY(-4px);
}
.photo-frame{ transition:transform 0.4s ease; }

/* =========================================================
   DETAILS / FOOTER
========================================================= */
.details{
  position:relative;
  z-index:1;
  text-align:center;
  padding:60px 24px 90px;
  max-width:520px;
  margin:0 auto;
}

.details h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem, 5vw, 2.6rem);
  color:var(--sky-deep);
  margin:0 0 34px;
}

.detail-block{
  margin-bottom:26px;
}

.detail-label{
  font-family:var(--font-label);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.75rem;
  color:var(--sky-mid-2);
  margin:0 0 6px;
}

.detail-value{
  font-family:var(--font-label);
  font-weight:600;
  font-size:1.1rem;
  color:var(--sky-ink);
  margin:0;
  line-height:1.5;
}

.closing-note{
  margin-top:40px;
  font-family:var(--font-script);
  font-size:1.6rem;
  color:var(--sky-deep);
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* ---- Base (this whole file is already tuned mobile-first) ---- */
.timeline{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
.details{ padding-bottom:calc(90px + env(safe-area-inset-bottom)); }

/* ---- Small / standard phones (~360–480px) ---- */
@media (max-width:480px){
  .hero{ padding-top:calc(28px + env(safe-area-inset-top)); }

  .numeral-scene{ height:clamp(200px, 46vw, 240px); }

  .hero-photo-frame{ width:min(230px, 58vw); }

  .timeline{
    padding-left:28px;
    padding-right:28px;
    gap:78px;
  }

  .month-card{ width:min(280px, 74vw); }

  /* slightly calmer tilt so rotated corners stay clear of the screen edge */
  .month-card[data-direction="left"]{ transform:translateX(-60px) rotate(-4deg); }
  .month-card[data-direction="right"]{ transform:translateX(60px) rotate(4deg); }
  .month-card[data-direction="left"].in-view{ transform:translateX(0) rotate(-3deg); }
  .month-card[data-direction="right"].in-view{ transform:translateX(0) rotate(2.5deg); }
  .month-card:nth-child(4n+1).in-view{ transform:translateX(0) rotate(-3.5deg); }
  .month-card:nth-child(4n+2).in-view{ transform:translateX(0) rotate(3deg); }

  /* dial back the ambient decorations so they don't crowd small screens */
  .cloud--1, .cloud--3{ width:150px; height:60px; }
  .cloud--2, .cloud--4{ width:120px; height:50px; }
  .star{ width:24px; }
  .star--1, .star--4{ width:26px; }
  .balloon-cluster{ width:48px; opacity:0.6; }
  .balloon-cluster--2{ width:40px; }
}

/* ---- Very small phones (~360px and under, e.g. SE, older Android) ---- */
@media (max-width:374px){
  .title-baptism{ font-size:2.3rem; }
  .title-birthday{ font-size:2.1rem; }
  .child-name{ font-size:2.3rem; }
  .big-numeral{ font-size:8rem; }
  .month-card{ width:76vw; }
  .timeline{ padding-left:22px; padding-right:22px; gap:64px; }
}

/* ---- Landscape phones: hero shouldn't force a full extra screen ---- */
@media (max-height:480px) and (orientation:landscape){
  .hero{ min-height:auto; padding-top:32px; padding-bottom:32px; }
  .numeral-scene{ height:180px; }
  .hero-photo-frame{ width:180px; }
}

/* ---- Tablet / desktop enhancements ---- */
@media (min-width:900px){
  .timeline{ gap:130px; }
  .month-card{ width:380px; }
}