:root{
  --noir:#140208;
  --wine:#2c0715;
  --rouge:#d61f4e;
  --blush:#ff9db8;
  --gold:#e8c07a;
  --cord:#c98d5a;
  --cord-dark:#8a5a35;
  --ivory:#f6e8e6;
  --muted:#a4788a;
  --glass:rgba(38,8,22,.62);
  --line:rgba(255,157,184,.16);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Jost',sans-serif;color:var(--ivory);background:var(--noir);
  height:100dvh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
}

/* ---------- scene ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;}
.glow{
  position:absolute;inset:-15% -10% auto -10%;height:75%;
  background:
    radial-gradient(55% 70% at 30% 5%, rgba(214,31,78,.22), transparent 60%),
    radial-gradient(50% 65% at 75% 15%, rgba(232,192,122,.14), transparent 60%),
    radial-gradient(45% 55% at 50% 40%, rgba(255,157,184,.10), transparent 65%);
  filter:blur(10px);
}
.bridge{position:absolute;left:0;right:0;bottom:6%;width:100%;z-index:1;}
.water{
  position:absolute;left:0;right:0;bottom:0;height:6.5%;
  background:linear-gradient(180deg, rgba(214,31,78,.10), rgba(20,2,8,.9));
  box-shadow:0 -1px 0 rgba(232,192,122,.15);
}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%, transparent 50%, rgba(0,0,0,.75));}

/* ---------- install prompt ---------- */
.install-btn{
  position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  z-index:20;font-family:'Jost',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.04em;
  color:var(--ivory);background:var(--glass);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset;
  transition:transform .2s ease, background .2s ease;
}
.install-btn:hover{background:rgba(214,31,78,.22);}
.install-btn:active{transform:scale(.96);}
.install-btn[hidden]{display:none;}

/* ---------- panel ---------- */
.panel{
  position:relative;z-index:5;width:min(540px,92vw);
  padding:clamp(20px,3.5vh,34px) clamp(18px,5vw,38px);
  background:var(--glass);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 30px 80px rgba(0,0,0,.65), 0 0 60px rgba(214,31,78,.08);
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:1px;
  background:linear-gradient(135deg, rgba(232,192,122,.55), transparent 40%, transparent 60%, rgba(214,31,78,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}


.couple{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;text-align:center;
  font-size:clamp(2rem,7.5vw,3rem);letter-spacing:.08em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--blush));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.couple .amp{
  -webkit-text-fill-color:var(--rouge);font-style:normal;
  display:inline-block;font-size:.8em;
  filter:drop-shadow(0 0 10px rgba(214,31,78,.7));
}

/* rope divider — the signature */
.rope{
  position:relative;height:7px;border-radius:8px;margin:clamp(10px,1.8vh,16px) 8% clamp(14px,2.4vh,22px);
  background:repeating-linear-gradient(60deg, var(--cord) 0 5px, var(--cord-dark) 5px 10px);
  box-shadow:0 1px 0 rgba(0,0,0,.6), 0 0 14px rgba(201,141,90,.25);
}
.rope::before,.rope::after{
  content:"";position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 35% 35%, var(--cord), var(--cord-dark) 75%);
  box-shadow:0 0 8px rgba(201,141,90,.4);
}
.rope::before{left:-7px;} .rope::after{right:-7px;}
.rope-knot{
  position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;
  transform:translate(-50%,-50%) rotate(25deg);
  background:
    radial-gradient(circle at 35% 30%, var(--cord), var(--cord-dark) 80%);
  border:2px solid var(--cord-dark);
  box-shadow:0 0 10px rgba(201,141,90,.5), inset 0 0 4px rgba(0,0,0,.5);
}

/* ---------- carousel ---------- */
.carousel-wrapper{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;}
.carousel{display:flex;transition:transform .55s cubic-bezier(.16,1,.3,1);}
.page{min-width:100%;flex-shrink:0;padding:0 2px;}

.ev-title{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
  text-align:center;font-size:clamp(1.25rem,5vw,1.75rem);line-height:1.15;
  color:var(--ivory);margin-bottom:2px;
}
.ev-date{
  text-align:center;font-weight:500;letter-spacing:.2em;font-size:.66rem;
  color:var(--gold);text-transform:uppercase;margin-bottom:clamp(10px,2vh,16px);
}
.ev-note{
  text-align:center;font-weight:500;font-size:.82rem;color:var(--muted);
  font-style:italic;margin-top:clamp(8px,1.6vh,14px);min-height:1.2em;
}

.count{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.unit{
  text-align:center;padding:clamp(8px,1.6vh,14px) 2px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.unit .n{
  font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,7vw,2.4rem);line-height:1;
  text-shadow:0 0 16px rgba(214,31,78,.45);
}
.unit .c{font-weight:600;letter-spacing:.2em;font-size:.54rem;color:var(--muted);text-transform:uppercase;margin-top:4px;}

/* states */

.now-msg{
  text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;
  font-size:clamp(1.6rem,7vw,2.4rem);color:var(--blush);
  text-shadow:0 0 22px rgba(255,157,184,.5);padding:clamp(14px,3vh,26px) 0;
}
.past-msg{
  text-align:center;font-weight:500;color:var(--muted);font-size:.95rem;
  padding:clamp(14px,3vh,26px) 0;
}
.past-msg b{color:var(--gold);font-weight:600;}
.page.is-past{opacity:.72;}


.dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:clamp(10px,1.8vh,16px);flex-wrap:wrap;}
.dot-nav{
  width:7px;height:7px;border-radius:50%;background:rgba(255,157,184,.22);
  cursor:pointer;transition:all .3s ease;border:none;padding:0;
}
.dot-nav.active{background:var(--rouge);width:18px;border-radius:4px;box-shadow:0 0 8px rgba(214,31,78,.6);}
.dot-nav.done{background:rgba(232,192,122,.45);}
.dot-nav:focus-visible{outline:2px solid var(--blush);outline-offset:2px;}



/* ---------- animations ---------- */
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes flick{0%,100%{opacity:.9;}48%{opacity:.35;}52%{opacity:1;}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .carousel{transition:transform .3s ease;}
}