@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,600&family=Jost:wght@300;400;500&display=swap');

:root{
  --bg-deep:#15080f;
  --bg-mid:#2b1420;
  --bg-mid-2:#3a1c2a;
  --gold:#d9a94e;
  --gold-soft:#e8c874;
  --blush:#e8a9bb;
  --cream:#f3e9df;
  --muted:#c9a4ab;
  --line: rgba(217,169,78,0.35);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg-deep);
  color:var(--cream);
  font-family:'Jost', sans-serif;
  overflow:hidden;
}

em{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--gold-soft);
  font-weight:500;
}

code{
  background:rgba(217,169,78,0.12);
  padding:1px 6px;
  border-radius:4px;
  font-size:0.85em;
  color:var(--gold-soft);
}

#petals{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

/* ================= GATE ================= */
#gate{
  position:fixed; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:24px;
  background:radial-gradient(ellipse at 50% 30%, var(--bg-mid-2) 0%, var(--bg-deep) 70%);
}

.gate-svg{
  width:90px; height:auto;
  color:var(--gold);
  opacity:0.85;
  margin-bottom:18px;
}
#gateLeft{ transform-origin: 20px 130px; transition: transform 0.9s cubic-bezier(.65,0,.35,1); }
#gateRight{ transform-origin: 180px 130px; transition: transform 0.9s cubic-bezier(.65,0,.35,1); }
#gate.opening #gateLeft{ transform: rotateY(85deg) translateX(-6px); }
#gate.opening #gateRight{ transform: rotateY(-85deg) translateX(6px); }
#gate.opening .gate-svg{ transform: perspective(600px); }

.gate-eyebrow{
  text-transform:uppercase;
  letter-spacing:0.25em;
  font-size:0.7rem;
  color:var(--muted);
  margin:0 0 6px;
}
.gate-title{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.2rem, 8vw, 3.4rem);
  margin:0 0 10px;
  color:var(--cream);
}
.gate-copy{
  color:var(--muted);
  font-size:0.95rem;
  max-width:320px;
  margin:0 0 26px;
}
#gateForm{
  display:flex; flex-direction:column; gap:12px;
  width:100%; max-width:280px;
}
#gatePassword{
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--cream);
  padding:12px 20px;
  font-family:'Jost',sans-serif;
  font-size:0.95rem;
  text-align:center;
  letter-spacing:0.05em;
  outline:none;
  transition:border-color 0.25s;
}
#gatePassword:focus{ border-color:var(--gold); }
#gateForm button{
  background:var(--gold);
  border:none;
  border-radius:999px;
  color:var(--bg-deep);
  padding:12px 20px;
  font-family:'Jost',sans-serif;
  font-weight:500;
  letter-spacing:0.05em;
  font-size:0.85rem;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform 0.2s, background 0.2s;
}
#gateForm button:hover{ background:var(--gold-soft); transform:translateY(-1px); }
#gateError{
  color:var(--blush);
  font-size:0.8rem;
  margin-top:14px;
  opacity:0;
  transition:opacity 0.25s;
}
#gateError.show{ opacity:1; }

/* ================= SITE SHELL ================= */
#site{
  position:relative; z-index:2;
  height:100dvh; width:100%;
  display:flex; flex-direction:column;
  animation:fadeIn 0.8s ease both;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
  gap:8px;
}
.brand{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--gold-soft);
}
.fake-url{
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--muted);
  opacity:0.6;
  margin:0;
  display:none;
}
.navlinks{
  display:flex; gap:18px;
  overflow-x:auto;
  scrollbar-width:none;
  max-width:100%;
}
.navlinks::-webkit-scrollbar{ display:none; }
.navlink{
  background:none; border:none;
  color:var(--muted);
  font-family:'Jost',sans-serif;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.15em;
  cursor:pointer;
  padding:6px 2px;
  white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:color 0.2s, border-color 0.2s;
}
.navlink.active, .navlink:hover{
  color:var(--gold-soft);
  border-bottom-color:var(--gold);
}

#sections{
  position:relative;
  flex:1;
  overflow:hidden;
}

.panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:32px 24px 60px;
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
  overflow-y:auto;
}
.panel.active{
  opacity:1; visibility:visible;
  transform:translateY(0);
  transition:opacity 0.5s ease, transform 0.5s ease;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.25em;
  font-size:0.68rem;
  color:var(--muted);
  margin:0 0 14px;
}

.hero-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(2.2rem, 7vw, 4rem);
  line-height:1.15;
  margin:0 0 20px;
  max-width:800px;
}
.hero-sub{
  max-width:520px;
  color:var(--muted);
  line-height:1.7;
  font-size:0.98rem;
  margin:0 0 30px;
}

.section-title{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  font-size:clamp(1.8rem, 5.5vw, 2.8rem);
  margin:0 0 14px;
}
.section-sub{
  color:var(--muted);
  max-width:480px;
  font-size:0.9rem;
  line-height:1.6;
  margin:0 0 30px;
}

.cta{
  background:none;
  border:1px solid var(--gold);
  color:var(--gold-soft);
  padding:13px 26px;
  border-radius:999px;
  font-family:'Jost',sans-serif;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  cursor:pointer;
  transition:background 0.25s, color 0.25s;
}
.cta:hover{ background:var(--gold); color:var(--bg-deep); }
.cta.small{ padding:10px 22px; font-size:0.75rem; }

/* ---- gallery ---- */
.polaroid-grid{
  display:flex; flex-wrap:wrap;
  gap:26px;
  justify-content:center;
  max-width:900px;
}
.polaroid{
  background:#f3ece0;
  padding:14px 14px 34px;
  border-radius:2px;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  width:170px;
  margin:0;
  transform:rotate(var(--r,0deg));
}
.p1{ --r:-6deg; } .p2{ --r:4deg; } .p3{ --r:-3deg; } .p4{ --r:5deg; }
.photo-placeholder{
  width:100%; aspect-ratio:1/1;
  background:repeating-linear-gradient(45deg, #d8c7ae, #d8c7ae 10px, #cdb99d 10px, #cdb99d 20px);
  display:flex; align-items:center; justify-content:center;
  color:#7a6650;
  font-size:0.75rem;
}
.polaroid figcaption{
  color:#5a4a3d;
  font-family:'Jost',sans-serif;
  font-size:0.7rem;
  text-align:center;
  margin-top:10px;
}

/* ---- reasons ---- */
.reason-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:18px;
  max-width:760px;
  text-align:left;
}
.reason-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  background:rgba(217,169,78,0.03);
}
.reason-num{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--gold);
  font-size:0.9rem;
}
.reason-card h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:1.2rem;
  margin:6px 0 8px;
  color:var(--cream);
}
.reason-card p{
  color:var(--muted);
  font-size:0.85rem;
  line-height:1.55;
  margin:0;
}

/* ---- letter ---- */
.letter-paper{
  background:rgba(243,233,223,0.04);
  border:1px solid var(--line);
  border-radius:6px;
  padding:34px 30px;
  max-width:560px;
  text-align:left;
}
.letter-open{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.3rem;
  color:var(--gold-soft);
  margin:0 0 14px;
}
.letter-paper p{
  color:var(--cream);
  font-size:0.92rem;
  line-height:1.75;
  margin:0 0 16px;
}
.letter-signoff{
  font-style:italic;
  color:var(--muted) !important;
}
.letter-signoff span{ color:var(--gold-soft); }

/* ---- song ---- */
.player{
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.player-bars{
  display:flex; align-items:flex-end; gap:5px;
  height:44px;
}
.player-bars span{
  width:5px; background:var(--gold);
  border-radius:3px;
  height:10px;
  animation:bar 1.2s ease-in-out infinite;
  opacity:0.75;
}
.player-bars span:nth-child(1){ animation-delay:0s; }
.player-bars span:nth-child(2){ animation-delay:0.1s; }
.player-bars span:nth-child(3){ animation-delay:0.2s; }
.player-bars span:nth-child(4){ animation-delay:0.3s; }
.player-bars span:nth-child(5){ animation-delay:0.4s; }
.player-bars span:nth-child(6){ animation-delay:0.5s; }
.player-bars span:nth-child(7){ animation-delay:0.6s; }
@keyframes bar{
  0%,100%{ height:8px; }
  50%{ height:38px; }
}
.player.playing .player-bars span{ animation-play-state:running; }
.player:not(.playing) .player-bars span{ animation-play-state:paused; }
.song-title{ color:var(--muted); font-size:0.85rem; margin:0; }

/* ---- countdown ---- */
.countdown-grid{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
}
.cd-box{
  background:rgba(217,169,78,0.05);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  min-width:82px;
}
.cd-box span{
  display:block;
  font-family:'Cormorant Garamond', serif;
  font-size:2.2rem;
  color:var(--gold-soft);
}
.cd-box label{
  font-size:0.65rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--muted);
}

/* ---- bloom ---- */
.bloom-flower{ width:110px; margin-bottom:10px; }
.petal{ fill:var(--blush); opacity:0.85; }
.bloom-center{ fill:var(--gold); }
.petal-group{
  transform-origin:100px 100px;
  animation:spin 30s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.bloom-signature{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  color:var(--gold-soft);
  font-size:1rem;
}

/* ---- footer controls ---- */
.controls{
  display:flex; align-items:center; justify-content:center;
  gap:20px;
  padding:14px;
  border-top:1px solid var(--line);
}
.arrow{
  background:none; border:1px solid var(--line);
  color:var(--gold-soft);
  width:38px; height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:1rem;
  transition:background 0.2s;
}
.arrow:hover{ background:rgba(217,169,78,0.12); }
.counter{
  font-size:0.75rem;
  letter-spacing:0.1em;
  color:var(--muted);
  font-family:'Jost',sans-serif;
}

/* ================= RESPONSIVE ================= */
@media (min-width:640px){
  .fake-url{ display:block; }
}

@media (max-width:640px){
  .topbar{ padding:14px 16px; justify-content:center; }
  .brand{ display:none; }
  .navlinks{ gap:12px; justify-content:flex-start; width:100%; }
  .navlink{ font-size:0.66rem; }
  .panel{ padding:24px 18px 50px; }
  .reason-list{ grid-template-columns:1fr; max-width:320px; }
  .polaroid{ width:130px; }
  .letter-paper{ padding:24px 18px; }
  .cd-box{ min-width:64px; padding:12px 10px; }
  .cd-box span{ font-size:1.6rem; }
  .controls{ gap:14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001s !important; transition-duration:0.001s !important; }
}