/* EAS_3D — motion layer.
   Progressive: without JS, `.js` is never set and nothing is hidden. */

.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--orange);
  z-index: 250; pointer-events: none;
  transition: width .08s linear;
}

/* ---------- Reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  transition: opacity .7s var(--ease), transform .7s var(--spring);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-26px); }
.js [data-reveal="right"] { transform: translateX(26px); }
.js [data-reveal="pop"]   { transform: scale(.9); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* Headline lines wipe up from a mask */
.js [data-lines] { overflow: hidden; }
.js [data-lines] > span {
  display: block;
  transform: translateY(105%);
  transition: transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-lines].in > span { transform: translateY(0); }

/* ---------- Hero ---------- */
.js .hero-tile .eyebrow,
.js .hero-tile .lead,
.js .hero-actions {
  opacity: 0; transform: translateY(20px);
  animation: heroIn .8s var(--spring) forwards;
}
.js .hero-tile .eyebrow { animation-delay: .1s; }
.js .hero-tile .lead { animation-delay: .5s; }
.js .hero-actions { animation-delay: .62s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ---------- Stickers wobble in ---------- */
.js .sticker {
  opacity: 0;
  transform: rotate(-6deg) scale(.5);
  animation: stickerIn .6s var(--spring) forwards;
  animation-delay: var(--d, .8s);
}
@keyframes stickerIn {
  to { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.sticker { transition: transform .3s var(--spring); }
.tile:hover .sticker, .product:hover .sticker { transform: rotate(3deg) scale(1.06); }

/* ---------- Media zoom ---------- */
.tile-media .tile-img, .product .thumb, .piece .thumb {
  transition: transform .6s var(--ease);
}
.tile-link:hover .tile-img, .product:hover .thumb, .piece:hover .thumb { transform: scale(1.05); }

/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn-ink::before { background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%); }

.arrow-link .ar { display: inline-block; transition: transform .3s var(--spring); }
.arrow-link:hover .ar { transform: translateX(5px); }

/* ---------- Wordmark ---------- */
.wordmark span { display: inline-block; transition: transform .35s var(--spring); }
.wordmark:hover span { transform: translateY(-3px) rotate(-8deg); }

/* ---------- Count-up ---------- */
.tile-stat { font-variant-numeric: tabular-nums; }

/* ---------- Filtering ---------- */
.gallery .piece, .rail .product { transition: opacity .3s ease, transform .4s var(--spring), box-shadow .4s var(--ease); }
.filtering-out { opacity: 0; transform: scale(.94); }

/* ---------- Forms ---------- */
.file-list div, .form-status.show { animation: fileIn .4s var(--spring) both; }
@keyframes fileIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-lines] > span { transform: none !important; transition: none !important; }
  .js .sticker { opacity: 1 !important; transform: rotate(-6deg) !important; animation: none !important; }
  .marquee-track { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}