/* ═══════════════════════════════════════════════════════════════════
   VisibleAI — the field (home), v2
   A violet preloader wipes up; the camera flies from the Software
   district to the wordmark. Every film is a plane on one wrapping page,
   grouped in six colour-coded districts around the origin. Colour is a
   signal, never a surface: 1 px rings, 5 px dots, 11 px mono sub-lines,
   7 % washes. Motion is transform-only; nothing blurs.
   ═══════════════════════════════════════════════════════════════════ */

body.is-field{overflow:hidden;height:100svh;overscroll-behavior:none;--frame:40px}
body.is-field .chips{z-index:88}
body.is-field .prog{display:none}

/* ── preloader ────────────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--violet);color:#F4F1FF;
  display:grid;place-items:center;transition:transform .48s cubic-bezier(.65,0,.35,1);will-change:transform;
}
.loader.out{transform:translateY(-101%)}
.loader__n{font-family:var(--sans);font-weight:500;font-size:clamp(120px,22vw,330px);letter-spacing:-.05em;line-height:1;display:flex;align-items:flex-start;gap:.02em}
.loader__n sup{font-size:.3em;margin-top:.2em;font-weight:500}
.loader__meta{position:absolute;left:var(--gut);bottom:28px;color:#F4F1FF}
.loader__meta2{position:absolute;right:var(--gut);bottom:28px;color:#F4F1FF}

/* ── the frame: appears while exploring ───────────────────────────── */
.frame{position:fixed;inset:var(--frame);border:1px solid var(--line-2);pointer-events:none;z-index:80;border-radius:2px;opacity:0;transition:opacity .4s}
body.is-away .frame,body.is-focus .frame{opacity:1}
.frame::before,.frame::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--mute);left:-3px}
.frame::before{top:22%}.frame::after{bottom:22%}

/* ── the field / world ────────────────────────────────────────────── */
.field{
  position:fixed;inset:0;overflow:hidden;background:var(--bg);
  touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;
  perspective:1200px;perspective-origin:50% 50%;cursor:grab;
}
.field.is-drag{cursor:grabbing}
.field.is-drag .plane{pointer-events:none}
body.has-cursor .field,body.has-cursor .field.is-drag{cursor:none}
.field img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.world{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;transform-style:preserve-3d}
.planes{position:absolute;inset:0;transform-style:preserve-3d}
.plane{
  position:absolute;left:0;top:0;transform-origin:50% 50%;
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);
  will-change:transform;visibility:hidden;contain:layout paint;
  box-shadow:0 24px 60px -30px #000,inset 0 0 0 1px color-mix(in srgb,var(--dc,#EDEBF5) 26%,transparent);
  transition:opacity .35s ease;
}
.plane.on{visibility:visible}
.plane.is-dim{opacity:.45}
.plane.is-focus,.plane:hover{box-shadow:0 24px 60px -30px #000,inset 0 0 0 1px color-mix(in srgb,var(--dc,#EDEBF5) 55%,transparent)}
.plane .tile{position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none;transform:none !important;aspect-ratio:auto}
.plane .tile::after{display:none}
.plane .tile img.p{width:100%;height:100%;object-fit:cover}
.plane .tile .slot video{opacity:0}
.plane .tile .slot video.live{opacity:1}
.plane__scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,rgba(10,10,15,.22) 3px 4px);opacity:.6;transition:opacity .3s}
body.is-away .plane__scan{opacity:0}
body.tier-1 .plane__scan{display:none}
body.tier-1 .plane{box-shadow:none}
.plane__meta{position:absolute;left:0;bottom:0;right:0;padding:40px 16px 13px;display:flex;gap:12px;opacity:0;transition:opacity .35s;pointer-events:none;background:linear-gradient(to top,rgba(10,10,15,.82),rgba(10,10,15,0))}
.plane:hover .plane__meta,.plane.is-focus .plane__meta{opacity:1}
.plane__meta .mono{color:var(--fg);text-shadow:0 1px 10px #000;line-height:1.4}
.plane__meta .mono.n{color:var(--dc,var(--fg))}
.plane__meta .mono:last-child{margin-left:auto;color:var(--fg-2)}

/* district washes (7 %, transform-only) and in-field headings */
.wash{position:absolute;left:0;top:0;pointer-events:none;border-radius:50%;visibility:hidden;will-change:transform;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--dc) 8%,transparent),transparent 70%)}
.dist{position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:2vw;will-change:transform;visibility:hidden;cursor:pointer;transition:opacity .35s}
.dist.is-dim{opacity:.4}
.dist--ne,.dist--e{align-items:flex-start;text-align:left}
.dist--sw,.dist--w{align-items:flex-end;text-align:right}
.dist--n,.dist--s{align-items:center;text-align:center}
.dist__n{color:var(--mute);letter-spacing:.16em}
.dist__t{font-family:var(--sans);font-weight:500;letter-spacing:-.02em;line-height:1;font-size:clamp(28px,3.2vw,46px);color:var(--fg)}
.dist__s{color:var(--dc);max-width:34ch}
.dist__rule{position:relative;width:min(40vw,100%);height:1px;background:rgba(237,235,245,.12);margin-top:8px}
.dist__rule::before{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--dc)}
.dist--ne .dist__rule::before,.dist--e .dist__rule::before,.dist--n .dist__rule::before,.dist--s .dist__rule::before{left:-2px}
.dist--sw .dist__rule::before,.dist--w .dist__rule::before{right:-2px}
.dist:hover .dist__t{color:var(--violet-lt)}

/* the wordmark travels with the field */
.wmitem{position:absolute;left:0;top:0;display:grid;place-items:center;pointer-events:none;will-change:transform;visibility:hidden;z-index:250}
.wmitem.on{visibility:visible}
.wm{
  font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;
  font-size:var(--wmfs,10.5vw);text-align:center;margin:0;color:var(--fg);white-space:nowrap;
}
.wm .dot{color:var(--violet)}

/* small wordmark in the nav centre — only when the big one has left */
.navwm{position:fixed;top:0;left:50%;transform:translateX(-50%);height:var(--nav);display:grid;place-items:center;z-index:91;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
body.is-away .navwm,body.is-focus .navwm{opacity:1;visibility:visible}
.navwm a{font-family:var(--sans);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:14px;line-height:1;color:var(--fg)}

/* ── hero copy (fixed; only when settled at the origin) ───────────── */
.h2o{
  position:fixed;inset:var(--frame);padding:clamp(20px,3vw,44px) clamp(20px,3vw,44px) calc(clamp(20px,3vw,44px) + 44px);z-index:70;
  display:grid;grid-template-rows:auto 1fr auto;pointer-events:none;opacity:0;
}
.h2o > *{pointer-events:none}
.h2o a,.h2o button,.hint{pointer-events:auto}
.h2o__top{display:flex;justify-content:center;padding-top:calc(var(--nav) - 10px)}
.h2o__kick{position:absolute;left:32%;top:calc(var(--nav) + 8vh)}
.h2o__mid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:center;pointer-events:none}
.h2o__mid > *{pointer-events:none}
.h2o__mid::before,.h2o__mid::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line)}
.h2o__mid::before{top:0}.h2o__mid::after{bottom:0}
.h2o__l{align-self:start;padding-top:clamp(18px,3vh,36px);display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.h2o__l .lead{font-size:clamp(14px,1.05vw,16px);line-height:1.5;max-width:30ch}
.h2o__l .btn{margin-top:4px}
.h2o__l .hero__links{flex-direction:column;gap:6px}
.h2o__c{pointer-events:none}
.h2o__r{align-self:start;padding-top:clamp(18px,3vh,36px);border-left:1px solid var(--line);padding-left:clamp(14px,2vw,28px);display:flex;flex-direction:column;gap:22px}
.h2o__stat{display:flex;flex-direction:column;gap:6px}
.h2o__stat .n{font-family:var(--mono);font-size:clamp(20px,1.7vw,28px);color:var(--fg);letter-spacing:-.02em}
.h2o__bot{display:flex;align-items:end;padding-top:14px;gap:16px;min-height:64px}
.h2o__logos{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,30px);align-items:center}
.h2o__logos .logo{font-family:var(--sans);font-weight:700;font-size:clamp(14px,1.2vw,18px);color:var(--mute);white-space:nowrap}
.h2o__logos .logo.mn{font-family:var(--mono);font-weight:400;letter-spacing:.16em;font-size:11px}
.playreel{display:inline-flex;align-items:center;gap:10px;color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px;width:max-content}
.playreel:hover{border-bottom-color:var(--fg)}
.playreel .tri{width:0;height:0;border-left:8px solid var(--violet-lt);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* compass hints sit on the two hero hairlines */
.hints{position:absolute;left:0;right:0;display:flex;justify-content:space-between;pointer-events:none;z-index:2}
.hints--t{top:-9px}.hints--b{bottom:-9px}
.hint{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;background:var(--bg);padding:0 8px;color:var(--mute);white-space:nowrap;transition:color .25s}
.hint .dot{width:5px;height:5px;border-radius:50%;background:var(--dc);opacity:.7}
.hint:hover{color:var(--fg)}
.hint:hover .dot{opacity:1}
.hint .c{color:var(--mute)}

/* ── persistent bottom bar ────────────────────────────────────────── */
.fbar{
  position:fixed;left:var(--frame);right:var(--frame);bottom:var(--frame);z-index:71;
  padding:0 clamp(20px,3vw,44px) 18px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;pointer-events:none;
}
.fbar > *{pointer-events:none}
.fbar a,.fbar button,.mini{pointer-events:auto}
.fbar__l{display:flex;gap:18px}
.fbar__l a:hover{color:var(--fg)}
.fbar__cue{text-align:center;color:var(--mute);transition:color .3s}
.fbar__cue:hover{color:var(--fg)}
.fbar__r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mute)}

/* minimap */
.mini{width:112px;border-radius:6px;border:1px solid var(--line-2);background:rgba(10,10,15,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;opacity:.45;transition:opacity .4s;cursor:crosshair}
.mini svg{display:block;width:100%;height:auto}
.mini:hover,body.is-away .mini{opacity:1}
body.is-home .mini,body.is-intro .mini{opacity:0;pointer-events:none}

/* ── district rail (left) ─────────────────────────────────────────── */
.rail{position:fixed;left:calc(var(--frame) + clamp(20px,3vw,44px));top:50%;transform:translateY(-50%);width:172px;z-index:72;display:flex;flex-direction:column;gap:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;padding:18px 40px 18px 0;margin-left:-12px;padding-left:12px;background:linear-gradient(90deg,rgba(10,10,15,.92) 0%,rgba(10,10,15,.8) 70%,rgba(10,10,15,0) 100%)}
body.is-away .rail,body.is-focus .rail{opacity:1;visibility:visible;pointer-events:auto}
.rail__d{display:flex;flex-direction:column;gap:4px}
.rail__row{display:grid;grid-template-columns:5px 1fr auto 14px;gap:8px;align-items:center;height:22px;color:var(--mute);transition:color .25s;position:relative}
.rail__row .dot{width:5px;height:5px;border-radius:50%;background:var(--dc);opacity:.7}
.rail__row .t{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rail__row .c{color:var(--mute)}
.rail__row .a{text-align:right;color:var(--mute)}
.rail__row:hover,.rail__d.is-here .rail__row{color:var(--fg)}
.rail__row:hover .dot,.rail__d.is-here .dot{opacity:1}
.rail__d.is-here .rail__row::before{content:"";position:absolute;left:-18px;top:50%;width:12px;height:1px;background:var(--line-2)}
.rail__films{display:none;flex-direction:column;gap:2px;padding-left:13px;max-height:36vh;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.rail__films::-webkit-scrollbar{display:none}
.rail__films a{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:baseline;height:20px;color:var(--mute);transition:color .2s}
.rail__films a .t{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail__films a:hover,.rail__films a.is-cur{color:var(--fg)}
.rail__films a.is-cur .idx{color:var(--violet-lt)}
.rail__foot{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid var(--line)}
.rail__foot a:hover{color:var(--fg)}
@media (max-height:640px){.rail__films{display:none !important}}

/* ── focus caption (right) ────────────────────────────────────────── */
.fcap{
  position:fixed;right:calc(var(--frame) + clamp(20px,3vw,44px));top:calc(var(--frame) + 22%);max-height:calc(100vh - var(--frame) * 2 - 22% - 120px);overflow:auto;scrollbar-width:none;width:min(300px,22vw);z-index:72;
  display:flex;flex-direction:column;gap:14px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;
  padding:20px 0 20px 28px;margin-right:-28px;padding-right:28px;background:linear-gradient(270deg,rgba(10,10,15,.94) 0%,rgba(10,10,15,.82) 75%,rgba(10,10,15,0) 100%);
}
body.is-focus .fcap{opacity:1;visibility:visible;pointer-events:auto}
.fcap::-webkit-scrollbar{display:none}
.fcap__acts{margin-top:8px}
@media (max-height:680px){.fcap .line,.fcap #fNext{display:none}}
@media (max-height:640px){.h2o__l .hero__links,.h2o__l .playreel{display:none}.h2o__l{gap:14px}}
.fcap .h3{font-size:clamp(20px,1.9vw,30px)}
.fcap .line{font-size:14px;line-height:1.55;color:var(--fg-2);margin:0}
.fcap__n{font-family:var(--mono);font-size:clamp(22px,2.2vw,34px);letter-spacing:-.03em;color:var(--fg);line-height:1;text-transform:none}
.fcap__n small{font-size:.42em;color:var(--mute);margin-left:6px;letter-spacing:.02em}
.fcap__chip{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--fg);cursor:pointer}
.fcap__chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--dc,var(--fg))}
.fcap__acts{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fcap__acts a:hover,.fcap__acts button:hover{color:var(--fg)}
.fcap__acts .play{color:var(--bg);background:var(--fg);padding:9px 14px;border-radius:999px;transition:background .25s,color .25s}
.fcap__acts .play:hover{background:var(--violet);color:#fff}

/* phone chip strip */
.dstrip{display:none}

/* ── mobile: same field, lighter chrome ───────────────────────────── */
@media (max-width:767px), (pointer:coarse) and (max-width:1024px){
  body.is-field{--frame:14px}
  .frame,.navwm,.loader__meta2,.h2o__r,.h2o__logos,.h2o__kick,.rail,.fbar__r,.hints,.h2o__l .hero__links,.h2o__l .playreel{display:none}
  .h2o{padding:0 var(--gut);grid-template-rows:1fr}
  .h2o__top{display:none}
  .h2o__mid{grid-template-columns:1fr;align-content:end;padding-bottom:calc(13vh + 48px)}
  .h2o__mid::before,.h2o__mid::after{display:none}
  .h2o__l{padding-top:0;gap:16px;max-width:34ch}
  .h2o__l .lead{font-size:15px}
  .h2o__bot{display:none}
  .dist{padding:4vw}
  .dist__t{font-size:clamp(24px,7vw,34px)}
  .dist__rule{width:60vw}
  .fbar{padding:0 var(--gut) 0;bottom:calc(var(--frame) + 50px);grid-template-columns:auto 1fr;align-items:center}
  .fbar__l{gap:12px;white-space:nowrap}
  .fbar__l span:last-child,.fbar__l span:first-child{display:none}
  .fbar__cue{text-align:right;white-space:nowrap}
  .dstrip{display:flex;position:fixed;left:0;right:0;bottom:calc(var(--frame) + 50px + 36px);z-index:72;gap:8px;padding:0 16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;opacity:1;transition:opacity .3s}
  .dstrip::-webkit-scrollbar{display:none}
  body.is-focus .dstrip{opacity:0;pointer-events:none}
  .dstrip button{flex:0 0 auto;scroll-snap-align:center;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,10,15,.72);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
  .dstrip button .dot{width:5px;height:5px;border-radius:50%;background:var(--dc)}
  .dstrip button.is-here{color:var(--fg);border-color:color-mix(in srgb,var(--dc) 60%,transparent);background:color-mix(in srgb,var(--dc) 12%,rgba(10,10,15,.6))}
  .fcap{left:var(--gut);right:var(--gut);top:auto;bottom:0;width:auto;gap:8px;padding:24px 0 48px;background:linear-gradient(to top,#0A0A0FEE 70%,#0A0A0F00)}
  .fcap .line,.fcap #fNext,.fcap__chip{display:none}
  .fcap .h3{font-size:20px}
  .fcap .line{font-size:13px;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .fcap__acts{flex-direction:row;flex-wrap:wrap;gap:14px;margin-top:6px}
  .esc{display:none}
}