/* ============================================================
   ANIMATIONS — Keyframes, reveal classes, transitions
   ============================================================ */

/* ── Loader auto-hide (CSS fallback) ── */
@keyframes loader-hide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ── Keyframes ── */

@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

@keyframes blob-float {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(30px,-20px) scale(1.05)}
  66%{transform:translate(-20px,15px) scale(0.96)}
}

@keyframes pulse-dot {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.7)}
}

@keyframes shimmer {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

@keyframes spin-slow {
  to{transform:rotate(360deg)}
}

@keyframes gradient-shift {
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

@keyframes glow-pulse {
  0%,100%{box-shadow:0 0 20px rgba(255,107,0,.2)}
  50%{box-shadow:0 0 50px rgba(255,107,0,.5),0 0 80px rgba(255,107,0,.2)}
}

@keyframes border-rotate {
  0%{background-position:0% 0%}
  100%{background-position:300% 300%}
}

@keyframes typewriter-cursor {
  0%,100%{opacity:1}
  50%{opacity:0}
}

@keyframes slide-in-up {
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes slide-in-left {
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes slide-in-right {
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes scale-in {
  from{opacity:0;transform:scale(.85)}
  to{opacity:1;transform:scale(1)}
}

@keyframes counter-up {
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@keyframes wave-svg {
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

@keyframes particle-drift {
  0%{transform:translate(0,0);opacity:.7}
  50%{opacity:.3}
  100%{transform:translate(var(--dx,20px),var(--dy,-30px));opacity:0}
}

@keyframes loading-bar {
  0%{width:0%;opacity:1}
  80%{width:90%;opacity:1}
  100%{width:100%;opacity:0}
}

@keyframes logo-reveal {
  0%{opacity:0;transform:scale(.8) translateY(20px)}
  60%{opacity:1;transform:scale(1.05) translateY(-5px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

@keyframes dot-bounce {
  0%,80%,100%{transform:scale(0)}
  40%{transform:scale(1)}
}

/* ── Reveal classes (GSAP targets) ── */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .8s var(--tr-slow), transform .8s var(--tr-slow);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .8s var(--tr-slow), transform .8s var(--tr-slow);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .8s var(--tr-slow), transform .8s var(--tr-slow);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .8s var(--tr-slow), transform .8s var(--tr-slow);
}

.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Animated gradient border ── */
.grad-border {
  position: relative;
}
.grad-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,107,0,.8) 0%,
    rgba(255,179,71,.2) 50%,
    rgba(255,107,0,.8) 100%);
  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: border-rotate 4s linear infinite;
}

/* ── Glow animate ── */
.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }
.animate-spin  { animation: spin-slow 20s linear infinite; }
.animate-float { animation: float 6s ease-in-out infinite; }

/* ── AOS overrides ── */
[data-aos] { transition-duration: 700ms !important; }

/* ── Typewriter cursor ── */
.cursor-blink::after {
  content: '|';
  animation: typewriter-cursor 1s step-end infinite;
  color: #ff6b00;
  margin-left: 2px;
}

/* ── Card tilt ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .1s ease;
}
.tilt-card .tilt-inner {
  transform: translateZ(20px);
}

/* ── Magnetic btn ── */
.magnetic {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* ── Hover line underline ── */
.link-hover {
  position: relative;
}
.link-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--orange);
  transition: width var(--tr-mid);
}
.link-hover:hover::after { width: 100%; }

/* ── Wave SVG container ── */
.wave-container {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 0;
}
.wave-container svg {
  display: block;
}

/* ── Particle canvas ── */
#particles-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}