/* =========================================================
   SHIN真Media v10 additions (loaded after style.css)
   pinned films · PLAY/VIEW cursor · sound prompt · trusted strip ·
   hover-distortion canvas · scroll-speed skew
   ========================================================= */

/* ---------- content leans with scroll speed (world.js writes --vel) ---------- */
.sec>.wrap{transform:skewY(calc(var(--vel,0)*1.6deg));transition:transform .25s var(--ease)}

/* ---------- WebGL hover distortion canvas ---------- */
.hoverfx{position:fixed;z-index:30;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .2s}

/* ---------- trusted-by strip ---------- */
.trusted{position:relative;z-index:2;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(6,5,5,.55);backdrop-filter:blur(8px)}
.trusted-label{margin:0 auto 18px;max-width:var(--wrap);padding:0 var(--gut);font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:34px;width:max-content;animation:marq 42s linear infinite}
.marquee-track span{font:400 clamp(26px,3vw,40px)/1 var(--display);text-transform:uppercase;color:rgba(244,239,231,.82);white-space:nowrap}
.marquee-track i{font:900 18px/1 var(--jp);font-style:normal;color:var(--red)}
.trusted:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- films: pinned horizontal track ---------- */
.films-h{padding:0}
.films-pin{height:100svh;display:flex;align-items:center;overflow:hidden}
.films-track{display:flex;align-items:center;gap:clamp(40px,5vw,80px);padding:0 max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));will-change:transform;perspective:1400px}
.films-intro{flex:0 0 min(520px,82vw);margin:0}
.films-track .phone{flex:0 0 clamp(250px,22vw,310px);max-width:none;margin:0}
.films-track .phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.films-end{flex:0 0 260px;display:flex;flex-direction:column;gap:18px}
.films-end p{margin:0;font:400 clamp(60px,7vw,110px)/.9 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(244,239,231,.35)}

/* ---------- cursor ---------- */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor .ring-stage{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:text}
.cursor{position:fixed;left:0;top:0;z-index:9000;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.cursor:before{content:"";position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--red);transition:transform .35s var(--ease),background .3s,opacity .3s}
.cursor span{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.4);opacity:0;font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;transition:.3s var(--ease);white-space:nowrap}
.cursor.is-link:before{transform:scale(3);background:rgba(244,239,231,.15);box-shadow:inset 0 0 0 1px rgba(244,239,231,.6)}
.cursor.is-play:before,.cursor.is-view:before,.cursor.is-drag:before{transform:scale(7.6)}
.cursor.is-play:before{background:var(--red);box-shadow:0 0 40px rgba(227,64,45,.6)}
.cursor.is-view:before{background:#f4efe7}
.cursor.is-view span{color:#0b0909}
.cursor.is-drag:before{background:rgba(244,239,231,.12);box-shadow:inset 0 0 0 1px #f4efe7;backdrop-filter:blur(4px)}
.cursor.is-play span,.cursor.is-view span,.cursor.is-drag span{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor.down:before{transform:scale(.7)}
.cursor.is-play.down:before,.cursor.is-view.down:before{transform:scale(6.6)}

/* ---------- sound prompt ---------- */
.sound-ask{position:fixed;z-index:70;left:20px;bottom:20px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;max-width:min(460px,calc(100vw - 40px));padding:14px 14px 14px 18px;border-radius:20px;
  background:rgba(14,11,10,.86);border:1px solid var(--line);backdrop-filter:blur(16px);box-shadow:0 30px 70px rgba(0,0,0,.55);transform:translateY(30px);opacity:0;transition:.5s var(--ease)}
.sound-ask.in{transform:none;opacity:1}
.sound-ask .eq{color:var(--red)}.sound-ask .eq b{animation:eq 1s ease-in-out infinite}.sound-ask .eq b:nth-child(2){animation-delay:-.35s}.sound-ask .eq b:nth-child(3){animation-delay:-.7s}
.sound-ask p{flex:1 1 180px;margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.sound-ask strong{display:block;color:var(--ink);font-size:15px}

/* ---------- mobile ---------- */
@media(max-width:900px){
  .films-pin{height:auto;display:block;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:var(--sec) 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .films-pin::-webkit-scrollbar{display:none}
  .films-track{padding:0 var(--gut);gap:20px;align-items:flex-end;width:max-content}
  .films-intro{flex-basis:calc(100vw - 2*var(--gut));scroll-snap-align:start;align-self:center}
  .films-track .phone{flex-basis:72vw;scroll-snap-align:center}
  .films-end{flex-basis:60vw;align-self:center}
  .sec>.wrap{transform:none}
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.sec>.wrap{transform:none}}

/* 3D transforms (laptops, phones) must never widen the page on phones */
main{overflow-x:clip}
@media(max-width:900px){.films-intro .sec-intro:after{content:"  Swipe 92";display:block;margin-top:14px;font:700 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}}