/* Motion and conversion layer. Base layouts live in home.css and catalog.css. */
.marquee{--gap:22px;display:flex;gap:var(--gap);overflow:hidden}
.marquee-track{display:flex;flex-shrink:0;align-items:center;gap:var(--gap);min-width:100%;justify-content:space-around;animation:fx-marquee var(--duration,40s) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes fx-marquee{to{transform:translateX(calc(-100% - var(--gap)))}}

html .shop-note{padding:8px 0;text-align:left}
.shop-note .marquee{--gap:0px;--duration:38s}
.shop-note .marquee-track span{white-space:nowrap}
.shop-note .marquee-track span::after{content:'✦';margin:0 22px}

.shelf-strip{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:var(--paper);margin:0 0 36px}
.shelf-strip .marquee{--duration:70s;padding:16px 0 20px 16px}
.strip-cover{flex:0 0 auto;display:block;width:200px;border:2px solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.strip-cover img{display:block;width:100%;height:auto;aspect-ratio:1.5;object-fit:cover;border-bottom:2px solid var(--ink)}
.strip-cover span{display:block;padding:8px 10px;font-size:13px;font-weight:900;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-cover:hover,.strip-cover:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

.hero-stats{display:flex;gap:10px;margin:28px 0 0;padding:0;max-width:520px}
.hero-stats div{flex:1;min-width:0;display:flex;flex-direction:column-reverse;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:9px 14px;background:var(--mint)}
.hero-stats div:nth-child(2){background:var(--blue)}
.hero-stats div:nth-child(3){background:var(--pink)}
.hero-stats dd{margin:0;font-size:30px;line-height:1;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-stats dt{margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

html.fx .fx-reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),filter .6s ease;transition-delay:var(--fx-delay,0ms)}
html.fx .fx-reveal.fx-in{opacity:1;transform:none;filter:none}

[data-tilt]{position:relative;overflow:hidden}
[data-tilt] img{transition:transform .3s ease-out}
[data-tilt].is-active img{transform:perspective(700px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) scale(1.06);transition-duration:.08s}
[data-tilt]::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(240px circle at var(--fx-x,50%) var(--fx-y,50%),#ffffff80,transparent 65%)}
[data-tilt].is-active::after{opacity:1}
[data-magnet]{transition:translate .2s ease-out,transform .15s}

.fx-spark{position:fixed;z-index:80;width:9px;height:9px;border:2px solid var(--ink);pointer-events:none}
.fx-progress{position:absolute;left:0;right:0;bottom:-7px;height:4px;background:var(--pink);border-bottom:1px solid var(--ink);transform:scaleX(0);transform-origin:left;pointer-events:none}

.edition-previews a{position:relative;cursor:zoom-in}
.edition-previews a::after{content:'Enlarge ↗';position:absolute;right:10px;bottom:10px;background:var(--yellow);border:2px solid var(--ink);padding:3px 8px;font-size:12px;font-weight:900;text-transform:uppercase;transition:transform .15s}
.edition-previews a:hover::after{transform:translate(-2px,-2px)}
.fx-lightbox{padding:0;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--paper);max-width:min(92vw,920px);max-height:92vh;overflow:auto}
.fx-lightbox::backdrop{background:#0b0b0fcc}
.fx-lightbox-bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 10px 8px 14px;background:var(--yellow);border-bottom:3px solid var(--ink);font-size:13px;font-weight:800}
.fx-lightbox-close{flex-shrink:0;border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);padding:6px 10px;font-size:13px;font-weight:900;cursor:pointer}
.fx-lightbox img{display:block;max-width:100%;height:auto;margin:auto}

.bridge{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;align-items:center;margin:0 0 56px;padding:30px;background:var(--yellow);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.bridge h2{font-size:30px;text-transform:uppercase;margin:16px 0 8px}
.bridge p{color:var(--ink);margin:0}
.bridge .eyebrow{background:var(--paper)}
.bridge-items{display:grid;gap:14px}
.bridge-item{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:10px;background:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.bridge-item:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.bridge-item img{width:96px;height:64px;object-fit:cover;border:2px solid var(--ink)}
.bridge-item b{display:block;font-size:16px;line-height:1.25}
.bridge-item small{display:block;font-size:13px;color:var(--muted);line-height:1.4}
.bridge-item strong{font-size:18px;white-space:nowrap}

.related{margin:0 0 64px}
.related h2{font-size:30px;text-transform:uppercase;margin:0 0 22px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.related-card{display:flex;flex-direction:column;background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.related-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.related-cover{display:block;aspect-ratio:1.5;border-bottom:3px solid var(--ink)}
.related-cover img{display:block;width:100%;height:100%;object-fit:cover}
.related-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 18px}
.related-body small{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.related-body b{font-size:20px;line-height:1.15;letter-spacing:-.02em}
.related-body>span{font-size:14px;line-height:1.55;color:var(--muted)}
.related-body em{margin-top:auto;padding-top:8px;font-style:normal;font-size:13px;font-weight:900;text-transform:uppercase}

.sticky-cta{display:none}
@media(max-width:900px){
  html.fx .sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 14px;background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:translateY(calc(100% + 30px));visibility:hidden;transition:transform .25s,visibility 0s .25s}
  html.fx .sticky-cta.is-visible{transform:none;visibility:visible;transition:transform .25s}
  .sticky-cta b{display:block;font-size:14px;line-height:1.2}
  .sticky-cta small{display:block;font-size:12px;color:var(--muted)}
  .sticky-cta .button{flex-shrink:0;padding:10px 12px;font-size:12px}
  .bridge{grid-template-columns:1fr;gap:20px;padding:24px}
  .related-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 10px 14px 0}
  .related-card{scroll-snap-align:start}
}
@media(max-width:580px){
  .hero-stats{gap:8px}
  .hero-stats div{padding:8px 10px}
  .hero-stats dd{font-size:24px}
  .hero-stats dt{font-size:11px;letter-spacing:.04em}
  .strip-cover{width:160px}
  .shelf-strip{margin-bottom:28px}
  .bridge h2,.related h2{font-size:24px}
  .bridge-item{grid-template-columns:72px 1fr}
  .bridge-item img{width:72px;height:48px}
  .bridge-item strong{grid-column:2;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;scrollbar-width:thin}
  .marquee-track{min-width:0;justify-content:flex-start}
  .marquee-track[aria-hidden]{display:none}
  .shop-note .marquee{justify-content:center;flex-wrap:wrap;overflow:hidden}
  .shop-note .marquee-track{flex-wrap:wrap;justify-content:center;row-gap:4px}
}
@media print{html.fx .fx-reveal{opacity:1;transform:none;filter:none}.sticky-cta,.fx-progress{display:none!important}}