/* ==========================================================================
   AFP Lacres — toque de Halloween
   O site continua branco e verde. Só o hero vira noite (lua, névoa e
   morcegos), com uma teia e uma aranha discretas pela página e o popup.
   Animações em assets/js/halloween.js.
   ========================================================================== */

:root {
  --hw-noite: #0f1411;
  --hw-osso: #ece5d6;
  --hw-osso-2: rgba(236, 229, 214, .72);
  --hw-abobora: #ff7a1a;
  --hw-abobora-2: #ffb15c;
}

/* --------------------------------------------------------------------------
   Guarda anti-flash: o hero fica oculto só até o GSAP montar a entrada
   -------------------------------------------------------------------------- */
.js.anim .hero__title,
.js.anim .hero__text,
.js.anim .hero__cta,
.js.anim .hw-lua { visibility: hidden; }

.split-line { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }

/* --------------------------------------------------------------------------
   Hero noturno: lua, névoa e morcegos
   -------------------------------------------------------------------------- */
.hero::before {
  /* "noite americana": multiplica a foto por um azul profundo */
  background: linear-gradient(180deg, #24324d 0%, #141c2c 60%, #10161f 100%);
  mix-blend-mode: multiply;
  opacity: 1;
}
.hero > :not(.hw-hero-fx) { position: relative; z-index: 1; }

.hw-hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.hw-lua {
  position: absolute;
  top: 17%;
  right: 11%;
  width: clamp(110px, 13vw, 190px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(170, 140, 95, .2) 0 8%, transparent 12%),
    radial-gradient(circle at 40% 66%, rgba(170, 140, 95, .16) 0 5%, transparent 9%),
    radial-gradient(circle at 70% 70%, rgba(170, 140, 95, .12) 0 4%, transparent 7%),
    radial-gradient(circle at 30% 32%, rgba(170, 140, 95, .12) 0 3%, transparent 6%),
    radial-gradient(circle at 38% 35%, #fff9ea 0%, #f6e3b5 45%, #dcb877 100%);
  box-shadow:
    0 0 50px 8px rgba(255, 214, 150, .35),
    0 0 200px 70px rgba(255, 150, 60, .14);
}
@media (max-width: 767px) {
  .hw-lua { top: 86px; right: 18px; width: 68px; }
}

.hw-nevoa {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 46%;
  bottom: -14%;
  background: radial-gradient(ellipse at center, rgba(205, 214, 220, .3) 0%, rgba(205, 214, 220, 0) 64%);
  filter: blur(26px);
}
.hw-nevoa--2 { bottom: -22%; height: 38%; opacity: .7; left: -40%; }

.hw-morcegos { position: absolute; inset: 0; }
.hw-morcego {
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 22px;
  color: #050706;
  opacity: 0;          /* o GSAP mostra quando o voo começa */
}

/* --------------------------------------------------------------------------
   Teia (cantos de duas seções) e aranha (Produtos) — discretas
   -------------------------------------------------------------------------- */
.hw-com-teia { position: relative; overflow: hidden; }
.hw-com-teia > .con-inner { position: relative; z-index: 1; }
.hw-teia {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(130px, 18vw, 240px);
  color: rgba(51, 51, 51, .16);
  pointer-events: none;
}
.hw-teia--dir { left: auto; right: 0; transform: scaleX(-1); transform-origin: 50% 50%; }

.produtos-intro { position: relative; }
.hw-aranha {
  position: absolute;
  top: 0;
  right: 8%;
  z-index: 2;
  width: 40px;
  transform-origin: 50% 0;
  pointer-events: none;
  --fio: 120px;
}
.hw-aranha__fio {
  display: block;
  width: 1px;
  height: var(--fio);
  margin: 0 auto;
  background: linear-gradient(rgba(51, 51, 51, 0), rgba(51, 51, 51, .35));
}
.hw-aranha__corpo { display: block; width: 40px; height: 40px; margin-top: -9px; color: #1c211e; }
@media (max-width: 767px) {
  .hw-aranha { right: 4%; width: 30px; }
  .hw-aranha__corpo { width: 30px; height: 30px; }
}

/* --------------------------------------------------------------------------
   Popup de Halloween
   -------------------------------------------------------------------------- */
.hw-popup {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hw-osso);
  overflow: visible;
}
.hw-popup::backdrop { background: rgba(5, 7, 6, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hw-popup__caixa {
  position: relative;
  margin-top: 70px;
  padding: 92px 40px 38px;
  text-align: center;
  outline: none;
  border: 1px solid rgba(255, 138, 42, .32);
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 122, 26, .22) 0%, rgba(255, 122, 26, 0) 60%),
    var(--hw-noite);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.hw-popup__arte {
  position: absolute;
  top: -70px;
  left: 50%;
  width: 150px;
  margin-left: -75px;
}
.hw-popup__arte::before {
  content: "";
  position: absolute;
  inset: 10% 5% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 150, 40, .45), rgba(255, 150, 40, 0) 70%);
  filter: blur(14px);
}
.hw-popup__arte img { position: relative; width: 100%; height: auto; }
.hw-popup__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hw-abobora-2);
  margin-bottom: 14px;
}
.hw-popup__titulo {
  font-size: clamp(24px, 4.4vw, 30px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--hw-osso);
  margin-bottom: 14px;
}
.hw-popup__texto { font-size: 16px; line-height: 1.55; color: var(--hw-osso-2); margin-bottom: 26px; }
.hw-popup__acoes { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hw-popup__cta { padding: 15px 46px; background: var(--hw-abobora); color: #1d0e03; }
.hw-popup__cta:hover { background: var(--hw-abobora-2); }
.hw-popup__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--hw-osso-2);
  border-bottom: 1px solid rgba(236, 229, 214, .45);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.hw-popup__link:hover { color: var(--hw-abobora); border-color: var(--hw-abobora); }
.hw-popup__fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hw-osso-2);
}
.hw-popup__fechar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hw-popup__fechar:hover { color: var(--hw-abobora); }
.hw-popup__fechar:focus-visible,
.hw-popup__link:focus-visible { outline: 2px solid var(--hw-abobora); outline-offset: 2px; border-radius: 6px; }
.hw-popup__fechar:focus:not(:focus-visible) { outline: none; }
@media (max-width: 480px) {
  .hw-popup__caixa { padding: 84px 22px 30px; }
}

/* --------------------------------------------------------------------------
   Movimento reduzido: nada se move, a decoração fica estática
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hw-morcego { display: none; }
}