/* base.css — texturas, papel, washi, colagem e tipografia base
   Portado verbatim de mockups/nando.html (identidade APROVADA).
   Sem gradiente de cor / sem glow. Sombras curtas/duras exceto .lift (colagem realista sutil). */

/* ============ RESET ============ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#b9ab8b}
body{font-family:"Courier Prime",ui-monospace,monospace;color:var(--ink);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;
  background:#b3a584;}

/* ============ A FOLHA DE PAPEL ============ */
.sheet{
  position:relative; width:min(100vw,442px); overflow:hidden;
  background-color:var(--paper);
  background-image:
    /* fibra grossa */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    /* grão fino */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-blend-mode:multiply,multiply;
  /* borda da folha + leve sombra interna */
  box-shadow:inset 0 0 50px rgba(120,92,50,.28), inset 0 0 4px rgba(90,66,34,.4), 0 0 50px rgba(40,28,12,.4);
}
/* manchas de envelhecimento (foxing) — sutis, irregulares */
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55;mix-blend-mode:multiply;
  background:
    radial-gradient(closest-side,rgba(150,110,60,.16),transparent) 12% 9%/90px 110px no-repeat,
    radial-gradient(closest-side,rgba(150,110,60,.12),transparent) 86% 22%/130px 120px no-repeat,
    radial-gradient(closest-side,rgba(130,95,52,.12),transparent) 22% 52%/150px 140px no-repeat,
    radial-gradient(closest-side,rgba(150,110,60,.13),transparent) 92% 70%/120px 150px no-repeat,
    radial-gradient(closest-side,rgba(120,88,48,.11),transparent) 8% 88%/140px 130px no-repeat,
    radial-gradient(closest-side,rgba(140,100,55,.10),transparent) 60% 96%/170px 120px no-repeat;}
/* fundo: TEXTURA de papel craft (fibras feTurbulence), sobre o papel — sem bolinhas, sem vinco */
.riso-dots{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.075' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='c2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c2)'/%3E%3C/svg%3E");
  background-size:240px 240px,130px 130px}

/* ---------- fita / washi ---------- */
.tape{position:absolute;z-index:8;width:80px;height:25px;opacity:.85;
  box-shadow:0 2px 3px rgba(60,45,25,.22);
  background:rgba(228,214,176,.6);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 6px,rgba(170,150,110,.12) 6px 12px)}
.tape.gh{background:rgba(106,134,214,.32);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 4px,transparent 4px 8px),repeating-linear-gradient(90deg,rgba(106,134,214,.34) 0 4px,transparent 4px 8px)}
.tape.red{background:rgba(187,58,39,.3);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 7px,transparent 7px 14px)}
.tape.must{background:rgba(214,151,42,.34);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 5px,transparent 5px 10px)}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:7px;background:inherit;opacity:.96}
.tape::before{left:-6px;transform:skewX(14deg)}
.tape::after{right:-6px;transform:skewX(-14deg)}

/* sombra de papel colado (colagem realista sutil — permitida) */
.lift{box-shadow:0 7px 15px rgba(45,32,16,.26),0 2px 4px rgba(45,32,16,.2)}
.lift-sm{box-shadow:0 4px 9px rgba(45,32,16,.22)}

/* ---------- papéis rasgados (clip-path setado via JS) ---------- */
.scrap{position:relative}
.scrap.kraft{background:var(--kraft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");background-blend-mode:multiply}
.scrap.cream{background:var(--paper-hi)}
.scrap.lined{background:var(--paper-hi);background-image:repeating-linear-gradient(transparent 0 21px,rgba(90,120,180,.28) 21px 22px)}
.scrap.graph{background:#f3eedf;background-image:linear-gradient(rgba(90,120,180,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(90,120,180,.2) 1px,transparent 1px);background-size:13px 13px}
.scrap.gingham{background-color:#e7e8ee;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='gg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gg)'/%3E%3C/svg%3E"),
    repeating-conic-gradient(rgba(78,104,184,.52) 0% 25%,rgba(255,255,255,.05) 0% 50%);
  background-size:130px 130px,25px 25px;
  background-blend-mode:multiply,normal}

/* ---------- texto die-cut / cutout (contorno creme + sombra degrau sólida, blur 0) ---------- */
.cutout{color:var(--ink);-webkit-text-stroke:3px var(--paper-hi);
  paint-order:stroke fill;
  text-shadow:2px 2px 0 var(--paper-hi),3px 3px 0 rgba(45,32,16,.25)}

/* ---------- tipografia base ---------- */
.kicker{font-family:"Caveat",cursive;font-weight:700;font-size:26px;color:var(--tomate);display:inline-block;transform:rotate(-4deg)}
.hw-sub{font-family:"Caveat",cursive;font-weight:700;font-size:46px;line-height:.85;color:var(--blue);transform:rotate(-2.5deg);margin:2px 0 0}
.whisper{font-family:"Courier Prime",monospace;font-size:14px;letter-spacing:.03em;color:var(--ink-soft);line-height:1.6}
.hand{font-family:"Caveat",cursive;color:var(--ink-soft)}
.hand.red{color:var(--tomate)}
.label{font-family:"Courier Prime",monospace;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- botãozinho de mudo (sons retrô) ---------- */
.sfx-toggle{position:fixed;right:11px;bottom:11px;z-index:99;
  width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  font-size:17px;line-height:1;padding:0;
  background:var(--kraft);color:var(--ink);
  transform:rotate(-7deg);
  box-shadow:0 3px 7px rgba(45,32,16,.32),inset 0 0 0 2px rgba(45,32,16,.22);
  opacity:.72;transition:opacity .15s ease,transform .15s ease}
.sfx-toggle:hover{opacity:1;transform:rotate(-7deg) scale(1.06)}
.sfx-toggle:active{transform:rotate(-7deg) scale(.94)}
.sfx-toggle[aria-pressed="true"]{opacity:.5}

/* ============ POLÍTICA DE MOVIMENTO ============ */
/* sem animação ambiente; line-boil sutil dos doodles é cortado aqui */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* equivalente por classe (setada no <html> pelo main.js quando reduce) */
.reduced *{animation:none!important;transition:none!important}