/* ===== Config rápida ===== */
:root {
  --gollum-size: 190px;
  --gollum-bottom: 24px;
  --gollum-right: 24px;
  --gollum-img: url("https://ingresso-a.akamaihd.net/catalogo/img/tag-page/lotr-golum.png");

  /* salto maior e escala no hover */
  --gollum-jump: 38px; /* altura do pulo */
  --gollum-scale: 1.22; /* escala no pico do pulo */
}

/* ===== Apenas >= 768px (desktop/tablet) ===== */
@media (min-width: 768px) {
  body::after {
    content: "";
    position: fixed;
    bottom: var(--gollum-bottom);
    right: var(--gollum-right);
    width: var(--gollum-size);
    height: var(--gollum-size);
    background: var(--gollum-img) center/contain no-repeat;
    z-index: 999999;
    pointer-events: auto;

    /* idle loop */
    animation: gollumIdle 3.2s ease-in-out infinite;
    transform-origin: bottom center;
    transition: transform 240ms ease, filter 240ms ease, opacity 160ms ease;
    cursor: arrow;
  }

  body::after:hover {
    animation: gollumHover 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards; /* salto+overshoot */
    transform: translateY(calc(-1 * var(--gollum-jump) * 0.5)) scale(1.08)
      rotate(2deg);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
  }

  /* Idle: leve tremor/respiração */
  @keyframes gollumIdle {
    0% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
      transform: translateY(-3px) rotate(-1.6deg) scale(1.01);
    }
    50% {
      transform: translateY(2px) rotate(1.2deg) scale(0.995);
    }
    75% {
      transform: translateY(-1px) rotate(-0.8deg) scale(1.005);
    }
    100% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
  }

  /* Hover: pulo maior com overshoot e pouso */
  @keyframes gollumHover {
    0% {
      transform: translateY(0) scale(1) rotate(0deg);
    }
    35% {
      transform: translateY(calc(-1 * var(--gollum-jump)))
        scale(var(--gollum-scale)) rotate(5deg);
    }
    60% {
      transform: translateY(calc(-1 * var(--gollum-jump) * 0.55)) scale(1.1)
        rotate(3deg);
    }
    80% {
      transform: translateY(calc(-1 * var(--gollum-jump) * 0.35)) scale(1.06)
        rotate(2deg);
    }
    100% {
      transform: translateY(calc(-1 * var(--gollum-jump) * 0.28)) scale(1.06)
        rotate(2deg);
    }
  }
}

/* ===== Mobile: esconder por padrão ===== */
@media (max-width: 767.98px) {
  body::after {
    content: none !important; /* não renderiza no mobile */
  }
}

/* Acessibilidade: reduzir movimento se preferido */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Mobile apenas (<= 767) */
@media (max-width: 767.98px) {
  /* Ajuste o seletor para o contêiner do título da página */
  .tag-page-title::after {
    content: "";
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-left: 8px;
    vertical-align: middle;
    background: url("https://ingresso-a.akamaihd.net/catalogo/img/tag-page/lotr-ring.png")
      center/contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
    animation: ringGlow 2.8s ease-in-out infinite;
  }
  @keyframes ringGlow {
    0%,
    100% {
      filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    }
    50% {
      filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.95));
    }
  }
}