/* animations.css - Nano-Infinity v48.20.11 - Enhanced Animations
   Copyright (c) 2024-2026 Norman Kachel. All rights reserved.
   Features: View Transitions, CSS Scroll-Timeline, Aurora, Magnetic,
             Text Reveal, Typewriter, Morphing, 3D Flip, Glitch */

/* ── Core Keyframes ───────────────────────────────────────────── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ── Float & Pulse ────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0)     rotate(0deg);   }
  33%       { transform: translateY(-14px) rotate(1deg);   }
  66%       { transform: translateY(-6px)  rotate(-1deg);  }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(1.06); opacity: 0.85; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(79,195,247,0.15), 0 0 40px rgba(79,195,247,0.05); }
  50%       { box-shadow: 0 0 40px rgba(79,195,247,0.4),  0 0 80px rgba(79,195,247,0.15); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Gradient & Aurora ────────────────────────────────────────── */
@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes aurora {
  0%   { transform: translate(-10%, -10%) rotate(0deg)   scale(1);    opacity: 0.5; }
  25%  { transform: translate(5%,  -15%) rotate(90deg)  scale(1.1);  opacity: 0.7; }
  50%  { transform: translate(15%,  5%)  rotate(180deg) scale(0.9);  opacity: 0.5; }
  75%  { transform: translate(-5%,  15%) rotate(270deg) scale(1.05); opacity: 0.6; }
  100% { transform: translate(-10%, -10%) rotate(360deg) scale(1);   opacity: 0.5; }
}
@keyframes aurora2 {
  0%   { transform: translate(10%, 10%)  rotate(0deg)   scale(1.1); opacity: 0.4; }
  33%  { transform: translate(-8%, 15%)  rotate(-120deg) scale(0.9); opacity: 0.6; }
  66%  { transform: translate(12%, -8%)  rotate(240deg)  scale(1.2); opacity: 0.4; }
  100% { transform: translate(10%, 10%)  rotate(360deg)  scale(1.1); opacity: 0.4; }
}

/* ── Text Effects ─────────────────────────────────────────────── */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-cursor {
  0%, 100% { border-color: var(--accent-blue); }
  50%       { border-color: transparent; }
}
@keyframes text-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}
@keyframes text-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes glitch-1 {
  0%, 90%, 100% { transform: translate(0);      clip-path: none; }
  92%           { transform: translate(-3px, 1px); clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); }
  94%           { transform: translate(3px, -1px); clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%); }
  96%           { transform: translate(-2px, 2px); clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%); }
}
@keyframes gradient-text {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Card & 3D ────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position:  1000px 0; }
}
@keyframes flip-in {
  from { transform: perspective(600px) rotateY(-90deg); opacity: 0; }
  to   { transform: perspective(600px) rotateY(0deg);   opacity: 1; }
}
@keyframes morph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%     { border-radius: 50% 60% 30% 60% / 30% 40% 70% 50%; }
  75%     { border-radius: 70% 30% 50% 50% / 40% 60% 40% 60%; }
}
@keyframes counter-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes count-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Entrance helpers ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px);  }
.reveal-scale { transform: scale(0.85); }
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible { transform: none; opacity: 1; }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ── Aurora background blobs ──────────────────────────────────── */
.aurora-container {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  mix-blend-mode: screen;
}
.aurora-blob-1 {
  width: 600px; height: 600px;
  top: -100px; left: -100px;
  background: radial-gradient(circle, #4fc3f7 0%, #7c4dff 70%);
  animation: aurora 18s ease-in-out infinite;
}
.aurora-blob-2 {
  width: 500px; height: 500px;
  bottom: -100px; right: -100px;
  background: radial-gradient(circle, #7c4dff 0%, #ff6ec7 70%);
  animation: aurora2 22s ease-in-out infinite;
}
.aurora-blob-3 {
  width: 400px; height: 400px;
  top: 40%; left: 40%;
  background: radial-gradient(circle, #00e5ff 0%, #4fc3f7 70%);
  animation: aurora 28s ease-in-out infinite reverse;
}

/* ── Typewriter Effect ────────────────────────────────────────── */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--accent-blue);
  animation: typewriter 3s steps(40,end) forwards,
             blink-cursor 0.8s step-end infinite;
}

/* ── Gradient Text ────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #4fc3f7, #7c4dff, #ff6ec7, #4fc3f7);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-text 4s ease infinite;
}

/* ── Shimmer Text ─────────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg, #4fc3f7 0%, #fff 50%, #7c4dff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 3s linear infinite;
}

/* ── Glitch Text ──────────────────────────────────────────────── */
.glitch {
  position: relative;
  animation: glitch-1 5s ease-in-out infinite;
}

/* ── Morph Shape ──────────────────────────────────────────────── */
.morph-shape {
  animation: morph 8s ease-in-out infinite;
}

/* ── Floating Cards ───────────────────────────────────────────── */
.float-card { animation: float 6s ease-in-out infinite; }
.float-card:nth-child(2n) { animation-delay: -2s; animation-duration: 7s; }
.float-card:nth-child(3n) { animation-delay: -4s; animation-duration: 8s; }

/* ── Scroll Progress Bar ──────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #4fc3f7, #7c4dff, #ff6ec7);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  z-index: 9999;
}

/* ── Magnetic Button ──────────────────────────────────────────── */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.3s ease;
}
.btn-magnetic:hover {
  box-shadow: 0 20px 60px rgba(79,195,247,0.4);
}

/* ── Stagger children on reveal ───────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s;  }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.2s;  }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.3s;  }

/* ── CSS View Transitions (modern browsers) ───────────────────── */
@supports (view-transition-name: root) {
  ::view-transition-old(root) {
    animation: fadeIn 0.3s ease reverse;
  }
  ::view-transition-new(root) {
    animation: fadeIn 0.3s ease;
  }
}

/* ── @starting-style for smooth entry (Chrome 117+) ─────────────*/
@supports (animation-timeline: scroll()) {
  .scroll-fade {
    animation: fadeInUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}