/* ═══════════════════════════════════════════════════
   GIGGLEZEN — ANIMATION CSS
   ═══════════════════════════════════════════════════ */

/* Aurora Background */
.aurora-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.aurora-bg::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,240,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(123,47,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255,45,170,0.08) 0%, transparent 50%);
  animation: auroraRotate 20s linear infinite;
}
@keyframes auroraRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Noise Texture Overlay */
.noise-overlay::after {
  content: '';
  position: fixed;
  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='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 9998;
}

/* Gradient Border Animation */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gz-grad-aurora);
  background-size: 300% 300%;
  -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;
  animation: borderGlow 4s ease infinite;
}
@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-delay-1 { animation-delay: -2s; }
.float-delay-2 { animation-delay: -4s; }

/* Pulse Glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,240,255,0.3); }
  50% { box-shadow: 0 0 40px rgba(0,240,255,0.6), 0 0 80px rgba(123,47,255,0.3); }
}
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }

/* Glitch Text */
.glitch-text {
  position: relative;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch-text::before {
  animation: glitch-1 2s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  color: var(--gz-cyan);
}
.glitch-text::after {
  animation: glitch-2 2s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  color: var(--gz-magenta);
}
@keyframes glitch-1 {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}
@keyframes glitch-2 {
  0% { transform: translate(0); }
  20% { transform: translate(3px, -3px); }
  40% { transform: translate(3px, 3px); }
  60% { transform: translate(-3px, -3px); }
  80% { transform: translate(-3px, 3px); }
  100% { transform: translate(0); }
}

/* Parallax Image Container */
.parallax-img-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.parallax-img-wrap img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

/* Custom cursor disabled for performance — use native cursor */

/* ═══════════════════════════════════════════════════
   CSS-BASED REVEAL ANIMATIONS
   Pure CSS transitions = GPU accelerated = zero jank
   Triggered by IntersectionObserver adding .revealed class
   ═══════════════════════════════════════════════════ */

.reveal-init {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-init.revealed {
  opacity: 1;
  transform: none !important;
}

/* Fade up */
.reveal--fade {
  transform: translateY(30px);
}

/* Scale */
.reveal--scale {
  transform: scale(0.92);
}

/* Slide left */
.reveal--slide-left {
  transform: translateX(-50px);
}

/* Slide right */
.reveal--slide-right {
  transform: translateX(50px);
}

/* Rotate */
.reveal--rotate {
  transform: translateY(40px) rotate(3deg);
}

/* Stagger grid children get delay via JS */
[data-reveal="stagger-grid"] > * {
  transition: opacity 0.5s ease, transform 0.5s ease;
}