/* ============================================================
   VL SOCIAL — micro-animations layer
   Subtle, premium, reduced-motion-safe. Loaded after styles.css.
   ============================================================ */

/* ---- scroll progress bar ---- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--espresso));
  pointer-events:none;
}

/* ---- richer reveals: directional + clip ---- */
.reveal-l{opacity:0;transform:translateX(-28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-r{opacity:0;transform:translateX(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}

/* word-by-word headline rise */
.anim-words .word{display:inline-block;overflow:hidden;vertical-align:top}
.anim-words .word > span{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.anim-words.in .word > span{transform:none}

/* ---- gentle continuous float on hero imagery ---- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-figure .hero-figure-frame{animation:floatY 7s ease-in-out infinite}
.hv-centered .strip image-slot{animation:floatY2 6.5s ease-in-out infinite}
.hv-centered .strip image-slot:nth-child(2){animation-delay:-2s}
.hv-centered .strip image-slot:nth-child(3){animation-delay:-3.5s}
.hv-layered .stack image-slot.a{animation:floatY 8s ease-in-out infinite}
.hv-layered .stack image-slot.b{animation:floatY2 7s ease-in-out infinite -1.5s}
.hv-layered .blob{animation:floatY 9s ease-in-out infinite -2s}

/* ---- animated eyebrow rule (draws in when revealed) ---- */
.eyebrow::before{transition:width .7s cubic-bezier(.2,.7,.2,1) .15s}
.reveal .eyebrow::before,.sec-top .eyebrow::before{width:0}
.reveal.in .eyebrow::before,.in .eyebrow::before,.sec-top.in .eyebrow::before{width:26px}

/* ---- buttons: sheen sweep on hover ---- */
.btn-solid,.btn-light{position:relative;overflow:hidden}
.btn-solid::after,.btn-light::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.btn-solid:hover::after,.btn-light:hover::after{left:140%}

/* ---- feature service card: slow brass shimmer along the top edge ---- */
.pkg.feature{position:relative;overflow:hidden}
.pkg.feature::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:50% 100%;background-repeat:no-repeat;
  animation:edge 3.6s linear infinite;
}
@keyframes edge{0%{background-position:-60% 0}100%{background-position:160% 0}}

/* ---- portfolio: lift + image punch on hover ---- */
.pf-item{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,opacity .45s}
.pf-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-soft);z-index:2}
.pf-item image-slot{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pf-item:hover image-slot{transform:scale(1.015)}
.video-play span{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.pf-item:hover .video-play span{transform:scale(1.12)}

/* staggered entrance for grids */
.stagger > *{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.22s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(6){transition-delay:.34s}
.stagger.in > *:nth-child(7){transition-delay:.40s}
.stagger.in > *:nth-child(8){transition-delay:.46s}
.stagger.in > *:nth-child(9){transition-delay:.52s}

/* ---- process timeline: handled in styles.css; scroll-fill driven by JS ---- */

/* ---- client cells: gentle settle on hover ---- */
.client-cell image-slot{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.client-cell:hover image-slot{transform:scale(1.05)}

/* ---- nav links: subtle tracking on hover ---- */
.nav-links a{transition:letter-spacing .35s ease, color .3s}
.nav-links a:hover{letter-spacing:.12em}

/* ---- availability dot pulse ---- */
.avail .dot{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(127,169,212,.2)}50%{box-shadow:0 0 0 7px rgba(127,169,212,.05)}}

/* ---- fact rows: reveal handled by .reveal ---- */

/* reduced motion: stop all of it */
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .about-seal svg{animation:none !important}
  .hero-figure .hero-figure-frame,.hv-centered .strip image-slot,.hv-layered .stack image-slot,
  .hv-layered .blob,.pkg.feature::before,.avail .dot{animation:none !important}
  .reveal-l,.reveal-r,.anim-words .word > span,.stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
}