/* Decorative image stays outside layout and pointer handling. */
.listening-room-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.listening-room-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Map the photo's near-black background to the page's pure black. */
  filter: contrast(1.18) brightness(1.3) saturate(1.12);
  opacity: 0.49;
  z-index: -1;
  pointer-events: none;
}

/* Move one existing image without animating layout or filters. */
@keyframes listening-room-wave-drift {
  0%, 100% { transform: translate(-2%, 1%) scale(1.08); }
  50% { transform: translate(2%, -2%) scale(1.13); }
}

/* Give the blue highlights a soft, rolling shimmer. */
@keyframes listening-room-wave-shimmer {
  0%, 100% { opacity: 0.36; }
  35% { opacity: 0.50; }
  65% { opacity: 0.41; }
  80% { opacity: 0.48; }
}

@media (prefers-reduced-motion: no-preference) {
  .listening-room-card.has-wave-motion .listening-room-background {
    animation: listening-room-wave-drift 18s ease-in-out infinite,
      listening-room-wave-shimmer 6s ease-in-out infinite;
    animation-play-state: paused;
  }

  .listening-room-card.has-wave-motion.is-wave-visible .listening-room-background {
    animation-play-state: running;
  }
}

/* Align both show labels with the homepage's On Air information row. */
#powder-keg-hero,
#pranzo-hero {
  padding-top: 0;
}

#powder-keg-hero > .relative,
#pranzo-hero > .relative {
  padding-top: 4rem;
}

@media (min-width: 64rem) {
  #powder-keg-hero > .relative,
  #pranzo-hero > .relative {
    padding-top: 6rem;
  }

}

/* Reserve the same space as Pranzo's heading and broadcast controls. */
#powder-keg-hero [data-oid="r8-fs7f"] {
  align-self: start;
  min-height: calc(1.9 * clamp(3rem, 8vw, 6.5rem) + 11rem);
}

#powder-keg-hero [data-oid="z49ov7k"] {
  margin-bottom: 0;
}

@media (max-width: 63.999rem) {
  #powder-keg-hero [data-oid="r8-fs7f"] {
    min-height: 0;
  }

  #powder-keg-hero [data-oid="_:-l0_a"] {
    row-gap: 1rem;
  }
}

/* Keep the Powder Keg artwork close to its brief. */
#powder-keg-hero,
#powder-keg-hero > .relative {
  padding-bottom: 0;
}

#powder-keg-manifesto {
  padding-top: clamp(24px, 3vw, 40px);
}

/* Layer a faint flame shimmer over the still artwork. */
#powder-keg-hero [data-oid="y20cpya"] {
  position: relative;
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
  #powder-keg-hero [data-oid="y20cpya"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("https://cdn.revamp.dev/a/ccc7d6a7-474b-4486-83ba-8c6fa2bf8a70/85ba7c2ee74863fae6843878ff5383ba.webp") center / 100% 100% no-repeat;
    mix-blend-mode: screen;
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    transform-origin: 40% 75%;
    animation: powder-keg-flame-shimmer 3.7s ease-in-out infinite;
  }
}

@keyframes powder-keg-flame-shimmer {
  0%, 100% { opacity: 0.06; transform: scale(1); }
  19% { opacity: 0.14; transform: translateY(-0.15%) scale(1.004); }
  37% { opacity: 0.08; transform: scale(1.002); }
  53% { opacity: 0.17; transform: translateY(-0.3%) scale(1.007); }
  71% { opacity: 0.09; transform: translateY(-0.1%) scale(1.003); }
  86% { opacity: 0.13; transform: translateY(-0.2%) scale(1.005); }
}

/* Enlarge the chat bubble 25% from its previous size. */
#chatway_widget_trigger .chatway-launcher {
  scale: 1.4375;
}

/* Only the visible icon receives pointer input, not the launcher's padding. */
#chatway_widget_trigger,
#chatway_widget_trigger * {
  pointer-events: none !important;
}

#chatway_widget_trigger .launcher-icon svg,
#chatway_widget_trigger .launcher-icon svg * {
  pointer-events: auto !important;
}

@keyframes chat-bubble-pulse {
  0%, 100% { scale: 1.4375; }
  50% { scale: 1.5375; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #chatway_widget_trigger .chatway-launcher:hover {
    animation: chat-bubble-pulse 1.2s ease-in-out infinite;
  }
}

/* Override Chatway's inline launcher fill, including its hover overlay. */
#chatway_widget_trigger .chatway-launcher,
#chatway_widget_trigger .chatway-launcher::before,
#chatway_widget_trigger .launcher-icon {
  background: transparent !important;
}

#chatway_widget_trigger .chatway-launcher:hover .launcher-icon {
  color: #FF2A1F !important;
}

#chatway_widget_trigger .chatway-launcher:hover .launcher-default-open-icon svg path {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

footer.has-scroll-to-top {
  position: relative;
}

.scroll-to-top {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  top: var(--scroll-arrow-top, calc(100% - 140px));
  transform: translateY(-50%);
  z-index: 1;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.scroll-to-top svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scroll-to-top:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

@keyframes scroll-chevron-fade {
  0%, 66%, 100% { opacity: 0.2; }
  33% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-to-top.is-visible path {
    animation: scroll-chevron-fade 1.8s ease-in-out infinite;
  }

  .scroll-to-top.is-visible path:nth-child(2) {
    animation-delay: -0.6s;
  }

  .scroll-to-top.is-visible path:nth-child(3) {
    animation-delay: -1.2s;
  }
}

@media (max-width: 767px) {
  header.sticky details nav a {
    font-size: 0.875rem;
  }

  header.sticky a img {
    height: 56px;
    width: auto;
  }

  .scroll-to-top {
    right: max(24px, env(safe-area-inset-right));
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-top { transition: none; }
}

header.sticky {
  background: transparent;
  border-bottom-color: transparent;
  transition: visibility 300ms;
}

header.sticky > div {
  opacity: var(--nav-opacity, 1);
  transition: opacity 300ms ease;
}

header.sticky.is-scroll-hidden {
  visibility: hidden;
  pointer-events: none;
}

header.sticky:focus-within,
header.sticky:has(details[open]) {
  visibility: visible;
  pointer-events: auto;
}

header.sticky:focus-within > div,
header.sticky:has(details[open]) > div {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  header.sticky {
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  header.sticky > div {
    opacity: 1;
    transition: none;
  }
}

/* Separate the image's DRR lettering and tagline by four display pixels. */
.header-logo-spaced,
.footer-logo-spaced {
  display: inline-grid;
  padding-bottom: 4px;
}
.header-logo-spaced > img,
.footer-logo-spaced > img {
  grid-area: 1 / 1;
}
.header-logo-spaced > img:first-child,
.footer-logo-spaced > img:first-child {
  clip-path: inset(0 0 28% 0);
}
.header-logo-spaced > img:last-child,
.footer-logo-spaced > img:last-child {
  clip-path: inset(72% 0 0 0);
  transform-origin: left 72%;
  transform: translateY(4px) scale(1.05);
}
