/* SHOWREEL · il pulsante nella pagina di titolo e il proiettore a tutto schermo.
   Stessa mano di used-future.css: armour, bulloni di luce, un solo accento. */

/* ---------------------------------------------------------------- pulsante */
.sr-btn{
  --sr-glow:#ff881199;
  position:relative;display:inline-flex;align-items:stretch;gap:0;
  margin-top:26px;padding:0;cursor:pointer;
  font:inherit;font-family:var(--sc-font-mono);color:#edf0e6;text-align:left;
  background:var(--armour);
  border:1px solid #626c68;border-bottom:4px solid #101719;border-right:3px solid #111819;
  border-radius:var(--sc-r-sm);
  box-shadow:inset 0 1px #d6d1b17a,inset 0 -2px #905b2e55,0 10px 22px #0006;
  overflow:hidden;isolation:isolate;
  transition:transform .28s var(--sc-ease-out),box-shadow .28s var(--sc-ease-out),border-color .28s var(--sc-ease-out);
}
/* la striscia di pericolo che scorre sul bordo alto all'hover */
.sr-btn::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:repeating-linear-gradient(125deg,#c6a44b 0 9px,#171c1e 10px 18px);
  background-size:50px 4px;transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--sc-ease-out);
}
/* riflesso che attraversa la targa */
.sr-btn::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,#fff1d61f 48%,transparent 60%);
  transform:translateX(-120%);
}
.sr-btn__play{
  position:relative;flex:none;width:58px;display:grid;place-items:center;
  background:#ff9b39;box-shadow:0 0 14px var(--sr-glow),inset 0 -3px #0003;
  border-right:1px solid #17120d;
}
.sr-btn__play::before{
  content:'';width:0;height:0;margin-left:4px;
  border-left:15px solid #17120d;border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.sr-btn__txt{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:12px 18px 11px 16px;
}
.sr-btn__kick{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:#f6b56d}
.sr-btn__label{font-size:clamp(.86rem,.8rem + .25vw,1rem);letter-spacing:.11em;text-transform:uppercase;color:#edf0e6}
.sr-btn__dur{
  flex:none;align-self:center;margin-right:14px;padding:4px 8px;
  font-size:.7rem;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#ffc079;
  border:1px solid #8d9691;background:#10191bd9;
}
.sr-btn:hover,.sr-btn:focus-visible{
  border-color:#a28b64;
  box-shadow:inset 0 1px #d6d1b17a,inset 0 -2px #905b2e55,0 12px 26px #0007,0 0 0 1px #ff9b3955,0 0 26px -6px #ff9b39aa;
}
.sr-btn:hover::before,.sr-btn:focus-visible::before{transform:scaleX(1);animation:sr-hazard 1.1s linear infinite}
.sr-btn:hover::after,.sr-btn:focus-visible::after{transform:translateX(120%);transition:transform .9s var(--sc-ease-out)}
.sr-btn:hover .sr-btn__play{box-shadow:0 0 22px #ff9b39,inset 0 -3px #0003}
.sr-btn:focus-visible{outline:2px solid #ffa451;outline-offset:4px}
.sr-btn:active{transform:translateY(2px);border-bottom-width:2px;margin-bottom:2px}
@keyframes sr-hazard{to{background-position:50px 0}}

/* ------------------------------------------------------------ proiettore */
html.sr-open,html.sr-open body{overflow:hidden}
.sr-modal{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:clamp(14px,3vw,40px);border:0;
  background:#111719f0;color:#edf0e6;
  display:none;align-items:center;justify-content:center;
  overscroll-behavior:contain;
}
.sr-modal[open]{display:flex}
.sr-modal::backdrop{background:#050a0cb3}
.sr-modal.is-in .sr-frame{animation:sr-in .5s var(--sc-ease-out) both}
@keyframes sr-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.sr-frame{
  position:relative;
  width:min(100%,calc((100dvh - 2*clamp(14px,3vw,40px) - 58px) * var(--sr-ar)));
  background:var(--armour);
  border:1px solid #717971;border-bottom:5px solid #11191b;
  box-shadow:inset 0 1px #d6d1b17a,0 24px 60px #000a;
  padding:12px;
}
.sr-frame::before,.sr-frame::after{
  content:'';position:absolute;width:95px;height:7px;opacity:.85;
  background:repeating-linear-gradient(125deg,#c6a44b 0 9px,#171c1e 10px 18px);
}
.sr-frame::before{left:12px;top:-4px}
.sr-frame::after{right:12px;bottom:-6px}
.sr-bar{
  display:flex;align-items:center;gap:12px;min-height:34px;padding:0 2px 10px;
  font-family:var(--sc-font-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:#f6b56d;
}
.sr-bar b{font-weight:400;color:#edf0e6}
.sr-bar__sq{width:6px;height:6px;background:#ff9b39;box-shadow:0 0 7px #ff881199;flex:none}
.sr-bar__sp{flex:1}
.sr-close{
  flex:none;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  font:inherit;font-size:1.2rem;line-height:1;color:#edf0e6;
  background:#10191bd9;border:1px solid #8d9691;border-radius:var(--sc-r-sm);
}
.sr-close:hover,.sr-close:focus-visible{color:#17120d;background:#ff9b39;border-color:#ff9b39}
.sr-close:focus-visible{outline:2px solid #ffa451;outline-offset:3px}
.sr-video{
  display:block;width:100%;height:auto;aspect-ratio:var(--sr-ar);
  background:#0b1112;border:1px solid #566062;
}

@media (max-width:700px){
  .sr-btn{margin-top:20px;width:100%}
  .sr-btn__play{width:50px}
  .sr-btn__txt{flex:1;padding:10px 12px}
  .sr-btn__label{font-size:.82rem;letter-spacing:.08em}
  .sr-frame{padding:8px}
  .sr-bar{font-size:.6rem;gap:8px;padding-bottom:8px}
  .sr-bar__sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sr-btn,.sr-btn::before,.sr-btn::after{transition:none!important;animation:none!important}
  .sr-modal.is-in .sr-frame{animation:none}
}

/* titolo su mobile: il kicker va a capo sotto la targa «LP / 001» (uf-serial): gli si lascia il posto */
@media (max-width: 700px) { .titolo .kicker { padding-right: 96px; } }