/* Shared motion layer: hero slideshow, page-head drift, scroll reveal, product hover.
   Loaded after each page's inline <style>, so these rules win ties by source order.
   Everything is transform/opacity only; the reduced-motion block turns it all off. */

/* ---- Home hero slideshow ------------------------------------------------ */

.hero-media{position:absolute;inset:0;z-index:0;pointer-events:none;}

/* .hero .shot{opacity:.42} exists on both home pages, so the slide rules must
   outrank it explicitly rather than relying on a plain .gy-slide class. */
.hero .shot.gy-slide{
  opacity:0;
  transition:opacity 1.1s ease;
  will-change:opacity,transform;
}
.hero .shot.gy-slide.is-on{
  opacity:.46;
  animation:gyKb 8s ease-out both;
}
@keyframes gyKb{
  from{transform:scale(1.02);}
  to{transform:scale(1.08);}
}

/* Right-hand rail: 01-04 + a small pause control. Hidden until JS is ready. */
.hero-rail{
  position:absolute;right:0;top:50%;z-index:3;
  display:none;flex-direction:column;gap:1px;
  transform:translateY(-50%);
  padding:18px 30px 16px 42px;
  background:linear-gradient(90deg,rgba(10,16,28,0),rgba(10,16,28,.46));
}
.gy-ready .hero-rail{display:flex;}
.hero-rail button{
  position:relative;display:flex;align-items:baseline;gap:10px;
  margin:0;padding:7px 0;border:0;background:none;
  -webkit-appearance:none;appearance:none;
  color:rgba(255,255,255,.52);cursor:pointer;text-align:left;
  transition:color .25s;
}
.hero-rail button:hover{color:rgba(255,255,255,.9);}
.hero-rail button:focus-visible{outline:1px solid #fff;outline-offset:3px;}
.hero-rail button.is-on{color:#fff;}
.hero-rail .n{
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:10px;letter-spacing:.08em;opacity:.72;
}
.hero-rail .t{
  font-family:var(--f-body,system-ui,sans-serif);
  font-size:11.5px;letter-spacing:.16em;
}
.hero-rail button i{
  position:absolute;left:-18px;top:50%;width:1px;height:20px;
  transform:translateY(-50%);overflow:hidden;
  background:rgba(255,255,255,.22);
}
.hero-rail button i::after{
  content:"";position:absolute;inset:0;background:#fff;
  transform:scaleY(0);transform-origin:top;
}
.hero-rail button.is-on i::after{animation:gyRail 7s linear both;}
@keyframes gyRail{
  from{transform:scaleY(0);}
  to{transform:scaleY(1);}
}
.gy-paused .hero-rail button.is-on i::after{animation-play-state:paused;}

.hero-rail .gy-pause{
  display:flex;align-items:center;gap:8px;
  margin-top:9px;padding-top:11px;
  border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--f-body,system-ui,sans-serif);
  font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.55);
}
.hero-rail .gy-pause::before{
  content:"";display:block;width:9px;height:9px;
  background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 6px,currentColor 6px 9px);
}
.gy-paused .hero-rail .gy-pause::before{
  width:0;height:0;background:none;
  border-left:9px solid currentColor;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
.gy-paused .hero-rail .gy-pause{color:#fff;}

@media (max-width:1024px){
  .hero-rail{display:none !important;}
}

/* ---- Content-page header photo ------------------------------------------ */

.pagehead .shot{
  will-change:transform;
  animation:gyDrift 26s ease-in-out infinite alternate;
}
@keyframes gyDrift{
  from{transform:scale(1);}
  to{transform:scale(1.045);}
}

/* ---- Scroll reveal ------------------------------------------------------ */

.gy-rv{opacity:0;}
.gy-rv.gy-in{
  animation:gyIn .72s cubic-bezier(.2,.7,.2,1) var(--gy-d,0ms) both;
}
@keyframes gyIn{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

/* ---- Home product grid hover ------------------------------------------- */

.prodgrid .ph{
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
  backface-visibility:hidden;
}
.prodgrid figure:hover .ph,
.prodgrid figure:focus-within .ph{transform:scale(1.045);}

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .hero .shot.gy-slide{transition:none;animation:none !important;}
  .hero .shot.gy-slide.is-on{animation:none !important;}
  .hero-rail button i::after{animation:none !important;transform:scaleY(1);}
  .hero-rail .gy-pause{display:none;}
  .pagehead .shot{animation:none !important;transform:none !important;}
  .gy-rv{opacity:1 !important;}
  .gy-rv.gy-in{animation:none !important;}
  .prodgrid .ph{transition:none;}
  .prodgrid figure:hover .ph,
  .prodgrid figure:focus-within .ph{transform:none;}
}