/* ============================================================
   CODERSAO — Animations & Scroll Reveals
   ============================================================ */

/* ---- Base Reveal States ---- */
.fade-up,
.reveal-up,
.reveal-fade,
.reveal-left,
.reveal-right {
  opacity: 0;
  will-change: opacity, transform;
}

.fade-up          { transform: translateY(40px); }
.reveal-up        { transform: translateY(32px); }
.reveal-fade      { transform: translateY(16px); }
.reveal-left      { transform: translateX(-32px); }
.reveal-right     { transform: translateX(32px); }

/* ---- Revealed States ---- */
.fade-up.revealed,
.reveal-up.revealed,
.reveal-fade.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Delay Utilities ---- */
.delay-1  { transition-delay: 0.12s !important; }
.delay-2  { transition-delay: 0.24s !important; }
.delay-3  { transition-delay: 0.36s !important; }
.delay-4  { transition-delay: 0.48s !important; }
.delay-5  { transition-delay: 0.60s !important; }

/* ---- Data-delay driven stagger (for grids) ---- */
[data-delay="0"]  { transition-delay: 0s; }
[data-delay="1"]  { transition-delay: 0.08s; }
[data-delay="2"]  { transition-delay: 0.16s; }
[data-delay="3"]  { transition-delay: 0.24s; }
[data-delay="4"]  { transition-delay: 0.32s; }
[data-delay="5"]  { transition-delay: 0.40s; }
[data-delay="6"]  { transition-delay: 0.48s; }
[data-delay="7"]  { transition-delay: 0.56s; }
[data-delay="8"]  { transition-delay: 0.64s; }
[data-delay="9"]  { transition-delay: 0.72s; }
[data-delay="10"] { transition-delay: 0.80s; }
[data-delay="11"] { transition-delay: 0.88s; }
[data-delay="12"] { transition-delay: 0.96s; }

/* ---- Hero initial load animations ---- */
.fade-up.loaded {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Magnetic Button Effect ---- */
.magnetic-btn {
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

/* ---- Glow Pulse for Accent Elements ---- */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(79,124,255,0.15), 0 0 0px rgba(79,124,255,0); }
  50%       { box-shadow: 0 0 40px rgba(79,124,255,0.25), 0 0 80px rgba(79,124,255,0.05); }
}

.btn-primary:not(#navbar *) {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* ---- Counter Animation ---- */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---- Soft rotating gradient background for hero ---- */
@keyframes heroGradientRotate {
  0%   { transform: rotate(0deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1.5); }
}

/* ---- Shimmer Effect on cards ---- */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(255,255,255,0.015) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.glass-card {
  position: relative;
  overflow: hidden;
}

.glass-card:hover::after {
  opacity: 1;
}

/* ---- Nav Toggle Animation ---- */
#nav-toggle.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
#nav-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#nav-toggle.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- Animated border on focused form fields ---- */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(79,124,255,0.05); }
  50%       { box-shadow: 0 0 0 3px rgba(79,124,255,0.15); }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: borderGlow 2s ease-in-out infinite;
}

/* ---- Product Card: glow top border on hover ---- */
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-card:hover::before {
  opacity: 1;
}

/* ---- Capability Card: top gradient bar on hover ---- */
.capability-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: var(--gradient-accent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.capability-card:hover::before {
  opacity: 1;
}

/* ---- Stack item floating animation ---- */
.stack-item:nth-child(odd) {
  animation: floatOdd 6s ease-in-out infinite;
}
.stack-item:nth-child(even) {
  animation: floatEven 7s ease-in-out infinite;
}

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

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

.stack-item:hover {
  animation: none !important;
  transform: translateY(-4px) !important;
}

/* ---- Reduced motion override ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .stack-item:nth-child(odd),
  .stack-item:nth-child(even) {
    animation: none;
  }
}