/* =====================================================================
 * Animações da landing "The Black November"
 * Estados iniciais só valem com a classe .bn-js no <html> (ligada pelo
 * template e removida se o JS não carregar) e sem "reduzir movimento".
 * ===================================================================== */

.bn-l {
  display: inline-block;
  white-space: pre;
}

/* SVG inline dos logos: ocupa o tamanho do wrapper (que já escala com --u) */
.bn .bn-draw svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
  /* --- título "escrito" letra por letra (hero e bloco final) --- */
  .bn-js [data-bn-type] .bn-l {
    opacity: 0;
    transform: translateY(0.22em) scale(0.92);
    filter: blur(10px);
  }

  .bn-js [data-bn-type].is-in .bn-l {
    animation: bn-type 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
    animation-delay: calc(var(--t0, 0s) + var(--i) * 0.085s);
  }

  @keyframes bn-type {
    60% {
      filter: blur(2px);
    }
    to {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }
  }

  /* --- "20%" do hero: pula para chamar atenção --- */
  .bn .bn-num--jump {
    display: inline-block;
    transform-origin: 50% 100%;
    animation: bn-jump 2.8s cubic-bezier(0.3, 0.7, 0.4, 1) 3.1s infinite;
  }

  @keyframes bn-jump {
    0%,
    60%,
    100% {
      transform: translateY(0) scale(1, 1);
    }
    9% {
      transform: translateY(0) scale(1.07, 0.9);
    }
    23% {
      transform: translateY(-0.17em) scale(0.96, 1.06);
    }
    37% {
      transform: translateY(0) scale(1.05, 0.94);
    }
    46% {
      transform: translateY(-0.05em) scale(1, 1);
    }
    53% {
      transform: translateY(0) scale(1, 1);
    }
  }

  /* --- "saiba mais ↓" --- */
  .bn .bn-more__txt {
    position: relative;
    display: inline-block;
    transition: letter-spacing 0.45s ease;
  }

  .bn .bn-more__txt::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    animation: bn-underline 3.2s ease-in-out 3.4s infinite;
  }

  .bn .bn-more__arrow {
    animation: bn-arrow 1.5s ease-in-out 3.4s infinite;
  }

  .bn a.bn-more:hover .bn-more__txt,
  .bn a.bn-more:focus-visible .bn-more__txt {
    letter-spacing: 0.12em;
  }

  @keyframes bn-underline {
    0% {
      transform: scaleX(0);
      transform-origin: left;
    }
    45% {
      transform: scaleX(1);
      transform-origin: left;
    }
    55% {
      transform: scaleX(1);
      transform-origin: right;
    }
    100% {
      transform: scaleX(0);
      transform-origin: right;
    }
  }

  @keyframes bn-arrow {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.45;
    }
    50% {
      transform: translateY(10px);
      opacity: 1;
    }
  }

  /* --- entrada de títulos, textos e linhas ao rolar --- */
  .bn-js .bn-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s ease var(--d, 0s), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
  }

  .bn-js .bn-fade.is-in {
    opacity: 1;
    transform: none;
  }

  .bn-js .bn-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s);
  }

  .bn-js .bn-line--r {
    transform-origin: right;
  }

  .bn-js .bn-line.is-in {
    transform: none;
  }

  /* --- logos "desenhados": o traço percorre o contorno e depois enche --- */
  .bn-js .bn-draw path {
    fill-opacity: 0;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .bn-js .bn-draw.is-drawn path {
    animation: bn-draw 1s cubic-bezier(0.65, 0, 0.35, 1) var(--dd, 0s) forwards,
      bn-fill 0.45s ease-out calc(var(--dd, 0s) + 0.8s) forwards;
  }

  @keyframes bn-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes bn-fill {
    to {
      fill-opacity: 1;
      stroke-opacity: 0;
    }
  }

  /* --- fotos da introdução: entrada em cascata --- */
  .bn-js .bn-stage__item {
    opacity: 0;
    --lift: 80px;
  }

  .bn-js .bn-stage.is-in .bn-stage__item {
    opacity: 1;
    --lift: 0px;
    transition-delay: calc(var(--n) * 0.14s);
  }

  .bn-js .bn-stage.is-settled .bn-stage__item {
    transition-delay: 0s;
  }

  /* --- fotos das grades: cortina preta que sobe + zoom + brilho --- */
  .bn-js .bn-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #0a0a0a;
    transform-origin: 50% 0;
    transition: transform 1s cubic-bezier(0.77, 0, 0.18, 1) var(--d, 0s);
    pointer-events: none;
  }

  .bn-js .bn-photo.is-in::after {
    transform: scaleY(0);
  }

  .bn-js .bn-photo > img {
    transform: scale(1.25);
    transition: transform 1.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s);
  }

  .bn-js .bn-photo.is-in > img {
    transform: none;
  }

  .bn-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.38) 50%, transparent 62%);
    transform: translateX(-130%);
    pointer-events: none;
  }

  .bn-js .bn-photo.is-in::before {
    animation: bn-sweep 1.3s ease-out calc(var(--d, 0s) + 0.95s) forwards;
  }

  @keyframes bn-sweep {
    to {
      transform: translateX(130%);
    }
  }

  /* --- fita "Black Friday" do bloco final: entra e balança de leve --- */
  .bn-js .bn-cta__ribbon {
    opacity: 0;
  }

  .bn-js .bn-cta__ribbon.is-in {
    opacity: 1;
    transition: opacity 0.6s ease;
  }

  /* a fita corre da direita para a esquerda, sem parar e sem voltar */
  .bn-cta__ribbon-track {
    animation: bn-ribbon-run 12s linear infinite;
  }

  @keyframes bn-ribbon-run {
    to {
      transform: translate3d(-46.0317%, 0, 0);
    }
  }

  /* --- "20%" do bloco final: conta de 0 a 20, dá um "pop" e fica brilhando --- */
  .bn .bn-cta__num.is-pop {
    animation: bn-pop 0.9s cubic-bezier(0.3, 1.6, 0.5, 1), bn-glow 3.2s ease-in-out 0.9s infinite;
  }

  @keyframes bn-pop {
    0% {
      transform: scale(0.82);
    }
    60% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes bn-glow {
    0%,
    100% {
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
      text-shadow: 0 0 48px rgba(255, 255, 255, 0.45);
    }
  }
}

/* --- fotos da introdução: hover (só mouse) --- */
.bn-stage__item {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  --sc: 1;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--sc));
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.9s ease, box-shadow 0.5s ease, filter 0.5s ease;
  will-change: transform;
}

.bn-stage__item img {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bn-stage__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.32), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .bn-stage__item:hover {
    --lift: -20px;
    --sc: 1.07;
    z-index: 5;
    box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.55);
    transition-delay: 0s;
  }

  .bn-stage__item:hover img {
    transform: scale(1.12);
  }

  .bn-stage__item:hover::after {
    opacity: 1;
  }

  .bn-stage__inner:hover .bn-stage__item:not(:hover) {
    --sc: 0.96;
    filter: saturate(0.4) brightness(0.8);
  }

  .bn-photo:hover > img {
    transform: scale(1.06) !important;
    transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bn-stage__item,
  .bn-stage__item img {
    transition: none;
  }
}