/* New Era "Products we install": one component, spliced into every public page by add-brand-products.py.
   A full-bleed section over a slow macro loop of gold and black metallic epoxy, with the manufacturers' logos on
   dark glass plates edged in bevelled gold. Desktop runs two rows drifting in opposite directions; a phone runs one
   row of large plates that drifts and swipes. Hover or tap lifts a plate and tilts it; the plate stays dark glass,
   its gold edge brightens with a soft glow, one light sweep crosses it and the logo brightens a touch. Each track holds its set twice and slides exactly one set width, so the loop
   has no seam. Motion is transform and background only. Reduced motion: the poster stands still and the plates sit
   in one static row. brand-products.js is the single place that plays the clip, tilts the plates and drives the
   phone row. */
.ne-prod{position:relative;isolation:isolate;overflow:clip;background:var(--black,#050505);padding:clamp(76px,9vw,132px) 0 clamp(64px,8vw,112px);border-block:1px solid rgba(253,190,0,.42)}
.ne-prod-media{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#070605 url(/assets/img/brand-pour-poster.jpg) center/cover no-repeat}
.ne-prod-vid{display:block;width:100%;height:100%;object-fit:cover}
.ne-prod-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 70% at 50% 50%,transparent 30%,rgba(5,5,5,.55) 100%),
  linear-gradient(180deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.66) 26%,rgba(5,5,5,.42) 52%,rgba(5,5,5,.6) 78%,rgba(5,5,5,.95) 100%)}

.ne-prod-head{position:relative;text-align:center;margin-bottom:clamp(38px,4.6vw,64px)}
.ne-prod-kick{display:inline-flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#fdbe00);line-height:1.6}
.ne-prod-kick::before,.ne-prod-kick::after{content:"";flex:none;width:28px;height:1px;background:var(--gold,#fdbe00);box-shadow:0 0 8px var(--gold,#fdbe00)}
.ne-prod-head h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(3rem,6.4vw,5.9rem);line-height:.94;margin:16px auto 20px;max-width:none;color:var(--pearl,#f6f3ec);overflow-wrap:break-word;text-wrap:balance;text-shadow:0 4px 34px rgba(0,0,0,.7)}
.ne-prod-head h2 span{display:block;color:var(--gold,#fdbe00);-webkit-text-fill-color:var(--gold,#fdbe00);background:none}
.ne-prod-head p{margin:0 auto;max-width:620px;color:#d6cfc2;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.6;text-shadow:0 1px 14px rgba(0,0,0,.8)}

.ne-prod-rows{display:grid;gap:clamp(14px,1.6vw,24px)}
.ne-prod-row{position:relative;overflow-x:clip;overflow-y:visible;padding-block:18px;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ne-prod-track{display:flex;width:max-content}
/* One ribbon at every width, so each brand draws once. On desktop brand-products.js moves the first plate to the end as it
   leaves, and one set of seven is wider than the screen plus a plate from 820 to 2560, so the loop needs no copy. */
.ne-prod-row-b{display:none}
@media(min-width:701px){.ne-prod-row-a .ne-prod-set[aria-hidden]{display:none}}
.ne-prod-set{display:flex;flex:none;list-style:none;margin:0;padding:0}

.ne-plate{--pw:clamp(220px,19vw,420px);--rx:5deg;--ry:-7deg;position:relative;flex:none;display:grid;place-items:center;width:var(--pw);aspect-ratio:16/9;margin:0 clamp(14px,1.6vw,24px) 0 0;border:2px solid transparent;border-radius:16px;overflow:hidden;container-type:inline-size;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%) padding-box,
    linear-gradient(160deg,rgba(40,35,27,.8),rgba(9,8,7,.9) 56%,rgba(24,20,14,.86)) padding-box,
    linear-gradient(140deg,#fff2bd,#d9a106 20%,#6e4e00 46%,#fdbe00 68%,#8a6200 88%,#ffe07a) border-box;
  box-shadow:inset 0 1px 0 rgba(255,238,178,.32),inset 0 -1px 0 rgba(0,0,0,.75),inset 0 0 0 1px rgba(0,0,0,.4),0 22px 44px -20px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.5);
  transform:perspective(900px) translate3d(0,0,0);transition:transform .5s cubic-bezier(.2,.75,.2,1),box-shadow .5s}
.ne-plate::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,244,205,.06) 30%,rgba(255,250,232,.32) 50%,rgba(255,244,205,.06) 70%,transparent);transform:translate3d(-170%,0,0) skewX(-18deg);animation:neSweep 8.4s cubic-bezier(.45,0,.25,1) infinite;animation-delay:calc(var(--i) * 1.2s)}
@keyframes neSweep{0%{transform:translate3d(-170%,0,0) skewX(-18deg)}13%{transform:translate3d(330%,0,0) skewX(-18deg)}100%{transform:translate3d(330%,0,0) skewX(-18deg)}}
@keyframes neSweepOnce{from{transform:translate3d(-170%,0,0) skewX(-18deg)}to{transform:translate3d(330%,0,0) skewX(-18deg)}}
.ne-plate>img{grid-area:1/1;position:relative;z-index:1;display:block;width:calc(var(--f) * 100cqi);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));transition:filter .4s,transform .5s cubic-bezier(.2,.75,.2,1)}
.ne-plate:hover,.ne-plate.is-on{transform:perspective(900px) translate3d(0,-10px,0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);z-index:2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.1),transparent 42%) padding-box,
    linear-gradient(160deg,rgba(40,35,27,.8),rgba(9,8,7,.9) 56%,rgba(24,20,14,.86)) padding-box,
    linear-gradient(140deg,#fffbe6,#ffd23f 20%,#b98a10 46%,#ffe27a 68%,#e0a90c 88%,#fff3c4) border-box;
  box-shadow:inset 0 1px 0 rgba(255,240,190,.5),inset 0 0 0 1px rgba(255,214,90,.38),0 0 0 1px rgba(253,190,0,.7),0 30px 60px -22px rgba(0,0,0,.95),0 0 30px -4px rgba(253,190,0,.55),0 0 80px -18px rgba(253,190,0,.38)}
.ne-plate:hover::after,.ne-plate.is-on::after{animation:neSweepOnce 1.05s cubic-bezier(.45,0,.25,1) 1 both}
.ne-plate:hover>img,.ne-plate.is-on>img{filter:brightness(1.12) drop-shadow(0 0 12px rgba(255,240,200,.3)) drop-shadow(0 2px 10px rgba(0,0,0,.55));transform:scale(1.03)}

.ne-prod-foot{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;margin-top:clamp(30px,3.6vw,48px)}
.ne-prod-also{margin:0;color:#b9b1a3;font-size:.98rem;line-height:1.5;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ne-prod-also b{color:#eee7d9;font-weight:600}
.ne-prod-foot .btn{margin:0}

@media(max-width:520px){.ne-prod-kick::before,.ne-prod-kick::after{display:none}.ne-prod-kick{letter-spacing:.14em}}
/* Phone: one row of large plates the reader can swipe, nudged along by brand-products.js. */
@media(max-width:700px){
  .ne-prod-row-b{display:none}
  .ne-prod-row-a{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:22px 26px;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .ne-prod-row-a::-webkit-scrollbar{display:none}
  .ne-prod-row-a .ne-prod-track{animation:none}
  .ne-plate{--pw:min(68vw,300px);margin-right:14px}
}
@media(prefers-reduced-motion:reduce){
  .ne-plate::after{animation:none;display:none}
  .ne-plate{transition:box-shadow .3s}
  .ne-plate:hover,.ne-plate.is-on{transform:none}
  .ne-prod-media{background-image:url(/assets/img/brand-pour-poster.jpg)}
}
@media(prefers-reduced-motion:reduce) and (min-width:701px){
  .ne-prod-row-b,.ne-prod-row-a .ne-prod-set[aria-hidden]{display:none}
  .ne-prod-row-a{-webkit-mask:none;mask:none}
  .ne-prod-row-a .ne-prod-track{animation:none;width:auto;justify-content:center}
  .ne-prod-row-a .ne-prod-set{flex-wrap:wrap;justify-content:center;gap:18px}
  .ne-prod-row-a .ne-plate{margin:0}
}
/* On a phone the floating call buttons own the right edge, so the line under the ribbon stops short of them. */
@media(max-width:560px){.ne-prod-also{padding-right:calc(var(--wk-fab,66px) + 8px)}}