/* Functional state feedback; the Figma surfaces and geometry remain unchanged. */
/* Stop scroll chaining and the viewport's top/bottom rubber-band effect. */
html,
body {
  overscroll-behavior: none;
}

/* Pointer interactions never leave an outline on a restored modal opener.
   Keyboard focus uses the shared neutral focus colour. */
:root[data-input-modality='pointer']
  .local-preview-page
  :is(a, button, summary, [role='button'], [tabindex]):focus-visible {
  outline: none;
}

.faq-items summary {
  transition: color var(--duration-fast, 180ms) var(--ease-standard, ease);
}

.faq-items summary:hover {
  color: var(--text-primary, var(--ink));
}

.faq-items details[data-animating] {
  will-change: height;
}

.faq-items {
  overflow-anchor: none;
}

/* Crossfade the two exact Figma glyphs while the answer opens/closes. */
.faq-items details[data-expanded] .faq-icon {
  background: none;
}
.faq-items details[data-expanded] .faq-icon::before,
.faq-items details[data-expanded] .faq-icon::after {
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transition: opacity var(--duration-normal) ease;
}
.faq-items details[data-expanded] .faq-icon::before {
  background: url('../assets/imgPlus.svg') center/contain no-repeat;
  opacity: 1;
}
.faq-items details[data-expanded] .faq-icon::after {
  background: url('../assets/imgCollapseAnswer.svg') center/contain no-repeat;
  opacity: 0;
}
.faq-items details[data-expanded='true'] .faq-icon::before {
  opacity: 0;
}
.faq-items details[data-expanded='true'] .faq-icon::after {
  opacity: 1;
}

.live-dot {
  position: relative;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid var(--color-live);
  border-radius: inherit;
  animation: live-pulse var(--duration-live-pulse) ease-out infinite;
}
.hero-live-icon {
  animation: live-icon-pulse var(--duration-live-pulse) ease-in-out infinite;
}
@keyframes live-pulse {
  0%,
  15% {
    opacity: 0.3;
    transform: scale(0.7);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes live-icon-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  45% {
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-live) 35%, transparent));
  }
}

.button,
.nav-register,
.theme-toggle {
  transition:
    background-color var(--duration-fast, 180ms) var(--ease-standard, ease),
    color var(--duration-fast, 180ms) var(--ease-standard, ease),
    box-shadow var(--duration-fast, 180ms) var(--ease-standard, ease);
}

/* Paper controls share one colour-transition rhythm without moving their
   position on hover or press. */
.local-preview-page
  :is(
    .button,
    .paper-nav-rsvp,
    .paper-nav-rsvp > b,
    .paper-app-promo-quote,
    .paper-app-store,
    .paper-app-icon,
    .carousel-arrow,
    .programme-arrow,
    .theme-toggle,
    .signup-dialog-close,
    .sf-primary,
    .sf-back,
    .sf-text-button
  ) {
  transition-property: background-color, color, border-color, opacity, filter;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  .local-preview-page
    :is(
      button,
      .button,
      .paper-nav-rsvp,
      .paper-nav-rsvp > b,
      .paper-app-store,
      .paper-app-promo-quote,
      .paper-app-icon,
      .sf-primary
    ) {
    transition: none !important;
  }
  .faq-items summary,
  .button,
  .nav-register,
  .theme-toggle {
    transition: none;
  }
}