/* Srinivas & Priyadharshini: wedding invitation
   Design notes
   - One continuous morning sky. The page starts at dawn (sky blue) and ends in blush, matching the 6:30 am marriage.
   - Mobile first (390 px), then 768 and 1440. Text never moves; only the illustrated layers do.
   - Palette from the brief: sky, periwinkle, lilac, blush on warm cream. Text is a dusty blue that passes 4.5:1 on all four.
*/

@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-var.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-italic-var.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url(assets/fonts/jost-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --sky:#cbf0f8;
  --peri:#aecbfa;
  --lilac:#d7aefb;
  --blush:#fdcfe8;
  --cream:#fdf7ee;
  --ink:#324b73;          /* body text: 8.3:1 on cream, 4.7:1 on lilac */
  --ink-display:#3d5a85;  /* large display type only (3:1 needed) */
  --line:rgba(50,75,115,.24);
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --pad:clamp(1.25rem,6vw,3rem);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3{margin:0}
a{color:inherit}
.page{position:relative;overflow-x:clip}
@supports not (overflow:clip){.page{overflow-x:hidden}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

:where(a,button):focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------ scenes and layers */
.scene{position:relative}
.layer{position:absolute;inset:0;pointer-events:none}
.layer-far{z-index:1}
.layer-mid{z-index:2}
.layer-near{z-index:4}
.copy{position:relative;z-index:6}

.px{
  position:absolute;
  left:var(--l,auto);right:var(--r,auto);top:var(--t,auto);bottom:var(--b,auto);
  width:min(var(--w),1100px);
  transform:translate3d(0,0,0);
}
.px img{width:100%;height:auto}
.in-view .px{will-change:transform}
.flip{transform:scaleX(-1)}

/* ------------------------------------------------ hero */
.hero{
  /* the portrait takes whatever height is left between the names and the date, so nothing can collide */
  height:100vh;height:max(100svh,40rem);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#cbf0f8 0%,#bcd5f9 32%,#d3cbf9 60%,#f5d8ee 84%,#fdf3ec 100%);
}
.hero-copy{
  position:relative;flex:none;order:-1;
  padding:max(1.75rem,calc(var(--safe-t) + 1.25rem)) var(--pad) 0;
  text-align:center;
}
.names{font-family:var(--serif);font-weight:500;color:var(--ink-display);line-height:.98;letter-spacing:-.005em}
.name{display:block;font-size:clamp(2.3rem,12.2vw,4.7rem)}
.amp{display:block;font-size:clamp(1.7rem,7.4vw,2.6rem);font-style:italic;line-height:1.15;margin:.08em 0 .02em}

.couple-wrap{
  position:relative;flex:1 1 0;min-height:0;margin:.6rem 0 max(1.4rem,3svh);
  display:flex;justify-content:center;z-index:3;pointer-events:none;
}
.couple-wrap .px{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;height:100%;display:flex;justify-content:center}
.couple-wrap .couple{width:auto;height:100%;max-width:80vw;object-fit:contain;object-position:center bottom}
.hero-foot{
  position:relative;flex:none;text-align:center;
  padding:.25rem var(--pad) max(1.6rem,calc(var(--safe-b) + 1.1rem));
}
.hero-date{font-family:var(--serif);font-weight:600;font-size:clamp(1.65rem,6.8vw,2.3rem);line-height:1.1;color:var(--ink)}
.hero-place{margin-top:.25rem;font-size:1.0625rem;font-weight:500;letter-spacing:.02em}

/* ------------------------------------------------ invitation */
.invitation{
  padding:clamp(5.5rem,17svh,9rem) 0 clamp(9rem,22svh,13rem);
  background:linear-gradient(180deg,#fdf3ec 0%,#fdf7ee 38%,#f1f5f6 100%);
}
.invitation-copy{max-width:23rem;margin-inline:auto;padding-inline:var(--pad);text-align:center}
.invite-line{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.95rem,8vw,3.1rem);line-height:1.2;color:var(--ink);
  text-wrap:balance;
}

.floral{position:absolute;z-index:3;pointer-events:none;height:auto}
.floral-jasmine{width:min(46vw,300px);left:-9vw;top:1.5rem}
.floral-rose-b{width:min(32vw,220px);right:-8vw;bottom:5.5rem}
.garland{display:block;height:auto;pointer-events:none}
.garland-bottom{position:absolute;z-index:3;left:50%;bottom:1.25rem;translate:-50% 0;width:min(94vw,680px)}

.plane-wrap{position:absolute;left:0;top:6%;width:34vw}

/* ------------------------------------------------ details */
.details{
  padding:clamp(4.5rem,12svh,7rem) 0 clamp(9.5rem,23svh,13rem);
  background:linear-gradient(180deg,#f1f5f6 0%,#e7eefa 46%,#eee9f8 100%);
}
.details-copy{
  max-width:30rem;margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.details-date{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,7.4vw,2.5rem);
  line-height:1.1;color:var(--ink-display);margin-bottom:2.75rem;
}
.event{display:flex;flex-direction:column;align-items:center}
.event-time{display:flex;flex-direction:column;align-items:center;line-height:1}
.clock{
  font-family:var(--serif);font-weight:500;font-size:clamp(3.5rem,15.5vw,5.2rem);
  font-variant-numeric:lining-nums;letter-spacing:-.01em;color:var(--ink-display);
}
.until{margin-top:.5rem;font-size:1.0625rem;letter-spacing:.02em}
.event-name{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,8.6vw,2.9rem);
  line-height:1.05;margin:1.1rem 0 .6rem;
}
.venue{font-size:1.1875rem;font-weight:500;line-height:1.4;max-width:20rem}
.city{margin-top:.2rem}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 1.4rem;border-radius:999px;
  font:500 1rem/1 var(--sans);letter-spacing:.01em;color:var(--ink);text-decoration:none;
  border:1px solid var(--line);
  transition:transform .15s ease,background-color .2s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--sky),var(--peri));border-color:rgba(50,75,115,.3)}
.btn-quiet{background:rgba(255,255,255,.62)}
.btn:active{transform:scale(.97)}
.alt-cal{margin-top:.35rem;font-size:.9375rem}
.alt-cal a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.22em}
.garland-mid{width:min(100%,520px);margin:2.5rem auto 2.5rem}
.floral-corner{width:min(48vw,400px);right:-12vw;bottom:-1rem}

/* ------------------------------------------------ countdown */
.countdown{
  padding:clamp(9rem,21svh,11.5rem) 0 clamp(6.5rem,16svh,9rem);
  background:linear-gradient(180deg,#eee9f8 0%,#d8e3fa 52%,#cdebf6 100%);
}
.countdown-copy{max-width:34rem;margin-inline:auto;padding-inline:var(--pad);text-align:center}
.timer{display:grid;grid-template-columns:repeat(4,1fr)}
.unit{display:flex;flex-direction:column;align-items:center;padding:.25rem 0}
.unit + .unit{border-left:1px solid var(--line)}
.num{
  display:block;min-width:2ch;font-family:var(--serif);font-weight:500;
  font-size:clamp(2.7rem,12.6vw,4.8rem);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;color:var(--ink-display);
}
.lab{margin-top:.5rem;font-size:1rem}
.timer-note{margin-top:1.6rem;font-size:1.125rem}
.floral-jasmine-r{width:min(40vw,270px);left:-8vw;bottom:-1rem;scale:-1 1}
.balloon-wrap{z-index:2;--w:21vw;--l:9vw;--t:1.5%}

/* ------------------------------------------------ closing */
.closing{
  padding:clamp(4.5rem,11svh,7rem) 0 clamp(10.5rem,28svh,15rem);
  background:linear-gradient(180deg,#cdebf6 0%,#ecdcf6 40%,#f9dcee 72%,#fdf0ea 100%);
  text-align:center;
}
.closing-copy{max-width:28rem;margin-inline:auto;padding-inline:var(--pad)}
.garland-top{width:min(88vw,520px);margin:0 auto 1.9rem}
.closing-line{font-size:1.1875rem}
.closing-names{
  font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,9.4vw,3.2rem);
  line-height:1.1;margin-top:.55rem;color:var(--ink-display);
}

/* ------------------------------------------------ sparkles (light effects) */
.sparkles{position:absolute;inset:0;z-index:3;pointer-events:none}
.sp{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:.85;animation:twinkle 5.5s ease-in-out var(--d,0s) infinite alternate}

/* ------------------------------------------------ gentle drift accents */
.cloud-drift{animation:cloud-drift var(--dur,80s) ease-in-out infinite alternate}
@keyframes cloud-drift{
  from{transform:translate3d(calc(var(--dx,4vw) * -1),0,0)}
  to{transform:translate3d(var(--dx,4vw),0,0)}
}
.sun-drift{animation:sun-breathe 12s ease-in-out infinite alternate}
@keyframes sun-breathe{from{transform:scale(.985)}to{transform:scale(1.025)}}
.balloon-bob{animation:bob 9s ease-in-out infinite alternate}
@keyframes bob{from{transform:translate3d(0,6px,0) rotate(-1.6deg)}to{transform:translate3d(0,-14px,0) rotate(1.6deg)}}
.bird-glide{animation:glide 16s ease-in-out infinite alternate}
@keyframes glide{from{transform:translate3d(-4vw,6px,0)}to{transform:translate3d(5vw,-10px,0)}}
.plane-fly{animation:fly 46s linear infinite}
@keyframes fly{
  0%{transform:translate3d(-45vw,12px,0) rotate(2deg)}
  50%{transform:translate3d(55vw,-20px,0) rotate(-2deg)}
  100%{transform:translate3d(150vw,8px,0) rotate(2deg)}
}
@keyframes twinkle{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.1)}}

/* pause motion for scenes that are off screen (set by script.js) */
.js .scene:not(.in-view) .drift,
.js .scene:not(.in-view) .sp{animation-play-state:paused}

/* ------------------------------------------------ the one load moment: the sky opens */
.js .enter{opacity:0}
.js .e1{translate:-16vw 0}
.js .e2{translate:16vw 0}
.js .e3{translate:9vw 0}
.js .e4{translate:-7vw 0}
.js .e-sun{translate:0 9svh}
.js .e-couple{translate:0 3svh}
.js .hero-copy,.js .hero-foot{opacity:0}
.js.is-ready .enter{
  opacity:1;translate:0 0;
  transition:opacity 1.5s ease,translate 2.1s cubic-bezier(.18,.7,.2,1);
}
.js.is-ready .e-sun{transition-delay:.25s;transition-duration:1.8s,2.6s}
.js.is-ready .e-couple{transition-delay:.55s}
.js.is-ready .hero-copy,.js.is-ready .hero-foot{opacity:1;transition:opacity 1.3s ease 1s}
/* if the script never runs, show everything after a moment */
.js:not(.is-ready) .enter,
.js:not(.is-ready) .hero-copy,
.js:not(.is-ready) .hero-foot{animation:reveal-fallback .01s linear 3.5s forwards}
@keyframes reveal-fallback{to{opacity:1;translate:0 0}}

/* ------------------------------------------------ short phones */
@media (max-height:700px){
  .name{font-size:clamp(2.2rem,10.6vw,3.6rem)}
  .amp{font-size:1.5rem;margin:.02em 0 0}
}

/* ------------------------------------------------ tablets */
@media (min-width:768px){
  body{font-size:1.125rem}
  .name{font-size:clamp(3.6rem,8vw,6rem)}
  .amp{font-size:clamp(2.2rem,4.4vw,3.2rem)}
  .couple-wrap .couple{max-width:46vw}
  .hero-foot{padding-bottom:max(2rem,calc(var(--safe-b) + 1.5rem))}
  .hero-date{font-size:clamp(2rem,3.6vw,2.8rem)}
  .invitation-copy{max-width:36rem}
  .invite-line{font-size:clamp(2.5rem,4.6vw,3.6rem)}
  .floral-jasmine{width:min(30vw,340px);left:-3vw}
  .floral-rose-b{width:min(20vw,230px);right:-1vw}
  .details-copy{max-width:36rem}
  .floral-corner{width:min(38vw,440px);right:-6vw}
  .floral-jasmine-r{width:min(26vw,300px);left:-3vw}
  .num{font-size:clamp(3.6rem,8vw,5.6rem)}
  .balloon-wrap{--w:12vw;--l:4vw}
}

/* ------------------------------------------------ wide screens: the two events sit side by side */
@media (min-width:900px){
  .details-copy{
    max-width:62rem;display:grid;grid-template-columns:1fr 1fr;column-gap:5rem;align-items:start;
  }
  .details-date{grid-column:1 / -1;grid-row:1}
  .event-marriage{grid-column:1;grid-row:2}
  .event-reception{grid-column:2;grid-row:2}
  .garland-mid{grid-column:1 / -1;grid-row:3;margin:3.25rem auto 0}
}

/* ------------------------------------------------ desktop */
@media (min-width:1100px){
  .hero-copy{padding-top:max(2.25rem,calc(var(--safe-t) + 1.75rem))}
  .names{display:flex;justify-content:center;align-items:baseline;gap:.3em}
  .name,.amp{display:inline}
  .name{font-size:clamp(4.6rem,5.6vw,6.6rem)}
  .amp{font-size:clamp(2.6rem,3.2vw,3.8rem)}
  .invitation-copy{max-width:48rem}
  .balloon-wrap{--w:10vw;--l:14vw}
  .invite-line{font-size:3.3rem}
}

/* landscape phones: names on one line, a shorter hero */
@media (max-height:520px){
  .hero{height:max(100svh,34rem)}
  .hero-copy{padding-top:1rem}
  .names{display:flex;justify-content:center;align-items:baseline;gap:.3em}
  .name,.amp{display:inline;white-space:nowrap}
  .name{font-size:clamp(1.5rem,3.7vw,3rem)}
  .amp{font-size:clamp(1.4rem,3.2vw,2rem);margin:0}
}

/* ------------------------------------------------ motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .drift,.sp{animation:none !important}
  .js .enter,.js .hero-copy,.js .hero-foot{opacity:1 !important;translate:none !important;transition:none !important;animation:none !important}
  .px{will-change:auto !important}
  .btn{transition:none}
}