:root{
  --bg:#f7f8fc; --panel:#ffffff; --text:#2f3045; --muted:#8c93a3;
  --accent:#ff7bac; --accent2:#ffa7c7; --border:#e7eaf3;
  --ok:#22c55e; --err:#f45e78;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(80rem 40rem at 70% -10%, rgba(255,167,199,.15), transparent),var(--bg); color:var(--text); font-family:'DM Sans',system-ui,sans-serif; overflow-x:hidden}

/* util */
.container{max-width:980px;margin:0 auto;padding:20px 16px}
.muted{color:var(--muted)}
.pill{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:999px;padding:8px 12px;font-size:14px;box-shadow:0 8px 20px rgba(255,123,172,.25)}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(255,123,172,.25);transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,123,172,.35)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 6px 20px rgba(0,0,0,.04);margin:18px 0}

.ok{color:var(--ok)} .err{color:var(--err)}
.feedback{min-height:22px; font-size:14px; margin-top:6px}

/* gate */
.locked{overflow:hidden}
.gate{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:1000;padding:16px}
.gate-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:28px;max-width:420px;width:100%;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.gate-card h2{margin:0 0 6px}
.gate-card form{display:flex;gap:10px;margin:12px 0}
.gate-card input{flex:1;padding:12px;border-radius:12px;border:1px solid var(--border);background:#fbfcff;color:var(--text);outline:none;transition:border-color .2s, box-shadow .2s}
.gate-card input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,123,172,.25)}
.hint{display:block;margin-top:6px;color:var(--muted);font-size:13px}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:16px;margin-top:24px}
.hero .script{font-family:'Nothing You Could Do',cursive;font-size:clamp(34px,5vw,58px);color:var(--accent);margin:.2em 0 0}
.hero h2{font-size:clamp(22px,3.2vw,36px);margin:.2em 0 .4em}
.hero .plane{justify-self:end;filter:drop-shadow(0 10px 18px rgba(255,123,172,.35));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero .plane{justify-self:center}}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.grid{grid-template-columns:1fr}}

/* postais */
.postcard{perspective:1000px;height:220px}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.postcard.turned .flip{transform:rotateY(180deg)}
.front,.back{position:absolute;inset:0;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 22px rgba(0,0,0,.05);backface-visibility:hidden;display:grid;align-content:center;justify-items:center;padding:16px}
.front{background:linear-gradient(180deg,#fff, #fbfbff)}
.back{transform:rotateY(180deg)}
.airmail{width:100%;height:10px;background:repeating-linear-gradient(90deg,#ff7bac 0 16px,#ffa7c7 16px 32px,#8ec5ff 32px 48px);border-radius:6px;margin-bottom:12px}

/* confetti decorativo de fundo */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.heart{position:absolute;width:12px;height:12px;background:var(--accent);transform:rotate(45deg);animation:floatUp 8s linear infinite;box-shadow:0 0 8px rgba(255,123,172,.5)}
.heart::before,.heart::after{content:'';position:absolute;width:12px;height:12px;background:inherit;border-radius:50%}
.heart::before{left:-6px}.heart::after{top:-6px}
@keyframes floatUp{0%{transform:translateY(100vh) rotate(45deg) scale(.6);opacity:1}100%{transform:translateY(-20vh) rotate(45deg) scale(1);opacity:0}}

/* inputs das charadas */
.riddle form{display:flex;gap:10px;margin-top:8px}
.riddle input{flex:1;padding:12px;border-radius:10px;border:1px solid var(--border);background:#fbfcff;color:var(--text);outline:none;transition:border-color .2s, box-shadow .2s}
.riddle input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,123,172,.25)}
.input-success{border-color:var(--ok)!important;box-shadow:0 0 0 3px rgba(34,197,94,.2)!important}
.input-error{border-color:var(--err)!important;box-shadow:0 0 0 3px rgba(244,94,120,.2)!important}

/* reveal on scroll */
[data-animate]{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
[data-animate].animate{opacity:1;transform:none}

/* animações específicas */
@keyframes zoomIn{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes slideLeft{0%{opacity:0;transform:translateX(16px)}100%{opacity:1;transform:translateX(0)}}
@keyframes slideRight{
  0%{opacity:0; transform:translateX(-16px)}
  100%{opacity:1; transform:translateX(0)}
}

/* spotify */
.spotify-box{
  margin-top:20px;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.hero-spotify{max-width:520px}

/* galeria de fotos */
.galeria{
  margin:60px auto;
  max-width:980px;
  padding:0 16px;
  text-align:center;
}
.galeria h3{margin-bottom:24px}
.foto{
  margin:40px 0;
  position:relative;
}
.foto img{
  width:100%;
  max-width:780px;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  transform:scale(1);
  opacity:1;             /* <-- visível por padrão */
  transition:transform .8s ease, opacity .8s ease;
}
.foto.animate img{
  transform:scale(1.02); /* leve “pop” quando revelar */
  opacity:1;
}

.hidden{display:none}

/* carta aberta */
.open-letter .paper{
  background:#fffdf7;
  border:1px solid #f1e8d8;
  border-radius:14px;
  padding:22px;
  line-height:1.7;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.open-letter h3{ margin-top:0; }
.open-letter .signature{
  font-family:'Nothing You Could Do', cursive;
  font-size:22px;
  margin-top:18px;
}
.letter-actions{
  display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;
}
.btn.btn-outline{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  box-shadow:none;
}
.btn.btn-outline:hover{
  transform:none;
  background:rgba(255,123,172,.08);
}
.hidden{ display:none; } /* já existe, mas garantimos */

/* presentes secretos */
#presentes-secretos .secret-list{list-style:none; padding-left:0; margin:10px 0}
#presentes-secretos .secret-list li{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; margin:8px 0;
}
#presentes-secretos .secret-list li.locked{opacity:.6; filter:grayscale(30%)}
#presentes-secretos .secret-list li.unlocked{opacity:1; filter:none; border-color:#c7f0d6; box-shadow:0 6px 18px rgba(34,197,94,.12)}
#presentes-secretos .tag{font-size:12px; color:#777; background:#f5f6fa; padding:4px 8px; border-radius:999px}

/* presentes secretos */
#presentes-secretos .secret-list{list-style:none; padding-left:0; margin:10px 0}
#presentes-secretos .secret-list li{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; margin:8px 0;
}
#presentes-secretos .secret-list li .tag{
  font-size:12px; color:#777; background:#f5f6fa; padding:4px 8px; border-radius:999px
}
#secret-timer{font-variant-numeric: tabular-nums}

/* toast desbloqueio */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.25); z-index:9999; opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)}

/* layout em grade opcional para a galeria */
#galeria-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
}
@media (min-width: 900px){
  #galeria-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#galeria-grid .foto{ margin:0 } /* a grid já cria o espaçamento */
#galeria-grid .foto img{ width:100%; max-width:none }