/* ============================================
   HALLOWEEN — paleta, tempestade, modo sonho
   e easter eggs. Para desligar: remova
   halloween.css e halloween.js do index.html.
   (A abertura animada está desligada por
   enquanto: a <div id="hwIntro"> está
   comentada no HTML.)
============================================ */

/* ── PALETA: roxo-noite, abóbora, osso e verde-gosma ── */
/* As cores do style.css são variáveis; aqui só trocamos os valores. */
:root {
  --bg-off: #0b0810;
  --bg-on: #0e0a14;
  --bg-rgb: 11, 8, 16;
  --amber: #ff7a1a;
  --amber-warm: #ffa552;
  --amber-rgb: 255, 122, 26;
  --light-rgb: 255, 160, 80;
  --live-green: #9cff57;
  --live-green-glow: rgba(156, 255, 87, 0.4);
  --blood: #e63946;
}

.dark-section {
  background: rgba(40, 12, 56, 0.45);
}

/* ── ABERTURA — a cantiga do Freddy, garras e título ── */
/* A div fica no HTML para cobrir a tela desde o primeiro frame;
   o halloween.js preenche e dá o play. */
.hw-intro {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: #050404;
  text-align: center;
  animation: hwIntroOut 0.6s ease 12s forwards; /* rede de segurança se o JS falhar */
}

.hw-intro > * { grid-area: 1 / 1; }

.hw-intro.play {
  animation:
    hwShake 0.45s linear 4.1s,
    hwIntroOut 0.8s ease 6.9s forwards;
}

.hw-intro.skip {
  animation: hwIntroOut 0.4s ease forwards;
}

/* clarão vermelho no golpe das garras */
.hw-intro.play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(170, 0, 12, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: hwRedFlash 0.6s ease-out 4.1s;
}

.hw-intro-rhyme p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3.4vw, 2.3rem);
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-dim);
  opacity: 0;
}

.hw-intro-rhyme p:last-child { color: var(--blood); }

.hw-intro.play .hw-intro-rhyme { animation: hwFadeOut 0.3s ease 4s forwards; }
.hw-intro.play .hw-intro-rhyme p { animation: hwRhymeIn 0.7s ease forwards; } /* atraso de cada linha vem do JS */

.hw-intro-title { opacity: 0; }
.hw-intro.play .hw-intro-title { animation: hwTitleIn 1.1s ease 4.4s forwards; }

.hw-intro-kicker {
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--blood);
}

.hw-intro-name {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 300;
  line-height: 0.95;
  color: var(--ink);
}

.hw-intro-name em { color: var(--amber-warm); }

.hw-intro-sub {
  margin-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* na abertura as pontas ficam fora da tela: sem máscara nem filtro,
   que numa camada desse tamanho chegavam a cortar o desenho */
.hw-intro .hw-claw {
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: clamp(110px, 16vmin, 180px);
  mask-image: none;
  filter: none;
  rotate: -22deg;
  animation-duration: 2.6s;
  animation-delay: 4.1s;
  animation-fill-mode: both;
}

.hw-intro-skip {
  position: absolute;
  right: 1.5rem;
  bottom: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.45;
}

@keyframes hwRhymeIn {
  from { opacity: 0; translate: 0 8px; filter: blur(4px); }
  to   { opacity: 1; translate: 0 0; filter: none; }
}

@keyframes hwTitleIn {
  from { opacity: 0; scale: 1.08; filter: blur(6px); }
  to   { opacity: 1; scale: 1; filter: none; }
}

@keyframes hwFadeOut  { to { opacity: 0; } }
@keyframes hwIntroOut { to { opacity: 0; visibility: hidden; } }
@keyframes hwRedFlash { from { opacity: 1; } to { opacity: 0; } }

@keyframes hwShake {
  20% { translate: -14px 6px; }
  40% { translate: 12px -8px; }
  60% { translate: -8px 4px; }
  80% { translate: 5px -2px; }
}

/* ── GARRAS DO FREDDY (cliques no modo sonho e abertura) ── */
.hw-claw {
  position: fixed;
  z-index: 8600;
  background: repeating-linear-gradient(180deg, transparent 0 12%, rgba(255, 42, 42, 0.3) 15.5%, #ff2a2a 17% 21%, rgba(255, 42, 42, 0.3) 22.5%, transparent 25%);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  filter: drop-shadow(0 0 6px rgba(255, 30, 30, 0.9));
  translate: -50% -50%;
  rotate: -28deg;
  pointer-events: none;
  animation: hwClaw 1.4s ease-out forwards;
}

@keyframes hwClaw {
  0%   { clip-path: inset(0 100% 0 0); opacity: 1; }
  14%  { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* ── TEMPESTADE: raio ao acender a luz (Frankenstein) e ao rolar ── */
.hw-storm {
  position: fixed;
  inset: 0;
  z-index: 5500;
  background: linear-gradient(rgba(205, 215, 255, 0.38), rgba(205, 215, 255, 0.06) 75%);
  opacity: 0;
  pointer-events: none;
}

.hw-storm svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hw-storm polyline {
  fill: none;
  stroke-linejoin: bevel;
  vector-effect: non-scaling-stroke;
}

.hw-storm .glow { stroke: rgba(190, 205, 255, 0.35); stroke-width: 10; }
.hw-storm .core { stroke: #f4f7ff; stroke-width: 2.4; }

/* dois clarões rápidos, como um raio de verdade */
.hw-storm.strike { animation: hwStrike 0.8s ease-out; }

@keyframes hwStrike {
  4%  { opacity: 1; }
  14% { opacity: 0.15; }
  22% { opacity: 0.85; }
}

/* o trovão: a página treme logo depois do clarão */
.site-main.rumble { animation: hwRumble 0.9s ease-out 0.3s; }

@keyframes hwRumble {
  10% { translate: -3px 1px; }
  25% { translate: 3px -1px; }
  40% { translate: -2px 1px; }
  60% { translate: 2px 0; }
  80% { translate: -1px 0; }
}

/* ── LUZ FALHANDO — a sala pisca de vez em quando ──── */
body.lights-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  opacity: 0;
  pointer-events: none;
  animation: hwFlicker 13s steps(1, end) infinite;
}

@keyframes hwFlicker {
  0%, 93%, 94.6%, 96% { opacity: 0; }
  93.6% { opacity: 0.55; }
  95.3% { opacity: 0.35; }
}

/* ── MODO SONHO — A Hora do Pesadelo (1984) ─────────── */
body.dreaming {
  --amber: var(--blood);
  --amber-warm: #ff6b6b;
  --amber-rgb: 230, 57, 70;
}

/* o suéter listrado do Freddy */
body.dreaming .hero-section,
body.dreaming .dark-section {
  background: repeating-linear-gradient(180deg, rgba(150, 18, 28, 0.16) 0 34px, rgba(36, 80, 36, 0.14) 34px 68px);
}

/* visão dupla nos títulos, nas cores do suéter */
body.dreaming h1,
body.dreaming h2 {
  animation: hwDoubleVision 4s ease-in-out infinite;
}

@keyframes hwDoubleVision {
  0%, 100% { text-shadow: 3px 0 rgba(230, 57, 70, 0.55), -3px 0 rgba(80, 160, 80, 0.45); }
  50%      { text-shadow: -4px 1px rgba(230, 57, 70, 0.55), 4px -1px rgba(80, 160, 80, 0.45); }
}

/* bordas da tela em vermelho (a luz falhando continua por cima) */
body.dreaming .hw-eyes {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(110, 0, 12, 0.6) 100%);
}

/* a luva sobe do fundo da tela, como na cena da banheira */
.hw-glove {
  position: fixed;
  right: 8vw;
  bottom: 0;
  z-index: 950;
  height: 46vh;
  translate: 0 105%;
  filter: drop-shadow(0 0 14px rgba(255, 50, 50, 0.3));
  pointer-events: none;
}

body.dreaming .hw-glove {
  animation: hwGlove 11s ease-in-out 1.2s infinite;
}

@keyframes hwGlove {
  25%, 45% { translate: 0 18%; }
  55%      { translate: 0 105%; }
}

/* pálpebras pesando ao dormir e ao acordar */
.hw-eyes {
  position: fixed;
  inset: 0;
  z-index: 6500;
  pointer-events: none;
}

.hw-eyes::before,
.hw-eyes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #000;
  scale: 1 0;
}

.hw-eyes::before { top: 0; transform-origin: top; }
.hw-eyes::after  { bottom: 0; transform-origin: bottom; }

.hw-eyes.blink::before,
.hw-eyes.blink::after {
  animation: hwBlink 1.5s ease-in-out;
}

@keyframes hwBlink {
  0%, 100% { scale: 1 0; }
  15%      { scale: 1 0.55; }
  25%      { scale: 1 0.2; }
  45%, 60% { scale: 1 1.02; }
}

/* ── CORDA: linha brilhante e abóbora-lanterna balançando ── */
/* Ao lado da máscara do Jason a corda original sumia; aqui ela chama o olho. */
.cord {
  transform-origin: top center;
  animation: hwCordSway 3.4s ease-in-out infinite alternate;
}

@keyframes hwCordSway {
  from { rotate: -4deg; }
  to   { rotate: 4deg; }
}

.cord-label {
  color: var(--ink);
}

.cord-line {
  width: 2px;
  background: linear-gradient(rgba(var(--light-rgb), 0.45), var(--amber));
  box-shadow: 0 0 8px rgba(var(--amber-rgb), 0.7);
}

.knob-ring {
  border-width: 2px;
}

.knob-ball {
  position: relative;
  width: 28px;
  height: 23px;
  border-radius: 46% 46% 42% 42%;
  background:
    linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.2) 33%, transparent 36% 64%, rgba(0, 0, 0, 0.2) 67%, transparent 70%),
    radial-gradient(ellipse at 50% 35%, #ff9a3c, #c9500a 75%);
  box-shadow:
    inset 5px 0 4px -2px rgba(0, 0, 0, 0.35),
    inset -5px 0 4px -2px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 120, 20, 0.7);
  animation: hwPumpkinGlow 2.2s ease-in-out infinite;
}

/* cabinho */
.knob-ball::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 4px;
  height: 6px;
  border-radius: 1px;
  background: #6b8a2e;
  transform: translateX(-50%) rotate(14deg);
}

/* rosto aceso da lanterna */
.knob-ball::after {
  content: "";
  position: absolute;
  inset: 24% 16% 14%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath fill='%23ffd166' d='M2 6L5 1 8 6ZM12 6L15 1 18 6ZM1 8.5L4 10.5 6.5 8.5 10 11.5 13.5 8.5 16 10.5 19 8.5 17 13.5H3Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@keyframes hwPumpkinGlow {
  50% {
    box-shadow:
      inset 5px 0 4px -2px rgba(0, 0, 0, 0.35),
      inset -5px 0 4px -2px rgba(0, 0, 0, 0.35),
      0 0 32px rgba(255, 140, 30, 1);
  }
}

/* ── SEXTA-FEIRA 13: a máscara do Jason na tela escura ── */
.dm-icon {
  margin-bottom: 1.6rem;
}

.hw-mask {
  display: block;
  height: clamp(96px, 17vh, 150px);
  margin: 0 auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(var(--amber-rgb), 0.22));
  animation: hwMaskGlow 4s ease-in-out infinite;
}

@keyframes hwMaskGlow {
  50% { filter: drop-shadow(0 0 32px rgba(var(--amber-rgb), 0.45)); }
}

/* ── MORCEGOS cruzando o hero ───────────────────────── */
.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  z-index: 1;
  width: 54px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath fill='%232b2235' d='M32 9L35 4L36.5 9.5Q44 9 50 3Q56 5 63 9Q58 9.5 55 15Q50 13 46 17Q41 16 36 21L33.5 25L32 24L30.5 25L28 21Q23 16 18 17Q14 13 9 15Q6 9.5 1 9Q8 5 14 3Q20 9 27.5 9.5L29 4Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  pointer-events: none;
  animation:
    hwBatFly 26s linear infinite,
    hwBatFlap 0.18s ease-in-out infinite alternate;
}

.hero-section::after {
  top: 34%;
  width: 34px;
  height: 15px;
  animation-duration: 31s, 0.14s;
  animation-delay: -12s, 0s;
}

@keyframes hwBatFly {
  0%        { translate: -80px 0; }
  10%       { translate: 25vw -50px; }
  20%       { translate: 50vw 20px; }
  30%       { translate: 75vw -30px; }
  40%, 100% { translate: calc(100vw + 80px) 10px; }
}

@keyframes hwBatFlap {
  to { scale: 1 0.35; }
}

/* ── TEIAS nos cantos das seções ────────────────────── */
.content-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='rgba(232,226,213,.16)' stroke-width='.5' d='M0 0L95 31M0 0L81 59M0 0L59 81M0 0L31 95M30 0Q24.3 3.8 28.5 9.3Q21.9 11.2 24.3 17.6Q17.4 17.4 17.6 24.3Q11.2 21.9 9.3 28.5Q3.8 24.3 0 30M55 0Q46.2 7.3 52.3 17Q41.7 21.2 44.5 32.3Q33 33 32.3 44.5Q21.2 41.7 17 52.3Q7.3 46.2 0 55M80 0Q68.8 10.9 76.1 24.7Q62 31.6 64.7 47Q49.2 49.2 47 64.7Q31.6 62 24.7 76.1Q10.9 68.8 0 80'/%3E%3C/svg%3E")
    no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

/* Seções escuras têm a luminária à direita: teia vai para a esquerda */
.dark-section::after {
  right: auto;
  left: 0;
  transform: none;
}

/* ── QUANDO AS LUZES SE APAGAM (2016) ───────────────── */
/* Uma sombra discreta no canto, que só existe no escuro */
.hw-figure {
  position: fixed;
  right: 9vw;
  bottom: 0;
  z-index: 900;
  height: 20vh;
  fill: #000;
  filter: drop-shadow(0 0 18px rgba(var(--amber-rgb), 0.12));
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 1.4s 0.6s;
}

body.lights-on .hw-figure {
  opacity: 0;
  transition: opacity 0.1s;
}

/* ── IT: A COISA (2017): o balão vermelho mora lá embaixo ── */
.hw-balloon {
  position: absolute;
  right: 14%;
  bottom: 0;
  z-index: 3;
  width: 46px;
  height: 56px;
  border: 0;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #c8102e 55%, #7a0018);
  box-shadow: 0 0 30px rgba(200, 16, 46, 0.35);
  cursor: none;
  transform: translateY(160%);
  transform-origin: 50% 200%;
  transition:
    transform 5s cubic-bezier(0.2, 0.7, 0.2, 1),
    scale 0.25s,
    opacity 0.25s;
  animation: hwSway 3.2s ease-in-out infinite alternate;
}

/* nó */
.hw-balloon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  translate: -50% 0;
  border: 5px solid transparent;
  border-bottom-color: #9e0d24;
}

/* barbante — some pelo bueiro */
.hw-balloon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  width: 1px;
  height: 120px;
  background: linear-gradient(var(--ink-dim), transparent);
}

.hw-balloon.up { transform: translateY(-40%); }
.hw-balloon.pop { scale: 1.6; opacity: 0; pointer-events: none; }

@keyframes hwSway {
  from { rotate: -5deg; }
  to   { rotate: 5deg; }
}

/* ── PÂNICO (1996): o telefone toca ─────────────────── */
a[href^="https://wa.me"] {
  position: relative;
}

a[href^="https://wa.me"]::after {
  content: "☎ Qual é o seu filme de terror favorito?";
  position: absolute;
  left: 0;
  top: calc(100% + 0.6rem);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: none;
  white-space: nowrap;
  color: var(--amber);
  opacity: 0;
  translate: 0 -4px;
  transition: opacity 0.3s, translate 0.3s;
  pointer-events: none;
}

a[href^="https://wa.me"]:hover::after {
  opacity: 1;
  translate: 0 0;
}

:lang(en) a[href^="https://wa.me"]::after {
  content: "☎ What's your favorite scary movie?";
}

/* ── A HORA DO PESADELO (1984): a cantiga do Freddy ─── */
/* Os versos vêm do halloween.js (data-pt / data-en). Posição absoluta
   para não empurrar o número quando aparecem. */
.sec-num {
  position: relative;
}

.sec-num::after {
  content: attr(data-pt);
  position: absolute;
  top: 0;
  left: 4em;
  white-space: nowrap;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 0.5s;
}

:lang(en) .sec-num::after { content: attr(data-en); }

/* seção centralizada (Contato): verso logo abaixo do número */
.centered .sec-num::after {
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.4em;
}

.sec-num:hover::after { opacity: 1; }

/* ── AVISO usado pelos easter eggs ──────────────────── */
.hw-toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 7000;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.8rem 1.4rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--amber-warm);
  background: rgba(var(--bg-rgb), 0.94);
  border: 1px solid rgba(var(--amber-rgb), 0.35);
  opacity: 0;
  translate: -50% 1rem;
  transition: opacity 0.4s, translate 0.4s;
  pointer-events: none;
}

.hw-toast.show {
  opacity: 1;
  translate: -50% 0;
}

/* ── MOVIMENTO REDUZIDO: sem clarões, tremores ou voos ── */
@media (prefers-reduced-motion: reduce) {
  body.lights-on::before,
  .hw-balloon,
  .hw-mask,
  .cord,
  .knob-ball,
  .site-main.rumble { animation: none; }
  .hero-section::before,
  .hero-section::after,
  .hw-storm { display: none; }
  .hw-intro.play:not(.skip) { animation: hwIntroOut 0.8s ease 6.9s forwards; }
  .hw-intro.play::before { display: none; }
  body.dreaming .hw-glove { animation: none; translate: 0 40%; }
}