/* ============================================================
   RELIANCE ENERGY - Full Animation System
   © 2025 Reliance Energy Zambia Limited / WheelproZM
   ============================================================ */

/* =====================================================
   BASE REVEAL STATES
   ===================================================== */
[data-reveal],
[data-reveal-left],
[data-reveal-right],
[data-reveal-scale],
[data-reveal-flip] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.8s;
  will-change: opacity, transform;
}

/* delay classes */
[data-d="1"] { transition-delay: 0.12s; }
[data-d="2"] { transition-delay: 0.22s; }
[data-d="3"] { transition-delay: 0.34s; }
[data-d="4"] { transition-delay: 0.46s; }

/* slide up (default) */
[data-reveal]       { transform: translateY(32px); }
[data-reveal].in    { opacity: 1; transform: translateY(0); }

/* slide from left */
[data-reveal-left]      { transform: translateX(-40px); }
[data-reveal-left].in   { opacity: 1; transform: translateX(0); }

/* slide from right */
[data-reveal-right]     { transform: translateX(40px); }
[data-reveal-right].in  { opacity: 1; transform: translateX(0); }

/* scale up */
[data-reveal-scale]     { transform: scale(0.88); filter: blur(4px); }
[data-reveal-scale].in  { opacity: 1; transform: scale(1); filter: blur(0); }

/* flip in */
[data-reveal-flip]      { transform: perspective(600px) rotateX(12deg) translateY(24px); }
[data-reveal-flip].in   { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0); }


/* =====================================================
   IMAGE SLOTS - cinematic reveal
   ===================================================== */
.img-reveal {
  overflow: hidden;
  border-radius: inherit;
}
.img-reveal image-slot,
.img-reveal img {
  transform: scale(1.08);
  filter: blur(6px);
  transition: transform 1.2s cubic-bezier(0.22,1,0.36,1),
              filter 1.0s cubic-bezier(0.22,1,0.36,1);
  will-change: transform, filter;
}
.img-reveal.in image-slot,
.img-reveal.in img {
  transform: scale(1);
  filter: blur(0);
}

/* image wipe overlay */
.img-reveal::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--cream);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}
.img-reveal.in::after {
  transform: scaleX(0);
  transform-origin: right;
}


/* =====================================================
   SECBAR - rule line draw
   ===================================================== */
.secbar__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1) 0.3s;
}
.secbar.in .secbar__rule { transform: scaleX(1); }

.secbar__no {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}
.secbar.in .secbar__no { opacity: 1; transform: translateY(0); }

.secbar__label {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease) 0.18s, transform 0.5s var(--ease) 0.18s;
}
.secbar.in .secbar__label { opacity: 1; transform: translateY(0); }

.secbar__note {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease) 0.28s, transform 0.5s var(--ease) 0.28s;
}
.secbar.in .secbar__note { opacity: 1; transform: translateY(0); }


/* =====================================================
   VM CARDS (Vision / Mission) - fancy entrance
   ===================================================== */
.vm__card {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              box-shadow 0.35s var(--ease);
}
.vm__card.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* left accent bar grows in */
.vm__card::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.4s;
}
.vm__card.in::before { transform: scaleY(1); }

/* hover lift */
.vm__card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 56px rgba(20,19,15,0.12);
}


/* =====================================================
   PILLAR CARDS - stagger + hover tilt
   ===================================================== */
.pillar {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease),
              box-shadow 0.35s var(--ease);
}
.pillar.in { opacity: 1; transform: translateY(0); }
.pillar:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 72px rgba(20,19,15,0.11);
}

/* icon spin on hover */
.pillar__icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pillar:hover .pillar__icon { transform: rotate(15deg) scale(1.15); }

/* list items stagger */
.pillar__list li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.pillar.in .pillar__list li:nth-child(1) { opacity:1; transform:none; transition-delay:0.35s; }
.pillar.in .pillar__list li:nth-child(2) { opacity:1; transform:none; transition-delay:0.45s; }
.pillar.in .pillar__list li:nth-child(3) { opacity:1; transform:none; transition-delay:0.55s; }
.pillar.in .pillar__list li:nth-child(4) { opacity:1; transform:none; transition-delay:0.65s; }


/* =====================================================
   INFOCARD - pop in with icon bounce
   ===================================================== */
.infocard {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              box-shadow 0.3s var(--ease);
}
.infocard.in { opacity: 1; transform: translateY(0) scale(1); }
.infocard:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 24px 56px rgba(20,19,15,0.1); }

.infocard__icon {
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.infocard:hover .infocard__icon { transform: scale(1.2) rotate(-8deg); }


/* =====================================================
   STAT CARDS (dark panel)
   ===================================================== */
.dstat {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.dstat.in { opacity: 1; transform: translateY(0); }
.dstat:nth-child(1) { transition-delay: 0.1s; }
.dstat:nth-child(2) { transition-delay: 0.22s; }
.dstat:nth-child(3) { transition-delay: 0.34s; }

.dstat .num {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.dstat:hover .num { transform: scale(1.08); }


/* =====================================================
   SCARD (stat grid)
   ===================================================== */
.scard {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease),
              box-shadow 0.3s var(--ease);
}
.scard.in { opacity: 1; transform: translateY(0) scale(1); }
.scard:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(20,19,15,0.1); }


/* =====================================================
   TESTIMONIAL CARDS
   ===================================================== */
.tcard {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tcard.in { opacity: 1; transform: translateY(0); }
.tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(20,19,15,0.12);
  border-color: rgba(47,168,108,0.3);
}

/* quote mark bounce */
.tcard__mark {
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.tcard:hover .tcard__mark { transform: scale(1.15) rotate(-5deg); }


/* =====================================================
   STEPS (future outlook)
   ===================================================== */
.step {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  border-top-color: transparent;
}
.step.in {
  opacity: 1;
  transform: translateY(0);
  border-top-color: var(--ink);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease),
              border-top-color 0.5s var(--ease) 0.3s;
}
.step:nth-child(1) { transition-delay: 0.05s; }
.step:nth-child(2) { transition-delay: 0.18s; }
.step:nth-child(3) { transition-delay: 0.31s; }

.step h4 { transition: color 0.3s var(--ease); }
.step:hover h4 { color: var(--amber-2); }


/* =====================================================
   TRUST LOGO CARDS
   ===================================================== */
.trust-logo-card {
  opacity: 0;
  transform: scale(0.88) translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
              box-shadow 0.3s var(--ease);
}
.trust-logo-card.in { opacity: 1; transform: scale(1) translateY(0); }
.trust-logo-card:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 40px rgba(20,19,15,0.1); }
.trust-logo-card:nth-child(1) { transition-delay: 0.1s; }
.trust-logo-card:nth-child(2) { transition-delay: 0.2s; }


/* =====================================================
   PARTNER ROWS
   ===================================================== */
.prow {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.prow.in { opacity: 1; transform: translateX(0); }
.prow:nth-child(1) { transition-delay: 0.08s; }
.prow:nth-child(2) { transition-delay: 0.18s; }
.prow:nth-child(3) { transition-delay: 0.28s; }


/* =====================================================
   FAQ ITEMS
   ===================================================== */
.faq__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.faq__item.in { opacity: 1; transform: translateY(0); }


/* =====================================================
   CONTACT DETAILS
   ===================================================== */
.cdetail {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease),
              box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.cdetail.in { opacity: 1; transform: translateX(0); }
.cdetail:nth-child(1) { transition-delay: 0.1s; }
.cdetail:nth-child(2) { transition-delay: 0.2s; }
.cdetail:nth-child(3) { transition-delay: 0.3s; }
.cdetail:hover { background: var(--paper); box-shadow: 0 8px 28px rgba(20,19,15,0.08); }


/* =====================================================
   FOOTER COLUMNS
   ===================================================== */
.footer__brand,
.footer__col {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.footer__brand.in,
.footer__col.in { opacity: 1; transform: translateY(0); }
.footer__brand   { transition-delay: 0.05s; }
.footer__col:nth-child(2) { transition-delay: 0.14s; }
.footer__col:nth-child(3) { transition-delay: 0.22s; }
.footer__col:nth-child(4) { transition-delay: 0.30s; }

/* social icon hover pop */
.footer__social {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              background 0.25s var(--ease);
}
.footer__social:hover { transform: translateY(-4px) scale(1.12); }


/* =====================================================
   FLOATING ambient particles on hero
   ===================================================== */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(47,168,108,0.25);
  pointer-events: none;
  animation: particleDrift linear infinite;
  will-change: transform, opacity;
}
@keyframes particleDrift {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.6; }
  100% { transform: translateY(-120px) scale(0.4); opacity: 0; }
}


/* =====================================================
   CONTINUOUS AMBIENT ANIMATIONS
   ===================================================== */

/* mission images breathe */
.mission__left image-slot,
.mission__right image-slot {
  transition: transform 0.6s var(--ease);
}
.mission__left:hover image-slot,
.mission__right:hover image-slot {
  transform: scale(1.03);
}

/* impact image parallax wrapper */
.impact image-slot {
  transition: transform 0.5s var(--ease);
}
.impact:hover image-slot { transform: scale(1.02) translateY(-4px); }

/* play button pulse ring */
.playbtn::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,0.3);
  animation: playRing 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes playRing {
  0%,100% { transform: scale(1);   opacity: 0.4; }
  50%      { transform: scale(1.12); opacity: 0; }
}

/* ZESCO logo float */
.zesco-logo-wrap {
  animation: logoFloat 4s var(--ease) infinite alternate;
}
@keyframes logoFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* ERB badge shimmer */
.footer__erb {
  position: relative; overflow: hidden;
}
.footer__erb::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmer 3.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* scroll progress glow */
.scroll-progress {
  box-shadow: 0 0 8px rgba(47,168,108,0.5);
}

/* WA fab heartbeat */
.wa-fab {
  animation: waPulse 3s var(--ease) infinite;
}
@keyframes waPulse {
  0%,100% { box-shadow: 0 8px 28px rgba(47,168,108,0.35); }
  50%      { box-shadow: 0 8px 40px rgba(47,168,108,0.65), 0 0 0 8px rgba(47,168,108,0.1); }
}

/* btn arrow bounce on hover */
.btn .dot {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.btn:hover .dot { transform: translate(3px, -3px) scale(1.1); }

/* quote card float */
.quote-card {
  animation: quoteFloat 5s var(--ease) infinite alternate;
}
@keyframes quoteFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

/* bigword image float */
.bigword__img {
  animation: bigwordFloat 6s var(--ease) infinite alternate;
}
@keyframes bigwordFloat {
  from { transform: translate(-50%,-50%) scale(1); }
  to   { transform: translate(-50%,-50%) scale(1.04) translateY(-5px); }
}

/* darkpanel glow pulse */
.darkpanel {
  transition: box-shadow 0.4s var(--ease);
}
.darkpanel::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(47,168,108,0.07), transparent 60%);
  pointer-events: none; z-index: 1;
  animation: dpGlow 4s var(--ease) infinite alternate;
}
@keyframes dpGlow {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* secbar number color pulse */
.secbar__no {
  animation: noPulse 3s var(--ease) infinite alternate;
}
@keyframes noPulse {
  from { color: var(--muted); }
  to   { color: var(--amber-2); }
}

/* trust strip label */
.trust-strip__label {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.trust-strip.in .trust-strip__label { opacity: 1; transform: translateY(0); }