/* fase-2.css — abrir a caixa: tampa arrastável sobre a caixa aberta.
   Duas SVGs no mesmo viewBox (240×210) sobrepostas → alinhamento automático.
   Boil herdado (boilBox no corpo, boil1 na tampa). Sem gradiente de cor / sem glow. */

.f2-box{ position:relative; width:230px; height:210px; margin:2px auto; }
.f2-body,.f2-lid{ position:absolute; inset:0; width:100%; height:100%; }
.f2-body svg,.f2-lid svg{ display:block; width:100%; height:auto; }

/* corpo (estático) — boiling + sombra de contato */
.f2-body svg{ filter:url(#boilBox) drop-shadow(0 6px 4px rgba(45,32,16,.22)); }

/* tampa (arrastável) — boiling; snap-back elástico via transição (desligada enquanto arrasta) */
.f2-lid{
  z-index:2; cursor:grab; touch-action:none; will-change:transform;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.f2-lid svg{ filter:url(#boil1); }
.f2-lid.grabbing{ cursor:grabbing; transition:none; }
.f2-lid:focus-visible{ outline:2px solid var(--blue); outline-offset:6px; border-radius:6px; }

/* cue de entrada: a tampa "respira" (sobe e volta) 2× pra mostrar que abre */
@keyframes f2-breath{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
.f2-lid.f2-breath{ animation:f2-breath .6s ease-in-out 2; }

/* hint */
.f2-hint{
  font-family:"Caveat",cursive; font-weight:700; font-size:24px; color:var(--blue);
  text-align:center; transform:rotate(-2deg); margin-bottom:2px; pointer-events:none;
}
.f2-hint .sub{
  display:block; font-family:"Courier Prime",monospace; font-size:11px;
  letter-spacing:.14em; color:var(--ink-soft); margin-top:2px;
}
/* fallback acessível (abrir sem arrastar) */
.f2-fallback{
  margin-top:8px; background:none; border:0; cursor:pointer;
  font-family:"Courier Prime",monospace; font-size:11px; letter-spacing:.1em;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px;
}

/* corte de movimento */
@media (prefers-reduced-motion:reduce){
  .f2-lid.f2-breath{ animation:none; }
  .f2-lid{ transition:none; }
  .f2-body svg{ filter:drop-shadow(0 6px 4px rgba(45,32,16,.22)); }
  .f2-lid svg{ filter:none; }
}
.reduced .f2-lid.f2-breath{ animation:none; }
.reduced .f2-lid{ transition:none; }
.reduced .f2-body svg{ filter:drop-shadow(0 6px 4px rgba(45,32,16,.22)); }
.reduced .f2-lid svg{ filter:none; }