/* ════════════════════════════════════════════════════════════════════════
   FreeGPT — 3D + animation utilities (companion to brand-tokens.css)
   استخراج‌شده از client/src/index.css نسخه قبلی
   ════════════════════════════════════════════════════════════════════════ */

/* Aurora animated radial background */
.aurora-bg {
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(56,189,248,.22) 0%, transparent 60%),
    radial-gradient(55% 45% at 85% 25%, rgba(139,92,246,.28) 0%, transparent 65%),
    radial-gradient(70% 55% at 50% 90%, rgba(217,70,239,.18) 0%, transparent 65%),
    radial-gradient(40% 35% at 70% 60%, rgba(59,130,246,.18) 0%, transparent 70%),
    linear-gradient(180deg, #07060d 0%, #0a0814 50%, #07060d 100%);
  background-size: 200% 200%;
  animation: fg-aurora 22s ease-in-out infinite alternate;
}
@keyframes fg-aurora {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 100%; }
}

/* Film grain noise overlay */
.noise { position: relative; }
.noise::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* Glass-strong (stronger than .fg-glass) */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08);
}
.glass-strong {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255,255,255,.12);
}

/* Gradient ring border (mask trick) */
.gradient-ring {
  position: relative; isolation: isolate;
}
.gradient-ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(56,189,248,.6), rgba(139,92,246,.6), rgba(217,70,239,.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.gradient-ring-strong::before {
  padding: 2px;
  background: linear-gradient(135deg, rgba(56,189,248,.9), rgba(139,92,246,1), rgba(217,70,239,.9));
}

/* Text gradient brand */
.text-gradient-brand {
  background: linear-gradient(135deg, #38bdf8 0%, #8b5cf6 45%, #d946ef 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.animate-gradient-text {
  background-size: 200% 200% !important;
  animation: fg-grad-shift 8s ease infinite;
}
@keyframes fg-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Glow shadow utilities */
.shadow-glow-cyan {
  box-shadow: 0 0 40px -10px rgba(56,189,248,.5), 0 0 80px -20px rgba(56,189,248,.3);
}
.shadow-glow-violet {
  box-shadow: 0 0 40px -10px rgba(139,92,246,.5), 0 0 80px -20px rgba(139,92,246,.3);
}
.shadow-glow-brand {
  box-shadow: 0 0 30px -8px rgba(139,92,246,.45),
              0 0 60px -16px rgba(56,189,248,.3),
              0 0 90px -24px rgba(217,70,239,.25);
}

/* 3D perspective + tilt on hover */
.perspective-1200 { perspective: 1200px; }
.tilt-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s ease;
  will-change: transform;
}
.tilt-3d:hover {
  transform: rotateX(6deg) rotateY(-8deg) translateY(-6px) translateZ(0);
}

/* Float / pulse animations */
.animate-float-y      { animation: fg-float-y 6s ease-in-out infinite; }
.animate-float-y-slow { animation: fg-float-y 10s ease-in-out infinite; }
.animate-glow-pulse   { animation: fg-glow-pulse 4s ease-in-out infinite; }
.animate-spin-slow    { animation: fg-spin 12s linear infinite; }

@keyframes fg-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes fg-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(139,92,246,.5)); }
  50%      { filter: drop-shadow(0 0 24px rgba(56,189,248,.7)); }
}
@keyframes fg-spin { to { transform: rotate(1turn); } }

/* Marquee */
.animate-marquee-x { animation: fg-marquee-x var(--marquee-duration, 30s) linear infinite; }
@keyframes fg-marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Sheen on hover */
.shimmer-sheen {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  transform: translateX(120%);
  transition: transform 1s ease;
}
.group:hover > .shimmer-sheen { transform: translateX(-120%); }

/* Coming-soon overlay (مات + قفل 🔒) */
.fg-soon-wrap {
  position: relative;
  border-radius: inherit;
}
.fg-soon-wrap > .soon-content {
  filter: grayscale(0.5) opacity(0.5);
  pointer-events: none;
}
.fg-soon-wrap > .soon-banner {
  position: absolute; inset: 0;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(7,6,13,.30), rgba(7,6,13,.65));
  border-radius: inherit;
  backdrop-filter: blur(2px);
}
.fg-soon-wrap > .soon-banner > .soon-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  background: rgba(251,191,36,.10);
  color: #fbbf24;
  border: 2px dashed rgba(251,191,36,.45);
  border-radius: 999px;
  font-weight: 700; font-size: 16px;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
  letter-spacing: 0.5px;
}
.fg-soon-wrap > .soon-banner > .soon-pill::before {
  content: "🔒"; font-size: 20px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg, .animate-float-y, .animate-float-y-slow,
  .animate-glow-pulse, .animate-marquee-x, .animate-gradient-text,
  .animate-spin-slow { animation: none !important; }
}