/* NA PELE — mesa de flash do Zaza: folha de decalque (papel cinza neutro, pedido do Zaza em 01/11) com a tattoo colada,
   rabiscos feitos à mão e cartão que vira no toque. Só transform, opacity e stroke-dashoffset. */
:root {
  --lilas:#ecebe8; --lilas-2:#dfddd9; --carbono:#a9a6a1; --stencil:#55524d; --tinta:#1c1b19; --marca:#c1121f;
  --mao:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
}

/* ---------- seção ---------- */
.pele { position:relative; }
.pele h2 { position:relative; display:inline-block; }
.rabisca { position:absolute; left:-2%; bottom:-9px; width:104%; height:12px; overflow:visible; pointer-events:none; }
.rabisca path, .moldura path, .rabisco-nome path { fill:none; stroke:var(--marca); stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.rabisca path { stroke-width:2.4; }
.dica-geral { margin:2px 0 26px; font-family:var(--mao); font-size:21px; font-weight:600; color:#e4e1dc; transform:rotate(-1.2deg); }
.dica-geral b { color:var(--blood-2); font-weight:700; }

.mesa-flash { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:34px 16px; align-items:start; padding:6px 4px 14px; }

/* ---------- cartão (a folha) ---------- */
.flash { position:relative; min-width:0; margin:0; transform:rotate(var(--r, 0deg)); perspective:1000px; }
.flash.big { grid-column:1 / -1; }
.flash:nth-child(even):not(.big) { margin-top:26px; }
.flash::before { /* fita crepe */
  content:''; position:absolute; z-index:4; top:-9px; left:50%; width:62px; height:19px; margin-left:-31px;
  transform:rotate(calc(var(--r, 0deg) * -2.2)); background:rgba(250,239,198,.62); border-left:2px dotted rgba(0,0,0,.12); border-right:2px dotted rgba(0,0,0,.12);
  box-shadow:0 1px 2px rgba(0,0,0,.25); pointer-events:none;
}
.carbono { /* a segunda folha, de papel carbono, espiando por trás */
  position:absolute; inset:5px -9px -9px 9px; z-index:0; border-radius:5px; transform:rotate(calc(var(--r, 0deg) * -1.8 + 1.5deg));
  background:
    radial-gradient(rgba(28,27,25,.18) 1px, transparent 1.4px) 0 0/9px 9px,
    linear-gradient(200deg, #bdbab4, var(--carbono));
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.flip { position:relative; z-index:1; transform-style:preserve-3d; }

.face {
  position:relative; display:block; width:100%; margin:0; text-align:left; color:var(--tinta); font:inherit;
  border:0; border-radius:5px; padding:10px 10px 0; cursor:pointer;
  background:
    radial-gradient(rgba(85,82,77,.12) 1px, transparent 1.5px) 0 0/8px 8px,
    linear-gradient(160deg, var(--lilas), var(--lilas-2));
  box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(85,82,77,.18);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.face:focus-visible { outline:2px solid var(--blood-2); outline-offset:3px; }
.no { display:block; font-size:9.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--stencil); opacity:.85; padding:0 2px 7px; }

.foto { position:relative; display:block; aspect-ratio:4/5; border-radius:3px; overflow:visible; }
.big .foto { aspect-ratio:3/2; }
.foto img { display:block; width:100%; height:100%; object-fit:cover; border-radius:3px; filter:grayscale(.1) contrast(1.06); box-shadow:inset 0 0 0 1px rgba(28,27,25,.3); }
.moldura { position:absolute; inset:-4%; width:108%; height:108%; overflow:visible; pointer-events:none; }
.moldura path { stroke-width:2.2; opacity:.92; }

.rodape { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:50px; margin-top:4px; border-top:1.5px dashed rgba(85,82,77,.5); }
.nome { position:relative; display:inline-block; padding:2px 10px; font-family:var(--mao); font-weight:700; font-size:25px; line-height:1; color:var(--tinta); }
.rabisco-nome { position:absolute; inset:-6px -4px; width:calc(100% + 8px); height:calc(100% + 12px); overflow:visible; pointer-events:none; }
.rabisco-nome path { stroke-width:1.8; }
.dica { font-family:var(--mao); font-weight:700; font-size:19px; color:var(--marca); white-space:nowrap; transform:rotate(-4deg); }

.doodle { position:absolute; width:22px; height:22px; fill:none; stroke:var(--stencil); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.7; pointer-events:none; }
.doodle.d1 { top:6px; right:8px; transform:rotate(12deg); }
.doodle.d2 { bottom:8px; right:34%; width:18px; height:18px; transform:rotate(-14deg); opacity:.55; }
.doodle.d3 { top:8px; right:34px; width:16px; height:16px; opacity:.5; }

/* ---------- verso: o significado ---------- */
.back { cursor:default; padding:16px 14px 14px; }
.back .caixa { position:absolute; inset:7px; border:1.5px dashed rgba(85,82,77,.55); border-radius:4px; pointer-events:none; }
.back .no { padding-bottom:6px; }
.tit { display:block; font-family:var(--black); font-weight:400; font-size:30px; line-height:.95; color:var(--marca); margin:0 0 8px; }
.back p { margin:0; font-size:13.2px; line-height:1.42; color:var(--tinta); font-weight:500; }
.quero { display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:9px 13px; border-radius:999px; background:var(--tinta); color:#f1efeb; font-weight:800; font-size:12.5px; text-decoration:none; }
.quero:focus-visible { outline:2px solid var(--marca); outline-offset:2px; }
.volta { position:absolute; right:12px; top:10px; width:30px; height:30px; display:grid; place-items:center; border:1.5px solid rgba(85,82,77,.6); border-radius:50%; background:transparent; color:var(--stencil); font-size:16px; line-height:1; cursor:pointer; }
.volta:focus-visible { outline:2px solid var(--marca); outline-offset:2px; }

/* sem JS: foto e significado empilhados, tudo legivel */
.back { margin-top:10px; }

/* ---------- com JS: o cartão vira ---------- */
.js .back { position:absolute; inset:0; margin:0; transform:rotateY(180deg); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.js .face { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.js .flip { transition:transform .75s cubic-bezier(.2,.85,.25,1); }
.js .flash.vira .flip { transform:rotateY(180deg); }
.js .flip.peek { transition:none; }
.js .flash.vira .carbono { transform:rotate(calc(var(--r, 0deg) * -1.8 + 4deg)) translate(5px, 3px); transition:transform .75s cubic-bezier(.2,.85,.25,1); }
.js .carbono { transition:transform .75s cubic-bezier(.2,.85,.25,1); }
.js .flash.vira .front { pointer-events:none; }

/* ---------- estado inicial do motion (só se o GSAP carregou) ---------- */
.m .moldura path, .m .rabisco-nome path, .m .rabisca path { stroke-dasharray:1; stroke-dashoffset:1; }
.m .reveal { opacity:1; transform:none; transition:none; }
.m .rise { animation:none; opacity:1; transform:none; }
.m header > *, .m .av { opacity:0; }
.m .hero img, .m .hero video { height:116%; }
.m .hero img { margin-top:-8%; }
.m .hero video { inset:-8% 0 auto 0; }
.ch { display:inline-block; will-change:transform; }

@media (prefers-reduced-motion:reduce) {
  .js .flip, .js .carbono { transition:none; }
  .m .moldura path, .m .rabisco-nome path, .m .rabisca path { stroke-dashoffset:0; }
}

/* telas bem estreitas (360 px): verso um pouco mais compacto para o texto caber */
@media (max-width:374px) {
  .back { padding:14px 11px 11px; }
  .tit { font-size:26px; margin-bottom:6px; }
  .back p { font-size:12.2px; line-height:1.36; }
  .quero { margin-top:9px; padding:8px 11px; font-size:12px; }
}