/* ============================================================
   Wedding invitation — pastel purple
   Palette lives in :root. Change six values, change everything.
   ============================================================ */
:root{
  --paper:          #FBF8FF;
  --paper-deep:     #F1EAFB;
  --paper-edge:     #E7DCF6;
  --ink:            #35264A;
  --ink-soft:       #6B5A82;
  --purple:         #8E6FB7;
  --purple-bright:  #C3A9E0;
  --purple-pale:    #EDE4F7;
  --purple-deep:    #4A2E63;
  --champ:          #C8AE7D;
  --champ-bright:   #E6D3A8;

  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-caps:    'Cinzel', serif;
  --font-script:  'Great Vibes', cursive;
  --font-body:    'Cormorant Garamond', serif;
  --font-si:      'Noto Serif Sinhala', serif;

  --glow: 0 0 26px rgba(142,111,183,.28);
  --card-max: 660px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #FFFFFF 0%, var(--paper) 45%, var(--paper-deep) 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; height:100vh; }

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

/* ───────── ambient: rotating light rays ───────── */
.ray-wrap{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:grid; place-items:center; overflow:hidden;
}
.ray-wrap .rays{
  width:200vmax; height:200vmax;
  animation:rayspin 150s linear infinite;
  opacity:.5;
}
.ray{
  position:absolute; top:50%; left:50%;
  width:1px; height:100vmax;
  transform-origin:top center;
  background:linear-gradient(to bottom, rgba(142,111,183,.20), rgba(142,111,183,0) 70%);
}
@keyframes rayspin{ to{ transform:rotate(360deg); } }

#petal-canvas{
  position:fixed; inset:0; z-index:1; pointer-events:none;
}

/* ───────── 1. welcome gate ───────── */
#welcome{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center;
  padding:24px 18px;
  background:
    radial-gradient(900px 600px at 50% 30%, #FFFFFF 0%, var(--paper) 55%, var(--paper-deep) 100%);
  transition:opacity .9s ease, visibility .9s ease;
}
#welcome.gone{ opacity:0; visibility:hidden; }

.welcome-inner{ text-align:center; max-width:560px; }

.medallion{
  position:relative; width:min(74vw, 360px); aspect-ratio:1;
  margin:0 auto 26px;
  filter:drop-shadow(0 12px 34px rgba(142,111,183,.22));
}
.medallion-ring{
  position:absolute; inset:0; width:100%;
  animation:spin-slow 90s linear infinite;
}
.medallion-couple{
  position:absolute; left:50%; top:52%;
  width:46%; transform:translate(-50%,-50%);
  perspective:900px;
}
.medallion-couple img{
  width:100%;
  filter:drop-shadow(0 10px 18px rgba(74,46,99,.20));
}
@keyframes spin-slow{ to{ transform:rotate(360deg); } }

/* ───────── how the couple image moves (set in config.js) ───────── */
.anim-sway { animation:couple-sway 9s ease-in-out infinite; }
.anim-spin { animation:couple-spin 16s linear infinite; }
.anim-float{ animation:couple-float 7s ease-in-out infinite; }
.anim-none { animation:none; }

@keyframes couple-sway{
  0%,100%{ transform:rotateY(-15deg) translateY(0); }
  50%    { transform:rotateY( 15deg) translateY(-8px); }
}
@keyframes couple-spin{
  from{ transform:rotateY(0deg); }
  to  { transform:rotateY(360deg); }
}
@keyframes couple-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

.welcome-line{
  font-family:var(--font-si); font-weight:400;
  font-size:clamp(1.15rem, 4.6vw, 1.7rem);
  color:var(--purple-deep); margin:0 0 18px;
  animation:fadein-up 1.1s ease both;
}
.welcome-small{
  font-family:var(--font-si); font-size:.78rem; letter-spacing:.18em;
  color:var(--purple); margin:0; animation:fadein-up 1.3s ease both;
}
.couple-script{
  font-family:var(--font-script); font-weight:400;
  word-spacing:.18em;
  font-size:clamp(2.6rem, 10vw, 4.2rem);
  line-height:1.1; color:var(--purple-deep);
  margin:.1em 0 .6em;
  background:linear-gradient(100deg,var(--purple-deep) 0%,var(--purple) 42%,var(--champ) 52%,var(--purple) 62%,var(--purple-deep) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fadein-up 1.5s ease both, shimmer-sweep 9s linear infinite 1.5s;
}
@keyframes shimmer-sweep{
  0%{ background-position:120% 0; } 100%{ background-position:-120% 0; }
}
@keyframes fadein-up{
  from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; }
}
@keyframes fadein-zoom{
  from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; }
}

/* ───────── buttons ───────── */
.btn-gold{
  display:inline-block; cursor:pointer;
  font-family:var(--font-si); font-size:1rem;
  padding:14px 34px; border-radius:999px; border:0;
  color:#FFF; text-decoration:none; letter-spacing:.02em;
  background:linear-gradient(135deg,var(--purple-bright) 0%,var(--purple) 45%,var(--purple-deep) 100%);
  box-shadow:0 10px 26px rgba(74,46,99,.26), inset 0 1px 0 rgba(255,255,255,.4);
  animation:pulse-glow 3.4s ease-in-out infinite;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(74,46,99,.34); }
.btn-gold.small{ font-family:var(--font-caps); font-size:.82rem; letter-spacing:.14em; padding:12px 26px; }
.btn-gold.wide-btn{ width:100%; font-family:var(--font-caps); letter-spacing:.14em; font-size:.9rem; }
@keyframes pulse-glow{
  0%,100%{ box-shadow:0 10px 26px rgba(74,46,99,.22), inset 0 1px 0 rgba(255,255,255,.4); }
  50%    { box-shadow:0 10px 34px rgba(142,111,183,.5), inset 0 1px 0 rgba(255,255,255,.5); }
}

/* ───────── side nav dots ───────── */
#nav-dots{
  position:fixed; right:14px; top:50%; transform:translateY(-50%);
  z-index:30; display:none; flex-direction:column; gap:12px;
}
#nav-dots.show{ display:flex; }
#nav-dots a{ display:block; padding:4px; }
#nav-dots span{
  display:block; width:7px; height:7px; border-radius:50%;
  background:var(--paper-edge); border:1px solid var(--purple-bright);
  transition:all .3s ease;
}
#nav-dots a.active span{
  background:var(--purple); border-color:var(--purple);
  transform:scale(1.5); box-shadow:var(--glow);
}

/* ───────── sections ───────── */
main{ position:relative; z-index:2; }
.section{
  padding:82px 20px 70px;
  text-align:center;
  max-width:100%;
}
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

.eyebrow{
  font-family:var(--font-caps); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--purple); margin:0 0 10px;
}
.display{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem, 6vw, 2.5rem); letter-spacing:.04em;
  margin:0 0 12px; color:var(--purple-deep);
}
.sub{ color:var(--ink-soft); font-size:1rem; margin:0 0 30px; font-style:italic; }
.divider{ width:230px; margin:26px auto; opacity:.9; }
.divider.wide{ width:280px; }

/* ───────── 2. invitation card ───────── */
#invitation{ position:relative; padding-top:64px; overflow:hidden; }

.ornament-track{
  position:absolute; left:0; right:0; top:52%; transform:translateY(-50%);
  display:flex; width:max-content; opacity:.20; pointer-events:none;
  animation:ornament-scroll 110s linear infinite;
}
.ornament-track picture{ display:block; flex:0 0 auto; }
.ornament-track img{ width:1400px; height:auto; }
@keyframes ornament-scroll{ to{ transform:translate(-1400px,-50%); } }

.card{
  position:relative; z-index:2;
  max-width:var(--card-max); margin:0 auto;
  padding:clamp(30px,6vw,54px) clamp(20px,5vw,46px) clamp(34px,6vw,50px);
  background:linear-gradient(180deg,#FFFFFF 0%, #FDFBFF 60%, var(--paper) 100%);
  border:1px solid var(--purple-bright);
  outline:1px solid var(--paper-edge); outline-offset:7px;
  border-radius:4px;
  box-shadow:0 24px 60px rgba(74,46,99,.12);
  animation:fadein-zoom 1.2s ease both;
  overflow:hidden;
}
.spray{
  position:absolute; width:clamp(96px,20vw,172px); opacity:.45; pointer-events:none;
}
.spray.tl{ top:10px;  left:2px; transform:rotate(-12deg); }
.spray.br{ bottom:12px; right:2px; transform:rotate(168deg); }

.band-strip{
  position:relative; overflow:hidden;
  width:calc(100% + 2px); margin-left:-1px;
  height:clamp(86px, 24vw, 158px);
  opacity:.8; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.band-strip.top{ margin-bottom:12px; }
.band-strip.bottom{
  margin-top:16px; margin-bottom:-16px; opacity:.62;
  transform:scaleX(-1);              /* mirrored, so its procession walks the other way */
}
.band-track{
  display:flex; width:max-content; height:100%;
  animation:band-march 48s linear infinite;
}
.band-track picture{ display:block; flex:0 0 auto; height:100%; }
.band-track img{
  display:block; height:100%; width:auto; max-width:none;
}
@keyframes band-march{ to{ transform:translateX(-50%); } }

.monogram{
  font-family:var(--font-script); font-size:2.1rem; line-height:1;
  color:var(--purple); margin:0 0 26px; letter-spacing:.06em;
}
.monogram.small{ font-size:1.5rem; color:var(--purple-bright); margin:10px 0 0; }

.joiner{
  font-family:var(--font-body); font-style:italic; font-size:1rem;
  color:var(--ink-soft); margin:0 0 8px;
}
.guest-dots{
  color:var(--purple-bright); letter-spacing:.14em; font-size:.9rem;
  margin:2px auto 4px; max-width:330px; overflow:hidden; white-space:nowrap;
}
.request.tight{ margin:4px 0 0; }
.poruwa-text{
  font-family:var(--font-caps); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--purple); margin:8px 0 0;
}
.at-the{
  font-family:var(--font-body); font-style:italic; color:var(--ink-soft);
  margin:0 0 4px; font-size:.98rem;
}
.rsvp-by{
  font-family:var(--font-body); font-style:italic; color:var(--ink-soft);
  margin:0 0 4px; font-size:.96rem;
}

.card-banner{
  position:relative; margin:0 auto 18px;
  width:min(62%, 268px);
  perspective:900px;
}
.card-banner img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 14px 24px rgba(74,46,99,.18));
}
/* no filter on the video — a per-frame drop-shadow is what makes playback stutter */
.card-banner video{
  display:block; width:100%; height:auto;
  background:transparent;
}
.card-banner::after{                 /* a soft static shadow on the floor instead */
  content:""; position:absolute; left:18%; right:18%; bottom:-6px; height:16px;
  border-radius:50%; background:radial-gradient(ellipse at center, rgba(74,46,99,.20), transparent 70%);
  pointer-events:none;
}
.card-banner img{ width:100%; }

.lede{ font-size:.98rem; color:var(--ink-soft); margin:2px 0 2px; font-style:italic; }
.family{
  font-family:var(--font-caps); font-size:1.02rem; letter-spacing:.06em;
  color:var(--purple-deep); margin:0 0 8px;
}
.amp{
  font-family:var(--font-script); font-size:1.8rem; color:var(--purple);
  margin:2px 0 6px; line-height:1;
}
.request{ color:var(--ink-soft); margin:16px 0 2px; line-height:1.85; }

.couple-script.big{ font-size:clamp(2.4rem, 9vw, 3.9rem); margin:.05em 0 .25em; }

.guest-line{
  font-family:var(--font-caps); font-size:.62rem; letter-spacing:.22em;
  color:var(--purple-bright); margin:0;
}

.date-block{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "year month dow"
    ".    day   .";
  align-items:center; justify-items:center;
  gap:2px 14px; margin:6px auto 10px; max-width:420px;
}
.d-year{ grid-area:year; font-family:var(--font-caps); font-size:1rem; letter-spacing:.1em; color:var(--purple); }
.d-dow { grid-area:dow;  font-family:var(--font-caps); font-size:1rem; letter-spacing:.1em; color:var(--purple); }
.d-month{
  grid-area:month; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem,6vw,2.1rem); color:var(--purple-deep); letter-spacing:.04em;
  border-bottom:1px solid var(--purple-bright); padding:0 10px 4px;
}
.d-day{
  grid-area:day; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,11vw,3.6rem); line-height:1.05; color:var(--purple-deep);
}
.d-day sup{ font-size:.38em; margin-left:2px; }
.time-text{ font-size:1rem; color:var(--ink-soft); margin:0; font-style:italic; }

.venue-name{
  font-family:var(--font-caps); font-size:1.14rem; letter-spacing:.05em;
  color:var(--purple-deep); margin:0 0 4px;
}
.venue-detail{ color:var(--ink-soft); margin:0 0 6px; }

.rsvp-line{
  font-family:var(--font-caps); font-size:.7rem; letter-spacing:.3em;
  color:var(--purple); margin:26px 0 4px;
}
.phones{ color:var(--ink-soft); margin:0; font-size:.98rem; }
.blessing{
  font-family:var(--font-si); font-size:.92rem; color:var(--purple);
  margin:22px 0 0;
}

/* ───────── 3. countdown ───────── */
.clock{
  display:flex; justify-content:center; gap:clamp(8px,2.4vw,18px);
  flex-wrap:wrap; margin-top:8px;
}
.unit{
  min-width:clamp(66px,19vw,96px);
  padding:16px 10px 12px;
  background:linear-gradient(180deg,#FFFFFF,var(--purple-pale));
  border:1px solid var(--purple-bright);
  border-radius:6px;
  box-shadow:0 10px 26px rgba(74,46,99,.09);
}
.unit span{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.5rem,6vw,2rem); color:var(--purple-deep); line-height:1;
}
.unit em{
  display:block; margin-top:8px; font-style:normal;
  font-family:var(--font-caps); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--purple);
}
.cd-done{ font-family:var(--font-script); font-size:2rem; color:var(--purple); margin:22px 0 0; }

/* ───────── 4. venue ───────── */
.map-frame{
  max-width:var(--card-max); margin:24px auto 22px;
  border:1px solid var(--purple-bright); border-radius:6px;
  padding:8px; background:#FFF;
  box-shadow:0 16px 40px rgba(74,46,99,.10);
}
.map-frame iframe{
  display:block; width:100%; height:320px; border:0; border-radius:3px;
}

/* ───────── 5. rsvp ───────── */
.rsvp-form{
  max-width:520px; margin:26px auto 0; text-align:left;
  background:linear-gradient(180deg,#FFFFFF,var(--paper));
  border:1px solid var(--purple-bright); border-radius:6px;
  padding:clamp(20px,5vw,34px);
  box-shadow:0 16px 44px rgba(74,46,99,.10);
}
.hidden-field{ position:absolute; left:-9999px; }
.fld{ display:block; margin-bottom:18px; border:0; padding:0; }
.fld > span, .fld legend{
  display:block; font-family:var(--font-caps); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--purple);
  margin-bottom:7px; padding:0;
}
.fld input[type=text],
.fld input[type=tel],
.fld input[type=number],
.fld textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:11px 13px; background:#FFF;
  border:1px solid var(--paper-edge); border-radius:4px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.fld input:focus, .fld textarea:focus{
  outline:0; border-color:var(--purple); box-shadow:0 0 0 3px rgba(142,111,183,.16);
}
.fld textarea{ resize:vertical; }
.radio{
  display:inline-flex; align-items:center; gap:7px;
  margin-right:18px; font-size:.98rem; color:var(--ink-soft);
}
.radio input{ accent-color:var(--purple); }

/* ───────── footer ───────── */
footer{ padding:30px 20px 70px; text-align:center; }
.with-love{ font-family:var(--font-script); font-size:2.1rem; color:var(--purple); margin:0; }
.footer-couple{
  font-family:var(--font-caps); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--purple-bright); margin:6px 0 0;
  -webkit-text-fill-color:currentColor; background:none;
}

/* ───────── music toggle ───────── */
.music-btn[hidden]{ display:none; }
.music-btn{
  position:fixed; right:16px; bottom:16px; z-index:35;
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1px solid var(--purple-bright); background:#FFFFFFEE;
  box-shadow:0 8px 22px rgba(74,46,99,.18);
  display:grid; place-items:center;
}
.bars{ display:flex; align-items:flex-end; gap:2.5px; height:16px; }
.bars i{
  width:2.5px; background:var(--purple); border-radius:2px; height:5px;
}
.music-btn.playing .bars i{ animation:eq .9s ease-in-out infinite; }
.music-btn.playing .bars i:nth-child(2){ animation-delay:.15s; }
.music-btn.playing .bars i:nth-child(3){ animation-delay:.3s; }
.music-btn.playing .bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:5px; } 50%{ height:16px; } }

/* ───────── responsive ───────── */
@media (max-width:520px){
  body{ font-size:16px; }
  .section{ padding:62px 16px 54px; }
  .card{ outline-offset:4px; }
  .map-frame iframe{ height:240px; }
  #nav-dots{ right:8px; }
  .divider{ width:180px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* print — a guest can save a clean copy of the card */
@media print{
  #welcome, #nav-dots, .music-btn, #petal-canvas, .ray-wrap,
  #countdown, #venue, #rsvp, .ornament-track{ display:none !important; }
  body{ background:#FFF; }
  .card{ box-shadow:none; border-color:#999; }
}