/* ==========================================================================
   Dyna-K — Motion Layer. Behavior only: no new colors, no copy changes.
   Uses existing palette variables from style.css.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-med: .5s;
}

/* ---- Page load fade ---- */
body { animation: pageFadeIn .5s var(--ease-out); }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Scroll progress bar ---- */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--blue); z-index: 1000; transition: width .1s linear;
}

/* ---- Header shrink on scroll ---- */
.site-header { transition: box-shadow .3s var(--ease-out); }
.topbar { transition: margin-top .3s var(--ease-out), opacity .2s; overflow: hidden; }
.site-header.is-scrolled .topbar { margin-top: -36px; opacity: 0; }
.navbar { transition: padding .3s var(--ease-out); }
.site-header.is-scrolled .navbar { padding: 8px 0; }
.brand-logo { transition: height .3s var(--ease-out); }
@media (min-width: 901px) {
  .site-header.is-scrolled .brand-logo { height: 50px; }
}

/* ---- Hero / page-hero entrance (on load, not scroll) ---- */
.hero-copy > *, .page-hero .container > * {
  opacity: 0; transform: translateY(18px);
  animation: heroUp .7s var(--ease-out) forwards;
}
.hero-copy > *:nth-child(1), .page-hero .container > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2), .page-hero .container > *:nth-child(2) { animation-delay: .18s; }
.hero-copy > *:nth-child(3), .page-hero .container > *:nth-child(3) { animation-delay: .31s; }
.hero-copy > *:nth-child(4) { animation-delay: .44s; }
@keyframes heroUp { to { opacity: 1; transform: translateY(0); } }

.hero-carousel {
  opacity: 0; transform: translateX(24px) scale(.98);
  animation: heroCarouselIn .8s .2s var(--ease-out) forwards;
}
@keyframes heroCarouselIn { to { opacity: 1; transform: translateX(0) scale(1); } }

/* ---- Generic scroll reveal ---- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ---- Section heading underline draw-in ---- */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  height: 2px; width: 0; background: var(--blue);
  transition: width .6s var(--ease-out) .1s;
}
.section-head.revealed h2::after { width: 48px; }

/* ---- Card interactions: cursor glow + lift ---- */
.frame-card, .cat-card {
  position: relative; isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s;
}
.frame-card .spotlight, .cat-card .spotlight {
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(74,127,167,.16), transparent 70%);
  opacity: 0; transition: opacity .35s; pointer-events: none; z-index: -1;
}
.frame-card:hover .spotlight, .cat-card:hover .spotlight { opacity: 1; }
.frame-card:hover, .cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(10,25,49,0.18);
}

/* ---- Logo strip stagger (works with existing hover scale) ---- */
.logo-strip .logo-cell { transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }

/* ---- Customer logo marquee (homepage) ---- */
.logo-marquee-track { animation: marqueeScroll 34s linear infinite; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track { animation-play-state: paused; }
.logo-marquee .logo-cell img { transition: transform .3s var(--ease-out); }
.logo-marquee .logo-cell:hover img { transform: scale(1.08); }

/* ---- Buttons: shine sweep + lift ---- */
.btn, .btn--ghost { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease-out);
}
.btn:hover::before { left: 130%; }
.btn:hover, .btn--ghost:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(10,25,49,0.28);
}

/* ---- Product / facility gallery image zoom (brake, chassis, engine, turbo,
   welded-assemblies, emission-filtration, other-parts, facilities pages) ---- */
.gallery-grid .g-item img {
  transition: transform .6s var(--ease-out);
  transform: scale(1.001); /* avoids a hairline edge gap on some renderers when scaling from 1 */
}
.gallery-grid .g-item:hover img { transform: scale(1.06); }
.gallery-grid .g-item .g-cap { transition: padding-bottom .35s var(--ease-out); }
.gallery-grid .g-item:hover .g-cap { padding-bottom: 16px; }

/* ---- Stat counters ---- */
.stats-row .stat .num { font-variant-numeric: tabular-nums; }

/* ---- Respect reduced motion (on top of style.css's own rule) ---- */
@media (prefers-reduced-motion: reduce) {
  body, .hero-copy > *, .page-hero .container > *, .hero-carousel,
  .reveal, .frame-card, .cat-card, .btn, .btn--ghost,
  .gallery-grid .g-item img, .gallery-grid .g-item .g-cap,
  .logo-marquee-track {
    animation: none !important; transition: none !important;
  }
  .hero-copy > *, .page-hero .container > *, .hero-carousel, .reveal {
    opacity: 1 !important; transform: none !important;
  }
  .gallery-grid .g-item:hover img { transform: none !important; }
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  #scrollProgress { display: none; }
}
.go-link { font-family: var(--f-mono); font-size:16px; letter-spacing: .06em; color: var(--blue); display: inline-flex; align-items: center; gap: 6px; }
.go-link:hover { color: var(--blue-dark); }