/* Shared visual language inspired by the requested Liquid Chrome, Starry Sky and Accordion patterns. */

[data-starry-sky] {
  position: relative;
  isolation: isolate;
}

.starry-sky {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .58;
  mix-blend-mode: screen;
}

[data-starry-content] {
  position: relative;
  z-index: 1;
}

.liquid-chrome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--sky, #75d8ff) 58%, var(--blue, #5365f6));
  background:
    linear-gradient(118deg, rgba(255,255,255,.18), transparent 28%, rgba(117,216,255,.14) 53%, rgba(138,108,255,.22) 76%, rgba(255,255,255,.12)),
    var(--blue, #5365f6);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--blue, #5365f6) 28%, transparent), inset 0 1px rgba(255,255,255,.34);
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.liquid-chrome::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -110%;
  left: -32%;
  width: 45%;
  height: 320%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  filter: blur(8px);
  transform: rotate(22deg) translateX(-180%);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.liquid-chrome::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.2), transparent 35% 68%, rgba(8,19,56,.18));
}

.liquid-chrome:hover,
.liquid-chrome:focus-visible {
  filter: saturate(1.08) contrast(1.03);
  box-shadow: 0 21px 44px color-mix(in srgb, var(--blue, #5365f6) 34%, transparent), inset 0 1px rgba(255,255,255,.42);
}

.liquid-chrome:hover::before,
.liquid-chrome:focus-visible::before { transform: rotate(22deg) translateX(530%); }

.liquid-chrome > * { position: relative; z-index: 1; }

.liquid-chrome-surface {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(126deg, color-mix(in srgb, var(--paper) 88%, var(--sky, #75d8ff)), transparent 34%),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--violet, #8a6cff) 30%, transparent), transparent 42%),
    var(--paper);
}

.liquid-chrome-surface::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -12%;
  width: 44%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 24%, transparent), transparent);
  filter: blur(12px);
  transform: rotate(24deg);
}

.liquid-chrome-surface > * { position: relative; z-index: 1; }

/* The site already uses native details/summary. These rules give the accordion
   a quiet spring-like rhythm without changing its semantic or keyboard behavior. */
.faq-item summary {
  transition: color 180ms ease, padding-left 180ms ease;
}

.faq-item summary:hover,
.faq-item summary:focus-visible {
  color: var(--blue, #5365f6);
  padding-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-chrome,
  .liquid-chrome::before,
  .faq-item summary { transition-duration: .01ms; }
  .liquid-chrome::before { transform: none; }
  .starry-sky { opacity: .34; }
}