/* Created by Halo — cinematic scroll motion layer
   Keeps the existing Halo visual identity intact and adds only motion behavior. */
:root{
  --halo-motion-gold: var(--gold, #D4A847);
  --halo-motion-ease: cubic-bezier(.16,1,.3,1);
}

.halo-scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  z-index:10050;
  pointer-events:none;
  background:rgba(255,255,255,.035);
}
.halo-scroll-progress>span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(212,168,71,.28),var(--halo-motion-gold),rgba(245,208,122,.9));
  box-shadow:0 0 18px rgba(212,168,71,.55);
  will-change:transform;
}

body.halo-motion-enhanced .halo-motion-layer{
  will-change:transform,opacity,filter,clip-path;
  backface-visibility:hidden;
}
body.halo-motion-enhanced .halo-parallax{
  will-change:transform;
  transform:translateZ(0);
}
body.halo-motion-enhanced .halo-motion-heading{
  transform-origin:0 50%;
  will-change:transform,opacity,filter,clip-path;
}
body.halo-motion-enhanced .halo-motion-card{
  will-change:transform,opacity,filter;
  transform-style:preserve-3d;
}

/* Home: reference-style horizontal scrub showcase. Only enabled by JS on larger screens. */
@media (min-width: 768px){
  body.halo-motion-enhanced #case-studies.halo-horizontal{
    overflow:clip;
  }
  body.halo-motion-enhanced #case-studies.halo-horizontal .cs-grid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    align-items:stretch;
    width:max-content;
    max-width:none;
    gap:clamp(18px,2.2vw,36px);
    padding-right:18vw;
    will-change:transform;
  }
  body.halo-motion-enhanced #case-studies.halo-horizontal .cs-card{
    flex:0 0 min(64vw,580px);
    width:min(64vw,580px);
    min-height:clamp(390px,56vh,610px);
  }
  body.halo-motion-enhanced #scroll-transform.halo-pin-story{
    overflow:clip;
  }
  body.halo-motion-enhanced #scroll-transform.halo-pin-story .st-item{
    transform-origin:50% 50%;
    will-change:transform,opacity,filter;
  }
  body.halo-motion-enhanced .pkg-card,
  body.halo-motion-enhanced .product-card,
  body.halo-motion-enhanced .poster-card,
  body.halo-motion-enhanced .result-image-card{
    transform-style:preserve-3d;
    backface-visibility:hidden;
  }
}

/* Subtle scroll-linked image treatment shared by portfolio and Vault. */
body.halo-motion-enhanced .halo-image-reveal{
  overflow:hidden;
  isolation:isolate;
}
body.halo-motion-enhanced .halo-image-reveal>img,
body.halo-motion-enhanced img.halo-image-reveal{
  will-change:transform,filter,opacity;
}

/* Desktop magnetic buttons get a tiny lift without changing their base design. */
@media (hover:hover) and (pointer:fine){
  body.halo-motion-enhanced .halo-magnetic{
    will-change:transform;
    transform:translateZ(0);
  }
}

/* Mobile: preserve the cinematic feel but never fight touch scrolling. */
@media (max-width: 767px){
  .halo-scroll-progress{height:2px;}
  body.halo-motion-enhanced .halo-motion-layer,
  body.halo-motion-enhanced .halo-parallax,
  body.halo-motion-enhanced .halo-motion-card{
    will-change:auto;
  }
  body.halo-motion-enhanced #case-studies .cs-grid{
    transform:none !important;
  }
  body.halo-motion-enhanced #case-studies .cs-card{
    width:auto;
    min-height:0;
  }
}

/* Accessibility: movement is removed while all content stays visible and usable. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  .halo-scroll-progress{display:none !important;}
  body.halo-motion-enhanced *,
  body.halo-motion-enhanced *::before,
  body.halo-motion-enhanced *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  body.halo-motion-enhanced .halo-motion-layer,
  body.halo-motion-enhanced .halo-motion-heading,
  body.halo-motion-enhanced .halo-motion-card,
  body.halo-motion-enhanced .halo-parallax{
    opacity:1 !important;
    filter:none !important;
    clip-path:none !important;
    transform:none !important;
  }
}