/* ═══════════════════════════════════════════
   MITRAS — Fancy Animated Background
   ═══════════════════════════════════════════ */

#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

/* Aurora blobs */
.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.aurora--1 {
  width: min(90vw, 900px);
  height: min(90vw, 900px);
  top: -20%;
  right: -15%;
  background: radial-gradient(circle, rgba(250,204,21,0.2) 0%, rgba(250,204,21,0.05) 40%, transparent 70%);
  animation: aurora1 16s ease-in-out infinite;
}

.aurora--2 {
  width: min(70vw, 700px);
  height: min(70vw, 700px);
  bottom: -25%;
  left: -15%;
  background: radial-gradient(circle, rgba(234,179,8,0.15) 0%, transparent 70%);
  animation: aurora2 22s ease-in-out infinite;
}

.aurora--3 {
  width: min(50vw, 500px);
  height: min(50vw, 500px);
  top: 45%;
  left: 50%;
  background: radial-gradient(circle, rgba(253,224,71,0.1) 0%, transparent 70%);
  animation: aurora3 14s ease-in-out infinite;
}

.aurora--4 {
  width: min(35vw, 350px);
  height: min(35vw, 350px);
  top: 15%;
  left: 10%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  animation: aurora4 19s ease-in-out infinite;
}

@keyframes aurora1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33% { transform: translate(-8%, 10%) scale(1.1); opacity: 1; }
  66% { transform: translate(5%, -5%) scale(0.95); opacity: 0.6; }
}

@keyframes aurora2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12%, -8%) scale(1.15); }
}

@keyframes aurora3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-46%, -54%) scale(1.2); opacity: 0.9; }
}

@keyframes aurora4 {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50% { transform: translate(15%, 10%); opacity: 0.8; }
}

/* 3D Grid */
.bg-grid {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 1;
  background-image:
    linear-gradient(rgba(250,204,21,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,204,21,0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(58deg);
  animation: gridMove 12s linear infinite;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 40%, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 40%, black 15%, transparent 75%);
}

@keyframes gridMove {
  to { transform: perspective(500px) rotateX(58deg) translateY(44px); }
}

/* Light beams */
.light-beam {
  position: absolute;
  width: 2px;
  height: 100vh;
  z-index: 2;
  background: linear-gradient(to bottom, transparent 0%, rgba(250,204,21,0.3) 40%, rgba(253,224,71,0.15) 60%, transparent 100%);
  animation: beamSweep 6s ease-in-out infinite;
}

.light-beam--1 { left: 18%; animation-delay: 0s; }
.light-beam--2 { left: 42%; animation-delay: -2s; opacity: 0.6; }
.light-beam--3 { left: 68%; animation-delay: -4s; opacity: 0.4; }
.light-beam--4 { left: 85%; animation-delay: -1s; opacity: 0.3; width: 1px; }

@keyframes beamSweep {
  0%, 100% { opacity: 0; transform: scaleY(0.2) skewX(0deg); }
  40%, 60% { opacity: 1; transform: scaleY(1) skewX(3deg); }
}

/* Floating rings */
.bg-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(250,204,21,0.06);
  z-index: 2;
  animation: ringPulse 8s ease-in-out infinite;
}

.bg-ring--1 {
  width: 500px; height: 500px;
  top: 20%; left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.bg-ring--2 {
  width: 700px; height: 700px;
  top: 30%; left: 60%;
  transform: translate(-50%, -50%);
  border-color: rgba(250,204,21,0.04);
  animation-delay: -3s;
  animation-duration: 12s;
}

@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.7; }
}

/* CSS flying particles */
#css-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

.particle {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

.particle--dot {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fde047 35%, #facc15 60%, transparent 100%);
  box-shadow:
    0 0 6px 2px rgba(250,204,21,0.6),
    0 0 20px 4px rgba(250,204,21,0.2);
}

.particle--star {
  background: #fde047;
  border-radius: 0;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  box-shadow: 0 0 12px 3px rgba(253,224,71,0.7);
}

.particle--comet {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(250,204,21,0.8);
}

.particle--comet::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 60px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to left, rgba(250,204,21,0.7), rgba(253,224,71,0.2), transparent);
  border-radius: 2px;
}

.particle--diamond {
  width: 6px !important;
  height: 6px !important;
  background: rgba(255,255,255,0.9);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 10px 2px rgba(250,204,21,0.5);
}

/* Particle flight paths */
@keyframes rise {
  0%   { opacity: 0; transform: translateY(110vh) translateX(0) scale(0); }
  5%   { opacity: 1; }
  90%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-10vh) translateX(40px) scale(1.2); }
}

@keyframes fall {
  0%   { opacity: 0; transform: translateY(-10vh) scale(0); }
  5%   { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(110vh) translateX(-30px) scale(1); }
}

@keyframes slideR {
  0%   { opacity: 0; transform: translateX(-8vw) translateY(0); }
  5%   { opacity: 1; }
  95%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(108vw) translateY(-50px); }
}

@keyframes slideL {
  0%   { opacity: 0; transform: translateX(108vw) translateY(0); }
  5%   { opacity: 1; }
  95%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateX(-8vw) translateY(40px); }
}

@keyframes diagTR {
  0%   { opacity: 0; transform: translate(-10vw, 110vh) scale(0); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate(110vw, -10vh) scale(1); }
}

@keyframes diagBL {
  0%   { opacity: 0; transform: translate(110vw, -10vh) scale(0); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translate(-10vw, 110vh) scale(1); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

@keyframes orbit {
  0%   { opacity: 0; transform: rotate(0deg) translateX(30px) rotate(0deg) scale(0.5); }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { opacity: 0; transform: rotate(360deg) translateX(30px) rotate(-360deg) scale(1); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
  25% { transform: translateY(-30px) translateX(15px); opacity: 1; }
  50% { transform: translateY(-60px) translateX(-10px); opacity: 0.6; }
  75% { transform: translateY(-30px) translateX(20px); opacity: 0.9; }
}

/* Mouse glow (desktop) */
#mouse-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(250,204,21,0.06) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
}

body:hover #mouse-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora, .bg-grid, .bg-ring, .particle, .light-beam { animation: none !important; }
  #particles-canvas, #mouse-glow { display: none; }
}