/* fase-1.css — layout da FASE 1 (tela inicial): caixa central, doodles arrastáveis, sussurro.
   Mobile-first. Sem animação ambiente (exceto o line-boil sutil dos doodles, .boil,
   cortado por prefers-reduced-motion / .reduced). Sombras só curtas/duras exceto
   a colagem realista (.lift, herdada de base.css). Sem gradiente de cor / sem glow. */

/* ---------- container da fase ---------- */
.f1{
  position:relative;
  width:100%;
  /* fallback p/ browsers sem svh (cai no vh, ainda usável), depois svh moderno */
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;       /* grupo [título + caixa] centrado; caixa maior empurra o título pra cima */
  gap:30px;
  padding:4vh 18px 7vh;         /* respiro maior embaixo → grupo levemente acima do centro */
  overflow:hidden; /* doodles arrastados não geram scroll lateral */
  touch-action:manipulation; /* permite arraste de doodles sem o palco "rolar" no toque */
}

/* fade de saída pra FASE 2 (≤250ms) */
.f1.leaving{opacity:0;transition:opacity .25s ease}

/* ---------- PLACA do topo: banner kraft rasgado + bordado "Nando" + parabéns ---------- */
.f1-header{
  position:relative; z-index:2;   /* ACIMA do padrão de pontos (z1), mas ATRÁS de doodles (z4)/caixa (z5)/fotos */
  width:min(370px, 93%); margin:0 auto;
  padding:32px 22px 24px;
  pointer-events:none;            /* não rouba toque dos doodles/caixa */
}
.f1-placa{
  position:absolute; inset:0; z-index:1;
  transform:rotate(-1.4deg); border-radius:2px;
}
.f1-placa-tape1{ position:absolute; z-index:2; left:30%; top:-9px; transform:rotate(-11deg); }
.f1-placa-tape2{ position:absolute; z-index:2; right:16px; top:-2px; transform:rotate(9deg); }
.f1-header-in{ position:relative; z-index:3; text-align:center; }
/* "parabéns!!" — sticker grande (Caprasimo + contorno creme + degrau de sombra) */
.f1-parabens{
  font-family:"Caprasimo",cursive; font-size:45px; line-height:.98;
  color:var(--tomate);
  -webkit-text-stroke:3px var(--paper-hi); paint-order:stroke fill;
  text-shadow:0 4px 0 var(--tomate-dk), 3px 6px 0 rgba(45,32,16,.22);
  transform:rotate(-2.5deg); margin:2px 0 7px;
}
.f1-bordado{ margin:0; transform:rotate(-2deg); pointer-events:none; }
.f1-bordado svg{ display:block; width:224px; height:auto; margin:0 auto; overflow:visible; }

/* ---------- dica "clique para abrir": seta-espiral de caneta (canto sup. direito) ---------- */
.f1-openhint{
  position:absolute; z-index:10;   /* ABAIXO da caixa (filha do .f1box), centralizada, aponta pra cima */
  top:100%; left:50%; margin-top:6px;
  transform:translateX(-50%) rotate(-2deg); transform-origin:center top;
  text-align:center; pointer-events:none; transition:opacity .4s ease;
}
.f1-openhint.gone{ opacity:0; }
.f1-openhint-arrow{ display:block; width:52px; height:auto; margin:0 auto 1px; }
.f1-openhint-txt{
  display:block; font-family:"Caveat",cursive; font-weight:700; font-size:21px;
  color:#3b342c; transform:rotate(-2deg); line-height:1; white-space:nowrap;
}
.f1-openhint-arrow .draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:f1-arrow-draw 1.1s ease .35s forwards; }
.f1-openhint-arrow .head{ stroke-dasharray:1; stroke-dashoffset:1; animation:f1-arrow-draw .28s ease 1.45s forwards; }
@keyframes f1-arrow-draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .f1-openhint-arrow .draw,.f1-openhint-arrow .head{ animation:none; stroke-dashoffset:0; }
}
.reduced .f1-openhint-arrow .draw,.reduced .f1-openhint-arrow .head{ animation:none; stroke-dashoffset:0; }

/* ---------- 3 setinhas "arrasta a tampa pra cima" (loop subindo, fase ajar) ---------- */
.f1-dragup{
  position:absolute; bottom:calc(100% - 58px); left:50%;  /* bem mais pra baixo: logo acima da tampa */
  transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:13px; z-index:9; pointer-events:none;
  transition:opacity .3s ease;
}
.f1-dragup.gone{ opacity:0; }
.f1-dragup-a{ display:block; animation:f1-dragup-rise 1.25s ease-in-out infinite; animation-delay:var(--d); }
.f1-dragup-a svg{ display:block; width:26px; height:auto; transform:rotate(var(--r)); }
@keyframes f1-dragup-rise{
  0%{ transform:translateY(9px); opacity:0 }
  25%{ opacity:1 }
  70%{ opacity:.95 }
  100%{ transform:translateY(-16px); opacity:0 }
}
@media (prefers-reduced-motion:reduce){ .f1-dragup-a{ animation:none; } }
.reduced .f1-dragup-a{ animation:none; }

/* ---------- a caixa (abre INLINE: corpo + brilho + tampa + laço, sem troca de tela) ---------- */
.f1box{
  position:relative; z-index:5;       /* acima dos doodles (z4) e do título (z0); fotos vivem aqui dentro */
  width:230px; height:210px;
  transform:rotate(-2deg) scale(1.18); /* caixa MAIOR (scale escala tudo junto: paredes, fotos, brilho, laço) */
  transform-origin:center;
}
/* camadas empilhadas: TRÁS(1) ← brilho(2) ← [fotos z3] ← FRENTE(4) ← tampa(7) ← laço(8) */
.f1box-back,.f1box-glow,.f1box-front,.f1box-lid,.f1box-bow{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:none;
  pointer-events:none; /* o div cobre a caixa inteira (z4) — sem isso, a parede da frente
                          rouba o toque das fotos (z3). Laço e tampa-grabbable reativam abaixo. */
}
.f1box-back{ z-index:1 } .f1box-glow{ z-index:2 } .f1box-front{ z-index:4 } .f1box-lid{ z-index:7 } .f1box-bow{ z-index:8 }
.f1box-back svg,.f1box-glow svg,.f1box-front svg,.f1box-lid svg,.f1box-bow svg{
  display:block; width:100%; height:auto; pointer-events:none;
}
/* boiling: frente (boilBox) + sombra de contato; trás (boilBox), tampa (boil1), laço (boil2) */
.f1box-front svg{ filter:url(#boilBox) drop-shadow(0 6px 4px rgba(45,32,16,.22)); }
.f1box-back svg{ filter:url(#boilBox); }
.f1box-lid svg{ filter:url(#boil1); }
.f1box-bow svg{ filter:url(#boil2); }

/* laço clicável (o button cobre a caixa → clicar nela desamarra o laço) */
.f1box-bow{ cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent; }
.f1box-bow:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:6px; }

/* DESENROLAR o laço (stop-motion via steps): loops encolhem pro nó, tails soltam, laço some */
@keyframes f1-untie-loops{ 0%{transform:scale(1) rotate(0)} 55%{transform:scale(1.08) rotate(10deg)} 100%{transform:scale(0) rotate(-26deg); opacity:0} }
@keyframes f1-untie-tails{ 0%{transform:rotate(0); opacity:1} 100%{transform:rotate(12deg) translateY(7px); opacity:.15} }
@keyframes f1-untie-fade{ to{ opacity:0 } }
.f1box-bow.untie{ animation:f1-untie-fade .12s steps(1) .56s forwards; }
.f1box-bow.untie .bow-loops{ transform-box:fill-box; transform-origin:center; animation:f1-untie-loops .58s steps(6,end) forwards; }
.f1box-bow.untie .bow-tails{ transform-box:fill-box; transform-origin:top center; animation:f1-untie-tails .58s steps(4,end) forwards; }

/* tampa semiaberta + arrastável (snap-back via transição; desligada enquanto arrasta) */
.f1box-lid{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
.f1box-lid.ajar{ transform:translateY(-7px) rotate(-2.5deg); }
.f1box-lid.grabbable{ pointer-events:auto; cursor:grab; touch-action:none; will-change:transform; }
.f1box-lid.grabbing{ cursor:grabbing; transition:none; }
.f1box-lid.grabbable:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:6px; }

/* BRILHO interno: sparkles CHAPADOS que dão pop ao abrir + leve cintilar (opacidade) */
.f1box-glow{ opacity:0; }
.f1box-glow.show{ opacity:1; }
.f1box-glow .spark{ transform-box:fill-box; transform-origin:center; opacity:0; }
.f1box-glow.show .spark{ animation:f1-sparkpop .5s steps(4,end) forwards; }
.f1box-glow.show .spark > *{ animation:f1-spark-flick 1.3s steps(2) .55s infinite; }
@keyframes f1-sparkpop{ 0%{transform:translateY(16px) scale(0); opacity:0} 60%{opacity:1} 100%{transform:translateY(0) scale(1); opacity:1} }
@keyframes f1-spark-flick{ 0%,100%{opacity:1} 50%{opacity:.62} }
.f1box-glow.show .spark:nth-child(2){ animation-delay:.05s }
.f1box-glow.show .spark:nth-child(3){ animation-delay:.09s }
.f1box-glow.show .spark:nth-child(4){ animation-delay:.13s }
.f1box-glow.show .spark:nth-child(5){ animation-delay:.16s }
.f1box-glow.show .spark:nth-child(6){ animation-delay:.2s }
.f1box-glow.show .spark:nth-child(7){ animation-delay:.24s }
.f1box-glow.show .spark:nth-child(n+8){ animation-delay:.28s }

/* ---------- FASE 3: polaroids voando (brancas, NÃO reveladas) ---------- */
.f3-pola{
  position:absolute; z-index:6;
  width:120px; padding:7px 7px 22px;
  background:#fbf7ee;                 /* moldura instax branca-creme */
  border-radius:2px;
  box-shadow:0 7px 15px rgba(45,32,16,.26), 0 2px 4px rgba(45,32,16,.2); /* colagem (não glow) */
  user-select:none; -webkit-user-select:none;
  pointer-events:none;                /* só a foto do TOPO (.grabbable) é tocável */
}
.f3-pola.grabbable{
  pointer-events:auto; touch-action:none; cursor:grab; will-change:transform;
}
.f3-pola.grabbable:active,.f3-pola.is-dragging{ cursor:grabbing; }
.f3-pola-photo{
  display:block; width:100%; aspect-ratio:1 / 1;
  background:#efe7d6;                 /* foto NÃO revelada (branca/creme) — revela na FASE 4 */
  box-shadow:inset 0 2px 6px rgba(70,55,30,.16);
}
@media (prefers-reduced-motion:reduce){ .f3-pola{ transition:none !important; } }
.reduced .f3-pola{ transition:none !important; }

/* ---------- FASE 4: chacoalhar pra REVELAR (branco → foto real, efeito de "revelação" instax) ---------- */
.f3-pola-photo{ position:relative; overflow:hidden; }
.f3-pola-real{
  position:absolute; inset:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0;                              /* escondida até revelar */
  filter:brightness(1.55) contrast(.8) saturate(.2); /* "ainda revelando" (clara/lavada) */
}
.f3-pola.revealed .f3-pola-real{
  opacity:1; filter:none;                 /* revelada: cor cheia */
  transition:opacity 1.5s ease, filter 1.7s ease;
}
/* fallback quando não há imagem real ainda (placeholder): tom quente + ícone */
.f3-pola-real.placeholder{
  background:#e7d3a8;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; color:#9c7846;
}
.f3-pola-real.placeholder::after{ content:"🍅"; }
@media (prefers-reduced-motion:reduce){ .f3-pola.revealed .f3-pola-real{ transition:none; } }
.reduced .f3-pola.revealed .f3-pola-real{ transition:none; }

/* "chacoalha o celular!" — papel cutout rasgado (clip-path setado via JS: tornPoly), também tocável */
.f4-shake{
  position:absolute; left:50%; bottom:22px; z-index:50;
  transform:translateX(-50%) rotate(-2deg);
  font-family:"Caveat",cursive; font-weight:700; font-size:24px; line-height:1;
  color:var(--blue);
  background-color:#f6efdd;
  background-image: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.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
  padding:14px 30px 16px; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  /* drop-shadow segue o recorte rasgado (box-shadow seria cortado). Halo escuro NÍTIDO (separa de
     polaroid branca atrás) + lift forte. Vários drop-shadow empilhados = contorno marcado em volta. */
  filter:
    drop-shadow(0 0 1px rgba(40,28,12,.9))
    drop-shadow(1.5px 1.5px 0 rgba(50,36,18,.5))
    drop-shadow(0 8px 12px rgba(45,32,16,.5));
  opacity:0; pointer-events:none;
}
.f4-shake.show{ opacity:1; pointer-events:auto; animation:f4-wiggle 1.1s ease-in-out infinite; }
@keyframes f4-wiggle{ 0%,100%{transform:translateX(-50%) rotate(-2deg)} 25%{transform:translateX(-50%) rotate(-6deg)} 50%{transform:translateX(-50%) rotate(2deg)} 75%{transform:translateX(-50%) rotate(-5deg)} }
@media (prefers-reduced-motion:reduce){ .f4-shake.show{ animation:none; } }
.reduced .f4-shake.show{ animation:none; }

/* ---------- caixa some: PUFF de nuvenzinha ---------- */
.f1box .box-poof{
  transition:transform .45s cubic-bezier(.5,0,.75,0), opacity .45s ease-in;
  transform:scale(.12); opacity:0;        /* encolhe no centro dela mesma */
}
.f5-puff{ position:absolute; z-index:9; width:200px; pointer-events:none; opacity:0; }
.f5-puff svg{ display:block; width:100%; height:auto; }
.f5-puff.go{ animation:f5-puff .65s ease-out forwards; }
@keyframes f5-puff{ 0%{opacity:0; transform:scale(.45)} 28%{opacity:.96} 100%{opacity:0; transform:scale(1.4)} }

/* ---------- FASE 5: ENVELOPE caindo do céu (papel ao vento) ---------- */
.f5-env{
  position:absolute; left:50%; top:50%; margin-left:-110px;
  width:220px; height:147px; z-index:40;  /* mais pra baixo: a carta peek não cobre o "Nando" */
  perspective:640px;                       /* p/ a aba dobrar em 3D */
  cursor:default; -webkit-tap-highlight-color:transparent;
}
.f5-env-back,.f5-env-front,.f5-flap,.f5-seal{ position:absolute; inset:0; pointer-events:none; }
.f5-env-back{ z-index:1 } .f5-letter{ z-index:2 } .f5-env-front{ z-index:3 } .f5-flap{ z-index:4 } .f5-seal{ z-index:5 }
.f5-env-back svg,.f5-env-front svg,.f5-flap svg,.f5-seal svg{ display:block; width:100%; height:auto; }
.f5-env-front svg,.f5-env-back svg{ filter:drop-shadow(0 6px 7px rgba(45,32,16,.26)); }

/* queda com flutter (gravidade de papel: balança lado a lado descendo) */
@keyframes f5-fall{
  0%  { transform:translateY(-560px) translateX(-46px) rotate(-13deg); opacity:0 }
  6%  { opacity:1 }
  24% { transform:translateY(-400px) translateX(44px)  rotate(11deg) }
  42% { transform:translateY(-270px) translateX(-38px) rotate(-9deg) }
  60% { transform:translateY(-150px) translateX(30px)  rotate(8deg) }
  76% { transform:translateY(-60px)  translateX(-18px) rotate(-5deg) }
  90% { transform:translateY(0px)    translateX(8px)   rotate(3deg) }
  100%{ transform:translateY(0)      translateX(0)     rotate(-3deg) }
}
.f5-env.falling{ animation:f5-fall 2.5s cubic-bezier(.45,.06,.5,.95) forwards; }
.f5-env.landed{ transform:rotate(-3deg); cursor:pointer; }
.f5-env.landed:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:8px; }

/* aba superior abrindo (dobra pra CIMA na dobradiça do topo) + selo estourando */
.f5-flap{ transform-origin:center 25%; transition:transform .55s cubic-bezier(.6,.1,.3,1); transform:rotateX(0deg); transform-style:preserve-3d; }
.f5-seal{ transform-origin:50% 59%; transition:opacity .3s ease, transform .42s cubic-bezier(.3,1.4,.5,1); }
.f5-env.opening .f5-flap{ transform:rotateX(-162deg); }
.f5-env.opening .f5-seal{ opacity:0; transform:scale(.35) rotate(-22deg); }
.f5-env.opened  .f5-flap{ z-index:0; }    /* aba dobrada vai pra trás pra carta passar */

/* a CARTINHA (folha de caderno) — começa DENTRO (atrás da parede da frente, z2 < z3 → invisível),
   e ao abrir sobe ~metade pra fora pelo topo. Fica entre 30..136 do envelope (altura 106) quando fechada. */
.f5-letter{
  position:absolute; left:50%; width:172px; margin-left:-86px; top:38px; height:96px;
  background-color:#f3ead2;
  background-image:
    repeating-linear-gradient(transparent 0 21px, rgba(86,116,176,.30) 21px 22px),
    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.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-blend-mode:normal, multiply;
  border-radius:3px 3px 1px 1px;
  box-shadow:0 4px 10px rgba(45,32,16,.24);
  transform:translateY(0);                /* escondida DENTRO do corpo (atrás das abas) */
  transition:transform .62s cubic-bezier(.2,.9,.3,1);
  cursor:default; overflow:hidden;
  padding:9px 14px 8px;
}
.f5-env.opened .f5-letter{ transform:translateY(-54px); cursor:pointer; } /* sobe ~metade pra fora pelo topo */
.f5-letter::before{ /* margem vermelha de caderno */
  content:""; position:absolute; top:0; bottom:0; left:24px; width:1.5px; background:rgba(187,58,39,.45);
}
.f5-letter .f5-letter-peek{
  font-family:"Caveat",cursive; font-weight:700; font-size:21px; line-height:1.05; color:var(--blue);
  text-align:center; transform:rotate(-2deg); margin-top:2px;
}
.f5-letter .f5-letter-tap{
  font-family:"Courier Prime",monospace; font-size:9px; letter-spacing:.12em; color:var(--ink-soft);
  text-align:center; text-transform:lowercase; margin-top:54px;
}

/* ---------- FASE 6: carta em TELA CHEIA ---------- */
.f6{
  position:absolute; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:22px 16px; background:rgba(40,28,12,0); pointer-events:none;
}
.f6.show{ background:rgba(40,28,12,.42); transition:background .4s ease; pointer-events:auto; }
.f6-paper{
  position:relative; width:100%; max-width:380px; max-height:88%; overflow:auto;
  background-color:#f1e6cb;
  background-image:
    /* linhas de caderno */
    repeating-linear-gradient(transparent 0 27px, rgba(86,116,176,.32) 27px 28px),
    /* manchas de envelhecimento (foxing) */
    radial-gradient(closest-side, rgba(150,110,60,.16), transparent) 14% 12%/120px 140px no-repeat,
    radial-gradient(closest-side, rgba(150,110,60,.13), transparent) 88% 26%/150px 130px no-repeat,
    radial-gradient(closest-side, rgba(130,95,52,.12), transparent) 30% 72%/160px 150px no-repeat,
    radial-gradient(closest-side, rgba(140,100,55,.12), transparent) 80% 88%/150px 140px no-repeat,
    /* grão fino (fibra do papel) */
    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.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* 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.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-blend-mode:normal, multiply, multiply, multiply, multiply, multiply;
  border-radius:5px; padding:40px 28px 34px 62px;     /* esquerda larga: o texto começa DEPOIS da margem */
  box-shadow:0 18px 40px rgba(20,12,4,.5), inset 0 0 44px rgba(150,110,60,.13); /* relevo de papel */
  transform:scale(.18) rotate(-.5deg); opacity:0; transform-origin:center center;
  transition:transform .55s cubic-bezier(.2,.9,.3,1), opacity .4s ease;
}
.f6.show .f6-paper{ transform:scale(1) rotate(-.5deg); opacity:1; }
.f6-paper::before{ content:""; position:absolute; top:0; bottom:0; left:48px; width:2px; background:rgba(187,58,39,.42); } /* margem vermelha */
.f6-paper .f6-body{ font-family:"Caveat",cursive; font-weight:600; font-size:21px; line-height:25px; color:var(--blue-dk); white-space:pre-wrap; }
.f6-paper .f6-body strong{ color:var(--tomate); }
.f6-close{
  position:absolute; top:8px; right:12px; z-index:2; border:0; background:none; cursor:pointer;
  font-family:"Courier Prime",monospace; font-size:20px; color:var(--ink-soft); padding:4px 8px;
  -webkit-tap-highlight-color:transparent;
}
.f6-close:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* ---------- FASE 7 (ponte): botão GRANDE de resgatar o presente ---------- */
.f7-cta-wrap{
  position:absolute; inset:0; z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:24px; background:rgba(40,28,12,0); pointer-events:none;
  opacity:0; transition:opacity .45s ease, background .45s ease;
}
.f7-cta-wrap.show{ opacity:1; background:rgba(40,28,12,.34); pointer-events:auto; }
.f7-cta-cap{
  font-family:"Caveat",cursive; font-weight:700; font-size:27px; color:var(--paper-hi);
  transform:rotate(-2deg); text-shadow:0 2px 5px rgba(0,0,0,.35);
}
.f7-cta{
  cursor:pointer; position:relative; border:0; -webkit-tap-highlight-color:transparent;
  font-family:"Caprasimo",cursive; font-size:34px; line-height:1.05; color:#f6efdd; background:var(--tomate);
  padding:20px 40px 23px; border-radius:4px;
  text-shadow:2px 0 0 var(--blue-dk);
  box-shadow:0 7px 0 var(--tomate-dk), 0 12px 18px rgba(45,32,16,.4);
  transform:rotate(-1.5deg) scale(.5); opacity:0;
  transition:transform .5s cubic-bezier(.2,1.3,.4,1), opacity .4s ease, box-shadow .12s ease;
}
.f7-cta-wrap.show .f7-cta{ transform:rotate(-1.5deg) scale(1); opacity:1; }
.f7-cta:active{ transform:rotate(-1.5deg) translateY(4px); box-shadow:0 3px 0 var(--tomate-dk), 0 6px 10px rgba(45,32,16,.4); }
.f7-cta:focus-visible{ outline:3px solid var(--blue); outline-offset:6px; }

/* ---------- FASE 7: cena de revelação do bot do Jacob ---------- */
.f7-reveal{
  position:absolute; inset:0; z-index:95;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px;
  padding:26px 22px; text-align:center;
  background:rgba(40,28,12,0); pointer-events:none; opacity:0;
  transition:opacity .45s ease, background .45s ease;
}
.f7-reveal.show{ opacity:1; background:rgba(40,28,12,.42); pointer-events:auto; }
.f7-rev-kicker{
  font-family:"Caveat",cursive; font-weight:700; font-size:26px; color:var(--paper-hi);
  transform:rotate(-2deg); text-shadow:0 2px 5px rgba(0,0,0,.4);
}
.f7-pola{
  position:relative; width:178px; padding:10px 10px 12px; background:#fbf7ee; border-radius:2px;
  box-shadow:0 10px 24px rgba(20,12,4,.55);
  transform:rotate(-3deg) scale(.5); opacity:0;
  transition:transform .55s cubic-bezier(.2,1.3,.4,1), opacity .4s ease;
}
.f7-reveal.show .f7-pola{ transform:rotate(-3deg) scale(1); opacity:1; }
.f7-pola-tape{ position:absolute; top:-13px; left:50%; margin-left:-40px; transform:rotate(-4deg); z-index:2; }
.f7-pola-photo{
  position:relative; width:100%; aspect-ratio:1/1; background:#e7d3a8; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 2px 6px rgba(70,55,30,.18);
}
.f7-pola-photo.placeholder::after{ content:"🎬"; font-size:48px; }
.f7-pola-img{ width:100%; height:100%; object-fit:cover; display:block; }
.f7-pola-cap{
  font-family:"Caveat",cursive; font-weight:700; font-size:24px; color:var(--blue);
  margin-top:7px; transform:rotate(-1.5deg);
}
.f7-rev-line{
  font-family:"Caveat",cursive; font-weight:600; font-size:23px; line-height:1.25;
  color:var(--paper-hi); text-shadow:0 1px 4px rgba(0,0,0,.45); max-width:300px;
}
.f7-rev-line strong{ color:#ffd49a; }   /* destaque quente, legível no escuro */
.f7-rev-link{
  font-family:"Courier Prime",monospace; font-size:12px; letter-spacing:.02em;
  color:var(--paper-hi); text-decoration:underline; text-underline-offset:3px;
  opacity:.92; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transform:rotate(-1deg); max-width:280px; text-align:center; line-height:1.3;
}
.f7-rev-link:hover{ opacity:1; }
.f7-rev-link:focus-visible{ outline:2px solid var(--paper-hi); outline-offset:3px; border-radius:3px; }
.f7-wa{
  margin-top:6px; text-decoration:none; display:inline-block; -webkit-tap-highlight-color:transparent;
  font-family:"Caprasimo",cursive; font-size:26px; color:#f6efdd; background:var(--green);
  padding:15px 30px 17px; border-radius:4px;
  text-shadow:1.5px 0 0 var(--green-dk);
  box-shadow:0 6px 0 var(--green-dk), 0 10px 16px rgba(45,32,16,.4);
  transform:rotate(-1deg) scale(.6); opacity:0;
  transition:transform .5s cubic-bezier(.2,1.3,.4,1) .12s, opacity .4s ease .12s, box-shadow .12s ease;
}
.f7-reveal.show .f7-wa{ transform:rotate(-1deg) scale(1); opacity:1; }
.f7-wa:active{ transform:rotate(-1deg) translateY(4px); box-shadow:0 2px 0 var(--green-dk), 0 5px 9px rgba(45,32,16,.4); }
.f7-wa:focus-visible{ outline:3px solid var(--paper-hi); outline-offset:5px; }

@media (prefers-reduced-motion:reduce){
  .f5-env.falling{ animation:none; }
  .f5-flap,.f5-seal,.f5-letter,.f6-paper,.box-poof,.f5-puff{ transition:none !important; animation:none !important; }
  .f7-cta,.f7-pola,.f7-wa{ transition:none !important; }
}
.reduced .f5-env.falling{ animation:none; }
.reduced .f5-flap,.reduced .f5-seal,.reduced .f5-letter,.reduced .f6-paper,.reduced .box-poof,.reduced .f5-puff{ transition:none !important; animation:none !important; }
.reduced .f7-cta,.reduced .f7-pola,.reduced .f7-wa{ transition:none !important; }

/* PERF: congela os filtros de boiling enquanto algo é arrastado → arraste suave (sem jank).
   feTurbulence/feDisplacementMap animados saturam a CPU; pausá-los durante o gesto resolve. */
.f1.boils-frozen .boil-a svg,
.f1.boils-frozen .boil-b svg,
.f1.boils-frozen .f1box-back svg,
.f1.boils-frozen .f1box-lid svg,
.f1.boils-frozen .f1box-bow svg{ filter:none; }
.f1.boils-frozen .f1box-front svg{ filter:drop-shadow(0 6px 4px rgba(45,32,16,.22)); }

/* ---------- doodles arrastáveis ao redor ---------- */
.f1-doodle{
  position:absolute;
  z-index:4;
  touch-action:none;     /* Pointer Events assume o gesto; nada de scroll/zoom do SO */
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  will-change:auto;      /* drag.js liga will-change só durante o arraste */
}
.f1-doodle svg{display:block;width:100%;height:auto;pointer-events:none}
.f1-doodle:active,
.f1-doodle.is-dragging{cursor:grabbing}

/* ---------- BOILING — hand-drawn motion via SVG filter (técnica Camillo Visini) ---------- */
/* as LINHAS fervem: feTurbulence + feDisplacementMap com seed em frames discretos (~7fps),
   filtros definidos no <defs> do index.html. O filtro mora no <svg> interno pra NÃO brigar
   com o transform de drag/rotação do wrapper .f1-doodle. Dois filtros desincronizados (boil1/boil2). */
.boil-a svg{filter:url(#boil1)}
.boil-b svg{filter:url(#boil2)}

/* corte de movimento: prefers-reduced-motion + .reduced → linhas paradas (sem displacement),
   mantendo a sombra de contato da caixa. */
@media (prefers-reduced-motion:reduce){
  .boil-a svg,.boil-b svg{filter:none}
  .f1box-front svg{filter:drop-shadow(0 6px 4px rgba(45,32,16,.22))}
  .f1box-back svg,.f1box-lid svg,.f1box-bow svg{filter:none}
  .f1box-lid{transition:none}
  .f1box-bow.untie,.f1box-bow.untie .bow-loops,.f1box-bow.untie .bow-tails{animation:none}
  .f1box-glow.show .spark{animation:none;opacity:1;transform:none}
  .f1box-glow.show .spark > *{animation:none}
  .f1.leaving{transition:none}
}
.reduced .boil-a svg,.reduced .boil-b svg{filter:none}
.reduced .f1box-front svg{filter:drop-shadow(0 6px 4px rgba(45,32,16,.22))}
.reduced .f1box-back svg,.reduced .f1box-lid svg,.reduced .f1box-bow svg{filter:none}
.reduced .f1box-lid{transition:none}
.reduced .f1box-bow.untie,.reduced .f1box-bow.untie .bow-loops,.reduced .f1box-bow.untie .bow-tails{animation:none}
.reduced .f1box-glow.show .spark{animation:none;opacity:1;transform:none}
.reduced .f1box-glow.show .spark > *{animation:none}
.reduced .f1.leaving{transition:none}