/*
 * Unity Electro Pte Ltd — Global Motion Foundation
 * Reusable premium animation utilities
 * Version 1.0 | 2026
 *
 * Utilities:
 *   1. ScrollReveal  — [data-anim] extended variants + [data-stagger] children
 *   2. AnimatedHero  — hero blueprint grid drift
 *   3. FloatingImageCard — .float-card + .float-card-glow
 *   4. AnimatedStatsCounter — .stat-counter-wrap underline sweep
 *   5. MotionGridOverlay — .motion-grid-section animated dot grid
 *   6. AnimatedProcessTimeline — .anim-timeline trace + staggered items
 *   7. Trace Lines — .trace-line scaleX reveal
 *   8. Stagger delay utilities
 */

/* ============================================================
   1. SCROLL REVEAL — additional data-anim variants
      Core [data-anim] base lives in style.css; this extends it.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-anim="fade-down"]  { opacity: 0; transform: translateY(-28px); }
  [data-anim="zoom-in"]    { opacity: 0; transform: scale(0.93); }
  [data-anim="blur-in"]    { opacity: 0; filter: blur(8px); }
  [data-anim="fade-down"].anim-done,
  [data-anim="zoom-in"].anim-done,
  [data-anim="blur-in"].anim-done { opacity: 1; transform: none; filter: none; }

  /* Stagger reveal — applied via JS setting --stagger-delay on each child */
  [data-stagger] > * {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity  0.62s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--stagger-delay, 0s);
  }
  [data-stagger].stagger-done > * {
    opacity: 1;
    transform: none;
  }
}

/* Always show when reduced-motion is on */
@media (prefers-reduced-motion: reduce) {
  [data-anim="fade-down"],
  [data-anim="zoom-in"],
  [data-anim="blur-in"] { opacity: 1; transform: none; filter: none; }
  [data-stagger] > * { opacity: 1; transform: none; }
}


/* ============================================================
   2. ANIMATED HERO — blueprint grid subtle drift
      Extends the static .hero-blueprint in style.css.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hero-blueprint {
    animation: blueprintDrift 28s linear infinite;
    will-change: background-position;
  }
}

@keyframes blueprintDrift {
  from { background-position: 0 0; }
  to   { background-position: 42px 42px; }
}

/* Corner accent traces — placed as children via JS */
.hero-corner {
  position: absolute;
  width: 72px;
  height: 72px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: cornerFadeIn 1.2s 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-corner--tl { top: 2rem;    left: 2rem;    border-right: none; border-bottom: none; }
.hero-corner--tr { top: 2rem;    right: 2rem;   border-left: none;  border-bottom: none; }
.hero-corner--bl { bottom: 2rem; left: 2rem;    border-right: none; border-top: none;    }
.hero-corner--br { bottom: 2rem; right: 2rem;   border-left: none;  border-top: none;    }

@keyframes cornerFadeIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-corner { animation: none; opacity: 0.6; }
}


/* ============================================================
   2b. HERO FLOAT PANEL — reusable floating card for inner heroes
       Add <div class="hero-float-panel"> as second child inside
       .hero-premium-inner. JS handles the glow via .float-card.
   ============================================================ */
.hero-float-panel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3rem 0;
}
.hfp-frame {
  position: relative;
}
.hfp-frame img {
  width: 340px;
  height: 256px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow:
    0 28px 72px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.12);
  animation: hfpSlideIn 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hfpSlideIn {
  from { opacity: 0; transform: translateX(32px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.hfp-badge {
  position: absolute;
  font-family: var(--font-heading, 'Montserrat', sans-serif);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.38rem 0.95rem;
  border-radius: 4px;
  white-space: nowrap;
  animation: hfpBadgePop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hfp-badge--top {
  top: -0.85rem;
  right: 1.25rem;
  background: var(--ue-red, #D22630);
  box-shadow: 0 6px 18px rgba(210,38,48,.42);
  animation-delay: 0.9s;
}
.hfp-badge--bot {
  bottom: -0.85rem;
  left: 1.25rem;
  background: var(--ue-blue, #003087);
  box-shadow: 0 6px 18px rgba(0,48,135,.42);
  animation-delay: 1.1s;
}
@keyframes hfpBadgePop {
  from { opacity: 0; transform: translateY(8px) scale(0.88); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) { .hero-float-panel { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hfp-frame img { animation: none; }
  .hfp-badge     { animation: none; }
}


/* ============================================================
   3. FLOATING IMAGE CARD
      Add class="float-card" to any card/image wrapper.
      JS auto-injects .float-card-glow inside.
   ============================================================ */
.float-card {
  position: relative;
  animation: floatDrift 13s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatDrift {
  0%,  100% { transform: translateY(0px)   rotate(0deg); }
  30%        { transform: translateY(-9px)  rotate(0.35deg); }
  65%        { transform: translateY(-4px)  rotate(-0.25deg); }
}

.float-card-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(ellipse at center, rgba(0,48,135,.32) 0%, transparent 68%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,  100% { opacity: 0.45; transform: scale(1); }
  50%        { opacity: 0.75; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .float-card     { animation: none; }
  .float-card-glow { animation: none; opacity: 0.35; }
}


/* ============================================================
   4. ANIMATED STATS COUNTER
      Wrap the stat number element with <span class="stat-counter-wrap">.
      JS adds .counted when the counter enters the viewport.
   ============================================================ */
.stat-counter-wrap {
  display: inline-block;
  position: relative;
}
.stat-counter-wrap::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ue-red, #D22630);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-counter-wrap.counted::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .stat-counter-wrap::after { transition: none; transform: scaleX(1); }
}


/* ============================================================
   5. MOTION GRID OVERLAY
      Add class="motion-grid-section" to any <section>.
      A slow-drifting engineering dot grid appears behind content.
   ============================================================ */
.motion-grid-section {
  position: relative;
  isolation: isolate;
}
.motion-grid-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(0,48,135,0.07) 1px, transparent 1px);
  background-size: 36px 36px;
  animation: dotGridDrift 24s linear infinite;
  will-change: background-position;
}
.motion-grid-section > * {
  position: relative;
  z-index: 1;
}

@keyframes dotGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 36px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-grid-section::before { animation: none; }
}


/* ============================================================
   6. ANIMATED PROCESS TIMELINE
      Structure:
        <ol class="anim-timeline">
          <li class="anim-timeline-item"> ... </li>
        </ol>
      JS adds .traced to the list and .revealed to each item.
   ============================================================ */
.anim-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Background track */
.anim-timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--ue-border, #e2e8f0);
  z-index: 0;
}

/* Animated fill */
.anim-timeline::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 28px;
  width: 2px;
  height: 0;
  background: linear-gradient(
    to bottom,
    var(--ue-blue, #003087) 0%,
    var(--ue-red, #D22630) 100%
  );
  z-index: 1;
  transition: height 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-timeline.traced::after {
  height: calc(100% - 56px);
}

.anim-timeline-item {
  position: relative;
  padding: 0 0 2rem 56px;
  z-index: 2;
}

/* Stagger slide-in */
@media (prefers-reduced-motion: no-preference) {
  .anim-timeline-item {
    opacity: 0;
    transform: translateX(-18px);
    transition:
      opacity  0.58s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--timeline-delay, 0s);
  }
  .anim-timeline-item.revealed {
    opacity: 1;
    transform: none;
  }
}

/* Node dot */
.anim-timeline-item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ue-border, #e2e8f0);
  z-index: 3;
  transition:
    border-color 0.4s ease,
    background   0.4s ease;
  transition-delay: var(--timeline-delay, 0s);
}
.anim-timeline-item.revealed::before {
  border-color: var(--ue-blue, #003087);
  background: var(--ue-blue, #003087);
}

@media (prefers-reduced-motion: reduce) {
  .anim-timeline::after { height: calc(100% - 56px); transition: none; }
  .anim-timeline-item   { opacity: 1; transform: none; transition: none; }
  .anim-timeline-item::before { border-color: var(--ue-blue); background: var(--ue-blue); }
}


/* ============================================================
   7. TRACE LINE
      Add class="trace-line" to a <div> or <hr> to get
      a scaleX-reveal line when it scrolls into view.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .trace-line {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--ue-blue, #003087) 40%,
      var(--ue-red, #D22630) 60%,
      transparent 100%
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .trace-line.anim-done {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trace-line {
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--ue-blue, #003087) 40%,
      var(--ue-red, #D22630) 60%,
      transparent 100%
    );
  }
}


/* ============================================================
   8. STAGGER DELAY UTILITIES — CSS-only shorthand classes
      Apply to direct children inside [data-stagger] groups,
      or use standalone for manual control.
   ============================================================ */
.sd-1 { --stagger-delay: 0.05s; }
.sd-2 { --stagger-delay: 0.12s; }
.sd-3 { --stagger-delay: 0.19s; }
.sd-4 { --stagger-delay: 0.26s; }
.sd-5 { --stagger-delay: 0.33s; }
.sd-6 { --stagger-delay: 0.40s; }
.sd-7 { --stagger-delay: 0.47s; }
.sd-8 { --stagger-delay: 0.54s; }


/* ============================================================
   9. PAGE TRANSITION — fade out on navigate; pages arrive at
      full opacity so no dark or white flash on load.
      JS adds .page-exit on same-origin link clicks.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body {
    transition: opacity 0.15s ease;
  }
  body.page-exit {
    opacity: 0;
    pointer-events: none;
  }
}


/* ============================================================
   10. BUTTON MICRO-INTERACTIONS — lift, shadow, press
       Overrides style.css transition for enhanced feel.
       Scoped to no-preference to avoid layout-shift on mobile.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    /* replace 'all' with explicit properties so transform has its own easing */
    transition:
      background-color 0.2s ease,
      border-color     0.2s ease,
      color            0.2s ease,
      box-shadow       0.22s ease,
      transform        0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active {
    transform: scale(0.97) !important;
    transition-duration: 0.08s !important;
  }
  /* Per-variant shadow on hover */
  .btn-primary:hover     { box-shadow: 0 8px 24px rgba(0, 48, 135, 0.32); }
  .btn-red:hover         { box-shadow: 0 8px 24px rgba(210, 38, 48, 0.30); }
  .btn-outline:hover     { box-shadow: 0 6px 18px rgba(0, 48, 135, 0.18); }
  .btn-white:hover       { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
  .btn-outline-white:hover { box-shadow: 0 6px 18px rgba(255,255,255,0.14); }
}


/* ============================================================
   11. NAV ACTIVE UNDERLINE — animated draw on page load
       The ::after underline already scaleX(0→1) on hover
       (via style.css transition). This adds an animated draw
       for the .active state so it draws in with the page reveal.
   ============================================================ */
@keyframes navUnderDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-link.active::after {
    animation: navUnderDraw 0.48s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}