:root{
  --cyan:#39c5bb; --cyan-2:#8ff3ea; --pink:#ff4fa3; --ink:#07121f; --ink-2:#0e2238;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{background:radial-gradient(120% 80% at 50% 0%,#12385a 0%,var(--ink-2) 45%,var(--ink) 100%) var(--ink)}
body{font-family:'Quicksand',system-ui,sans-serif;color:#fff;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none;user-drag:none}
[hidden]{display:none!important}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;will-change:transform}

/* chão em grid: o container é estático, só o conteúdo interno se move (compositor) */
.grid-floor{
  position:fixed;left:-50%;right:-50%;bottom:0;height:42vh;z-index:0;pointer-events:none;overflow:hidden;
  transform:perspective(300px) rotateX(62deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent 95%);
  mask-image:linear-gradient(to top,#000 20%,transparent 95%);
}
.grid-floor::before{
  content:"";position:absolute;left:0;right:0;top:-60px;bottom:0;will-change:transform;
  background:
    linear-gradient(to top,rgba(57,197,187,.35),transparent 70%),
    repeating-linear-gradient(90deg,rgba(57,197,187,.45) 0 2px,transparent 2px 60px),
    repeating-linear-gradient(0deg,rgba(255,79,163,.35) 0 2px,transparent 2px 60px);
  animation:grid 2.4s linear infinite;
}
@keyframes grid{to{transform:translateY(60px)}}

/* cenas */
.scene{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px 16px;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.scene.is-active{opacity:1;visibility:visible}
#invite{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:12px}
.wrap{width:100%;max-width:420px;margin:auto;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:8px 0 120px}

.kicker{font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan-2);
  text-shadow:0 0 10px rgba(57,197,187,.8)}

/* neon */
.neon-title{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(2.2rem,11vw,3.4rem);line-height:1.05;
  margin:.3em 0 .4em;color:#eafffd;position:relative;will-change:transform;
  text-shadow:0 0 6px #fff,0 0 16px var(--cyan),0 0 40px var(--cyan);
  animation:flicker 5s infinite;
}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
.cover-name{font-weight:700;font-size:1.6rem;letter-spacing:.08em;color:#ffd6ec;
  text-shadow:0 0 10px var(--pink),0 0 22px var(--pink)}

/* ENVELOPE */
.envelope{
  --w:min(78vw,320px);position:relative;width:var(--w);height:calc(var(--w)*.68);
  border:0;background:none;cursor:pointer;margin:2.2rem 0 1rem;perspective:900px;will-change:transform;
  animation:float 3.4s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(57,197,187,.5));
}
@keyframes float{50%{transform:translateY(-12px) rotate(-1deg)}}
.envelope span{position:absolute;display:block}
.env-back{inset:0;background:linear-gradient(135deg,#1c8d93,#145c78);border-radius:10px}
.env-card{left:7%;right:7%;top:6%;bottom:6%;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:transform .9s cubic-bezier(.3,1.3,.4,1) .35s,opacity .3s .3s;
  position:absolute;
  background:linear-gradient(180deg,#07121f 0%,#0e2238 45%,#14507a 100%);
  border:1px solid rgba(143,243,234,.55);box-shadow:inset 0 0 22px rgba(57,197,187,.3)}
/* chão quadriculado em perspectiva, igual ao do fundo da página */
.env-card::before{
  content:"";position:absolute;left:-90%;right:-90%;bottom:0;height:110%;
  background:
    linear-gradient(to top,rgba(57,197,187,.35),transparent 75%),
    repeating-linear-gradient(90deg,rgba(57,197,187,.85) 0 2px,transparent 2px 34px),
    repeating-linear-gradient(0deg,rgba(255,79,163,.75) 0 2px,transparent 2px 34px);
  transform:perspective(260px) rotateX(56deg);transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent 92%);
  mask-image:linear-gradient(to top,#000 30%,transparent 92%);
  animation:cardgrid 1.4s linear infinite;
}
@keyframes cardgrid{to{background-position:0 0,0 0,0 34px}}
.env-card img{position:relative;z-index:1;height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 0 12px rgba(57,197,187,.7))}
.env-front{inset:0;border-radius:10px;background:linear-gradient(180deg,#27b1b0,#168a95);
  clip-path:polygon(0 100%,0 22%,50% 62%,100% 22%,100% 100%)}
.env-flap{left:0;right:0;top:0;height:62%;background:linear-gradient(180deg,#43d3c9,#25a9ab);
  clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s ease,z-index 0s .3s;z-index:3;border-radius:10px 10px 0 0}
.env-seal{left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:4;
  display:flex!important;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff8cc6,var(--pink));box-shadow:0 0 18px var(--pink);
  animation:pulse 1.6s ease-in-out infinite;transition:opacity .3s}
@keyframes pulse{50%{transform:scale(1.18)}}
.envelope.open{animation:none}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}
.envelope.open .env-seal{opacity:0;animation:none}
.envelope.open .env-card{opacity:1;transform:translateY(-62%) scale(1.12);z-index:2}

.tap{margin-top:1.4rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--cyan-2);
  animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}

/* CONVITE */
.hero{width:min(46vw,200px);height:auto;margin-bottom:.2rem;opacity:0;will-change:transform;
  filter:drop-shadow(0 0 18px rgba(57,197,187,.7))}
.name-title{
  font-size:clamp(3rem,17vw,4.8rem);line-height:.98;margin:.2em 0 .15em;color:#fff0f8;
  text-shadow:0 0 6px #fff,0 0 18px var(--pink),0 0 44px var(--pink);
}
.name-title span{display:block}
.age{font-family:'Orbitron',sans-serif;font-weight:700;font-size:1.8rem;letter-spacing:.12em;margin-bottom:1rem;
  display:flex;align-items:baseline;justify-content:center;gap:.35em;
  color:#fff;text-shadow:0 0 10px var(--cyan),0 0 24px var(--cyan)}
.age b{font-size:4.6rem;line-height:1;color:#eafffd;text-shadow:0 0 8px #fff,0 0 20px var(--cyan),0 0 44px var(--cyan)}

.card{
  width:100%;padding:18px 16px;border-radius:22px;background:rgba(14,40,62,.72);
  border:1px solid rgba(143,243,234,.45);box-shadow:0 0 24px rgba(57,197,187,.25)}
.date-row{display:flex;align-items:center;justify-content:space-around;font-family:'Orbitron',sans-serif}
.date-row span{font-size:1.1rem;letter-spacing:.12em;color:var(--cyan-2)}
.date-row strong{font-size:3.2rem;color:var(--pink);text-shadow:0 0 16px var(--pink);line-height:1}
.place{margin-top:12px;font-size:1.2rem;font-weight:700}
.addr{opacity:.75;font-size:.95rem;margin-top:2px}
.note{display:inline-block;margin-top:10px;padding:6px 16px;border-radius:999px;font-weight:700;color:#052b2e;
  background:linear-gradient(135deg,#8ff3ea,#39c5bb);box-shadow:0 0 14px rgba(57,197,187,.6)}

/* relógio: 4 colunas iguais, sempre do mesmo tamanho */
.countdown{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0 0}
.countdown div{min-width:0;text-align:center;padding:10px 4px;border-radius:14px;
  background:rgba(0,0,0,.35);border:1px solid rgba(57,197,187,.4)}
.countdown b{display:block;font-family:'Orbitron',sans-serif;font-size:1.5rem;color:var(--cyan-2);
  text-shadow:0 0 10px var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
.countdown small{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.foot{margin-top:20px;letter-spacing:.5em;color:var(--cyan-2);opacity:.7}

/* barra de botões sempre visível */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:10px;justify-content:center;
  padding:26px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(7,18,31,.3),rgba(7,18,31,0));
  opacity:0;
}
#invite.is-active .dock{animation:dockin .8s ease 1.6s forwards}
@keyframes dockin{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.btn{flex:1;max-width:210px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px 8px;border-radius:999px;text-decoration:none;font-weight:700;font-size:.78rem;line-height:1.2;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;position:relative;overflow:hidden;transition:transform .15s}
.btn:active{transform:scale(.96)}
.btn::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-160%) skewX(-20deg);animation:shine 3.2s infinite}
@keyframes shine{0%,60%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
.btn-pink{background:linear-gradient(135deg,#ff7cc0,var(--pink));box-shadow:0 0 18px rgba(255,79,163,.65)}
.btn-cyan{background:linear-gradient(135deg,#5eead9,#1fa5a8);box-shadow:0 0 18px rgba(57,197,187,.65);color:#052b2e}

/* revelação escalonada */
.reveal{opacity:0;transform:translateY(24px)}
#invite.is-active .reveal{animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.12s + .5s)}
#invite.is-active .hero{animation:pop 1s cubic-bezier(.3,1.4,.5,1) .3s forwards,bob 3s ease-in-out 1.3s infinite}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}

/* equalizador de fundo (canvas) */
#viz{position:fixed;left:0;bottom:0;width:100%;height:250px;z-index:1;pointer-events:none;opacity:.5}

/* botão de som */
.sound-btn{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:10;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(143,243,234,.6);background:rgba(7,18,31,.82);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(57,197,187,.55)}
.eq{display:flex;align-items:flex-end;gap:3px;height:20px}
.eq i{width:4px;height:100%;background:linear-gradient(var(--pink),var(--cyan));border-radius:2px;
  transform-origin:bottom;transform:scaleY(.3);animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.45s}.eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{50%{transform:scaleY(1)}}
.sound-btn.muted .eq i{animation:none;transform:scaleY(.2);opacity:.5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal,.hero,.dock{opacity:1;transform:none}
}

/* estados do evento: durante / encerrado */
.status{width:100%;margin:16px 0 0;text-align:center}
.status p{margin-top:10px;opacity:.85;font-size:.95rem;line-height:1.35}
.status .pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;
  font-family:'Orbitron',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.status.durante .pill{color:#fff0f8;background:rgba(255,79,163,.18);border:1px solid var(--pink);
  box-shadow:0 0 22px rgba(255,79,163,.7);text-shadow:0 0 10px var(--pink)}
.status .pill i{width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink);animation:live 1s ease-in-out infinite}
@keyframes live{50%{transform:scale(1.6);opacity:.5}}
.status.fim .pill{color:var(--cyan-2);background:rgba(14,40,62,.72);border:1px solid rgba(143,243,234,.5);text-shadow:0 0 10px var(--cyan)}
#invite.is-over .dock{display:none}
#invite.is-over .wrap{padding-bottom:40px}