:root{
  --deep:      #1a2f3d;
  --mid:       #2e5068;
  --light:     #4a7a95;
  --gold:      #c9a24b;
  --gold-soft: #dfc688;
  --ivory:     #edf3f7;
  --ink:       #1a2d38;
  --mist:      #b8cdd8;
  --line:      rgba(201,162,75,0.35);

  /* kept for compatibility with any var() references */
  --maroon-deep:  #1a2f3d;
  --maroon:       #2e5068;
  --maroon-light: #4a7a95;
  --blush:        #b8cdd8;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3, .display{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  letter-spacing:0.02em;
}

a{ color:inherit; }

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

.wrap{
  max-width:640px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- HERO VIDEO BACKGROUND ---------- */
#hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero-vignette{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(13,30,41,0.04) 0%, rgba(13,30,41,0.18) 100%);
  z-index:1;
}

/* ---------- INVISIBLE TAP LAYER (starts video, blocks native controls) ---------- */
#video-tap-layer{
  position:absolute;
  inset:0;
  z-index:10;
  cursor:pointer;
}
#video-tap-layer.done{
  display:none;
}

/* Suppress browser-native play overlay on paused video */
#hero-video::-webkit-media-controls,
#hero-video::-webkit-media-controls-panel,
#hero-video::-webkit-media-controls-play-button,
#hero-video::-webkit-media-controls-start-playback-button{
  display:none !important;
  opacity:0 !important;
}

/* ---------- VIDEO TEXT (fades in at 4 s) ---------- */
#video-text-overlay{
  position:relative;
  z-index:2;
  opacity:0;
  transition:opacity 1.4s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
#video-text-overlay.visible{ opacity:1; }

.vt-kicker{
  font-family:'Jost', sans-serif;
  font-size:11px;
  letter-spacing:0.34em;
  color:#1a2f3d;
  margin-bottom:26px;
  text-shadow:0 1px 6px rgba(255,255,255,0.7);
}

.vt-names{
  font-family:'Pinyon Script', cursive;
  font-weight:400;
  font-size:clamp(68px, 15vw, 130px);
  line-height:1.0;
  color:#1a2f3d;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-shadow:0 2px 16px rgba(255,255,255,0.7), 0 1px 4px rgba(255,255,255,0.95);
}

.vt-amp{
  font-family:'Pinyon Script', cursive;
  font-style:normal;
  color:#8a6520;
  font-size:clamp(40px, 8vw, 72px);
  margin:0;
  line-height:1.1;
  text-shadow:0 2px 10px rgba(255,255,255,0.7);
}

.vt-tagline{
  margin-top:24px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(16px, 2.5vw, 22px);
  font-weight:400;
  color:#1a2f3d;
  letter-spacing:0.02em;
  text-shadow:0 1px 6px rgba(255,255,255,0.7);
}

.vt-date{
  margin-top:34px;
  font-family:'Cormorant Garamond', serif;
  font-size:24px;
  letter-spacing:0.08em;
  color:#8a6520;
  text-shadow:0 1px 8px rgba(255,255,255,0.7);
}

/* ---------- ornamental svg ---------- */
.corner{
  position:absolute;
  width:96px;
  height:96px;
  opacity:0.85;
  z-index:3;
}
.corner svg{ width:100%; height:100%; }
.corner.tl{ top:22px; left:22px; }
.corner.tr{ top:22px; right:22px; transform:scaleX(-1); }
.corner.bl{ bottom:22px; left:22px; transform:scaleY(-1); }
.corner.br{ bottom:22px; right:22px; transform:scale(-1,-1); }

.divider{
  width:120px;
  height:18px;
  margin:26px auto;
  opacity:0.85;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  background:#c4cdd5; /* matches video's pale blue-grey first frame */
  color:var(--ivory);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 24px;
  overflow:hidden;
}

.hero-inner{ position:relative; z-index:2; }

.hero .kicker{
  font-family:'Jost',sans-serif;
  font-size:13px;
  letter-spacing:0.32em;
  color:var(--gold-soft);
  margin-bottom:26px;
}

.hero .names{
  font-size:clamp(52px, 11vw, 96px);
  line-height:1.05;
  color:var(--ivory);
}

.hero .amp{
  display:block;
  font-style:italic;
  color:var(--gold);
  font-size:clamp(30px, 6vw, 46px);
  margin:6px 0;
}

.hero .tagline{
  margin-top:28px;
  font-size:17px;
  color:var(--mist);
  letter-spacing:0.02em;
}

.hero .date-line{
  margin-top:34px;
  font-family:'Cormorant Garamond', serif;
  font-size:24px;
  letter-spacing:0.08em;
  color:var(--gold-soft);
}

.scroll-cue{
  position:absolute;
  bottom:34px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:0.25em;
  color:var(--mist);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  z-index:3;
  text-decoration:none;
}
.scroll-cue .stem{
  width:1px;
  height:34px;
  background:linear-gradient(var(--gold), transparent);
  animation:stem 2.2s ease-in-out infinite;
}
@keyframes stem{
  0%,100%{ opacity:0.3; }
  50%{ opacity:1; }
}

/* ---------- SECTIONS ---------- */
section{
  padding:88px 0;
  position:relative;
}

.eyebrow{
  text-align:center;
  font-size:13px;
  letter-spacing:0.28em;
  color:var(--mid);
  margin-bottom:10px;
}

.section-title{
  text-align:center;
  font-size:clamp(30px, 5vw, 42px);
  color:var(--deep);
  margin-bottom:8px;
}

.section-sub{
  text-align:center;
  max-width:440px;
  margin:0 auto 8px;
  color:#4a6878;
  font-size:16px;
}

/* ---------- SCRATCH CARD ---------- */
.scratch-section{
  background:var(--ivory);
  padding-bottom:0;
}

.scratch-card{
  position:relative;
  max-width:340px;
  height:210px;
  margin:44px auto 0;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 20px 44px rgba(26,47,61,0.28);
  border:1px solid var(--line);
  -webkit-user-select:none;
  user-select:none;
}

.scratch-reveal{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, var(--light), var(--deep) 70%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--ivory);
  padding:20px;
}

.reveal-label{
  font-size:11px;
  letter-spacing:0.3em;
  color:var(--gold-soft);
  margin-bottom:12px;
}

.reveal-date{
  font-family:'Cormorant Garamond', serif;
  font-size:36px;
  line-height:1.2;
  color:var(--ivory);
}

.reveal-date-sep{
  font-size:16px;
  color:var(--gold-soft);
}

.reveal-sub{
  margin-top:12px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:17px;
  color:var(--gold-soft);
}

#scratchCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:grab;
  touch-action:none;
  transition:opacity 0.6s ease;
}
#scratchCanvas:active{ cursor:grabbing; }
#scratchCanvas.cleared{
  opacity:0;
  pointer-events:none;
}

.scratch-hint{
  text-align:center;
  margin-top:16px;
  font-size:12px;
  letter-spacing:0.14em;
  color:#6a8a9a;
  transition:opacity 0.5s ease;
}
.scratch-hint.hidden{ opacity:0; }

/* ---------- COUNTDOWN ---------- */
.countdown-section .eyebrow{
  font-size:11px;
  margin-bottom:6px;
}
.countdown-section .section-title{
  font-size:clamp(18px, 3.5vw, 26px);
  margin-bottom:4px;
}
.countdown-section .section-sub{
  font-size:13px;
  margin-bottom:0;
}

.countdown-section{
  background:var(--ivory);
  max-height:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  transition:
    max-height 1.5s cubic-bezier(0.4, 0, 0.2, 1),
    padding    1.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.9s ease 0.6s;
}
.countdown-section.revealed{
  max-height:700px;
  padding-top:0;
  padding-bottom:72px;
  opacity:1;
}

.countdown{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:46px;
}

.count-block{
  width:104px;
  padding:22px 0 16px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(74,122,149,0.08), transparent);
}

.count-num{
  font-family:'Cormorant Garamond', serif;
  font-size:46px;
  color:var(--deep);
  font-variant-numeric:tabular-nums;
}

.count-label{
  margin-top:6px;
  font-size:11px;
  letter-spacing:0.2em;
  color:#6a8a9a;
}

.countdown-done{
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:26px;
  color:var(--deep);
  margin-top:46px;
}

/* ---------- CAROUSEL ---------- */
.carousel-section{
  background:var(--deep);
  color:var(--ivory);
}
.carousel-section .eyebrow{ color:var(--gold-soft); }
.carousel-section .section-title{ color:var(--ivory); }
.carousel-section .section-sub{ color:var(--mist); }

.carousel{
  position:relative;
  max-width:520px;
  margin:46px auto 0;
  aspect-ratio:4/5;
  border:1px solid var(--line);
  padding:10px;
}

.carousel-track{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.9s ease;
}
.slide.active{ opacity:1; }

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  background:linear-gradient(135deg, var(--light), var(--deep));
}

.slide .fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  font-family:'Cormorant Garamond', serif;
  font-size:15px;
  color:var(--gold-soft);
  background:linear-gradient(135deg, var(--light), var(--deep));
}

.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--gold-soft);
  background:rgba(26,47,61,0.55);
  color:var(--ivory);
  font-size:17px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  transition:background 0.25s ease;
}
.carousel-btn:hover{ background:rgba(201,162,75,0.35); }
.carousel-btn.prev{ left:-19px; }
.carousel-btn.next{ right:-19px; }

.dots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:22px;
}
.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(237,243,247,0.35);
  cursor:pointer;
  transition:background 0.25s ease, transform 0.25s ease;
}
.dot.active{
  background:var(--gold);
  transform:scale(1.3);
}

/* ---------- DETAILS / VENUE ---------- */
.details-section{ background:var(--ivory); }

.venue-card{
  max-width:480px;
  margin:44px auto 0;
  text-align:center;
}

.venue-name{
  font-size:26px;
  color:var(--deep);
}

.venue-addr{
  margin-top:6px;
  color:#4a6878;
  font-size:15px;
}

.venue-time{
  margin-top:18px;
  display:inline-block;
  padding:8px 22px;
  border:1px solid var(--line);
  font-size:13px;
  letter-spacing:0.1em;
  color:var(--mid);
}

.map-frame{
  margin-top:32px;
  border:1px solid var(--line);
  padding:6px;
  background:#fff;
}

.map-frame iframe{
  width:100%;
  height:320px;
  border:0;
  display:block;
}

.directions-link{
  display:block;
  text-align:center;
  margin-top:16px;
  font-size:13px;
  letter-spacing:0.08em;
  color:var(--mid);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ---------- RSVP ---------- */
.rsvp-section{
  background:var(--deep);
  color:var(--ivory);
}
.rsvp-section .eyebrow{ color:var(--gold-soft); }
.rsvp-section .section-title{ color:var(--ivory); }
.rsvp-section .section-sub{ color:var(--mist); }

.rsvp-form{
  max-width:440px;
  margin:44px auto 0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.field label{
  display:block;
  font-size:12px;
  letter-spacing:0.14em;
  color:var(--gold-soft);
  margin-bottom:8px;
}

.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(237,243,247,0.3);
  color:var(--ivory);
  font-family:'Jost', sans-serif;
  font-size:16px;
  padding:8px 2px;
  outline:none;
  transition:border-color 0.25s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(237,243,247,0.38); }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--gold); }

.field select option{ color:#111; }

.field textarea{ resize:vertical; min-height:70px; }

.attend-group{
  display:flex;
  gap:12px;
}
.attend-opt{
  flex:1;
  text-align:center;
  padding:12px 0;
  border:1px solid rgba(237,243,247,0.3);
  cursor:pointer;
  font-size:14px;
  letter-spacing:0.08em;
  transition:all 0.25s ease;
}
.attend-opt.selected{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--deep);
}

.rsvp-submit{
  margin-top:8px;
  padding:15px 0;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold-soft);
  font-family:'Jost', sans-serif;
  font-size:13px;
  letter-spacing:0.2em;
  cursor:pointer;
  transition:background 0.25s ease, color 0.25s ease;
}
.rsvp-submit:hover{
  background:var(--gold);
  color:var(--deep);
}

.rsvp-note{
  text-align:center;
  font-size:12px;
  color:rgba(237,243,247,0.5);
  margin-top:4px;
}

.rsvp-confirm{
  display:none;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:22px;
  color:var(--gold-soft);
  margin-top:44px;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--ivory);
  text-align:center;
  padding:56px 24px 40px;
}
footer .names-small{
  font-size:22px;
  color:var(--deep);
}
footer .thanks{
  margin-top:10px;
  font-size:13px;
  color:#6a8a9a;
  letter-spacing:0.08em;
}

@media (max-width:480px){
  .carousel-btn.prev{ left:6px; }
  .carousel-btn.next{ right:6px; }
  .corner{ width:66px; height:66px; }
}

/* ---------- MUSIC TOGGLE ---------- */
.music-toggle{
  position:fixed;
  bottom:24px;
  right:24px;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:var(--deep);
  color:var(--gold-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:50;
  box-shadow:0 10px 26px rgba(26,47,61,0.4);
  transition:background 0.25s ease, transform 0.2s ease;
}
.music-toggle:hover{ transform:scale(1.06); }
.music-toggle:active{ transform:scale(0.96); }

.music-toggle .icon-note{
  display:block;
}

.music-toggle .eq{
  display:none;
  align-items:flex-end;
  gap:3px;
  height:18px;
}
.music-toggle .eq span{
  display:block;
  width:3px;
  background:var(--gold-soft);
  border-radius:2px;
  animation:eq-bounce 0.9s ease-in-out infinite;
}
.music-toggle .eq span:nth-child(1){ height:8px; animation-delay:0s; }
.music-toggle .eq span:nth-child(2){ height:16px; animation-delay:0.2s; }
.music-toggle .eq span:nth-child(3){ height:11px; animation-delay:0.4s; }

@keyframes eq-bounce{
  0%, 100%{ transform:scaleY(0.4); }
  50%{ transform:scaleY(1); }
}

.music-toggle.playing{ background:var(--gold); color:var(--deep); }
.music-toggle.playing .eq span{ background:var(--deep); }
.music-toggle.playing .icon-note{ display:none; }
.music-toggle.playing .eq{ display:flex; }

@media (max-width:480px){
  .music-toggle{
    bottom:18px;
    right:18px;
    width:46px;
    height:46px;
  }
}

@media (prefers-reduced-motion: reduce){
  .music-toggle .eq span{ animation:none; }
  *{ animation:none !important; transition:none !important; }
}