/* =========================================================
   Amit & Payal — Wedding Invitation
   Design tokens
========================================================= */
:root{
  --ivory:      #FFF8F1;
  --blush:      #FCEBE5;
  --peach:      #F9E3DF;
  --cream:      #F7EFE6;
  --gold:       #C89B5A;
  --gold-deep:  #A87C42;
  --maroon:     #A63B2E;
  --ink:        #4B3A31;
  --ink-soft:   #7A6559;

  --font-display: 'Cormorant Garamond', serif;
  --font-script:  'Alex Brush', cursive;
  --font-label:   'Cinzel', serif;
  --font-body:    'EB Garamond', serif;

  --invite-width: min(88vw, 440px);
  --radius: 14px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(200,155,90,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 10%, rgba(247,146,130,0.12), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(249,227,223,0.55), transparent 60%),
    linear-gradient(180deg, var(--ivory) 0%, var(--cream) 45%, var(--blush) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--gold); color: #fff; }

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

a{ color: inherit; }

/* =========================================================
   Ambient canvas (petals + sparkles) — behind everything
========================================================= */
#ambient-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.butterfly-layer{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.butterfly{
  position: absolute;
  top: 0; left: 0;
  width: 26px; height: 22px;
  will-change: offset-distance, transform;
  offset-rotate: auto;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: .85;
}
.butterfly .wing{
  width:100%; height:100%;
  background:
    radial-gradient(circle at 30% 50%, rgba(200,155,90,.55), transparent 65%),
    radial-gradient(circle at 70% 50%, rgba(166,59,46,.28), transparent 65%);
  clip-path: polygon(50% 0%, 100% 35%, 78% 100%, 50% 65%, 22% 100%, 0% 35%);
  filter: drop-shadow(0 1px 2px rgba(75,58,49,.15));
  animation: flap 0.42s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes flap{
  from{ transform: scaleX(1); }
  to{ transform: scaleX(.55); }
}

.b1{
  offset-path: path("M -60,420 C 180,180 320,620 560,340 C 760,110 980,480 1220,260");
  animation-name: fly1;
  animation-duration: 26s;
  animation-delay: 1s;
}
.b2{
  offset-path: path("M 1180,760 C 940,560 760,900 520,700 C 300,520 140,820 -60,600");
  animation-name: fly1;
  animation-duration: 32s;
  animation-delay: 6s;
}
.b3{
  offset-path: path("M -80,1300 C 220,1080 380,1480 640,1220 C 860,1000 1040,1360 1240,1120");
  animation-name: fly1;
  animation-duration: 38s;
  animation-delay: 12s;
}
@keyframes fly1{
  0%{ offset-distance: 0%; opacity: 0; }
  6%{ opacity: .85; }
  94%{ opacity: .85; }
  100%{ offset-distance: 100%; opacity: 0; }
}

@supports not (offset-path: path("M0,0")){
  .butterfly{ display:none; }
}

/* =========================================================
   Side dot navigation
========================================================= */
.dot-nav{
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 6px;
}
.dot-nav .dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.4px solid var(--gold);
  opacity: .55;
  transition: all .35s ease;
  position: relative;
}
.dot-nav .dot:hover{ opacity: 1; transform: scale(1.15); }
.dot-nav .dot.active{
  background: var(--gold);
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(200,155,90,.18);
}

@media (max-width: 860px){
  .dot-nav{ display:none; }
}

/* =========================================================
   Music toggle
========================================================= */
.music-toggle{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 45;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(200,155,90,.45);
  background: rgba(255,248,241,.85);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(75,58,49,.14);
  display: flex; align-items:center; justify-content:center;
  cursor: pointer;
  color: var(--gold-deep);
  transition: transform .3s ease, box-shadow .3s ease;
}
.music-toggle:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(75,58,49,.18); }
.music-toggle svg{ width: 20px; height: 20px; }
.music-bars{
  position: absolute;
  bottom: 8px; right: 8px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  opacity: 0;
  transition: opacity .3s ease;
}
.music-bars i{
  width: 2px;
  background: var(--gold);
  border-radius: 1px;
  animation: bar 0.9s ease-in-out infinite;
}
.music-bars i:nth-child(1){ animation-delay: 0s; }
.music-bars i:nth-child(2){ animation-delay: .2s; }
.music-bars i:nth-child(3){ animation-delay: .4s; }
@keyframes bar{
  0%,100%{ height: 3px; }
  50%{ height: 10px; }
}
.music-toggle.playing{
  animation: pulse-ring 2.4s ease-in-out infinite;
}
.music-toggle.playing .music-bars{ opacity: 1; }
.music-toggle.playing .music-icon{ animation: spin-slow 6s linear infinite; }
@keyframes pulse-ring{
  0%,100%{ box-shadow: 0 6px 18px rgba(75,58,49,.14), 0 0 0 0 rgba(200,155,90,.35); }
  50%{ box-shadow: 0 6px 18px rgba(75,58,49,.14), 0 0 0 8px rgba(200,155,90,0); }
}
@keyframes spin-slow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* =========================================================
   Layout — main + invitation pages
========================================================= */
main{
  position: relative;
  z-index: 5;
}

.invite-page{
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.invite-frame{
  width: var(--invite-width);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(75,58,49,.10),
    0 24px 55px -20px rgba(75,58,49,.35),
    0 0 0 1px rgba(200,155,90,.18);
  background: #fff;
}
.invite-frame img{
  width: 100%;
  height: auto;
  display: block;
}

.hero-page{ padding-top: 64px; }

.scroll-cue{
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--gold-deep);
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .75;
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* Section divider (monogram) between invitation pages */
.divider{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 10px;
}
.divider::before,
.divider::after{
  content:'';
  position:absolute;
  top:50%;
  width: 28%;
  max-width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,155,90,.55), transparent);
}
.divider::before{ left: 4%; }
.divider::after{ right: 4%; }
.divider img{
  width: 34px; height: 34px;
  object-fit: contain;
  opacity: .85;
}

/* =========================================================
   Countdown + Venue info block
========================================================= */
.info-block{
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 22px 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.monogram-divider img{
  width: 56px; height: 56px;
  object-fit: contain;
  opacity: .9;
  margin-bottom: 6px;
}

.eyebrow{
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 8px 0 4px;
}
.eyebrow.small{ font-size: 10px; margin-bottom: 10px; }

.script-heading{
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3rem);
  color: var(--maroon);
  margin: 2px 0 26px;
  line-height: 1.15;
}

.scratch-wrap{
  position: relative;
  border-radius: 18px;
  isolation: isolate;
}

.scratch-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  cursor: pointer;
  touch-action: none;
  box-shadow: 0 18px 40px -22px rgba(75,58,49,.35);
  transition: opacity .5s ease;
}
.scratch-canvas.hidden{
  opacity: 0;
  pointer-events: none;
}

.scratch-hint{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 82%;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  cursor: pointer;
  padding: 6px 4px;
  white-space: normal;
  animation: hint-pulse 2.2s ease-in-out infinite;
}
.scratch-hint svg{ flex-shrink: 0; }
.scratch-hint.hidden{ display: none; }
@keyframes hint-pulse{
  0%,100%{ opacity: .85; transform: translate(-50%,-50%) scale(1); }
  50%{ opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
}

@media (prefers-reduced-motion: reduce){
  .scratch-hint{ animation: none; }
}

.countdown{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(200,155,90,.35);
  border-radius: 18px;
  padding: 20px 18px;
  box-shadow: 0 18px 40px -22px rgba(75,58,49,.35);
  backdrop-filter: blur(4px);
}
.cd-unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
}
.cd-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5.5vw, 2.5rem);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-label{
  margin-top: 6px;
  font-family: var(--font-label);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cd-sep{
  color: var(--gold);
  font-size: 1.4rem;
  transform: translateY(-6px);
  opacity: .6;
}

.countdown-caption{
  margin-top: 16px;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  letter-spacing: .02em;
}

.venue-card{
  margin-top: 40px;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  border: 1px solid rgba(200,155,90,.35);
  border-radius: 18px;
  padding: 28px 26px 30px;
  box-shadow: 0 18px 40px -24px rgba(75,58,49,.35);
}
.venue-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--maroon);
  margin: 0 0 4px;
}
.venue-address{
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 15px;
}
.venue-detail{
  margin: 2px 0;
  font-size: 14px;
  color: var(--ink);
}
.directions-btn{
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: #fff;
  text-decoration: none;
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -8px rgba(168,124,66,.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.directions-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(168,124,66,.6);
}
.directions-btn svg{ flex-shrink:0; }

/* =========================================================
   Footer
========================================================= */
.site-footer{
  text-align: center;
  padding: 70px 20px 90px;
}
.footer-mono{ margin: 0 auto 14px; opacity: .9; }
.footer-names{
  font-family: var(--font-script);
  font-size: clamp(2rem, 6vw, 2.6rem);
  color: var(--maroon);
  margin: 0;
}
.footer-names .amp{ color: var(--gold-deep); margin: 0 6px; }
.footer-date{
  font-family: var(--font-label);
  letter-spacing: .3em;
  font-size: 13px;
  color: var(--gold-deep);
  margin: 8px 0 18px;
}
.footer-credit{
  font-style: italic;
  color: var(--ink-soft);
  font-size: 14.5px;
}

/* =========================================================
   Scroll reveal
========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(34px) scale(.97);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =========================================================
   Responsive tuning
========================================================= */
@media (max-width: 600px){
  :root{ --invite-width: 90vw; }
  .invite-page{ padding: 34px 12px; }
  .music-toggle{ width: 46px; height: 46px; left: 14px; bottom: 14px; }
  .countdown{ gap: 6px; padding: 16px 10px; }
  .cd-unit{ min-width: 46px; }
  .venue-card{ padding: 22px 18px 26px; }
}

@media (min-width: 1200px){
  :root{ --invite-width: 420px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ transition: none; opacity: 1; transform: none; }
  .butterfly, .music-toggle.playing, .scroll-cue{ animation: none; }
  #ambient-canvas{ display:none; }
}