/* ============================================================
   Manar Studios: the homepage.
   One scene: the mark assembling, then opening up to show what
   each part is. Type, tokens and the pill are in base.css.
   ============================================================ */

/* ── the scene ───────────────────────────────────────── */
.method{ height:1269vh; position:relative; }
.method__pin{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--room); }
.method__gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.beats{ position:absolute; z-index:2; inset:0; text-align:center; pointer-events:none; }
.beat{
  position:absolute; left:0; right:0; top:14svh; margin:0 auto; width:fit-content; max-width:92vw;
  padding-bottom:.06em;
  /* light and large, the same cut as the inner pages' titles */
  font-size:clamp(2.5rem, 6vw, 6.6rem); font-weight:300; line-height:.96; letter-spacing:-.055em;
  color:var(--navy);
  opacity:0; will-change:opacity, transform;
}

/* ── the proof chapter ───────────────────────────────── */
/* scene B's lines, drawn between the node cubes */
.edges{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; overflow:visible; }
.edges path{ fill:none; stroke:rgba(1,18,58,.26); stroke-width:1.6; stroke-linecap:round; }
.edges circle{ fill:var(--blue); }

/* scene A: the call card. The cubes flatten into tiles behind it, so it is glass,
   and their colour comes through. Its box is measured by cubes.js, which is why
   it is centred with margins rather than a transform. Every word is the same
   navy; only weight separates a speaker from what they said. */
.proof--call{
  position:absolute; left:0; right:0; top:28svh; margin:0 auto;
  width:min(860px, 66vw);
  text-align:left; pointer-events:auto; color:var(--navy);
  border-radius:34px; overflow:hidden;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(34px) saturate(160%); backdrop-filter:blur(34px) saturate(160%);
  box-shadow:0 0 0 1px rgba(255,255,255,.9) inset, 0 50px 110px -50px rgba(1,18,58,.5), 0 14px 34px -22px rgba(1,18,58,.22);
  opacity:0; will-change:opacity, transform;
}
.call{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
.call__transcript{ padding:38px 40px; display:flex; flex-direction:column; gap:20px; }
.line{ margin:0; font-size:1rem; line-height:1.5; font-weight:400; letter-spacing:-.012em;
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.line.is-in{ opacity:1; transform:none; }
.line b{ display:block; margin-bottom:3px; font-size:.9rem; font-weight:650; letter-spacing:-.01em; }
.call__record{ padding:38px 36px; border-left:1px solid rgba(1,18,58,.08); }
.call__record dl{ margin:0; }
.ex{ padding:14px 0; border-bottom:1px solid rgba(1,18,58,.07);
  opacity:0; transform:translateY(6px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.ex:first-child{ padding-top:0; }
.ex:last-child{ border-bottom:0; }
.ex.is-in{ opacity:1; transform:none; }
.ex dt{ font-size:.88rem; font-weight:400; margin-bottom:3px; }
.ex dd{ margin:0; font-size:1.02rem; font-weight:650; letter-spacing:-.015em; }

/* scene B on small screens only; on desktop the cubes are the nodes */
.proof--flow{ display:none; }

/* the ending. On desktop the cubes are the mark and cubes.js places the name
   beside them, sized from --mark; the SVG mark is only for small screens. */
.lockup{ position:absolute; inset:0; z-index:3; pointer-events:none; color:var(--navy); --mark:220px; }
.lockup__mark{ display:none; }
.lockup__text{
  position:absolute; left:0; top:0;
  display:flex; flex-direction:column; gap:calc(var(--mark) * .05);
  white-space:nowrap; opacity:0; will-change:clip-path, opacity, transform;
}
.lockup__name{ font-size:calc(var(--mark) * .5); font-weight:640; line-height:.9; letter-spacing:-.045em; }
/* no WebGL: the lockup stands on its own, SVG mark and all */
.lockup.is-static{ position:relative; inset:auto; display:flex; align-items:center; justify-content:center; gap:22px; padding:20svh 0; --mark:120px; }
.lockup.is-static .lockup__mark{ display:block; width:var(--mark); height:var(--mark); }
.lockup.is-static .lockup__text{ position:relative; opacity:1; }
.lockup__kind{ font-size:calc(var(--mark) * .165); font-weight:400; line-height:1; letter-spacing:-.02em; }

/* the labels ride on the cubes; cubes.js positions each one under its cube */
.tags{ position:absolute; inset:0; z-index:3; margin:0; padding:0; list-style:none; pointer-events:none; }
.tag{
  position:absolute; left:0; top:0;
  display:inline-flex; align-items:center;
  padding:8px 15px; border-radius:999px;
  font-size:.88rem; font-weight:560; letter-spacing:-.015em; white-space:nowrap; color:var(--navy);
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  box-shadow:var(--glass-edge), 0 10px 26px -14px rgba(1,18,58,.35);
  opacity:0;
  transition:opacity .5s var(--ease);
  will-change:transform, opacity;
}
.tag.is-on{ opacity:.78; }
.tag.is-current{ opacity:1; font-weight:680; box-shadow:var(--glass-edge), 0 16px 34px -14px rgba(1,18,58,.5); }

/* ── small screens: nothing pins, the story reads as a stack ── */
@media (max-width: 899px){
  .method{ height:auto; }
  .method__pin{ position:relative; height:auto; overflow:visible; padding:13svh 0 12svh; }
  .method__gl{ position:relative; height:52svh;
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 62%, transparent);
            mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 62%, transparent); }
  .beats{ position:relative; inset:auto; margin-top:2svh; padding:0 7vw; }
  .beat{ position:relative; top:auto; width:auto; max-width:none; margin:0 0 8svh; font-size:clamp(2rem, 9.6vw, 3.4rem);
    text-wrap:balance;
    opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .beat:last-child{ margin-bottom:5svh; }
  .beat.is-in{ opacity:1; transform:none; }

  /* the labels become a plain set of chips under "Everything it takes." */
  .tags{ position:relative; inset:auto; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0 6vw; }
  .tag{ position:relative; opacity:1; transform:none !important; }

  /* the proof chapter becomes two plain cards, each fading in as it arrives */
  .edges,.nodes{ display:none; }
  .proof{ position:relative; top:auto; width:auto; margin:-3svh 0 10svh;
    opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .proof.is-in{ opacity:1; transform:none; }
  .proof .line,.proof .ex{ opacity:1; transform:none; }
  .call{ grid-template-columns:1fr; min-height:0; }
  .call__transcript{ border-right:0; border-bottom:1px solid rgba(1,18,58,.08); }
  .proof--flow{ display:block; margin-left:0; margin-right:0; padding:18px 14px;
    border-radius:22px; background:rgba(255,255,255,.72);
    box-shadow:0 0 0 1px rgba(255,255,255,.85) inset, 0 24px 50px -30px rgba(1,18,58,.35); }
  .proof--flow svg{ display:block; width:100%; height:auto; }

  .lockup{ position:relative; inset:auto; display:flex; align-items:center; justify-content:center;
    gap:14px; padding:16svh 6vw 14svh; --mark:62px; }
  .lockup__mark{ display:block; width:var(--mark); height:var(--mark); flex:none; }
  .lockup__text{ position:relative; opacity:1; clip-path:none !important; transform:none !important; -webkit-mask-image:none !important; mask-image:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .tag,.beat,.proof,.line,.ex{ transition:none; }
}