/* KONGTEAM / living engraving. The source art, logo and products stay intact. */
.hero-stage { pointer-events:none; }
.hero-stage .hero-still,.hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.hero-stage .hero-still { object-fit:cover; object-position:inherit; }
.hero-canvas { opacity:0; }
.hero-stage.motion-rendered .hero-canvas { opacity:1; }
.hero-stage.motion-rendered .hero-still { opacity:0; }
.hero-bottom { gap:20px; }
.hero-controls { display:flex; align-items:center; gap:24px; }
.motion-toggle { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:9px 12px; border:1px solid #806095; background:#140e1bd9; color:#c8b0d9; font:700 12px/1.5 var(--mono); letter-spacing:.4px; white-space:nowrap; }
.motion-toggle svg { width:15px; height:15px; stroke-width:1.8; }
.motion-toggle:hover { background:#352143; border-color:#bf8fe5; color:#f3e3ff; }
.motion-toggle[aria-pressed=true] { background:#21152c; color:#c7b3d6; }
.motion-toggle:disabled { opacity:1; cursor:default; color:#a795b5; border-color:#584562; }
.motion-toggle .play-icon { display:none; }
.motion-toggle[aria-pressed=true] .pause-icon { display:none; }
.motion-toggle[aria-pressed=true] .play-icon { display:block; }

/* Repeated sets form one continuous, slow typographic ribbon. */
.signal-strip { justify-content:flex-start; padding-inline:0; gap:0; }
.signal-track { display:flex; width:max-content; flex-shrink:0; animation:signal-drift 28s linear infinite; }
.signal-set { display:flex; align-items:center; justify-content:space-between; min-width:100vw; gap:38px; padding-right:38px; flex-shrink:0; }
@keyframes signal-drift { to { transform:translateX(-50%); } }

/* Movement follows actual interaction; controls and copy remain still. */
.product-image { transition:border-color .25s,box-shadow .25s; }
.product-image:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 28%,#c69aff1c 42%,#d8b2ff35 45%,transparent 60%); transform:translateX(-130%); }
.product-card .product-name a { transition:color .2s; }
.product-card:hover .product-name a,.product-card:focus-within .product-name a { color:#cba5f2; }
.product-card:hover .product-image,.product-card:focus-within .product-image { border-color:#8c5caa; box-shadow:0 0 25px #5a2a7c25; }
.button.primary { position:relative; overflow:hidden; }
.button.primary:before { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,#ffffff50 47%,transparent 62%); transform:translateX(-130%); pointer-events:none; }
.button.primary:hover:before,.button.primary:focus-visible:before { animation:button-current .65s ease-out; }
@keyframes button-current { to { transform:translateX(140%); } }
@media(hover:hover) and (pointer:fine) {
  .product-card:hover .product-image:after { animation:button-current .85s ease-out; }
  .product-card:hover .product-image img { transform:scale(1.055); }
}
.gallery-thumbnails button,.network-card { transition:background .2s,border-color .2s,color .2s,box-shadow .2s; }
.gallery-thumbnails button:hover,.network-card:hover { box-shadow:0 0 20px #7d35a31c; }
.bag-button { transition:color .2s; }

.motion-paused .signal-track,.motion-hidden .signal-track,.motion-obscured .signal-track { animation-play-state:paused; }
.motion-paused .button.primary:before,.motion-paused .product-image:after { animation:none!important; }
@media(max-width:760px) {
  .hero-stage { object-position:84% center; }
  .hero-bottom { align-items:flex-end; gap:12px; }
  .hero-bottom>span:first-child { max-width:175px; font-size:11px; line-height:1.7; }
  .hero-controls { gap:8px; }
  .hero-controls .index { display:none; }
  .motion-toggle { font-size:11px; letter-spacing:0; padding:9px 10px; }
  .signal-set { gap:22px; padding-right:22px; }
  .signal-track { animation-duration:23s; }
}
@media(max-width:360px) {
  .hero-bottom>span:first-child { max-width:132px; }
  .motion-toggle { font-size:10px; padding:9px 8px; gap:7px; }
}
@media(prefers-reduced-motion:reduce) {
  .signal-track,.button.primary:before,.product-image:after { animation:none!important; }
}

/* Individually tapered engraving strands and pulsing vein strokes. */
.hero-ink { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-stage:not(.motion-rendered) .hero-ink { display:none; }