/* ═══════════════════════════════════════════════
   ANIMATIONS.CSS — Keyframes & Reveal Classes
   Portfolio — Matheus Padilha
═══════════════════════════════════════════════ */

/* ════════════════════════════════════════
   REVEAL CLASSES (toggled by Intersection Observer)
════════════════════════════════════════ */

/* ---- Fade + Slide Up ---- */
.reveal-text {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  0.85s var(--ease-out-expo),
    transform 0.85s var(--ease-out-expo);
}

.reveal-text.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Slide from Left ---- */
.reveal-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity  0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

.reveal-from-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Slide from Right ---- */
.reveal-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity  0.8s var(--ease-out-expo),
    transform 0.8s var(--ease-out-expo);
}

.reveal-from-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Scale In ---- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition:
    opacity  0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ════════════════════════════════════════
   STAGGER DELAY UTILITIES
════════════════════════════════════════ */
.stagger-1 { transition-delay: 0.08s !important; }
.stagger-2 { transition-delay: 0.16s !important; }
.stagger-3 { transition-delay: 0.24s !important; }
.stagger-4 { transition-delay: 0.32s !important; }
.stagger-5 { transition-delay: 0.40s !important; }
.stagger-6 { transition-delay: 0.48s !important; }
.stagger-7 { transition-delay: 0.56s !important; }
.stagger-8 { transition-delay: 0.64s !important; }

/* ════════════════════════════════════════
   GENERAL KEYFRAMES
════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ════════════════════════════════════════
   FLOATING ANIMATION (utility)
════════════════════════════════════════ */
.float-anim {
  animation: floatUpDown 5s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* ════════════════════════════════════════
   SHIMMER TEXT (utility)
════════════════════════════════════════ */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--text-muted)    25%,
    var(--text-primary)  50%,
    var(--text-muted)    75%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

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

/* ════════════════════════════════════════
   GRADIENT BORDER (utility)
════════════════════════════════════════ */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--text-muted), transparent, var(--text-muted));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ════════════════════════════════════════
   GLITCH EFFECT (utility, optional use)
════════════════════════════════════════ */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}

.glitch:hover::before {
  animation: glitchTop 0.3s linear;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  transform: translate(-2px, -2px);
  opacity: 0.7;
}

.glitch:hover::after {
  animation: glitchBot 0.3s linear 0.05s;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  transform: translate(2px, 2px);
  opacity: 0.7;
}

@keyframes glitchTop {
  0%  { transform: translate(-2px,-2px) skewX(0deg); }
  25% { transform: translate(2px,-2px) skewX(2deg); }
  50% { transform: translate(-2px,0px) skewX(0deg); }
  75% { transform: translate(2px,-1px) skewX(-2deg); }
  100%{ transform: translate(-2px,-2px) skewX(0deg); }
}

@keyframes glitchBot {
  0%  { transform: translate(2px,2px) skewX(0deg); }
  25% { transform: translate(-2px,2px) skewX(-2deg); }
  50% { transform: translate(2px,0px) skewX(0deg); }
  75% { transform: translate(-2px,1px) skewX(2deg); }
  100%{ transform: translate(2px,2px) skewX(0deg); }
}

/* ════════════════════════════════════════
   LOADING SKELETON (utility)
════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--border)       50%,
    var(--bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoad 1.5s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonLoad {
  0%   { background-position:  200% center; }
  100% { background-position: -200% center; }
}