/* ==========================================================================
   ANIMATIONS — keyframes, micro-interactions, ambient effects
   ========================================================================== */

/* Floating ambient shapes */
.float-slow{animation:floatSlow 8s ease-in-out infinite;}
.float-med{animation:floatSlow 6s ease-in-out infinite;}
@keyframes floatSlow{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(3deg);}
}

/* Fade-in-up used by JS-triggered .reveal is in style.css; this file adds extras */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.fade-in{animation:fadeIn 1s var(--ease) forwards;}

/* Gradient movement */
.animated-gradient{
  background:linear-gradient(120deg,var(--violet),var(--cyan),var(--orange),var(--violet));
  background-size:300% 300%;
  animation:gradientShift 8s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* Typewriter */
.typewriter{
  display:inline-block;
  border-right:2px solid var(--cyan);
  white-space:nowrap;overflow:hidden;
  animation:blinkCaret .8s step-end infinite;
}
@keyframes blinkCaret{50%{border-color:transparent;}}

/* Pulse dot (status / availability) */
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:#3DDC84;position:relative;display:inline-block;
}
.pulse-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:#3DDC84;
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.7;}
  100%{transform:scale(2.6);opacity:0;}
}

/* Image reveal (clip-path sweep) on scroll-in */
.img-reveal{position:relative;overflow:hidden;}
.img-reveal::after{
  content:"";position:absolute;inset:0;background:var(--bg);
  transform:scaleX(1);transform-origin:right;
  transition:transform 1s var(--ease-soft);
}
.img-reveal.in::after{transform:scaleX(0);}

/* Button shimmer */
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-120%) skewX(-15deg);
  transition:transform .7s var(--ease);
}
.btn-primary:hover::before{transform:translateX(120%) skewX(-15deg);}

/* Rotating badge (used near hero / signature) */
.rotating-badge{
  animation:spin 14s linear infinite;
  transform-origin:center;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Particle canvas sits behind hero content */
#particles{position:absolute;inset:0;z-index:0;opacity:.55;}

/* Section entrance for headings (word reveal handled via JS wrapping spans) */
.word{display:inline-block;overflow:hidden;}
.word span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease);}
.word.in span{transform:translateY(0);}

/* Card tilt helper (JS sets --rx/--ry) */
.tilt{
  transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0));
  transition:transform .3s var(--ease-soft);
}

/* Loading dots for form submit */
.dot-loader{display:inline-flex;gap:4px;}
.dot-loader span{width:6px;height:6px;border-radius:50%;background:#08080C;animation:dotFade 1.2s ease-in-out infinite;}
.dot-loader span:nth-child(2){animation-delay:.15s;}
.dot-loader span:nth-child(3){animation-delay:.3s;}
@keyframes dotFade{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

/* Marquee logo grayscale-to-color on hover */
.logo-item{filter:grayscale(1) opacity(.5);transition:filter .4s var(--ease);}
.logo-item:hover{filter:grayscale(0) opacity(1);}

/* Distortion hover for images (CSS only) */
.distort{overflow:hidden;border-radius:var(--radius-lg);}
.distort img{transition:transform .6s var(--ease-soft),filter .6s var(--ease-soft);}
.distort:hover img{transform:scale(1.06) rotate(.4deg);filter:saturate(1.3) contrast(1.05);}