/* Veltan Supply — motion layer. Everything here is decorative and disabled under prefers-reduced-motion. */

/* scroll progress bar (set by motion.js) */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:80;pointer-events:none}

/* logo mark: one-time settle on load */
@keyframes markIn{from{opacity:0;transform:scale(.78) rotate(-10deg)}to{opacity:1;transform:none}}
.brand-mark{animation:markIn 1.1s var(--ease) both}

/* hero slide text rises in each time a slide becomes visible */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.slide:not([hidden]) .slide-copy > *{animation:rise .9s var(--ease) both}
.slide:not([hidden]) .slide-copy > :nth-child(1){animation-delay:.05s}
.slide:not([hidden]) .slide-copy > :nth-child(2){animation-delay:.15s}
.slide:not([hidden]) .slide-copy > :nth-child(3){animation-delay:.28s}
.slide:not([hidden]) .slide-copy > :nth-child(4){animation-delay:.42s}

/* slow cinematic zoom on slider images */
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.slide-fig img{animation:kenburns 16s ease-in-out infinite alternate;transform-origin:center}
.slide:not([hidden]) .slide-fig{animation:fadeIn 1.1s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* moving stitch line: under every page hero */
@keyframes stitchMove{from{background-position:0 0}to{background-position:40px 0}}
.page-hero{position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 24px);background-size:48px 3px;opacity:.7;animation:stitchMove 1.4s linear infinite}

/* stitch divider utility (used between sections) */
.stitch{height:3px;margin:0 auto;width:min(100% - 40px,var(--max));background:repeating-linear-gradient(90deg,var(--gold) 0 12px,transparent 12px 24px);background-size:48px 3px;opacity:.55;animation:stitchMove 1.4s linear infinite}

/* marquee band */
.marquee{overflow:hidden;background:var(--black);color:var(--ivory);border-top:1px solid #1d1d1d;border-bottom:1px solid #1d1d1d;white-space:nowrap}
.marquee-track{display:inline-flex;gap:0;animation:marq 38s linear infinite;will-change:transform}
.marquee-track span{font:600 15px/1 var(--head);letter-spacing:.2em;text-transform:uppercase;padding:20px 26px;color:#D8D2C5}
.marquee-track span::after{content:"\2014";color:var(--gold);margin-left:52px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* staggered reveal for repeated items (set up by motion.js) */
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}

/* image reveal: wipe up from the bottom */
html.js .img-fig,html.js .card-img,html.js .slide-fig{overflow:hidden}
/* feature images: wipe-in on reveal, plus a small parallax drift (--py set by motion.js) */
html.js .img-fig img,html.js .card-photo{transition:transform 1.2s var(--ease),opacity 1s var(--ease)}
html.js .img-fig img{transform:translate3d(0,var(--py,0px),0) scale(1.08);will-change:transform}
html.js .img-fig:not(.in) img,html.js .card-photo:not(.in){opacity:0;transform:scale(1.06)}
html.js .img-fig.in img{opacity:1;transform:translate3d(0,var(--py,0px),0) scale(1.08)}
html.js .card-photo.in{opacity:1;transform:none}

/* button sheen on hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none}
.btn:hover::after{left:120%}

/* link underline draws in on hover */
.text-link{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;transition:background-size .4s var(--ease);text-decoration:none}
.text-link:hover{background-size:100% 1px}

/* card lift */
.card{transition:transform .5s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px)}

/* dropdown menu entrance */
.has-menu.open .menu a{animation:rise .35s var(--ease) both}
.has-menu.open .menu a:nth-child(2){animation-delay:.03s}
.has-menu.open .menu a:nth-child(3){animation-delay:.06s}
.has-menu.open .menu a:nth-child(4){animation-delay:.09s}
.has-menu.open .menu a:nth-child(5){animation-delay:.12s}

/* hover effect for timeline and steps numbers */
.step-n{transition:transform .4s var(--ease)}
.steps li:hover .step-n,.timeline li:hover .step-n{transform:translateX(4px)}

/* faq open animation */
.faq-item[open] .faq-a{animation:rise .4s var(--ease) both}

/* reduced motion: no motion at all */
@media (prefers-reduced-motion:reduce){
  .scroll-progress,.marquee-track,.page-hero::after,.stitch,.slide-fig img,.brand-mark,.slide:not([hidden]) .slide-copy > *,.slide:not([hidden]) .slide-fig,.btn::after{animation:none!important}
  html.js .rv,html.js .img-fig img,html.js .card-photo{opacity:1!important;transform:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
  .card:hover{transform:none}
}