/* ==========================================================================
   DonJed Energy - Motion Layer
   Strict Motion-Only Transitions & Scroll Animations
   Animates ONLY: transform, opacity, clip-path, filter.
   Zero layout shifts, zero structural changes.
   ========================================================================== */

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-dur-text: 0.9s;
  --motion-dur-fade: 0.7s;
  --motion-dur-img: 1.1s;
  --motion-stagger: 0.08s;
  --motion-dist-y: 24px;
}

/* ==========================================================================
   1. Heading Line-by-Line & Word Reveal Primitives
   ========================================================================== */
.motion-heading {
  display: block;
  opacity: 0;
}

.motion-heading.is-inview,
.motion-heading.active {
  opacity: 1;
}

.motion-line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}

.motion-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.motion-line-inner {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  opacity: 0;
  transition: transform var(--motion-dur-text) var(--motion-ease),
              opacity var(--motion-dur-text) var(--motion-ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.is-inview .motion-line-inner,
.motion-heading.is-inview .motion-line-inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Highlight Wipe primitive */
.motion-highlight {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  z-index: 1;
}

.motion-highlight::after {
  content: '';
  position: absolute;
  inset: 0.1em -0.15em 0.1em -0.15em;
  background: rgba(4, 141, 43, 0.2);
  border-radius: 6px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--motion-ease);
  z-index: -1;
}

.is-inview .motion-highlight::after,
.motion-heading.is-inview .motion-highlight::after {
  transform: scaleX(1);
  transition-delay: 0.75s;
}

/* ==========================================================================
   2. Fade Up Primitive (Paragraphs, buttons, labels, cards)
   ========================================================================== */
.motion-fade-up {
  opacity: 0;
  transform: translateY(var(--motion-dist-y));
  transition: opacity var(--motion-dur-fade) var(--motion-ease),
              transform var(--motion-dur-fade) var(--motion-ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.motion-fade-up.is-inview,
.motion-fade-up.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Harmonize existing .reveal-up with motion tokens */
.reveal-up {
  opacity: 0;
  transform: translateY(var(--motion-dist-y));
  transition: opacity var(--motion-dur-fade) var(--motion-ease),
              transform var(--motion-dur-fade) var(--motion-ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.reveal-up.active,
.reveal-up.revealed,
.reveal-up.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-up.delay-1,
.stagger-1 { transition-delay: 0.08s !important; }
.reveal-up.delay-2,
.stagger-2 { transition-delay: 0.16s !important; }
.reveal-up.delay-3,
.stagger-3 { transition-delay: 0.24s !important; }
.stagger-4 { transition-delay: 0.32s !important; }
.stagger-5 { transition-delay: 0.40s !important; }

/* ==========================================================================
   3. Image Clip-Path & Scale Reveal Primitive
   ========================================================================== */
.motion-image-reveal {
  overflow: hidden;
  clip-path: inset(10% round 32px);
  transition: clip-path var(--motion-dur-img) var(--motion-ease);
  will-change: clip-path;
}

.motion-image-reveal.is-inview {
  clip-path: inset(0 round var(--existing-radius, 12px));
}

.motion-image-reveal img,
.motion-image-reveal video,
.motion-image-reveal .motion-img-inner {
  transform: scale(1.12);
  transition: transform var(--motion-dur-img) var(--motion-ease);
  will-change: transform;
  display: block;
}

.motion-image-reveal.is-inview img,
.motion-image-reveal.is-inview video,
.motion-image-reveal.is-inview .motion-img-inner {
  transform: scale(1);
}

/* ==========================================================================
   4. Hero Section Motion
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: none !important;
}

/* Slow 1.08 -> 1 background scale entrance over 2s */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.1) 75%, transparent 100%),
    url('../images/hero_bg.png') no-repeat center 35%/cover;
  transform: scale(1.08);
  transition: transform 2s var(--motion-ease);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 0;
}

.hero.is-loaded::before {
  transform: scale(1);
}

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

/* Navigation fade in from top */
#main-header.nav-motion {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.8s var(--motion-ease), transform 0.8s var(--motion-ease);
}

#main-header.nav-motion.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Video card slide in from right */
.hero-glass-card {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s var(--motion-ease), transform 0.9s var(--motion-ease);
  transition-delay: 0.3s;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-glass-card.is-inview {
  opacity: 1;
  transform: translateX(0);
}

/* Hero actions button hover */
.hero-btn-primary,
.hero-btn-secondary {
  transition: transform 0.3s var(--motion-ease), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ==========================================================================
   5. "Why choose DonJed Energy" Section Motion
   ========================================================================== */
.wcd-images {
  will-change: transform;
}

/* Scroll-linked darkening on the grey second half of the headline */
.wcd-title-light .scroll-darken {
  display: inline;
  color: #9ca3af;
  transition: color 0.2s ease, opacity 0.2s ease;
}

body.dark .wcd-title-light .scroll-darken {
  color: #6b7280;
}

.wcd-title-light .scroll-darken.is-dark {
  color: var(--text-dark, #111827);
}

body.dark .wcd-title-light .scroll-darken.is-dark {
  color: #f9fafb;
}

/* Read more arrow hover rotation */
.wcd-read-more {
  transition: transform 0.3s var(--motion-ease) !important;
}

.wcd-read-more:hover {
  transform: translateY(-2px) !important;
}

.wcd-read-more .wcd-arrow svg {
  transition: transform 0.3s var(--motion-ease);
}

.wcd-read-more:hover .wcd-arrow svg {
  transform: rotate(45deg);
}

/* Avatar stack & stars entrance */
.wcd-avatars img {
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.5s var(--motion-ease), opacity 0.5s var(--motion-ease);
}

.wcd-customers.is-inview .wcd-avatars img {
  transform: scale(1);
  opacity: 1;
}

.wcd-customers.is-inview .wcd-avatars img:nth-child(1) { transition-delay: 0.08s; }
.wcd-customers.is-inview .wcd-avatars img:nth-child(2) { transition-delay: 0.16s; }
.wcd-customers.is-inview .wcd-avatars img:nth-child(3) { transition-delay: 0.24s; }

.wcd-stars svg {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.4s var(--motion-ease), opacity 0.4s var(--motion-ease);
}

.wcd-customers.is-inview .wcd-stars svg {
  transform: scale(1);
  opacity: 1;
}

.wcd-customers.is-inview .wcd-stars svg:nth-child(1) { transition-delay: 0.28s; }
.wcd-customers.is-inview .wcd-stars svg:nth-child(2) { transition-delay: 0.34s; }
.wcd-customers.is-inview .wcd-stars svg:nth-child(3) { transition-delay: 0.40s; }
.wcd-customers.is-inview .wcd-stars svg:nth-child(4) { transition-delay: 0.46s; }
.wcd-customers.is-inview .wcd-stars svg:nth-child(5) { transition-delay: 0.52s; }

/* Feature cards stagger & icon entrance */
.wcd-feature {
  transition: transform 0.3s var(--motion-ease), box-shadow 0.3s var(--motion-ease) !important;
}

.wcd-feature:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

body.dark .wcd-feature:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.wcd-feature .wcd-feature-icon {
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.6s var(--motion-ease), opacity 0.6s var(--motion-ease);
  transition-delay: 0.18s;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.wcd-feature.is-inview .wcd-feature-icon {
  transform: scale(1);
  opacity: 1;
}

/* ==========================================================================
   6. "Services" Section Motion
   ========================================================================== */
.services-cluster-giant-title {
  will-change: transform;
}

.services-cluster-giant-title .motion-line-inner {
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform 0.9s var(--motion-ease), opacity 0.9s var(--motion-ease);
}

.services-cluster-giant-title.is-inview .motion-line-inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Service cards hover elevation, thumb scale, and read-more nudge */
.service-cluster-card {
  transition: transform 0.3s var(--motion-ease),
              box-shadow 0.3s var(--motion-ease),
              background 0.3s ease,
              border-color 0.3s ease !important;
}

.service-cluster-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(4, 141, 43, 0.08) !important;
}

body.dark .service-cluster-card:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(4, 141, 43, 0.15) !important;
}

.service-cluster-card .service-card-thumb {
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.6s var(--motion-ease), opacity 0.6s var(--motion-ease);
  transition-delay: 0.15s;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.service-cluster-card.is-inview .service-card-thumb {
  transform: scale(1);
  opacity: 1;
}

.service-cluster-card:hover .service-card-thumb {
  transform: scale(1.06) !important;
}

.service-cluster-card .service-read-more-btn {
  transition: transform 0.25s var(--motion-ease), background-color 0.25s ease, color 0.25s ease !important;
}

.service-cluster-card:hover .service-read-more-btn {
  transform: translateX(4px);
}

/* ==========================================================================
   7. Financing & Instalment Plans Section Motion
   ========================================================================== */
.modern-card {
  transition: transform 0.3s var(--motion-ease), box-shadow 0.3s var(--motion-ease) !important;
}

.modern-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06) !important;
}

body.dark .modern-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3) !important;
}

.modern-card-action svg {
  transition: transform 0.25s var(--motion-ease);
}

.modern-card:hover .modern-card-action svg {
  transform: translateX(4px);
}

/* ==========================================================================
   8. Project Showcase Cards Motion
   ========================================================================== */
.showcase-project-card {
  overflow: hidden;
  clip-path: inset(10% round 32px);
  transition: clip-path 1.1s var(--motion-ease),
              transform 0.35s var(--motion-ease),
              box-shadow 0.35s ease !important;
  will-change: clip-path, transform;
}

.showcase-project-card.is-inview {
  clip-path: inset(0 round 28px);
}

.showcase-project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28) !important;
}

.showcase-project-card .project-arrow-circle svg,
.showcase-project-card .project-start-btn svg {
  transition: transform 0.3s var(--motion-ease);
}

.showcase-project-card:hover .project-arrow-circle svg {
  transform: rotate(45deg);
}

.showcase-project-card:hover .project-start-btn svg {
  transform: translateX(4px);
}

/* ==========================================================================
   9. Product Grid Cards Motion
   ========================================================================== */
.premium-card {
  transition: transform 0.3s var(--motion-ease), box-shadow 0.3s var(--motion-ease) !important;
}

.premium-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08) !important;
}

body.dark .premium-card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3) !important;
}

.premium-card-img {
  transition: transform 0.5s var(--motion-ease) !important;
}

.premium-card:hover .premium-card-img {
  transform: scale(1.05) !important;
}

.premium-btn-add {
  transition: transform 0.15s ease, background-color 0.2s ease !important;
}

.premium-btn-add:active {
  transform: scale(0.96) !important;
}

.premium-link svg {
  transition: transform 0.25s var(--motion-ease);
}

.premium-link:hover svg {
  transform: translateX(4px);
}

/* ==========================================================================
   10. Footer Wordmark & Link Columns Motion
   ========================================================================== */
.footer-giant-mask {
  display: block;
  overflow: hidden;
  margin-bottom: 80px;
}

.footer-giant-mask .footer-giant-text {
  margin-bottom: 0 !important;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
  transition: transform 1.1s var(--motion-ease), opacity 1.1s var(--motion-ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.footer-giant-mask.is-inview .footer-giant-text {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

@media (max-width: 767px) {
  .footer-giant-mask {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   11. Accessibility (prefers-reduced-motion)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .motion-line-inner,
  .motion-fade-up,
  .reveal-up,
  .motion-image-reveal,
  .motion-image-reveal img,
  .motion-image-reveal video,
  .hero-glass-card,
  #main-header.nav-motion,
  .hero::before,
  .footer-giant-mask .footer-giant-text,
  .service-cluster-card .service-card-thumb,
  .wcd-feature .wcd-feature-icon,
  .wcd-avatars img,
  .wcd-stars svg {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
  }

  .wcd-title-light .scroll-darken {
    color: var(--text-dark, #111827) !important;
  }

  body.dark .wcd-title-light .scroll-darken {
    color: #f9fafb !important;
  }
}