/* ============================================================
   SWITCH SMART ELECTRICAL CONTRACTORS
   animations.css — Page load, scroll reveals, hover effects
   ============================================================ */

/* ============================================================
   PAGE LOAD SEQUENCE
   Elements animate in on first paint
   ============================================================ */

/* Nav slides down */
.site-header {
  animation: navSlideDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero content staggers in */
.hero-headline {
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.hero-sub {
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.hero-cta {
  animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

.hero-red-bar {
  animation: heroBarGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

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

@keyframes heroBarGrow {
  from {
    transform: scaleY(0);
    transform-origin: top;
  }
  to {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* Three panels slide up staggered */
.three-panels .panel:nth-child(1) {
  animation: panelUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.three-panels .panel:nth-child(2) {
  animation: panelUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.three-panels .panel:nth-child(3) {
  animation: panelUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

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

/* ============================================================
   SCROLL REVEAL SYSTEM
   .reveal — base hidden state
   .reveal.in — triggered by IntersectionObserver in main.js
   Variants: .reveal-delay-1/2/3, .reveal-left, .reveal-right
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Stagger delays */
.reveal-delay-1,
.reveal-left.reveal-delay-1,
.reveal-right.reveal-delay-1,
.reveal-scale.reveal-delay-1 {
  transition-delay: 0.1s;
}
.reveal-delay-2,
.reveal-left.reveal-delay-2,
.reveal-right.reveal-delay-2,
.reveal-scale.reveal-delay-2 {
  transition-delay: 0.2s;
}
.reveal-delay-3,
.reveal-left.reveal-delay-3,
.reveal-right.reveal-delay-3,
.reveal-scale.reveal-delay-3 {
  transition-delay: 0.3s;
}
.reveal-delay-4 { transition-delay: 0.4s; }

/* Triggered state — all variants resolve to natural position */
.reveal.in,
.reveal-left.in,
.reveal-right.in,
.reveal-scale.in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   HERO — PARALLAX SCROLL
   Handled in main.js (requestAnimationFrame)
   ============================================================ */

.hero-photo {
  will-change: transform;
}

/* ============================================================
   NAV — ACTIVE LINK INDICATOR
   ============================================================ */

.nav-main > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px; right: 18px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-main > li > a:hover::after {
  transform: scaleX(1);
}

/* Remove double border (main.css has border-bottom, this adds ::after) */
.nav-main > li > a {
  border-bottom: none !important;
  position: relative;
}

/* ============================================================
   PANEL IMAGE — ZOOM ON HOVER
   (img placeholder divs scale via main.css,
    this gives the inner SVG a smooth scale too)
   ============================================================ */

.panel-img-placeholder {
  overflow: hidden;
  position: relative;
}

.panel-img-placeholder .panel-img-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.panel:hover .panel-img-placeholder .panel-img-inner {
  transform: scale(1.06);
}

/* ============================================================
   SERVICE ITEMS — STAGGER ON REVEAL
   ============================================================ */

.service-item:nth-child(1) { transition-delay: 0s; }
.service-item:nth-child(2) { transition-delay: 0.07s; }
.service-item:nth-child(3) { transition-delay: 0.14s; }
.service-item:nth-child(4) { transition-delay: 0.21s; }
.service-item:nth-child(5) { transition-delay: 0.28s; }
.service-item:nth-child(6) { transition-delay: 0.35s; }

/* ============================================================
   PROJECT THUMBS — STAGGER ON REVEAL
   ============================================================ */

.project-thumb:nth-child(1) { transition-delay: 0s; }
.project-thumb:nth-child(2) { transition-delay: 0.08s; }
.project-thumb:nth-child(3) { transition-delay: 0.16s; }
.project-thumb:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   NEWS ITEMS — SLIDE IN FROM LEFT
   ============================================================ */

.news-item {
  transition: background 0.2s, padding-left 0.2s;
}

/* ============================================================
   PILLAR CARDS — FADE IN STAGGER
   ============================================================ */

.pillar:nth-child(1) { transition-delay: 0s; }
.pillar:nth-child(2) { transition-delay: 0.1s; }
.pillar:nth-child(3) { transition-delay: 0.2s; }
.pillar:nth-child(4) { transition-delay: 0.3s; }

/* ============================================================
   FOOTER LINKS — MICRO INTERACTION
   ============================================================ */

.footer-col ul a {
  position: relative;
}
.footer-col ul a::before {
  content: '›';
  position: absolute;
  left: -12px;
  opacity: 0;
  color: var(--red);
  transition: opacity 0.2s, left 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-col ul a:hover::before {
  opacity: 1;
  left: -8px;
}

/* ============================================================
   BUTTON PULSE — GET A QUOTE
   Subtle pulse on the nav CTA after 3s
   ============================================================ */

@keyframes subtlePulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 18, 48, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(196, 18, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(196, 18, 48, 0); }
}

.nav-contact-btn {
  animation: subtlePulse 2.5s ease-out 3.5s 3;
}

/* ============================================================
   SECTION TITLE — UNDERLINE WIPE
   Red underline wipes in when section title reveals
   ============================================================ */

.section-title-wrap {
  position: relative;
  display: inline-block;
}

.section-title-wrap::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--red);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.section-title-wrap.in::after {
  width: 60px;
}

/* ============================================================
   MOBILE — Reduce motion for accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}