/* source: src/styles/glass.scss
   Glassmorphism for auth pages. Native CSS with nesting; no Sass. */

/* ── Glass card ─────────────────────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset,
    0 20px 60px -20px rgba(var(--primary-rgb), 0.22),
    0 8px 24px -8px rgba(17, 24, 39, 0.1);
}

/* ── Glass input ────────────────────────────────────────────── */
.glass-input {
  @apply bg-white/50;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;

  &:focus {
    @apply bg-white/75;
    border-color: rgba(var(--primary-rgb), 0.55);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14);
  }
}

/* ── Glass pill ─────────────────────────────────────────────── */
.glass-pill {
  @apply bg-white/50;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;

  &:hover {
    @apply bg-white/70 border-white/70;
  }
}

/* ── Primary gradient button ────────────────────────────────── */
.glass-primary-btn {
  background: linear-gradient(135deg, #fa4616 0%, #e03a0f 100%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 10px 24px -10px rgba(var(--primary-rgb), 0.55),
    0 4px 12px -4px rgba(var(--primary-rgb), 0.35);
  transition:
    background 200ms ease,
    box-shadow 200ms ease,
    transform 150ms ease;

  &:hover {
    background: linear-gradient(135deg, #fb5a2a 0%, #e03a0f 100%);
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.3) inset,
      0 14px 32px -10px rgba(var(--primary-rgb), 0.65),
      0 6px 16px -4px rgba(var(--primary-rgb), 0.45);
  }

  &:active {
    transform: translateY(1px);
  }

  &:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
  }
}

/* ── Secondary glass button ─────────────────────────────────── */
.glass-secondary-btn {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition:
    background 200ms ease,
    border-color 200ms ease;

  &:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.7);
  }
}

/* ── Decorative orbs ────────────────────────────────────────── */
.glass-orb {
  @apply absolute rounded-full;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  will-change: transform;
}

@keyframes glass-float-slow {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(20px, -30px, 0) scale(1.05);
  }
}
@keyframes glass-float-slower {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-25px, 20px, 0) scale(0.95);
  }
}
@keyframes glass-float-mid {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(15px, 25px, 0) scale(1.08);
  }
}

.glass-orb-1 {
  animation: glass-float-slow 14s ease-in-out infinite;
}
.glass-orb-2 {
  animation: glass-float-slower 18s ease-in-out infinite;
}
.glass-orb-3 {
  animation: glass-float-mid 12s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .glass-orb-1,
  .glass-orb-2,
  .glass-orb-3 {
    @apply animate-none;
  }
}

/* ── Grid pattern overlay for auth background ───────────────── */
.glass-grid {
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0) 70%
  );
  mask-image: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0) 70%
  );
}