/* KILLABOMB — Industrial motion layer */

/* Core content is visible by default. JavaScript never gates page rendering. */

/* ── Scroll reveal ── */

.motion-reveal {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Red smoke text hover (buttons & card labels — not section headings) ── */

.red-smoke-hover {
  position: relative;
  isolation: isolate;
}

.red-smoke-hover::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 220%;
  transform: translate(-50%, -50%) scale(0.88);
  background: radial-gradient(
    ellipse at center,
    rgba(180, 0, 0, 0.18) 0%,
    rgba(120, 0, 0, 0.1) 42%,
    transparent 72%
  );
  filter: blur(16px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.red-smoke-hover:hover::before,
.red-smoke-hover:focus-visible::before {
  opacity: 0.45;
  animation: red-smoke-pulse 2.8s ease-in-out infinite;
}

@keyframes red-smoke-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.35;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.5;
  }
}

/* ── Section & page headings (industrial red — no pink, no glitch layers) ── */

.page-title::before,
.page-title::after,
.section-title::before,
.section-title::after,
.hero-title::before,
.hero-title::after,
.glitch-heading::before,
.glitch-heading::after,
h1::before,
h1::after,
h2::before,
h2::after {
  content: none !important;
  display: none !important;
}

.page-title:hover,
.page-title:focus-visible,
.section-title:hover,
.section-title:focus-visible,
.section-header h1:hover,
.section-header h1:focus-visible,
.section-header h2:hover,
.section-header h2:focus-visible,
.page-hero h1:hover,
.page-hero h1:focus-visible,
.page-hero h2:hover,
.page-hero h2:focus-visible,
.glitch-heading:hover,
.glitch-heading:focus-visible,
.about-hero__title:hover,
.about-hero__title:focus-visible,
h1:hover,
h1:focus-visible,
h2:hover,
h2:focus-visible {
  color: #f2f2f2;
  text-shadow:
    0 0 10px rgba(160, 0, 0, 0.65),
    0 0 28px rgba(80, 0, 0, 0.45),
    2px 2px 0 rgba(0, 0, 0, 0.95);
}

/* ── Cursor smoke follower (dark industrial haze) ── */

.cursor-smoke {
  position: fixed;
  left: 0;
  top: 0;
  width: 220px;
  height: 220px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(139, 0, 0, 0.22) 0%,
    rgba(80, 0, 0, 0.14) 35%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(28px);
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
  transition: opacity 250ms ease;
  will-change: transform;
}

body:hover .cursor-smoke {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .cursor-smoke {
    display: none;
  }
}

/* ── Navigation ── */

.site-nav a::before {
  content: '';
  position: absolute;
  inset: -6px -12px;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 0, 0, 0.14) 0%,
    transparent 72%
  );
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.site-nav a::after {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:hover,
.site-nav a.active {
  text-shadow: 0 0 10px rgba(180, 0, 0, 0.35);
}

.site-nav a:hover::before,
.site-nav a.active::before {
  opacity: 1;
}

/* ── Buttons ── */

.btn {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px);
  animation: industrial-btn-glitch 0.2s ease 1;
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(180, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.45);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow:
    inset 0 3px 12px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(180, 0, 0, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.4);
}

@keyframes industrial-btn-glitch {
  0%,
  100% {
    transform: translateY(-3px) translateX(0);
  }

  25% {
    transform: translateY(-3px) translateX(-1px);
  }

  50% {
    transform: translateY(-4px) translateX(1px);
  }

  75% {
    transform: translateY(-3px) translateX(-1px);
  }
}

/* ── Industrial card hover ── */

.industrial-card-hover {
  position: relative;
  isolation: isolate;
}

.industrial-card-hover::before {
  content: '';
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(139, 0, 0, 0.35) 0%,
    rgba(180, 0, 0, 0.12) 45%,
    transparent 72%
  );
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.industrial-card-hover:hover::before,
.industrial-card-hover:focus-within::before,
.industrial-card-hover:focus-visible::before {
  opacity: 1;
}

.industrial-card-hover:hover,
.industrial-card-hover:focus-within,
.industrial-card-hover:focus-visible {
  transform: translateY(-6px);
  border-color: var(--blood-red);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(180, 0, 0, 0.28);
}

.industrial-card-hover:hover h3,
.industrial-card-hover:focus-within h3,
.industrial-card-hover:hover .video-card__title,
.industrial-card-hover:focus-within .video-card__title,
.industrial-card-hover:hover .contact-enquiry-card__title,
.industrial-card-hover:focus-within .contact-enquiry-card__title,
.industrial-card-hover:hover .credibility-bar__stat,
.industrial-card-hover:focus-within .credibility-bar__stat {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(180, 0, 0, 0.35);
}

.industrial-card-hover img {
  transition: transform 0.28s ease, filter 0.28s ease;
}

.industrial-card-hover:hover img,
.industrial-card-hover:focus-within img {
  transform: scale(1.04);
}

/* ── Scanlines ── */

.industrial-scanlines {
  position: relative;
  overflow: hidden;
}

.industrial-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.025) 3px,
    rgba(255, 255, 255, 0.025) 4px
  );
  animation: industrial-scanline-drift 10s linear infinite;
}

.hero.industrial-scanlines::after,
.page-hero.industrial-scanlines::after,
.music-hero.industrial-scanlines::after {
  opacity: 0.14;
}

.industrial-scanlines:hover::after {
  opacity: 0.22;
}

@keyframes industrial-scanline-drift {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(24px);
  }
}

/* ── Logo ── */

.logo-link:hover {
  animation: logo-glitch-flash 0.22s ease 1;
}

@keyframes logo-glitch-flash {
  0%,
  100% {
    filter: none;
  }

  40% {
    filter: brightness(1.15);
  }

  60% {
    filter: brightness(0.95);
  }
}

.footer-logo-link:hover {
  animation: logo-glitch-flash 0.22s ease 1;
}

/* ── Video thumbnails ── */

.video-card__thumb::before {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.video-card:hover .video-card__thumb::before,
.video-card:focus-within .video-card__thumb::before {
  box-shadow:
    0 0 24px rgba(180, 0, 0, 0.45),
    inset 0 0 12px rgba(180, 0, 0, 0.18);
  border-color: #d10000;
}

.video-card:hover .video-card__title,
.video-card:focus-within .video-card__title {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(180, 0, 0, 0.35);
}

/* ── Flyer & primary contact cards (no ::before — panel uses top accent) ── */

.flyer-card:hover,
.flyer-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--blood-red);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(180, 0, 0, 0.32);
}

.contact-primary-card:hover {
  transform: translateY(-6px);
  border-color: var(--blood-red);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(180, 0, 0, 0.28);
}

/* ── Flyer thumbnails ── */

.flyer-card__frame::after,
.home-flyer-card__frame::after {
  background: rgba(0, 0, 0, 0.48);
}

.flyer-card:hover .flyer-card__frame::after,
.flyer-card:focus-visible .flyer-card__frame::after,
.home-flyer-card:hover .home-flyer-card__frame::after {
  opacity: 1;
}

/* ── Background drift (desktop) ── */

@media (min-width: 1024px) {
  .bg-layer {
    animation: industrial-bg-drift 140s ease-in-out infinite alternate;
  }
}

@keyframes industrial-bg-drift {
  0% {
    background-position: center 17%;
  }

  50% {
    background-position: center 20%;
  }

  100% {
    background-position: center 19%;
  }
}

/* ── Content link glow ── */

.about-bio a:not(.btn):hover,
.about-bio a:not(.btn):focus-visible,
.about-hero__text a:not(.btn):hover,
.about-hero__text a:not(.btn):focus-visible,
.highlight-list a:hover,
.highlight-list a:focus-visible,
.contact-email__address:hover,
.contact-email__address:focus-visible {
  text-shadow: 0 0 12px rgba(180, 0, 0, 0.35);
}

/* ── Content link underline ── */

.about-bio a:not(.btn),
.about-hero__text a:not(.btn),
.highlight-list a,
.contact-email__address {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition:
    color var(--motion-fast),
    text-decoration-color var(--motion-fast),
    text-shadow var(--motion-fast);
}

.about-bio a:not(.btn):hover,
.about-bio a:not(.btn):focus-visible,
.about-hero__text a:not(.btn):hover,
.about-hero__text a:not(.btn):focus-visible,
.highlight-list a:hover,
.highlight-list a:focus-visible,
.contact-email__address:hover,
.contact-email__address:focus-visible {
  text-decoration-color: var(--blood-red);
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  body,
  main,
  .bg-layer {
    opacity: 1;
    transform: none;
  }

  .motion-reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .industrial-card-hover:hover,
  .industrial-card-hover:focus-within,
  .industrial-card-hover:focus-visible {
    transform: none;
  }

  .btn:hover,
  .btn:focus-visible {
    transform: none;
    animation: none !important;
  }

  .cursor-smoke {
    display: none !important;
  }
}