@font-face{font-family:Cerebri;src:url(/fonts/CerebriSans-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Cerebri;src:url(/fonts/CerebriSans-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Cerebri;src:url(/fonts/CerebriSans-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:Cerebri;src:url(/fonts/CerebriSans-Bold.ttf) format("truetype");font-weight:700;font-display:swap}

/* a carta do noii.sh — um modelo só, um tamanho só, uma curvatura só */
:root{
  --background:oklch(0.952 0.012 85);
  --card:oklch(0.972 0.0102 85);
  --foreground:oklch(0.42 0.0264 85);
  --muted-foreground:oklch(0.62 0.0168 85);
  --dust:oklch(0.64 0.0144 85);

  --card-radius:50px;
  --card-ratio:400 / 710;
  --card-w:min(100vw - 48px, 177.778dvh - 195.556px);
  --card-h:calc(var(--card-w) / (var(--card-ratio)));
  --card-shadow:rgba(0,0,0,.04) 0 1px 2px 0, rgba(0,0,0,.22) 0 24px 60px -28px;
  --respiro:clamp(26px,9%,40px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:Cerebri,system-ui,-apple-system,sans-serif;
  background:var(--background);color:var(--foreground);
  -webkit-font-smoothing:antialiased;
}

.deck{
  display:flex;flex-direction:column;align-items:center;
  width:100vw;height:100dvh;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:calc((100dvh - var(--card-h)) / 2) 0;
  gap:22px;
}
.deck::-webkit-scrollbar{display:none}

/* A CARTA — mesma medida sempre, e ela flipa */
.carta{
  flex:0 0 var(--card-h);
  width:var(--card-w);height:var(--card-h);
  scroll-snap-align:center;
  perspective:1600px;
  position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.25,1), opacity .5s ease;
  animation:entra .62s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes entra{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.carta.longe{opacity:.5}
.carta.guardada{transform:translateY(-8px)}
.carta.guardada .face{box-shadow:rgba(0,0,0,.04) 0 1px 2px 0, rgba(0,0,0,.32) 0 34px 74px -26px}
.carta.pulsa{animation:pulsa .55s cubic-bezier(.2,.8,.25,1)}
.carta.arrastando{transition:none}
.coracao{position:absolute;inset:0;display:grid;place-items:center;z-index:9;pointer-events:none;opacity:0}
.coracao img{width:34%;max-width:180px;filter:drop-shadow(0 18px 34px rgba(0,0,0,.35))}
.carta.curtiu-agora .coracao{animation:bate .9s cubic-bezier(.2,.8,.25,1)}
@keyframes bate{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.08)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
@keyframes pulsa{0%{transform:scale(1)}42%{transform:scale(1.035)}100%{transform:scale(1)}}

.giro{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.8,.25,1);will-change:transform}
.carta.virada .giro{transform:rotateY(180deg)}

.face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:var(--card);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:var(--respiro);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:box-shadow .5s ease;
}
.face.verso{transform:rotateY(180deg)}

/* tudo dentro da carta é a própria carta escrita */
.alto{font-size:12px;font-weight:600;letter-spacing:1.8px;color:var(--dust);text-transform:lowercase;
  display:flex;justify-content:space-between;gap:12px;flex:none}
.meio{flex:1;display:flex;align-items:center;overflow:hidden;padding:18px 0}
.meio p,.meio .papel{font-size:clamp(19px,4.4vw,25px);font-weight:600;line-height:1.34;letter-spacing:-.4px;width:100%;
  max-height:100%;overflow:hidden}
.grande{font-size:clamp(30px,8.4vw,46px) !important;font-weight:700 !important;letter-spacing:-1.6px !important;line-height:1.04 !important}
.baixo{font-size:12px;font-weight:600;letter-spacing:1.8px;color:var(--dust);text-transform:lowercase;
  display:flex;justify-content:space-between;gap:12px;flex:none}
.apagado{color:var(--muted-foreground);font-weight:500;letter-spacing:-.2px;text-transform:none;font-size:14px}

/* escrever direto na carta */
.papel{outline:none;overflow:auto;scrollbar-width:none}
.papel::-webkit-scrollbar{display:none}
.papel:empty:before{content:attr(data-vazio);color:oklch(0.82 0.012 85)}

/* a foto ocupa a CARTA INTEIRA, de ponta a ponta */
.foto{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:var(--card-radius);z-index:1}
.veu{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:var(--card-radius);z-index:1;
  background:linear-gradient(to top,rgba(28,26,22,.8) 0%,rgba(28,26,22,.12) 52%,rgba(28,26,22,.34) 100%)}
.face.com-foto{color:oklch(0.985 0.006 85)}
.face.com-foto .alto,.face.com-foto .baixo{color:rgba(255,252,246,.84)}
.face.com-foto .apagado{color:rgba(255,252,246,.86)}
.face.com-foto .meio{align-items:flex-end}
.face.com-foto>.alto,.face.com-foto>.meio,.face.com-foto>.baixo{position:relative;z-index:2}

/* desktop — a MESMA carta, deitada */
@media (min-width:900px){
  :root{
    --card-ratio:1.85;
    --card-w:min(100vw - 96px, (100dvh - 96px) * 1.85);
    --card-h:calc(var(--card-w) / (var(--card-ratio)));
    --respiro:clamp(34px,4.4%,56px);
  }
  .deck{gap:34px}
  .meio p,.meio .papel{font-size:clamp(21px,2vw,29px)}
  .grande{font-size:clamp(34px,4vw,56px) !important}
}

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