/* ══════════════════════════════════════════════════
   PRESETS
   A boxed title with the app's own presets round it (presets-reel.js):
   transparent clips straight on the page, circling the box on wider
   screens, and in two carousels above and below it on phones.
   ══════════════════════════════════════════════════ */
.presets{padding:72px 0 80px}
.pr-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.pr-text{position:relative;z-index:2;width:100%;max-width:560px;padding:30px 40px 32px;text-align:center;border:1px solid rgba(42,55,79,.85);border-radius:var(--radius-lg);background:var(--bg-panel);box-shadow:0 14px 38px rgba(0,0,0,.34)}
.pr-title{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;line-height:1.2;color:var(--text-title);margin-bottom:12px;text-wrap:balance}
.pr-nw{white-space:nowrap}
.pr-line{color:var(--text-body);font-size:1rem;line-height:1.7;text-wrap:balance}

/* each carousel runs the page's full width */
.pr-row{position:relative;align-self:stretch;height:200px;margin:0 calc(50% - 50vw);overflow:hidden;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.pr-track{position:absolute;inset:0}
.pr-item{position:absolute;left:50%;top:50%;margin:0;display:none;pointer-events:none}
.pr-item video,.pr-item img{display:block;width:100%;height:100%;object-fit:contain;max-width:none;opacity:0;transition:opacity .35s ease}
.pr-item.is-in video,.pr-item.is-in img{opacity:1}
.pr-item.is-out{opacity:0;transition:opacity .45s ease}

/* wider screens: the looks circle the box instead (presets-reel.js sets the height) */
.pr-orbit{position:absolute;inset:0;z-index:1;display:none;pointer-events:none}
@media(min-width:769px){
  .pr-stage{justify-content:center}
  .pr-row{display:none}
  .pr-orbit{display:block}
}

@media(max-width:768px){
  .presets{padding:52px 0 56px}
  .pr-stage{gap:16px}
  .pr-text{padding:22px 20px 24px}
  .pr-row{height:140px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
}