/*
 * Temporary honeycomb overlay for in-place theme ripples.
 * Tiles begin as the current page surface and flip to the target surface
 * in a concentric wave from the large hero heading.
 *
 * Opacity animates on .theme-hex (shell), never on preserve-3d .theme-hex__inner.
 */

.theme-hex-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  perspective: 1400px;
  perspective-origin: var(--ripple-origin-x, 40%) var(--ripple-origin-y, 28%);
}

.theme-hex-overlay__backdrop {
  position: absolute;
  inset: -2px;
  background-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.theme-hex-overlay[data-from="light"] {
  --palette-current-background: var(--palette-light-background);
  --palette-current-surface: var(--palette-light-surface);
  --palette-target-background: var(--palette-dark-background);
  --palette-target-surface: var(--palette-dark-surface);
}

.theme-hex-overlay[data-from="dark"] {
  --palette-current-background: var(--palette-dark-background);
  --palette-current-surface: var(--palette-dark-surface);
  --palette-target-background: var(--palette-light-background);
  --palette-target-surface: var(--palette-light-surface);
}

.theme-hex {
  position: absolute;
  width: var(--hex-width);
  height: var(--hex-height);
  left: var(--hex-x);
  top: var(--hex-y);
  transform-style: preserve-3d;
  opacity: 1;
  will-change: opacity;
}

.theme-hex__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}

.theme-hex__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
}

/* No per-tile box-shadow — overlap hides seams; keeps fine grids cheap. */
.theme-hex__face--front {
  background-color: var(--palette-current-background);
  background-image:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--palette-current-surface) 45%, transparent) 0%,
      transparent 60%
    );
  transform: rotateY(0deg);
}

.theme-hex__face--back {
  background-color: var(--palette-target-background);
  background-image:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--palette-target-surface) 45%, transparent) 0%,
      transparent 60%
    );
  transform: rotateY(180deg);
}

@keyframes theme-hex-flip {
  0% {
    transform: rotateY(0deg) translateZ(0);
  }
  100% {
    transform: rotateY(180deg) translateZ(6px);
  }
}

@keyframes theme-hex-fade {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.theme-hex-overlay.is-rippling .theme-hex__inner {
  animation: theme-hex-flip var(--flip-ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--hex-delay);
}

.theme-hex-overlay.is-rippling .theme-hex {
  animation: theme-hex-fade var(--flip-ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--hex-delay);
}

/* Keep the hero heading readable above the ripple so the origin O is obvious. */
html.theme-rippling .hero__title {
  position: relative;
  z-index: 2147483001;
}

.hero__mark {
  display: inline;
}

.hero__letter {
  display: inline-block;
}

.theme-toggle[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-hex-overlay.is-rippling .theme-hex,
  .theme-hex-overlay.is-rippling .theme-hex__inner {
    animation: none;
  }
}