/* LOOM Studio — "Burger Ninja" playable showcase.
   Scroll-scrubbed gameplay clip in a real iPhone mockup (same bezel/notch
   as Selected Work); once the clip finishes, LOOM asks the visitor if they
   want to play. */
.loom-ninja{
  position:relative; z-index:5; width:100%;
  padding:2dvh 6vw 14dvh;
  display:flex; flex-direction:column; align-items:center;
  font-family:"neuehaasdisplayroman","Helvetica Neue",Arial,sans-serif;
  opacity:0; transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.loom-ninja.in-view{ opacity:1; transform:translateY(0); }

.loom-ninja__head{ text-align:center; max-width:640px; margin:0 auto 4dvh; }
.loom-ninja__eyebrow{ display:inline-block; color:#a99cff; letter-spacing:3px; font-size:12px; text-transform:uppercase; margin-bottom:14px; }
.loom-ninja__title{ color:#fff; font-size:clamp(26px,3.8dvw,50px); line-height:1.05; letter-spacing:-1px; margin:0; font-weight:400; }
.loom-ninja__title b{ font-weight:400; background:linear-gradient(90deg,#f6c9a8,#e7a9c4,#c9c9d6); -webkit-background-clip:text; background-clip:text; color:transparent; }

.loom-ninja__track{ position:relative; width:100%; }
.loom-ninja__pin{ position:sticky; top:6dvh; display:flex; justify-content:center; }

.loom-ninja__phone{ cursor:pointer; }
.loom-phone.loom-ninja__phone{ height:clamp(460px,72dvh,680px); }

.loom-phone__screen video.loom-ninja__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; opacity:1; }

.loom-ninja__badge{
  position:absolute; right:10px; top:30px; z-index:3; display:flex; align-items:center; gap:5px; white-space:nowrap;
  font:600 8.5px/1 "neuehaasdisplayroman"; letter-spacing:.5px; text-transform:uppercase; color:#daffe9;
  padding:5px 9px; border-radius:100px; background:#0c2a1bcc; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid #66ffb030;
  opacity:0; transition:opacity .3s ease;
}
.loom-ninja__phone:hover .loom-ninja__badge{ opacity:1; }
.loom-ninja__badge .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }

/* prompt — hidden until the clip reaches its end, then fades in */
.loom-ninja__prompt{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:linear-gradient(to top,#05040ae3,#05040a99 56%,#05040a1a);
  opacity:0; pointer-events:none; transition:opacity .5s ease;
  padding:20px; text-align:center;
}
.loom-ninja__prompt.is-shown{ opacity:1; pointer-events:auto; }

.loom-ninja__q{ margin:0; color:#fff; font:600 16px/1.3 "neuehaasdisplayroman"; letter-spacing:-.2px; }
.loom-ninja__choices{ display:flex; flex-direction:column; gap:10px; width:100%; max-width:220px; }

.loom-ninja__play{
  appearance:none; border:none; cursor:pointer;
  padding:13px 22px; border-radius:100px; font:600 14px/1 "neuehaasdisplayroman"; letter-spacing:.3px; color:#0a0710;
  background:linear-gradient(90deg,#f6c9a8,#e7a9c4,#c9c9d6);
  box-shadow:0 16px 36px -12px #c9b3ff90; transition:transform .25s ease, box-shadow .25s ease;
}
.loom-ninja__play:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 20px 44px -10px #c9b3ffb0; }

.loom-ninja__skip{
  appearance:none; cursor:pointer; padding:11px 20px; border-radius:100px;
  font:600 13px/1 "neuehaasdisplayroman"; letter-spacing:.2px; color:#ffffffb3;
  background:#ffffff12; border:1px solid #ffffff26; transition:background .2s ease, color .2s ease;
}
.loom-ninja__skip:hover{ background:#ffffff1e; color:#fff; }

.loom-ninja__overlay{
  position:fixed; inset:0; z-index:2147483647; background:#050308f0; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column; opacity:0; transition:opacity .28s ease;
}
.loom-ninja__overlay.on{ opacity:1; }
.loom-ninja__overlay-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; font:600 13px/1 "neuehaasdisplayroman"; color:#fff; letter-spacing:.3px;
  background:#0a0710cc; border-bottom:1px solid #ffffff14; flex:0 0 auto;
}
.loom-ninja__close{
  appearance:none; border:none; cursor:pointer; background:#ffffff14; color:#fff;
  width:32px; height:32px; border-radius:50%; font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.loom-ninja__close:hover{ background:#ffffff28; }
.loom-ninja__iframe{ flex:1 1 auto; width:100%; border:none; background:#000; }

@media (max-width:768px){
  .loom-phone.loom-ninja__phone{ height:clamp(440px,68dvh,620px); }
}