/* Landing-page enhancements only. Content stays visible without JavaScript. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(800px, 100%);
  height: 520px;
  top: -240px;
  left: calc(50% - min(400px, 50%));
  background: radial-gradient(ellipse, #64e4c525, transparent 68%);
}

.button, .card, .showcase, .links a {
  transition: transform 220ms ease, border-color 220ms ease,
    box-shadow 220ms ease, color 220ms ease, background-color 220ms ease;
}

.button span, .text-link span {
  display: inline-block;
  transition: transform 220ms ease;
}

.button:focus-visible span, .text-link:focus-visible span {
  transform: translate(3px, -3px);
}

.faq details[open] summary {
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-3px); box-shadow: 0 8px 28px #64e4c51a; }
  .button:hover span, .text-link:hover span { transform: translate(3px, -3px); }
  .card:hover { transform: translateY(-5px); border-color: #64e4c566; box-shadow: 0 16px 36px #0003; }
  .showcase:hover { border-color: #64e4c566; }
  .links a:hover { color: var(--accent); }
}

/* One gentle light sweep, not an endlessly moving background. */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: hero-light 4s ease-in-out 1 both; }
  @keyframes hero-light {
    from { transform: translateX(-80px) scale(.85); opacity: .3; }
    to { transform: translateX(40px) scale(1.15); opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .button, .card, .showcase, .links a, .button span, .text-link span {
    transition: none;
    transform: none !important;
  }
}

@media print {
  .hero::before { display: none; }
}