/* LOOM Studio — "We build software too" showcase.
   Scroll-scrubbed Puffer (2D floor-plan -> 3D furnished view) capture,
   shown in a desktop browser-window mockup (Puffer is real desktop
   software, not a phone app) — same chrome language as .ss-browser. */
.loom-software{
  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-software.in-view{ opacity:1; transform:translateY(0); }

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

.loom-software__track{ position:relative; width:100%; }
.loom-software__pin{ position:sticky; top:6dvh; display:flex; flex-direction:column; align-items:center; }

/* desktop browser-window mockup */
.loom-software__browser{
  width:100%; max-width:960px; border-radius:14px; overflow:hidden; background:#0c0b14;
  box-shadow:0 40px 90px -30px #000c, inset 0 0 0 1px #ffffff14;
  cursor:default;
}
.loom-software__bar{ display:flex; align-items:center; padding:11px 14px; background:#16151f; }
.loom-software__dot{ width:10px; height:10px; border-radius:50%; margin-right:7px; }
.loom-software__dot:nth-child(1){ background:#ff5f57; }
.loom-software__dot:nth-child(2){ background:#febc2e; }
.loom-software__dot:nth-child(3){ background:#28c840; }
.loom-software__url{
  margin-left:8px; font:500 11px/1 "neuehaasdisplayroman",Arial,sans-serif; color:#8b8b9a; letter-spacing:.3px;
  background:#0c0b14; padding:6px 14px; border-radius:100px;
}
.loom-software__view{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#000; }
.loom-software__view video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }

.loom-software__badge{
  position:absolute; right:14px; top:14px; 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:#dff2ff;
  padding:5px 9px; border-radius:100px; background:#0c1e2acc; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid #66c2ff30;
  opacity:0; transition:opacity .3s ease;
}
.loom-software__browser:hover .loom-software__badge{ opacity:1; }
.loom-software__badge .dot{ width:5px; height:5px; border-radius:50%; background:currentColor; }

/* scroll-switched captions below the browser mockup */
.loom-software__captions{
  position:relative; width:100%; max-width:960px; margin-top:3dvh;
  min-height:70px; display:flex; align-items:flex-start; justify-content:center;
  text-align:center;
}
.loom-software__step{
  position:absolute; inset:0 0 auto 0; display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1);
}
.loom-software__step.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.loom-software__step-k{
  color:#8fd6ff; letter-spacing:2px; font-size:11px; text-transform:uppercase; font-weight:600;
}
.loom-software__step-t{
  margin:0; color:#fff; font-size:clamp(15px,2dvw,20px); line-height:1.4; letter-spacing:-.2px;
  max-width:520px; font-weight:400;
}

@media (max-width:768px){
  .loom-software{ padding:2dvh 3vw 10dvh; }
  .loom-software__browser{ max-width:100%; }
  .loom-software__captions{ min-height:128px; margin-top:4dvh; }
  .loom-software__step{ gap:12px; }
  .loom-software__step-k{ font-size:15px; letter-spacing:2.5px; }
  .loom-software__step-t{ font-size:20px; line-height:1.45; font-weight:500; max-width:92vw; text-shadow:0 2px 14px #000a; }
}