/* Ambient background layers */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.35;
  animation: orbFloat 20s ease-in-out infinite;
}

.ambient__orb--1 {
  width: 600px;
  height: 600px;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}

.ambient__orb--2 {
  width: 500px;
  height: 500px;
  bottom: 10%;
  right: -10%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  animation-delay: -10s;
  animation-duration: 25s;
}

.ambient__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 80%);
}

.ambient__noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

.ambient__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
}

/* Glass surface */
.glass {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--glass-border);
}

/* Gradient border wrapper */
.gradient-border {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.08));
}

.gradient-border__inner {
  background: var(--bg-elevated);
  border-radius: calc(var(--radius-xl) - 1px);
  height: 100%;
}

/* Shine sweep on hover */
.shine-hover {
  position: relative;
  overflow: hidden;
}

.shine-hover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shine);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}

.shine-hover:hover::after {
  transform: translateX(120%);
}

/* Divider with glow */
.divider-glow {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  border: none;
}

/* Text gradient (monochrome) */
.text-gradient {
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-400) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Spotlight cursor follower */
.spotlight-zone {
  position: relative;
  overflow: hidden;
}

.spotlight-zone::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  transform: translate(var(--spot-x, -999px), var(--spot-y, -999px));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.spotlight-zone:hover::before {
  opacity: 1;
}