/* ============================================================
   MackaTech — ANIMATIONS CSS
   Keyframes · GSAP hooks · Scroll reveal classes · Transitions
   ============================================================ */

/* ── 1. GSAP INITIAL STATES ─────────────────────────────────
   Elements with these classes start hidden; GSAP reveals them.
   This prevents flash of unstyled content before JS runs.     */

[data-gsap="fade-up"],
[data-gsap="fade-left"],
[data-gsap="fade-right"],
[data-gsap="card-reveal"] {
  opacity: 0;
}

/* Section header children start hidden individually
   (parent stays visible so GSAP child animations work) */
[data-gsap="section-header"] .section__label,
[data-gsap="section-header"] .section__label--dark {
  opacity: 0;
}

[data-gsap="section-header"] .section__title,
[data-gsap="section-header"] .section__title--dark {
  opacity: 0;
}

/* Hero lines start clipped below (GSAP animates yPercent: 105 → 0) */
.hero__line>span {
  display: block;
  transform: translateY(105%);
}

.hero__eyebrow,
.hero__sub,
.hero__cta-row,
.hero__scroll-indicator {
  opacity: 0;
}

/* Loader tagline starts hidden */
.loader__tagline {
  opacity: 0;
}

/* About text paragraphs: hidden by default; GSAP reveals on scroll */
.about__text p {
  opacity: 0;
  transform: translateY(20px);
}

/* ── 2. LOADER INITIAL STATES ─────────────────────────────────*/

/* Logo text: GSAP controls opacity + letter-spacing */
.loader__logo-text {
  opacity: 0;
  letter-spacing: 0.5em;
}

/* Loader logo wrapper: starts scaled down + transparent */
.loader__logo-wrap {
  opacity: 0;
  transform: scale(0.8) translateY(15px);
}

/* Loader glow: starts invisible */
.loader__logo-glow {
  opacity: 0;
  transform: scale(0.8);
}

/* Loader progress line: starts from left */
.loader__progress-line {
  transform-origin: left center;
  transform: scaleX(0);
}

/* ── 3. CHROME SHIMMER (Reusable) ───────────────────────────*/
@keyframes chrome-sweep {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* Already declared on .chrome-text in main.css.
   Here we define variant speeds for special use cases. */

.chrome-text--fast {
  animation-duration: 2s;
}

.chrome-text--slow {
  animation-duration: 7s;
}

.chrome-text--pause {
  animation-play-state: paused;
}

/* ── 4. HERO LIGHT SWEEP ────────────────────────────────────*/
@keyframes hero-sweep {
  0% {
    background-position: -100% 0;
  }

  50% {
    background-position: 200% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* ── 5. BUTTON SHIMMER ──────────────────────────────────────*/
@keyframes btn-shimmer {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* ── 6. SCROLL INDICATOR ────────────────────────────────────*/
@keyframes scroll-line {
  0% {
    transform: scaleY(1);
    transform-origin: top;
  }

  50% {
    transform: scaleY(0.2);
    transform-origin: bottom;
  }

  51% {
    transform-origin: top;
  }

  100% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* ── 7. STAT CARD SHIMMER ───────────────────────────────────*/
@keyframes shimmer-move {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* ── 8. WHATSAPP PULSE ──────────────────────────────────────
   (defined in main.css — kept as reference only) */

/* ── 9. FLOATING WA BUTTON ENTRANCE ────────────────────────*/
@keyframes wa-float-enter {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }

  70% {
    transform: scale(1.1) rotate(3deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ── 10. CONIC BORDER ROTATION ──────────────────────────────*/
@keyframes conic-rotate {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }
}

/* ── 11. FOOTER CHROME LINE ─────────────────────────────────*/
@keyframes footer-sweep {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}

/* ── 11b. HERO CHROME FLOAT ──────────────────────────────────*/
@keyframes hero-chrome-float {

  0%,
  100% {
    transform: translateY(-30px);
  }

  50% {
    transform: translateY(-38px);
  }
}

/* ── 12. AMBIENT GLOW PULSE ─────────────────────────────────*/
@keyframes glow-pulse {

  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1.0;
    transform: scale(1.05);
  }
}

.contact__glow-bg {
  animation: glow-pulse 6s ease-in-out infinite;
}

/* ── 13. HERO SCROLL LINE ───────────────────────────────────*/
@keyframes scroll-pulse {
  0% {
    opacity: 0.5;
    height: 50px;
  }

  50% {
    opacity: 1.0;
    height: 65px;
  }

  100% {
    opacity: 0.5;
    height: 50px;
  }
}

.hero__scroll-line {
  animation: scroll-pulse 2.5s ease-in-out infinite;
}

/* ── 14. SECTION REVEAL (post-JS class) ─────────────────────
   When JS runs and ScrollTrigger fires, GSAP handles the
   actual reveal. These are fallback states for no-JS.        */
.no-js [data-gsap] {
  opacity: 1 !important;
  transform: none !important;
}

.no-js .hero__line>span {
  transform: none !important;
}

/* ── 15. NAVBAR PROGRESS LINE ───────────────────────────────*/
.navbar__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--grad-chrome-sweep);
  background-size: 200% auto;
  transform-origin: left center;
  transform: scaleX(0);
  animation: shimmer-move 3s linear infinite;
  opacity: 0.7;
}

/* ── 16. CARD HOVER LIFT (reinforced) ──────────────────────*/
.service-card,
.showcase-card,
.stat-card {
  will-change: transform;
}

/* ── 17. IMAGE LAZY LOAD FADE ───────────────────────────────*/
.showcase-card__media img {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.7s var(--ease-expo), filter 0.5s ease;
}

.showcase-card__media img.is-loaded {
  opacity: 1;
}

/* ── 18. SHOWCASE CARD TRANSITION ─────────────────────────────*/
.showcase-card {
  transition:
    opacity 0.4s var(--ease-expo),
    transform 0.4s var(--ease-expo);
}

/* ── 19. PAGE TRANSITION OVERLAY ────────────────────────────*/
.page-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-black);
  z-index: 998;
  pointer-events: none;
  opacity: 0;
}

/* ── 20. (Removed — hero particles no longer used) ──────────*/

/* ── 21. NAVBAR REVEAL ANIMATION (on load) ──────────────────*/
.navbar {
  animation: navbar-reveal 0.8s var(--ease-expo) 4.5s both;
}

@keyframes navbar-reveal {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

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

/* ── 22. SERVICE CARD ICON FLOAT ────────────────────────────*/
@keyframes icon-float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }
}

.service-card:hover .service-card__icon-wrap img {
  animation: icon-float 2s ease-in-out infinite;
}

/* ── 23. ABOUT SECTION LINE DECORATOR ───────────────────────*/
.section__chrome-line {
  animation: shimmer-move 5s linear infinite;
  background-size: 300% auto;
}

/* ── 24. CURSOR BLEND ANIMATION ─────────────────────────────*/
.cursor__ring {
  transition:
    width 0.35s var(--ease-expo),
    height 0.35s var(--ease-expo),
    border-color 0.2s ease,
    background 0.25s ease,
    opacity 0.2s ease;
}

/* ── 25. SMOOTH IMAGE SCALE ON GRID ITEMS ───────────────────*/
@keyframes subtle-scale {

  0%,
  100% {
    transform: scale(1.0);
  }

  50% {
    transform: scale(1.01);
  }
}

/* ── 26. FOOTER BRAND HOVER ─────────────────────────────────*/
.footer__logo {
  transition: filter 0.3s ease;
}

.footer__logo:hover {
  filter: brightness(1.3);
}

/* ── 27. CONTACT INFO VALUE HOVER ───────────────────────────*/
.contact__info-value {
  position: relative;
  display: inline-block;
}

.contact__info-value::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c-chrome);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-expo);
}

.contact__info-value:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── 28. LOADER EXIT ANIMATION ──────────────────────────────*/
.loader.is-exiting {
  animation: loader-exit 0.9s var(--ease-expo) forwards;
}

@keyframes loader-exit {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

/* ── 29. (Removed — particleCanvas no longer used) ──────────*/

/* ── 30. LOADER CINEMATIC KEYFRAMES ─────────────────────────*/

/* Progress line sweep */
@keyframes loader-progress-sweep {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

/* ── 31. SECTION--LIGHT DARK CURSOR MIX-BLEND FIX ───────────
   Cursor uses mix-blend-mode: difference which inverts on white.
   We rely on it — the dot becomes dark on white bg, which is fine. */

/* ── 32. SECTION--LIGHT DATA-GSAP OVERRIDES ─────────────────
   Handled above in the GSAP initial states block. */