/* ═══════════════════════════════════════════════════
   NETRIGO GAME STUDIOS — Animations v4.0
   Aurora Background · Particle System · Premium FX
═══════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(1deg); }
}

/* Aurora blobs */
@keyframes aurora-1 {
  0%, 100% { transform: translate(0px, 0px) scale(1); opacity: 0.12; }
  25%       { transform: translate(60px, -40px) scale(1.08); opacity: 0.18; }
  50%       { transform: translate(-30px, 60px) scale(0.92); opacity: 0.10; }
  75%       { transform: translate(-60px, -20px) scale(1.05); opacity: 0.15; }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate(0px, 0px) scale(1); opacity: 0.09; }
  33%       { transform: translate(-80px, 50px) scale(1.12); opacity: 0.14; }
  66%       { transform: translate(50px, -80px) scale(0.88); opacity: 0.08; }
}
@keyframes aurora-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
  40%       { transform: translate(40px, 80px) scale(1.1); opacity: 0.12; }
  70%       { transform: translate(-50px, 30px) scale(0.95); opacity: 0.08; }
}
@keyframes aurora-4 {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0.05; }
  50%       { transform: translate(-30px, -40px) rotate(15deg) scale(1.2); opacity: 0.10; }
}

@keyframes grid-drift {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%       { transform: translateX(-20px) translateY(-10px); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(200,169,110,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(200,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,169,110,0); }
}
@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(139,26,26,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(139,26,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,26,26,0); }
}
@keyframes scan-line {
  0%   { top: -100%; }
  100% { top: 200%; }
}
@keyframes glitch-1 {
  0%,100%  { clip-path: inset(40% 0 61% 0); transform: translateX(-2px); }
  20%      { clip-path: inset(92% 0 1% 0);  transform: translateX(2px); }
  40%      { clip-path: inset(43% 0 1% 0);  transform: translateX(-1px); }
  60%      { clip-path: inset(25% 0 58% 0); transform: translateX(3px); }
  80%      { clip-path: inset(54% 0 7% 0);  transform: translateX(-2px); }
}
@keyframes glitch-2 {
  0%,100%  { clip-path: inset(50% 0 30% 0); transform: translateX(2px); }
  20%      { clip-path: inset(12% 0 65% 0); transform: translateX(-2px); }
  40%      { clip-path: inset(80% 0 5% 0);  transform: translateX(1px); }
  60%      { clip-path: inset(35% 0 45% 0); transform: translateX(-3px); }
  80%      { clip-path: inset(65% 0 20% 0); transform: translateX(2px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes shimmer-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes border-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,110,0); }
  50%       { box-shadow: 0 0 20px rgba(200,169,110,0.12); }
}
@keyframes noise-flicker {
  0%,100% { opacity: 0.03; }
  10%     { opacity: 0.025; }
  20%     { opacity: 0.035; }
  30%     { opacity: 0.028; }
  50%     { opacity: 0.02; }
  70%     { opacity: 0.032; }
  90%     { opacity: 0.026; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(var(--dx, 20px)) scale(0.4); opacity: 0; }
}
@keyframes glow-pulse-card {
  0%, 100% { box-shadow: 0 0 0 1px rgba(200,169,110,0.0),  0 8px 32px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 0 0 1px rgba(200,169,110,0.15), 0 16px 48px rgba(200,169,110,0.06); }
}
@keyframes progress-bar {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes typing-cursor {
  0%, 100% { border-right-color: var(--primary); }
  50%       { border-right-color: transparent; }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes counter-strike {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes outline-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Utility animation classes ── */
.float-anim        { animation: float      6s ease-in-out infinite; }
.float-slow-anim   { animation: float-slow 8s ease-in-out infinite; }
.pulse-anim        { animation: pulse-ring 2s ease-out infinite; }
.fade-in           { animation: fadeIn   0.6s ease forwards; }
.fade-in-up        { animation: fadeInUp 0.7s ease forwards; }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.is-visible > *:nth-child(1)  { opacity:1; transform:none; transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2)  { opacity:1; transform:none; transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3)  { opacity:1; transform:none; transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4)  { opacity:1; transform:none; transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5)  { opacity:1; transform:none; transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6)  { opacity:1; transform:none; transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(7)  { opacity:1; transform:none; transition-delay: 0.47s; }
.reveal-stagger.is-visible > *:nth-child(8)  { opacity:1; transform:none; transition-delay: 0.54s; }

/* ── Shimmer text ── */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    #f5e0a0 30%,
    #fff8e8 50%,
    #f0d898 70%,
    var(--primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Glitch element ── */
.glitch-wrapper { position: relative; display: inline-block; }
.glitch-wrapper::before,
.glitch-wrapper::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  color: inherit;
}
.glitch-wrapper::before {
  color: #ff004f;
  animation: glitch-1 0.55s infinite linear alternate-reverse;
}
.glitch-wrapper::after {
  color: #00f0ff;
  animation: glitch-2 0.55s infinite linear alternate-reverse;
}
.glitch-wrapper:not(:hover)::before,
.glitch-wrapper:not(:hover)::after { animation: none; opacity: 0; }

/* ── Film noise overlay ── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  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.9' 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;
  opacity: 0.028;
  animation: noise-flicker 0.15s steps(1) infinite;
  mix-blend-mode: overlay;
}

/* ── Aurora Background Layer ── */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139,26,26,0.10), transparent),
    radial-gradient(ellipse 60% 80% at 90% 10%, rgba(200,169,110,0.07), transparent),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(92,124,172,0.06), transparent),
    radial-gradient(ellipse 40% 40% at 30% 60%, rgba(139,26,26,0.05), transparent),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(200,169,110,0.04), transparent);
  animation: aurora-4 18s ease-in-out infinite;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.aurora-blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(139,26,26,0.18), transparent 70%);
  top: -200px; right: -150px;
  animation: aurora-1 20s ease-in-out infinite;
}
.aurora-blob-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,169,110,0.10), transparent 70%);
  bottom: -100px; left: -100px;
  animation: aurora-2 25s ease-in-out infinite;
}
.aurora-blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(92,124,172,0.08), transparent 70%);
  top: 40%; left: 45%;
  animation: aurora-3 30s ease-in-out infinite;
}
.aurora-blob-4 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,26,26,0.06), transparent 70%);
  top: 60%; right: 10%;
  animation: aurora-1 22s ease-in-out infinite reverse;
}

/* ── Animated grid ── */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  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: 80px 80px;
  animation: grid-drift 40s ease-in-out infinite;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* ── Glow card animation ── */
.card-glow { animation: glow-pulse-card 4s ease-in-out infinite; }

/* ── Typing cursor ── */
.typing-cursor {
  border-right: 2px solid var(--primary);
  padding-right: 2px;
  animation: typing-cursor 1s step-end infinite;
}

/* ── Stat counter strike ── */
.stat-visible { animation: counter-strike 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Intro Screen ── */
@keyframes intro-symbol-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(200,169,110,0.35); }
  50%       { text-shadow: 0 0 45px rgba(200,169,110,0.95), 0 0 90px rgba(200,169,110,0.3); }
}
@keyframes intro-line-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes intro-title-reveal {
  from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);    }
}
@keyframes intro-exit {
  0%   { opacity: 1;  transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.015); }
}

/* ── Cursor trail ── */
@keyframes cursor-trail-fade {
  0%   { opacity: 0.55; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(0.1); }
}

/* ── Card tilt glow ── */
@keyframes card-tilt-glow {
  from { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
  to   { box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,169,110,0.08); }
}