/* ===== H-Lab animations.css — MARKER:hl-anim-v1 (Pass A: reveal+hover+donut) ===== */

/* --- Plan 07: reduced-motion belt-and-braces (must come first) --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  body.hl-anim-ready .hl-reveal{ opacity:1 !important; transform:none !important; }
}

/* --- Plan 01: scroll-reveal engine --- */
@media (prefers-reduced-motion: no-preference){
  body.hl-anim-ready .hl-reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
    will-change:opacity, transform;
  }
  body.hl-anim-ready .hl-reveal.hl-in{
    opacity:1;
    transform:none;
  }
}

/* --- Plan 02: card hover enrichment --- */
@media (prefers-reduced-motion: no-preference){
  .hl-card{ position:relative; overflow:hidden; }
  /* keep card content above the pseudo-element flourishes */
  .hl-card>*{ position:relative; z-index:1; }

  /* top accent line that wipes in on hover (emerald -> cyan) */
  .hl-card::after{
    content:""; position:absolute; left:0; top:0; height:2px; width:100%;
    background:linear-gradient(90deg,#69f6b8,#77e6ff);
    transform:scaleX(0); transform-origin:left;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
    pointer-events:none; z-index:2;
  }
  .hl-card:hover::after{ transform:scaleX(1); }

  /* soft corner shimmer */
  .hl-card::before{
    content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
    background:radial-gradient(ellipse 60% 50% at 70% -10%, rgba(105,246,184,.10) 0%, transparent 60%);
    opacity:0; transition:opacity .4s ease;
  }
  .hl-card:hover::before{ opacity:1; }

  /* stronger glow on hover (augments existing shadow in theme.css) */
  .hl-card:hover{ box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 32px rgba(105,246,184,.10); }
}

/* --- Plan 04: donut draw-in (cover-wedge fallback; keeps center label intact) --- */
@property --hl-sweep{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

@media (prefers-reduced-motion: no-preference){
  /* cover wedge sits above the conic ring background but BELOW the ::after hole and .hl-donut__center label */
  body.hl-anim-ready .hl-donut::before{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(#060e20 var(--hl-sweep), transparent 0);
    --hl-sweep:360deg; /* fully cover the ring before reveal */
    /* z-index:auto so the ::after hole (later pseudo) and .hl-donut__center label paint on top */
    pointer-events:none;
  }
  body.hl-anim-ready .hl-donut.hl-in::before{
    animation:hl-donut-sweep 1.1s cubic-bezier(.16,1,.3,1) forwards;
  }
  /* uncover the ring clockwise: cover shrinks 360deg -> 0deg */
  @keyframes hl-donut-sweep{ from{ --hl-sweep:360deg; } to{ --hl-sweep:0deg; } }
}

/* ===== HL-ANIM-HERO-v1 (Pass B: badge dot, float tilt, orbit, scroll-hint) ===== */
@media (prefers-reduced-motion: no-preference){
  .hl-badge::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#69f6b8; box-shadow:0 0 6px #69f6b8; margin-right:9px; vertical-align:middle; animation:hl-pulse-dot 2.4s ease infinite; }
  @keyframes hl-pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.75)}}
  .hl-float-1,.hl-float-2,.hl-float-3{ transition:transform .5s cubic-bezier(.22,1,.36,1); }
  .hl-float-1{ transform:rotate(6deg); }
  .hl-float-2{ transform:rotate(-3deg); }
  .hl-float-3{ transform:rotate(-8deg); }
  /* entrance: slide up + already tilted (opacity still handled by reveal) */
  body.hl-anim-ready .hl-float-1:not(.hl-in){ transform:translateY(28px) rotate(6deg); }
  body.hl-anim-ready .hl-float-2:not(.hl-in){ transform:translateY(28px) rotate(-3deg); }
  body.hl-anim-ready .hl-float-3:not(.hl-in){ transform:translateY(28px) rotate(-8deg); }
  /* revealed: hold the tilt, overriding .hl-reveal.hl-in{transform:none} */
  body.hl-anim-ready .hl-float-1.hl-in{ transform:rotate(6deg); }
  body.hl-anim-ready .hl-float-2.hl-in{ transform:rotate(-3deg); }
  body.hl-anim-ready .hl-float-3.hl-in{ transform:rotate(-8deg); }
  /* hover straightens (must out-specify the .hl-in tilt) */
  .hl-float-1:hover,.hl-float-2:hover,.hl-float-3:hover,
  body.hl-anim-ready .hl-float-1.hl-in:hover,
  body.hl-anim-ready .hl-float-2.hl-in:hover,
  body.hl-anim-ready .hl-float-3.hl-in:hover{ transform:rotate(0); }
  .hl-orbit{ width:340px; height:340px; border:1px solid rgba(105,246,184,.14); border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:0; animation:hl-orbit-pulse 4s ease-in-out infinite; }
  @keyframes hl-orbit-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.03);opacity:.6}}
  .hl-scrollhint{ width:1px; height:46px; margin:24px auto 0; background:linear-gradient(to bottom,#69f6b8,transparent); transform-origin:top; animation:hl-scroll-line 2s ease infinite; }
  @keyframes hl-scroll-line{0%{transform:scaleY(0);transform-origin:top;opacity:0}30%{opacity:1}60%{transform:scaleY(1);transform-origin:top}61%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom;opacity:0}}
}
.hl-rightcol{ position:relative; }
.hl-orbit ~ *{ position:relative; z-index:1; }

/* ===== HL-ANIM-PARTICLES-v1 (Plan 06: particle canvas z-index safety) ===== */
#particle-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.elementor, .site, #page, main, header, footer{ position:relative; z-index:1; }

/* === HL-ANIM-EDITOR-SAFE: never hide content / never run entrance inside Elementor editor preview === */
body.elementor-editor-active .hl-reveal,
body.elementor-editor-active .hl-reveal.hl-in{opacity:1 !important;transform:none !important;}
body.elementor-editor-active .hl-float-1,
body.elementor-editor-active .hl-float-2,
body.elementor-editor-active .hl-float-3{transform:none !important;}
body.elementor-editor-active .hl-donut::before{display:none !important;}
body.elementor-editor-active .hl-orbit,
body.elementor-editor-active .hl-scrollhint{display:none !important;}

/* === HL-SERVICES-CAROUSEL === Swiper carousel styling for the Services grid (front-end only). */
.hl-carousel.swiper { padding-bottom: 42px; position: relative; }
.hl-carousel .swiper-wrapper { align-items: stretch; }
.hl-carousel .swiper-slide { height: auto; display: flex; }
/* Cards carry an inline 340px width — force them to fill the slide. */
.hl-carousel .swiper-slide > .e-con { width: 100% !important; max-width: 100% !important; }
/* Navigation arrows — emerald (Swiper v8 uses `color` for the arrow font). */
.hl-carousel { --swiper-navigation-size: 30px; }
.hl-carousel .swiper-button-prev,
.hl-carousel .swiper-button-next { color: #69f6b8; }
/* Pagination dots. */
.hl-carousel .swiper-pagination { bottom: 0; }
.hl-carousel .swiper-pagination-bullet { background: #a3aac4; opacity: .5; }
.hl-carousel .swiper-pagination-bullet-active { background: #69f6b8; opacity: 1; }
/* === /HL-SERVICES-CAROUSEL === */

/* === HL-PARTNERS-MARQUEE: continuous seamless marquee === */
.hl-marquee{overflow:hidden;max-width:100%;-webkit-mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}
.hl-marquee > .e-con-inner{width:100% !important;max-width:100% !important;}
.hl-marquee__track{display:flex;flex-wrap:nowrap;width:max-content;}
.hl-marquee__track > *{flex:0 0 auto;margin-right:24px;}
@media (prefers-reduced-motion: no-preference){
.hl-marquee__track{animation:hl-marquee-scroll 45s linear infinite;will-change:transform;}
.hl-marquee:hover .hl-marquee__track{animation-play-state:paused;}
@keyframes hl-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
}

/* === HL-PARTNERS-MARQUEE-FIX: left-align track (seamless loop) + drop blur (smooth scroll) === */
.hl-marquee, .hl-marquee > .e-con-inner{display:block !important;}
.hl-marquee > .e-con-inner{width:100% !important;max-width:100% !important;padding-left:0 !important;padding-right:0 !important;}
.hl-marquee__track{display:flex !important;flex-wrap:nowrap !important;width:max-content !important;will-change:transform;}
.hl-marquee .hl-card{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(25,37,64,0.6) !important;}

/* === HL-CLS-RESERVE: reserve carousel/marquee height so the pre-build stacked layout does not collapse on JS init (fixes CLS). Editor-guarded so cards stay editable grids. === */
#services .hl-carousel{min-height:420px;}
#partners .hl-marquee{min-height:238px;}
body:not(.elementor-editor-active) #services .hl-carousel:not(:has(.swiper-initialized)){height:420px !important;overflow:hidden !important;}
body:not(.elementor-editor-active) #partners .hl-marquee:not(:has(.hl-marquee__track)){height:238px !important;overflow:hidden !important;}
@media (max-width:1024px){
  #services .hl-carousel{min-height:454px;}
  body:not(.elementor-editor-active) #services .hl-carousel:not(:has(.swiper-initialized)){height:454px !important;}
}
@media (max-width:767px){
  #services .hl-carousel{min-height:506px;}
  body:not(.elementor-editor-active) #services .hl-carousel:not(:has(.swiper-initialized)){height:506px !important;}
  #partners .hl-marquee{min-height:190px;}
  body:not(.elementor-editor-active) #partners .hl-marquee:not(:has(.hl-marquee__track)){height:190px !important;}
}
/* === /HL-CLS-RESERVE === */