/* LOOM Studio — "For established brands": the transformer, scroll-scrubbed.
   Raw sends pop in one by one, merge into the LOOM core, results pop out
   one by one. Dr Spago first, then the smash burger. Sized to fit a phone
   screen with no internal scrolling. */
.loom-biz{
  position:relative; z-index:5; width:100%;
  padding:12dvh 6vw 4dvh;
  display:flex; flex-direction:column; align-items:center;
  font-family:"neuehaasdisplayroman","Helvetica Neue",Arial,sans-serif;
  overflow-x:clip;
}
.loom-biz__head{ text-align:center; max-width:880px; margin:0 auto 5dvh; }
.loom-biz__eyebrow{ display:inline-block; color:#a99cff; letter-spacing:3px; font-size:12px; text-transform:uppercase; margin-bottom:16px; }
.loom-biz__title{ color:#fff; font-size:clamp(28px,4.4dvw,62px); line-height:1.05; letter-spacing:-1.5px; margin:0; font-weight:400; }
.loom-biz__title b{ font-weight:400; background:linear-gradient(90deg,#f6c9a8,#e7a9c4,#c9c9d6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.loom-biz__sub{ color:#ffffff99; font-size:clamp(14px,1.5dvw,19px); margin-top:16px; max-width:560px; margin-inline:auto; line-height:1.4; font-family:"neuehaasdisplaylight"; }

/* ── scroll track: tall scroll distance, pinned + compact content inside ── */
.loom-biz__track{ position:relative; width:100%; }
.loom-biz__pin{ position:sticky; top:7dvh; display:flex; flex-direction:column; align-items:center; }

/* ── the transformer, compact vertical stack: send grid → core → get grid ── */
.loom-xform{
  --core:132px; --sq:clamp(108px,34vw,152px);
  position:relative; width:min(420px,94vw); margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.xf-cap{ color:#ffffff5e; font:600 11px/1 "neuehaasdisplayroman"; letter-spacing:2.2px; text-transform:uppercase; }
.xf-cap--send{ margin-bottom:14px; }
.xf-cap--get{ margin:18px 0 14px; }

.xf-beam{ position:absolute; left:50%; top:20px; bottom:20px; width:2px; transform:translateX(-50%); z-index:0;
  background:linear-gradient(#ffffff00,#ffffff1c 14%,#ffffff1c 86%,#ffffff00); }

/* SEND / GET square grids — up to 4 thumbnails, pop in/out, scroll-scrubbed */
.xf-grid{ position:relative; z-index:2; width:100%; min-height:var(--sq);
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.xf-sq{
  width:var(--sq); aspect-ratio:1; border-radius:18px; overflow:hidden; position:relative;
  background:#0d0c14; box-shadow:0 14px 32px -14px #000c, inset 0 0 0 1px #ffffff1c;
  opacity:0; transform-origin:center; will-change:transform,opacity;
}
.xf-sq img, .xf-sq video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.xf-sq--get{ box-shadow:0 14px 32px -14px #000c, inset 0 0 0 1px #66ffb030; }
.xf-sq__kind{
  position:absolute; left:8px; bottom:7px; right:8px; z-index:2; color:#fff;
  font:600 9px/1.25 "neuehaasdisplayroman"; letter-spacing:.3px;
  text-shadow:0 1px 4px #000c; opacity:.9;
}

/* CORE — the analyser diamond */
.xf-core{ position:relative; width:var(--core); aspect-ratio:1; margin:26px 0 14px; z-index:3; }
.xf-core__shape{ position:absolute; inset:0; border-radius:32px; transform:rotate(45deg);
  background:radial-gradient(120% 120% at 50% 30%,#2a2150,#120e26 70%);
  box-shadow:0 0 0 1px #ffffff22, 0 22px 56px -16px #6b46ffaa, inset 0 0 38px -8px #7b5cff66; }
.xf-core__shape::before{ content:""; position:absolute; inset:-2px; border-radius:34px; padding:2px;
  background:conic-gradient(from 0deg,#f6c9a8,#e7a9c4,#a99cff,#7b5cff,#f6c9a8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:loom-spin 7s linear infinite; }
@keyframes loom-spin{ to{ transform:rotate(360deg); } }
.xf-core__ring{ position:absolute; inset:0; border-radius:32px; transform:rotate(45deg); border:1.5px solid #b9a9ff; opacity:0; }
.xf-core__in{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.xf-core__logo{ font:700 19px/1 "neuehaasdisplayroman"; letter-spacing:.4px; color:#fff; }
.xf-core__logo b{ font-weight:300; color:#cfc7ff; }
.xf-core__tick{ font:600 10px/1 "neuehaasdisplayroman"; letter-spacing:1.3px; text-transform:uppercase; color:#a99cff; }
.xf-core.is-active .xf-core__shape{ animation:xf-core-pulse 1.1s ease-in-out infinite, loom-spin 7s linear infinite; }
.xf-core.is-active .xf-core__ring{ animation:xf-ring 1.1s ease-out infinite; }
@keyframes xf-core-pulse{ 0%,100%{ transform:rotate(45deg) scale(1);} 50%{ transform:rotate(45deg) scale(1.08); } }
@keyframes xf-ring{ 0%{ opacity:.85; transform:rotate(45deg) scale(.65);} 100%{ opacity:0; transform:rotate(45deg) scale(1.7);} }

.xf-brandtag{
  color:#ffffffb3; font:600 10px/1 "neuehaasdisplayroman"; letter-spacing:1.4px; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; background:#ffffff0d; border:1px solid #ffffff1c;
}

/* progress dots — one per beat, small chapter break gap */
.loom-biz__dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:5dvh; max-width:260px; }
.loom-biz__dot{ width:6px; height:6px; border-radius:50%; background:#ffffff26; transition:background .3s ease, transform .3s ease; }
.loom-biz__dot.is-break{ margin-left:10px; }
.loom-biz__dot.is-active{ background:linear-gradient(90deg,#f6c9a8,#e7a9c4,#c9c9d6); transform:scale(1.35); }

@media (prefers-reduced-motion: reduce){
  .xf-core__shape::before{ animation:none !important; }
}