/* ===========================================
   QUADRON ELECTRICAL PROJECTS
   animations.css — Motion · Reveals · Effects
   =========================================== */

/* ==============================
   PAGE LOAD FADE
   ============================== */
body {
  animation: pageFadeIn 0.5s ease forwards;
}

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

/* ==============================
   SCROLL REVEAL — BASE
   ============================== */
.reveal {
  opacity: 0;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible { opacity: 1; transform: none !important; }

/* Directions */
.reveal-up    { transform: translateY(48px); }
.reveal-down  { transform: translateY(-32px); }
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }
.reveal-scale { transform: scale(0.88); }
.reveal-fade  { /* opacity only — no transform */ }

/* Stagger delays */
.reveal-delay-1  { transition-delay: 0.1s; }
.reveal-delay-2  { transition-delay: 0.2s; }
.reveal-delay-3  { transition-delay: 0.3s; }
.reveal-delay-4  { transition-delay: 0.4s; }
.reveal-delay-5  { transition-delay: 0.5s; }
.reveal-delay-6  { transition-delay: 0.6s; }
.reveal-delay-7  { transition-delay: 0.7s; }
.reveal-delay-8  { transition-delay: 0.8s; }
.reveal-delay-9  { transition-delay: 0.9s; }

/* ==============================
   HERO ANIMATIONS
   ============================== */
.hero-tag,
.hero-title,
.hero-subtitle,
.hero-actions,
.hero-stats {
  opacity: 0;
  transform: translateY(30px);
  animation: heroSlideUp 0.9s var(--ease) forwards;
}

.hero-tag      { animation-delay: 0.2s; }
.hero-title    { animation-delay: 0.4s; }
.hero-subtitle { animation-delay: 0.6s; }
.hero-actions  { animation-delay: 0.75s; }
.hero-stats    { animation-delay: 0.9s; }

@keyframes heroSlideUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ==============================
   GOLD SHIMMER BUTTON
   ============================== */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: none;
}

.btn-primary:hover::before {
  left: 150%;
  transition: left 0.6s ease;
}

/* ==============================
   PULSE GLOW (Emergency)
   ============================== */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(224,60,60,0.4),
                0 0 20px rgba(224,60,60,0.15);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(224,60,60,0),
                0 0 30px rgba(224,60,60,0.25);
  }
}

.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

/* Gold pulse */
@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244,180,0,0.4),
                0 4px 20px rgba(244,180,0,0.3);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(244,180,0,0),
                0 4px 20px rgba(244,180,0,0.3);
  }
}

.pulse-gold { animation: pulseGold 2s ease-in-out infinite; }

/* ==============================
   FLOATING LIGHTNING BOLT
   ============================== */
@keyframes floatBolt {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-18px) rotate(5deg); }
}

.float-bolt { animation: floatBolt 5s ease-in-out infinite; }

/* ==============================
   NUMBER COUNTER
   ============================== */
.stat-number {
  display: inline-block;
}

/* ==============================
   BACKGROUND CIRCUIT PATTERN
   ============================== */
.bg-circuit {
  position: relative;
}

.bg-circuit::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(244,180,0,0.08) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.bg-circuit > * { position: relative; z-index: 1; }

/* ==============================
   DIAGONAL CLIP SEPARATORS
   ============================== */
.clip-top-right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 5%);
}

.clip-bottom-left {
  clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

.clip-both {
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}

/* ==============================
   HOVER GLOW EFFECTS
   ============================== */
.hover-glow {
  transition: box-shadow var(--t-base), transform var(--t-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px);
}

/* ==============================
   TYPED TEXT CURSOR
   ============================== */
.typed-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--gold);
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ==============================
   GOLD LINE ANIMATE
   ============================== */
.animate-line {
  height: 3px;
  background: var(--gold);
  width: 0;
  transition: width 1.2s var(--ease);
  border-radius: 2px;
}

.animate-line.visible { width: 60px; }

/* ==============================
   SERVICE CARD ENTRANCE
   ============================== */
.services-grid .service-card {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease),
    border-color var(--t-base),
    box-shadow var(--t-base);
}

.services-grid .service-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   MOBILE ANIMATION ADJUSTMENTS
   ============================== */

/* Reduce translate distances on small screens to avoid horizontal overflow */
@media (max-width: 768px) {
  .reveal-left  { transform: translateX(-28px); }
  .reveal-right { transform: translateX(28px); }
  .reveal-up    { transform: translateY(32px); }
}

/* Trim stagger delays on mobile — long delays feel sluggish */
@media (max-width: 768px) {
  .reveal-delay-6 { transition-delay: 0.4s; }
  .reveal-delay-7 { transition-delay: 0.45s; }
  .reveal-delay-8 { transition-delay: 0.5s; }
  .reveal-delay-9 { transition-delay: 0.55s; }
}

/* Disable heavy canvas animation on low-end / small mobile to save battery */
@media (max-width: 480px) {
  .hero-canvas { opacity: 0.4; }
}

/* ==============================
   SPINNING LOADER (optional)
   ============================== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spin { animation: spin 1s linear infinite; }

/* ==============================
   GRADIENT TEXT
   ============================== */
.gradient-text {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s linear infinite;
}

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

/* ==============================
   CANVAS WRAPPER
   ============================== */
.hero-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==============================
   FAB ENTRANCE
   ============================== */
.fab-container {
  opacity: 0;
  animation: fabEntrance 0.8s var(--ease) 1.5s forwards;
}

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

/* ==============================
   TRUST BAR TICKER (mobile)
   ============================== */
@media (max-width: 600px) {
  .trust-bar-items {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }

  .trust-bar-items::-webkit-scrollbar { height: 3px; }
  .trust-bar-items::-webkit-scrollbar-track { background: transparent; }
  .trust-bar-items::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }

  .trust-bar-item { scroll-snap-align: start; flex-shrink: 0; }
}