/* v3 "Dimensional" — 3D-forward, airy, sculptural.
   Signature: a LARGE Three.js point-cloud as the hero centrepiece, floating
   beside the headline in generous whitespace. ASCII is minimised (dropped in
   the hero, kept faint on two placeholder tiles). AI-forge appears exactly
   once, as a small restrained accent inside the Studio OS work tile — never
   as its own big section. Layers on top of style.css (Alpine Ledger). */

/* video behaves exactly like the img in reveal tiles */
.tile__media video,
.flagship__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* ---- Studio OS tile = the ONE small AI-forge accent ---- */
.tile__media--forge{
  background:var(--hero-bg);position:relative;
  --ink:#F4EFE7; --glow:var(--amber); --muted:#A79E8E; --grid:rgba(255,255,255,.06); --panel:transparent;
}
.tile__media--forge canvas{position:absolute;inset:0;width:100%;height:100%}

/* keep the two placeholder ascii tiles very quiet — the cloud is the star */
.tile__media--ascii{opacity:.86}

/* =====================================================================
   HERO — dimensional: no ASCII field, a large point-cloud floating right,
   lots of calm whitespace, text kept to a narrow left column.
   ===================================================================== */
.hero--dimensional{
  align-items:center;
  min-height:104svh;
}
/* soften the stock vignette so the cloud reads clearly; keep only a bottom
   fade so the hero still dissolves into the page below */
.hero--dimensional::after{
  background:linear-gradient(to bottom,transparent 62%,var(--hero-bg) 100%);
}
.hero--dimensional .hero__inner{
  padding-block:clamp(150px,20vh,220px) clamp(64px,9vh,110px);
}
.hero--dimensional .hero__lead{max-width:44ch}

.hero__three{
  position:absolute;
  top:50%;right:-10%;transform:translateY(-50%);
  width:68%;height:130%;
  z-index:1;opacity:.96;pointer-events:none;
  --three-color:var(--amber);
}
.hero--dimensional .hero__inner{position:relative;z-index:3}
/* graceful fallback if WebGL is unavailable: a soft dimensional amber bloom */
.hero__three[data-three-failed]{
  background:radial-gradient(circle at 58% 50%,rgba(233,169,74,.24),transparent 60%);
}

/* =====================================================================
   INTERACTIVE ASCII BAND — the General-Intuition move, on white.
   A full paper field of ink glyphs that blooms copper under the cursor,
   with a statement floating over a softly-cleared reading zone.
   ===================================================================== */
.canvasband{
  position:relative;overflow:hidden;background:var(--paper);
  min-height:80vh;display:flex;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  /* palette the ascii field reads (dark ink glyphs on paper, copper glow) */
  --ink:rgba(28,27,24,.5); --glow:var(--copper); --field-bg:transparent;
}
.canvasband__field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.canvasband__inner{position:relative;z-index:2;pointer-events:none}
/* soft paper halo so the copy stays crisp over the live field */
.canvasband__inner::before{
  content:"";position:absolute;z-index:-1;
  left:calc(var(--pad) * -1);top:50%;transform:translateY(-50%);
  width:min(760px,92vw);height:150%;
  background:radial-gradient(60% 60% at 32% 50%,var(--paper) 42%,color-mix(in oklab,var(--paper) 55%,transparent) 66%,transparent 80%);
}
.canvasband__title{
  font-family:var(--f-display);font-weight:340;letter-spacing:-.02em;
  font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1;max-width:16ch;color:var(--ink);
  text-shadow:0 0 12px var(--paper),0 0 4px var(--paper);
}
.canvasband__title em{font-style:italic;color:var(--copper)}
.canvasband__sub{
  margin-top:24px;max-width:50ch;color:var(--ink-soft);
  font-size:13.5px;line-height:1.75;letter-spacing:.01em;
  text-shadow:0 0 8px var(--paper),0 0 8px var(--paper),0 0 3px var(--paper);
}
.canvasband__hint{color:var(--copper);white-space:nowrap}
@media (max-width:640px){
  .canvasband{min-height:70vh}
  .canvasband__inner::before{
    left:calc(var(--pad) * -1);width:150%;
    background:radial-gradient(78% 44% at 42% 42%,var(--paper) 56%,color-mix(in oklab,var(--paper) 68%,transparent) 74%,transparent 88%);
  }
}

/* ---- WHY — deliberately quiet: no second 3D instance, just a faint
   static glow so the section still feels dimensional without competing
   with the hero's signature moment ---- */
.why--quiet{
  background:
    radial-gradient(90% 80% at 82% 15%,rgba(233,169,74,.09),transparent 60%),
    var(--hero-bg);
}
.why--quiet .forge__note{
  margin-top:44px;color:var(--hero-ink);max-width:52ch;
}
.why--quiet .forge__note b{color:var(--amber);font-style:italic;font-weight:400}

@media (max-width:960px){
  .hero--dimensional{min-height:100svh}
  .hero__three{right:-24%;width:112%;height:80%;top:58%;opacity:.5}
  .hero--dimensional .hero__inner{padding-block:clamp(120px,18vh,170px) 60px}
}
@media (max-width:640px){
  .hero__three{width:150%;right:-40%;opacity:.4}
}
@media (prefers-reduced-motion:reduce){
  .tile__media video,.flagship__media video{opacity:1}
}