/* ============================================
   KA-ringas – Animations & Micro-interactions
   ============================================ */

/* ---------- Neon Glow Pulse ---------- */
@keyframes neonPulse {
  0%, 100% {
    text-shadow: 
      0 0 7px rgba(240, 165, 0, 0.4),
      0 0 10px rgba(240, 165, 0, 0.2),
      0 0 21px rgba(240, 165, 0, 0.1);
  }
  50% {
    text-shadow: 
      0 0 10px rgba(240, 165, 0, 0.5),
      0 0 20px rgba(240, 165, 0, 0.35),
      0 0 40px rgba(240, 165, 0, 0.15);
  }
}

.neon-text {
  animation: neonPulse 3s ease-in-out infinite;
}

/* ---------- Floating Animation ---------- */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.floating {
  animation: floating 4s ease-in-out infinite;
}

/* ---------- Glow Border Animation ---------- */
@keyframes glowBorder {
  0% {
    border-color: rgba(240, 165, 0, 0.15);
    box-shadow: 0 0 5px rgba(240, 165, 0, 0.07);
  }
  50% {
    border-color: rgba(240, 165, 0, 0.35);
    box-shadow: 0 0 20px rgba(240, 165, 0, 0.12);
  }
  100% {
    border-color: rgba(240, 165, 0, 0.15);
    box-shadow: 0 0 5px rgba(240, 165, 0, 0.07);
  }
}

.glow-border {
  animation: glowBorder 3s ease-in-out infinite;
}

/* ---------- Shimmer Effect ---------- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 25%,
    rgba(240, 165, 0, 0.06) 50%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* ---------- Rotate Animation ---------- */
@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotate {
  animation: rotate360 20s linear infinite;
}

/* ---------- Scale Pulse ---------- */
@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.scale-pulse {
  animation: scalePulse 2s ease-in-out infinite;
}

/* ---------- Scan Line Effect ---------- */
@keyframes scanLine {
  0% { top: -10%; }
  100% { top: 110%; }
}

.scan-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 165, 0, 0.4), transparent);
  animation: scanLine 4s linear infinite;
  pointer-events: none;
}

/* ---------- Typing Cursor ---------- */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  color: var(--neon-orange);
  animation: blink 1s step-end infinite;
}

/* ---------- Ripple Effect ---------- */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

/* ---------- Gradient Border Animation ---------- */
@keyframes gradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    var(--neon-orange),
    var(--neon-blue),
    var(--neon-purple),
    var(--neon-orange)
  );
  background-size: 300% 300%;
  animation: gradientBorder 4s ease infinite;
  z-index: -1;
}

.gradient-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-card);
  z-index: -1;
}

/* ---------- Particle Trail ---------- */
@keyframes particleTrail {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0);
    opacity: 0;
  }
}

/* ---------- Card Tilt Effect (CSS only approximation) ---------- */
.tilt-card {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(10px);
}

/* ---------- Magnetic Button Effect ---------- */
.magnetic-btn {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- Text Reveal Animation ---------- */
@keyframes textReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.text-reveal {
  animation: textReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ---------- Counter Animation ---------- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hover Underline Animation ---------- */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-orange);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.hover-underline:hover::after {
  width: 100%;
}

/* ---------- Image Zoom on Hover ---------- */
.img-zoom {
  overflow: hidden;
}

.img-zoom img,
.img-zoom .placeholder-img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom:hover img,
.img-zoom:hover .placeholder-img {
  transform: scale(1.1);
}

/* ---------- Staggered Fade In ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }
.fade-in-up:nth-child(4) { animation-delay: 0.4s; }
.fade-in-up:nth-child(5) { animation-delay: 0.5s; }
.fade-in-up:nth-child(6) { animation-delay: 0.6s; }

/* ---------- Glitch Text Effect ---------- */
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

.glitch-text:hover {
  animation: glitch 0.3s ease infinite;
}

/* ---------- Noise Texture Overlay ---------- */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  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='256' height='256' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* ---------- Smooth Page Transitions ---------- */
.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Intersection Observer Helpers ---------- */
[data-animate] {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-left"] {
  transform: translateX(-40px);
}

[data-animate="fade-right"] {
  transform: translateX(40px);
}

[data-animate="zoom-in"] {
  transform: scale(0.8);
}

[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* ---------- Decorative Glowing Orbs ---------- */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
}

.glow-orb.orange {
  background: rgba(240, 165, 0, 0.1);
}

.glow-orb.blue {
  background: rgba(94, 174, 255, 0.08);
}

.glow-orb.purple {
  background: rgba(167, 139, 250, 0.08);
}