/* App-level enhancements for Tailwind CDN pages */
:root { color-scheme: dark; }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 0 0 1px rgba(255,255,255,.06) inset, 0 20px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
}

.noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at top, rgba(0,0,0,.9), rgba(0,0,0,.2) 55%, transparent 78%);
}

.ring-glow {
  box-shadow: 0 0 0 1px rgba(124,58,237,.25), 0 0 30px rgba(37,99,235,.18), 0 0 70px rgba(124,58,237,.12);
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple span.ripple {
  position: absolute;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
  animation: ripple 650ms ease-out forwards;
  background: rgba(255,255,255,.22);
}
@keyframes ripple {
  from { width: 0; height: 0; opacity: .55; }
  to { width: 420px; height: 420px; opacity: 0; }
}

.fade-section {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-section.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}