/* ═══════════════════════════════════════════════════════════════════════════
   ARETÉ — THE INTRO (2026-09-16)
   The first-run intro is rebuilt on the constitution. The old dialog (a stroke
   glyph in a rounded box, a gradient headline, a glossy CTA) belonged to the
   pre-cube design and is retired.
   The law here is the law of Today: ONE object, the cube, held left; the words
   right. CUT TO ONE CARD 2026-09-19 (founder ruling): the intro sets the contract
   and names the differentiator, and stops. The cube keeps its first pose, whole and
   held on its axis, the field deep.
   Three typefaces only. One Cormorant italic phrase. No gradient text.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the ground closes over the app: the intro is a room, not a box on a dashboard */
#welcome{ padding:0 !important;
  background:radial-gradient(120% 80% at 32% 45%, #001f3f 0%, #02060e 60%) !important; }
/* OPAQUE (founder 09-16): the room behind (Today, its header hairline) bled through the
   translucent ground as one hard horizontal line above the cube. Nothing shows through now. */
html[data-theme="light"] #welcome{
  background:radial-gradient(120% 80% at 32% 45%, #ffffff 0%, #f4f4f1 60%) !important; }

/* THE STAGE — full ground, not a floating box. The card chrome is stood down. */
#welcome #wc-card{
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important;
  width:100% !important; max-width:1180px !important; text-align:left !important;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:clamp(24px,5vw,72px);
  padding:clamp(20px,4vh,48px) clamp(20px,5vw,56px) !important;
}
/* the card-hero top-edge highlight (::after, a 1px cyan line) is the "line where the
   light comes from" she saw above the cube (founder 09-16). The intro has no card. */
#welcome #wc-card::before, #welcome #wc-card::after{ display:none !important; content:none !important; }

/* the leave, kept quiet and out of the reading line */
#wc-skip{
  position:fixed !important; top:18px; right:22px; z-index:2;
  font-family:var(--f-meta); font-size:var(--t-meta); letter-spacing:.02em;
  color:rgb(var(--ink3)); background:none; border:0; padding:8px 10px; cursor:pointer;
  transition:color var(--dur-2,240ms) ease;
}
#wc-skip:hover{ color:rgb(var(--ink)); }

/* ── THE OBJECT ───────────────────────────────────────────────────────────
   The Intercept cube, its own CSS (.ic-*), nothing redrawn here. Only the
   pose, the depth of the field and the light change between the acts. */
#wc-cube{
  --ics:118px; position:relative; width:100%; height:clamp(280px,44vh,400px);
  perspective:1000px; perspective-origin:50% 45%;
  justify-self:center;
}
#wc-cube .ic-cubie{ transition:transform var(--dur-4,900ms) cubic-bezier(.2,.8,.2,1),
                               opacity var(--dur-4,900ms) cubic-bezier(.2,.8,.2,1); }

/* act 1 — held. The site's own pose and its slow turn, nothing added.
   Acts 2 to 4 were cut with the four-act intro on 2026-09-19; their poses are gone
   rather than left to sit in the sheet with nothing able to reach them. */
#wc-cube[data-act="1"]{ --lean:0deg; }

.ic-rig{ transition:transform var(--dur-4,900ms) cubic-bezier(.2,.8,.2,1); }

/* ── THE WORDS ─────────────────────────────────────────────────────────── */
#wc-words{ max-width:38ch; }
#wc-kicker{ display:block; margin:0 0 var(--sp-3,14px); }
#wc-title{
  font-family:var(--f-disp) !important; font-weight:600; font-size:var(--t-title);
  line-height:1.12; letter-spacing:-.015em; color:rgb(var(--ink)) !important;
  background:none !important; -webkit-text-fill-color:currentColor !important;
  text-wrap:balance; margin:0 0 var(--sp-4,18px) !important;
}
#wc-body{ font-size:var(--t-body); line-height:1.55; color:rgb(var(--ink2)); margin:0 0 var(--sp-4,18px) !important; min-height:0 !important; }
/* the one phrase that matters, per act */
#wc-turn{ display:block; font-family:var(--f-em); font-style:italic; font-weight:500;
  font-size:1.12em; line-height:1.4; color:var(--ice2); margin:0 0 clamp(24px,4vh,36px); }

/* one card leaves the tick row empty; an empty row must not hold its 18px open */
#wc-dots:empty{ display:none !important; margin:0 !important; }
/* the acts, read as measured ticks, not as bubbles */
#wc-dots{ display:flex; align-items:center; gap:10px; justify-content:flex-start !important; margin:0 0 var(--sp-4,18px) !important; }
#welcome .wdot{ height:1px; width:34px; border-radius:0; background:var(--hair2);
  box-shadow:none !important; transition:background var(--dur-2,240ms) ease; }
#welcome .wdot.on{ width:34px; background:var(--ice); box-shadow:none !important; }

#wc-actions{ display:flex; align-items:center; gap:var(--sp-3,14px); }
#wc-next{ flex:0 0 auto !important; }

@media (max-width:900px){
  /* one column: the object first, the words under it. On a short phone the intro
     scrolls rather than clipping the button off the bottom. */
  #welcome{ align-items:flex-start !important; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #welcome #wc-card{ grid-template-columns:1fr; gap:clamp(12px,3vh,28px); align-content:center;
    min-height:100%; padding-top:max(20px,env(safe-area-inset-top,0px)) !important;
    padding-bottom:max(24px,env(safe-area-inset-bottom,0px)) !important; }
  #wc-cube{ height:clamp(180px,26vh,260px); --ics:88px; order:0; }
  #wc-words{ order:1; max-width:none; }
  #wc-skip{ position:absolute !important; top:10px; right:12px; }
}
/* short viewports (landscape phones, small laptops): the object yields, never the words */
@media (max-height:700px){
  #wc-cube{ height:clamp(150px,24vh,220px); --ics:78px; }
  #wc-turn{ margin-bottom:18px; }
}
@media (prefers-reduced-motion:reduce){
  #wc-cube .ic-cubie, .ic-rig{ transition:none; }
}

/* the words settle on their own clock; no frame-loop dependency */
#wc-words.wc-in > *{ animation:wc-settle var(--dur-3,600ms) cubic-bezier(.2,.8,.2,1) both; }
#wc-words.wc-in > #wc-title{ animation-delay:60ms; }
#wc-words.wc-in > #wc-body{ animation-delay:110ms; }
#wc-words.wc-in > #wc-turn{ animation-delay:160ms; }
#wc-words.wc-in > #wc-dots, #wc-words.wc-in > #wc-actions{ animation:none; }
@keyframes wc-settle{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #wc-words.wc-in > *{ animation:none; } }