:root{
  --navy:#1f3a5f;
  --hydrangea:#6f8fd6;
  --hydrangea-soft:#a9c0ec;
  --seaglass:#bfe3d8;
  --sand:#f4ecdd;
  --shell:#fff8ef;
  --coral:#ef9a8d;
  --gold:#e7b75f;
  --ink:#23344a;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--seaglass), transparent 60%),
    linear-gradient(180deg, var(--shell) 0%, var(--sand) 55%, #eadfca 100%);
  overflow-x:hidden;
}

/* ---------- ENTRY GATE ---------- */
.gate{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:
    radial-gradient(900px 500px at 50% 20%, rgba(111,143,214,.35), transparent 70%),
    linear-gradient(180deg,#13243d,#1f3a5f);
  color:var(--shell); text-align:center;
  transition:opacity .8s ease, visibility .8s ease;
}
.gate.hide{opacity:0; visibility:hidden}
.gate-inner{padding:2rem; animation:floatUp 1s ease both}
.gate-emoji{font-size:4.5rem; animation:bob 2.4s ease-in-out infinite}
.gate-title{font-family:"Fraunces",serif; font-weight:600; font-size:clamp(1.6rem,5vw,2.6rem); margin-top:.4rem}
.gate-sub{opacity:.85; margin:.5rem 0 1.8rem; font-size:1.05rem}
.enter-btn{
  font-family:"Nunito",sans-serif; font-weight:700; font-size:1.25rem;
  color:var(--navy); background:linear-gradient(180deg,#fff,#ffe9c9);
  border:none; border-radius:999px; padding:1rem 2.4rem; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.enter-btn:hover{transform:translateY(-2px) scale(1.03)}
.enter-btn:active{transform:translateY(1px)}
.gate-hint{opacity:.6; margin-top:1rem; font-size:.9rem}

/* ---------- FX CANVAS ---------- */
#fx{position:fixed; inset:0; z-index:40; pointer-events:none}

/* ---------- PARTY ---------- */
.party{
  position:relative; z-index:10;
  opacity:0; transition:opacity 1s ease .2s;
  min-height:100%;
  padding:clamp(1.5rem,4vw,3rem) 1.2rem 3rem;
  display:flex; flex-direction:column; align-items:center; gap:clamp(2rem,5vw,3.5rem);
}
.party.show{opacity:1}

/* floating emojis */
.floaties{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.floaties span{position:absolute; bottom:-10vh; font-size:1.8rem; opacity:.55; animation:rise linear infinite}

/* ---------- HERO ---------- */
.hero{text-align:center; margin-top:1rem}
.kicker{
  font-weight:700; letter-spacing:.04em; color:var(--hydrangea);
  text-transform:lowercase; margin-bottom:.6rem; font-size:.95rem;
}
.headline{font-family:"Fraunces",serif; line-height:.98; letter-spacing:-.01em}
.headline .line1{display:block; font-weight:600; font-size:clamp(2rem,7vw,4rem); color:var(--navy)}
.headline .line2{
  display:block; font-weight:600; font-size:clamp(4rem,16vw,9rem);
  background:linear-gradient(180deg,var(--hydrangea),var(--navy));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:pop 1s cubic-bezier(.2,1.4,.4,1) both;
}
.subhead{font-family:"Dancing Script",cursive; font-size:clamp(1.4rem,4vw,2rem); color:var(--coral); margin-top:.3rem}

/* ---------- CARD ---------- */
.card-section{display:flex; flex-direction:column; align-items:center; gap:1rem; z-index:10}
.card-cue{
  font-family:"Dancing Script",cursive; font-size:clamp(1.3rem,4vw,1.9rem);
  color:var(--navy); animation:nudge 1.8s ease-in-out infinite;
}
.card-stage{perspective:1600px}
.flip-card{
  width:min(94vw,760px); aspect-ratio:1/1; cursor:pointer;
  border-radius:14px; outline:none;
}
.flip-inner{
  position:relative; width:100%; height:100%;
  transition:transform .9s cubic-bezier(.3,1.1,.35,1); transform-style:preserve-3d;
  border-radius:14px;
}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-card:hover .flip-inner{box-shadow:0 30px 60px rgba(31,58,95,.3)}
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:14px; overflow:hidden; background:var(--shell);
  box-shadow:0 18px 40px rgba(31,58,95,.22), 0 2px 0 rgba(0,0,0,.04);
  border:1px solid rgba(31,58,95,.08);
  display:grid; place-items:center;
}
.flip-face img{width:100%; height:100%; object-fit:contain; display:block}
.flip-back{transform:rotateY(180deg)}
.face-placeholder{display:none; text-align:center; color:var(--hydrangea); padding:1.5rem}
.flip-face.placeholder .face-placeholder{display:block}
.face-placeholder span{font-size:3rem; display:block}
.face-placeholder p{font-weight:700; margin:.4rem 0 .2rem; color:var(--navy); text-transform:uppercase; letter-spacing:.08em; font-size:.85rem}
.face-placeholder small{color:#90a0b8}
.face-placeholder code{background:#eef2f9; padding:.1rem .35rem; border-radius:5px; font-size:.78rem}
.card-flipped-note{
  font-family:"Dancing Script",cursive; font-size:clamp(1.1rem,3.4vw,1.5rem);
  color:var(--hydrangea); opacity:0; transition:opacity .6s ease; min-height:1.6rem;
}
.card-flipped-note.show{opacity:1}

/* ---------- MESSAGES ---------- */
.messages{width:min(92vw,560px); z-index:10}
.msg-card{
  background:var(--shell); border:1px solid rgba(31,58,95,.1);
  border-radius:18px; padding:1.6rem 1.8rem; text-align:center;
  box-shadow:0 14px 36px rgba(31,58,95,.12);
}
.msg-card h2{font-family:"Fraunces",serif; font-weight:600; color:var(--navy); margin-bottom:.6rem; font-size:clamp(1.2rem,3.4vw,1.5rem)}
.msg-card p{font-size:1.05rem; line-height:1.6; color:#41566f}

/* ---------- FOOTER ---------- */
.footer{display:flex; flex-direction:column; align-items:center; gap:1rem; z-index:10; margin-top:1rem}
.mute-btn,.boom-btn{
  font-family:"Nunito",sans-serif; font-weight:700; font-size:1rem;
  border:none; border-radius:999px; padding:.65rem 1.4rem; cursor:pointer;
  background:var(--shell); color:var(--navy); border:1px solid rgba(31,58,95,.15);
  box-shadow:0 6px 16px rgba(31,58,95,.12); transition:transform .15s ease;
}
.boom-btn{background:linear-gradient(180deg,var(--hydrangea),var(--navy)); color:#fff; border:none}
.mute-btn:hover,.boom-btn:hover{transform:translateY(-2px)}
.made{font-family:"Dancing Script",cursive; color:var(--hydrangea); font-size:1.2rem}

/* ---------- ANIMATIONS ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes rise{to{transform:translateY(-120vh) rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important}
}