html {
  scroll-behavior: smooth;
}

.desteny-page {
  position: relative;
  isolation: isolate;
  background-color: hsl(var(--background));
  background-image: radial-gradient(
    ellipse 130% 70% at 50% -15%,
    hsl(265 89% 66% / 0.14),
    transparent 55%
  );
}

.desteny-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.desteny-ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.desteny-page > header,
.desteny-page > section,
.desteny-page > footer {
  position: relative;
  z-index: 1;
}

.desteny-orb {
  position: absolute;
  width: clamp(260px, 42vw, 560px);
  height: clamp(260px, 42vw, 560px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    hsl(265 89% 66% / 0.5) 0%,
    hsl(265 89% 66% / 0.18) 42%,
    hsl(265 89% 66% / 0) 72%
  );
  filter: blur(36px);
  opacity: 0.9;
  animation: desteny-orb-drift 14s ease-in-out infinite;
  animation-delay: calc(var(--orb-i, 0) * -1.1s);
}

.desteny-orb-1 { top: 4%; left: 2%; }
.desteny-orb-2 { top: 4%; left: 50%; transform: translateX(-50%); }
.desteny-orb-3 { top: 4%; right: 2%; }
.desteny-orb-4 { top: 50%; left: 2%; transform: translateY(-50%); }
.desteny-orb-5 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.desteny-orb-6 { top: 50%; right: 2%; transform: translateY(-50%); }
.desteny-orb-7 { bottom: 4%; left: 2%; }
.desteny-orb-8 { bottom: 4%; left: 50%; transform: translateX(-50%); }
.desteny-orb-9 { bottom: 4%; right: 2%; }
.desteny-orb-10 { top: 28%; left: 26%; width: clamp(200px, 32vw, 440px); height: clamp(200px, 32vw, 440px); }
.desteny-orb-11 { top: 28%; right: 26%; width: clamp(200px, 32vw, 440px); height: clamp(200px, 32vw, 440px); }
.desteny-orb-12 { bottom: 28%; left: 50%; transform: translateX(-50%); width: clamp(200px, 32vw, 440px); height: clamp(200px, 32vw, 440px); }

@keyframes desteny-orb-drift {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

.desteny-hero-title,
.desteny-page section h2.font-display.font-black,
.desteny-page #login h2.font-display.font-black,
.desteny-page #cta h2.font-display {
  text-shadow:
    0 0 20px hsl(265 89% 66% / 0.75),
    0 0 45px hsl(265 89% 66% / 0.5),
    0 0 90px hsl(265 89% 66% / 0.28);
}

.desteny-header-nav .desteny-nav-link {
  transition: color 0.2s ease;
}

.desteny-faq-panel:not([hidden]) {
  padding-bottom: 0.25rem;
}

.desteny-faq-item[data-state="open"] .desteny-faq-trigger svg {
  transform: rotate(180deg);
}

.desteny-faq-item[data-state="open"] {
  border-color: hsl(var(--primary) / 0.4);
}

.desteny-showcase-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 5.5rem;
  padding: 1.125rem 1.25rem 1.25rem;
}

.desteny-showcase-embed[src] {
  z-index: 1;
}

.desteny-showcase-embed[src] + .desteny-showcase-placeholder {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .desteny-orb {
    animation: none;
  }
}