/*
 * Small additions to the compiled CSS (root.css, dynamic-zone.css, site-header.css), LiveLaps layer.
 * Loaded last. Everything here supports behaviour implemented in js/site.js and js/livelaps.js.
 */

/* Scroll reveal: content is hidden only once the script runs (html.js); a failsafe shows it after 3s. */
html.js [data-reveal]:not([data-reveal-ready]) {
  opacity: 0;
  animation: reveal-failsafe 0s linear 3s forwards;
}
@keyframes reveal-failsafe {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Accordion chevrons follow aria-expanded (the original rotated them in React). */
[data-rules-trigger][aria-expanded='true'] > [data-chevron] {
  transform: rotate(180deg);
}

/*
 * Support chat widget (Chatwoot): same rules as the original site. The widget stays hidden while
 * html[data-chatwoot-pending] is set by js/site.js (until the widget reports ready).
 */
html #cw-widget-holder:not(.woot--hide),
html .woot-widget-bubble:not(.woot--close) {
  z-index: 40 !important;
}
html[data-chatwoot-pending] #cw-widget-holder,
html[data-chatwoot-pending] .woot--bubble-holder {
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Studio size controls: the studio stores the desktop size as inline width / height / max-width and the mobile
 * size as the custom properties --w-m / --h-m / --mw-m in the same style attribute. Below the md breakpoint
 * the mobile value overrides the inline desktop size. The compiled Tailwind CSS starts md at (min-width: 48rem),
 * so this is its exact complement ("not all and (min-width: 48rem)"): no gap and no overlap at any width.
 */
@media not all and (min-width: 48rem) {
  [style*='--w-m:'] {
    width: var(--w-m) !important;
  }
  [style*='--h-m:'] {
    height: var(--h-m) !important;
  }
  [style*='--mw-m:'] {
    max-width: var(--mw-m) !important;
  }
}

/*
 * Events carousel rendered by js/livelaps.js (data-livelaps="upcoming-events"). The original used a carousel library;
 * here the viewport scrolls natively (touch, trackpad, the previous/next buttons and the arrow keys), with the
 * scrollbar hidden and the cards snapping to the start, so the look is the same.
 */
[data-livelaps] [data-slot="carousel-content"] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
[data-livelaps] [data-slot="carousel-content"]::-webkit-scrollbar {
  display: none;
}
/* Snap the card, not its padding box: the item has the card gap as left padding, so the card sits flush. */
[data-livelaps] [data-slot="carousel-item"] > * {
  scroll-snap-align: start;
}

/*
 * Honeypot of the contact form (index.html, input name="__livelaps_hp"; read by js/site.js, sent by js/livelaps.js).
 * People never see or reach it; a bot that fills every input fills it too. Off-screen and out of the flow (no
 * layout shift, no focus: tabindex="-1"), not display:none or visibility:hidden, which some bots skip.
 */
.livelaps-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}