@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

:root {
  --tinta: #141114;
  --papel: #f4e7cc;
  --papel-luz: #fbf4e3;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { background: var(--papel); overflow: hidden; }

.ink {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, var(--papel-luz) 0%, var(--papel) 55%, #e6d2ab 100%);
  overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ink.escuro { background: radial-gradient(ellipse 70% 60% at 50% 50%, #34252b 0%, #1d1418 60%, #0f0a0c 100%); }
.ink.transparente { background: transparent; }

/* As letras nunca são cortadas: INK e PLAY são peças separadas no próprio desenho. */
.logo {
  --L: min(84vw, 760px);
  --gx: 50%; --gy: 38%;            /* onde a gota cai (sobre o P) */
  position: relative; width: var(--L);
  aspect-ratio: 1221 / 491;
}
.camada { position: absolute; inset: 0; }
.peca { position: absolute; opacity: 0; }
.peca img { display: block; width: 100%; height: auto; }
.palavra { transform-origin: var(--o) 85%; }   /* cresce para fora, nunca para o vão entre INK e PLAY */
.resp { transform-origin: 50% 50%; }

/* preto e branco: a mesma arte sem cor */
.pb .palavra img { filter: grayscale(1) contrast(1.18) brightness(1.04); }
.pb .brilho { display: none; }

/* a cor entra como mancha de tinta a partir do ponto da gota */
.cor {
  --r: calc(var(--p) * var(--L));
  -webkit-mask:
    radial-gradient(circle calc(var(--r) * .80) at var(--gx) var(--gy), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .62) at calc(var(--gx) - 9%) calc(var(--gy) + 16%), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .60) at calc(var(--gx) + 10%) calc(var(--gy) - 10%), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .52) at calc(var(--gx) - 6%) calc(var(--gy) - 14%), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .56) at calc(var(--gx) + 7%) calc(var(--gy) + 20%), #000 99%, transparent 100%);
          mask:
    radial-gradient(circle calc(var(--r) * .80) at var(--gx) var(--gy), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .62) at calc(var(--gx) - 9%) calc(var(--gy) + 16%), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .60) at calc(var(--gx) + 10%) calc(var(--gy) - 10%), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .52) at calc(var(--gx) - 6%) calc(var(--gy) - 14%), #000 99%, transparent 100%),
    radial-gradient(circle calc(var(--r) * .56) at calc(var(--gx) + 7%) calc(var(--gy) + 20%), #000 99%, transparent 100%);
}

.brilho {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat;
          mask: var(--mask) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 225, .9) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  mix-blend-mode: screen;
}

.gota {
  position: absolute; left: var(--gx); top: var(--gy); z-index: 5;
  width: calc(var(--L) * .055); aspect-ratio: .72;
  margin-left: calc(var(--L) * -.0275);
  transform-origin: 50% 100%; opacity: 0;
}
.gota svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- linha do tempo (tudo CSS, controlável pela Web Animations API) ----------
   0,05 s INK salta · 0,2 s PLAY salta (preto e branco)
   1,0 s a gota cai · 1,35 s impacto: respingos, a cor se espalha (até 2,1 s)
   1,38 s "boing" · 2,0 s brilho · 2,9 s fim                                      */
.play .palavra { animation: salta .75s cubic-bezier(.2, 1.55, .45, 1) var(--t) both; }
@keyframes salta {
  0% { opacity: 0; transform: translateY(35%) scale(.15) rotate(var(--r)); }
  30% { opacity: 1; }
  55% { transform: translateY(-6%) scale(1.06, 1.12); opacity: 1; }
  78% { transform: translateY(0) scale(1.04, .94); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

.play .gota { animation: gota-cai .36s cubic-bezier(.5, 0, 1, .6) 1s both, gota-bate .16s ease-out 1.36s forwards; }
@keyframes gota-cai {
  0% { opacity: 1; transform: translateY(calc(-50vh - var(--L) * .4)) scale(.85, 1.25); }
  100% { opacity: 1; transform: translateY(0) scale(.85, 1.3); }
}
@keyframes gota-bate {
  0% { opacity: 1; transform: scale(1.5, .45); }
  100% { opacity: 0; transform: scale(2.2, .1); }
}

.play .cor { animation: espalha .75s cubic-bezier(.25, .75, .3, 1) 1.36s both; }
@keyframes espalha { 0% { --p: 0; } 100% { --p: 1.15; } }

.play .resp { animation: estoura .5s cubic-bezier(.2, 1.7, .4, 1) calc(1.38s + var(--i) * 30ms) both; }
@keyframes estoura {
  0% { opacity: 0; transform: translate(calc(var(--L) * var(--dx)), calc(var(--L) * var(--dy))) scale(0) rotate(var(--g)); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.play .boing { animation: boing .5s cubic-bezier(.3, 1.6, .5, 1) 1.38s both; }
@keyframes boing {
  0% { transform: none; }
  30% { transform: scale(1.04, .955); }
  100% { transform: none; }
}
.play .brilho { animation: brilho .8s ease-in-out var(--b) both; }
@keyframes brilho { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

/* saída opcional (vídeo / abertura de jogo): ?saida=1 */
.play.saida .logo { animation: sai .5s cubic-bezier(.5, 0, .75, 0) 3.6s forwards; }
@keyframes sai { to { opacity: 0; transform: scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .play *, .play .logo { animation: none !important; }
  .play .peca { opacity: 1; }
  .play .cor { -webkit-mask: none; mask: none; }
}

/* posição e tempo de cada peça (antes style= inline, bloqueado pela CSP style-src 'self') */
.peca.p0 { left:0.737%; top:18.330%; width:42.752%; --t:0.05s; --r:-10deg; --b:2.05s; --o:92%; }
.peca.p1 { left:44.636%; top:13.238%; width:55.364%; --t:0.2s; --r:9deg; --b:2.17s; --o:8%; }
.peca.p2 { left:0.000%; top:65.173%; width:4.505%; --i:0; --dx:0.167; --dy:-0.055; --g:-40deg; }
.peca.p3 { left:0.655%; top:16.701%; width:6.962%; --i:1; --dx:0.161; --dy:0.069; --g:30deg; }
.peca.p4 { left:4.095%; top:0.407%; width:9.582%; --i:2; --dx:0.144; --dy:0.084; --g:-25deg; }
.peca.p5 { left:13.104%; top:12.016%; width:3.194%; --i:3; --dx:0.124; --dy:0.074; --g:45deg; }
.peca.p6 { left:82.801%; top:9.776%; width:3.276%; --i:4; --dx:-0.121; --dy:0.080; --g:-35deg; }
.peca.p7 { left:85.422%; top:0.000%; width:10.483%; --i:5; --dx:-0.142; --dy:0.088; --g:25deg; }
.peca.p8 { left:94.103%; top:86.151%; width:3.276%; --i:6; --dx:-0.160; --dy:-0.104; --g:-30deg; }
.peca.p9 { left:94.840%; top:73.727%; width:5.078%; --i:7; --dx:-0.166; --dy:-0.075; --g:40deg; }