/* ============================================================
   Scholé - sales deck kit
   Brand tokens, type ramp, and the scroll-reveal engine.
   Shared by every deck under /decks. Page-specific work lives
   in the deck's own deck.css.
   ============================================================ */

@font-face { font-family:'New Spirit'; font-style:normal; font-weight:300; font-display:swap;
  src:url('fonts/NewSpirit-Light.woff2') format('woff2'); }
@font-face { font-family:'New Spirit'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/NewSpirit-Regular.woff2') format('woff2'); }
@font-face { font-family:'New Spirit'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/NewSpirit-Medium.woff2') format('woff2'); }
@font-face { font-family:'New Spirit'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/NewSpirit-SemiBold.woff2') format('woff2'); }
@font-face { font-family:'New Spirit'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/NewSpirit-Bold.woff2') format('woff2'); }

:root {
  --ns:'New Spirit', Georgia, 'Times New Roman', serif;
  --sans:-apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', system-ui, sans-serif;

  /* slate ramp - same seven names as the product */
  --subtle:#f8fafc; --lightest:#f1f5f9; --lighter:#e2e8f0;
  --light:#94a3b8;  --medium:#64748b;   --dark:#334155;    --darkest:#0f172a;

  /* brand */
  --grad-a:#9075c0; --grad-mid:#7173c8; --grad-b:#6e94cf;
  --solid:#8287c7;  --tint:#f7f8fb;     --deep:#5c5470;
  --amber:#fbc132;  --ok:#16a34a;
  --lavender:#b6a9f2;
  --grad-close-a:#6e7bb0;  /* bottom left  */
  --grad-close-b:#997ac9;  /* top right    */
  --turquoise:#a3dbd2;

  /* per-theme ink, overridden by [data-ink] */
  --ink:var(--darkest);
  --ink-soft:var(--dark);
  --ink-faint:var(--medium);
  --rule:rgba(15,23,42,.12);
  --panel:rgba(255,255,255,.72);

  --gutter:clamp(28px, 5.6vw, 104px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* A section states its own ink. Only the light set used to be declared, so when
   the root flipped to light for the section below, a dark-ink section still on
   screen inherited white text on a light ground - restate the dark set here so
   a section always wins inside its own box. */
[data-ink="dark"] {
  --ink:var(--darkest);
  --ink-soft:var(--dark);
  --ink-faint:var(--medium);
  --rule:rgba(15,23,42,.12);
  --panel:rgba(255,255,255,.72);
}

[data-ink="light"] {
  --ink:#fff;
  --ink-soft:rgba(255,255,255,.86);
  --ink-faint:rgba(255,255,255,.62);
  --rule:rgba(255,255,255,.28);
  --panel:rgba(255,255,255,.14);
}

* { box-sizing:border-box; }
/* Clipping used to live on the root, to stop the cover's thrown letters widening
   the layout viewport on phones. It cannot: a clip container on html or body
   breaks position:sticky for everything inside it. The clip belongs on the one
   section that actually overflows - see .cover in the deck's own stylesheet. */
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--deep); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; }

/* ---------- the background stack -------------------------------
   One fixed layer per theme; the engine crossfades between them
   as sections take over the viewport.                            */
.bg { position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg i {
  position:absolute; inset:0; opacity:0; display:block;
  /* one go, not a crossfade - the switch happens when the section above has
     left the screen, so a long dissolve just muddied the handover */
  transition:opacity .14s linear;
}
.bg i.on { opacity:1; }

.bg-cover {
  background:
    radial-gradient(120% 90% at 18% 8%,  rgba(226,208,248,.95) 0%, transparent 55%),
    radial-gradient(110% 90% at 88% 14%, rgba(206,238,246,.9)  0%, transparent 55%),
    radial-gradient(120% 100% at 60% 100%, rgba(226,230,252,.85) 0%, transparent 60%),
    linear-gradient(135deg,#fbfaff 0%,#f2effc 45%,#eef4fb 100%);
}
.bg-purple {
  background:
    radial-gradient(90% 80% at 78% 6%,  rgba(176,160,214,.85) 0%, transparent 60%),
    linear-gradient(212deg,#9b8ecb 0%,#8981c4 46%,#7a83b8 100%);
}
.bg-mist {
  background:
    radial-gradient(90% 80% at 10% 10%, rgba(233,222,251,.95) 0%, transparent 58%),
    radial-gradient(90% 80% at 92% 30%, rgba(210,240,247,.9)  0%, transparent 55%),
    linear-gradient(120deg,#fdfcff 0%,#f3f0fd 40%,#eaf3fa 72%,#f6f5fe 100%);
}
.bg-payoff {
  background:linear-gradient(100deg,#ab9cc8 0%,#9b95c6 48%,#8b95c2 100%);
}

/* ---------- layout ---------------------------------------------- */
/* Sections size to their content; the padding is the whole gap between two
   sections' content (it meets its neighbour's, so the visible gap is 2×this).
   Only the cover still claims the full viewport. */
.sec {
  position:relative; z-index:1;
  padding:clamp(56px,8vh,96px) var(--gutter);
  display:flex; flex-direction:column; justify-content:center;
}
.cover { min-height:100svh; }
.wrap { width:100%; max-width:1180px; margin:0 auto; }

/* ---------- type ------------------------------------------------- */
.eyebrow {
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}
.display, .h1, .h2 { font-family:var(--ns); font-weight:400; letter-spacing:-.012em; margin:0; }
.display { font-size:clamp(44px,7.6vw,104px); line-height:.9; }
.h1      { font-size:clamp(34px,5.2vw,74px);  line-height:.9; }
.h2      { font-size:clamp(27px,3.4vw,48px);  line-height:.9; }
.lede    { font-size:clamp(18px,1.6vw,27px); line-height:1.42; color:var(--ink-soft); margin:0; }
.body    { font-size:clamp(15px,1.05vw,18px); color:var(--ink-soft); margin:0; }
.fine    { font-size:13px; color:var(--ink-faint); }
em.mark  { font-style:italic; }

/* ---------- reveal engine ---------------------------------------
   [data-reveal] starts displaced and lands when its section is
   in view. --d is the stagger, assigned by scroll.js.             */
[data-reveal] {
  opacity:0; transform:translate3d(0, 26px, 0);
  transition:opacity .82s var(--ease) var(--d,0ms),
             transform .82s var(--ease) var(--d,0ms);
  will-change:opacity, transform;
}
[data-reveal="left"]  { transform:translate3d(-34px,0,0); }
[data-reveal="right"] { transform:translate3d(34px,0,0); }
[data-reveal="scale"] { transform:scale(.94); }
[data-reveal="blur"]  { filter:blur(9px); transition:opacity .9s var(--ease) var(--d,0ms),
                        transform .9s var(--ease) var(--d,0ms), filter .9s var(--ease) var(--d,0ms); }
.in [data-reveal] { opacity:1; transform:none; filter:none; }

/* a headline that wipes in behind a white plate, as in the deck */
.plate {
  display:inline-block; background:#fff; color:var(--grad-a);
  padding:.02em .24em .1em; border-radius:13px;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
  clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease) var(--d,0ms);
}
.in .plate { clip-path:inset(0 0 0 0); }

/* words that rise out of their own mask - split by scroll.js */
.w { display:inline-block; overflow:hidden; vertical-align:bottom;
     padding-bottom:.14em; margin-bottom:-.14em; }
.w > i { display:inline-block; font-style:inherit; transform:translateY(108%);
         transition:transform .8s var(--ease) calc(var(--d,0ms) + var(--i) * 58ms); }
.in .w > i { transform:none; }
/* …except on the cover, where intro.js drives them instead. It starts from an
   untransformed baseline on purpose: GSAP reads any CSS transform already on the
   element as a pixel offset and then adds its own on top, which would leave the
   words parked one line low when the tween finished. */
.cover-sub .w > i { transition:none; transform:none; }

/* a rule that draws itself */
.draw { height:1px; background:var(--rule); transform-origin:0 50%;
        transform:scaleX(0); transition:transform 1.1s var(--ease) var(--d,0ms); }
.in .draw { transform:scaleX(1); }

/* a bar that fills to --to */
.bar { height:8px; border-radius:999px; background:rgba(15,23,42,.08); overflow:hidden; }
.bar i { display:block; height:100%; width:0; border-radius:999px;
         background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
         transition:width 1.3s var(--ease) var(--d,0ms); }
.in .bar i { width:var(--to,60%); }

/* ---------- pieces ------------------------------------------------ */
.spark { width:1em; height:1em; fill:currentColor; flex:none; }

.card {
  background:#fff; border:1px solid var(--lighter); border-radius:18px;
  box-shadow:0 1px 3px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.10);
}

.chip {
  display:inline-block; border-radius:999px; padding:.34em .9em;
  background:var(--panel); color:var(--ink);
  font-size:clamp(15px,1.35vw,21px); line-height:1.35;
}
[data-ink="light"] .chip { background:rgba(92,84,112,.5); backdrop-filter:blur(3px); }

.num { font-family:var(--ns); font-variant-numeric:tabular-nums; font-weight:400; line-height:1; }

/* Olé, cropped out of the Rive stills. --w is the window width; the source
   frame is 1600×900 and the numbers below are that crop expressed as ratios. */
.ole { position:relative; overflow:hidden; width:var(--w); height:calc(var(--w) * 1.9792); }
.ole img { position:absolute; width:calc(var(--w) * 8.3333);
           left:calc(var(--w) * -3.6771); top:calc(var(--w) * -1.224); max-width:none; }

/* the whole celebration beat: Olé, the sparkles, the level bar */
.cele { position:relative; overflow:hidden; width:var(--w); height:calc(var(--w) * .6545); }
.cele img { position:absolute; width:calc(var(--w) * 1.4545);
            left:calc(var(--w) * -.2409); top:calc(var(--w) * -.1045); max-width:none; }

.bubble {
  position:relative; background:#fff; color:var(--darkest); border-radius:16px;
  padding:12px 16px; font-family:var(--ns); font-size:15px; line-height:1.28;
  box-shadow:0 10px 26px rgba(15,23,42,.16);
}
.bubble:after {
  content:''; position:absolute; left:-9px; bottom:16px;
  border:9px solid transparent; border-right-color:#fff; border-left:0;
}

/* ---------- chrome ------------------------------------------------ */
.progress {
  position:fixed; top:0; left:0; height:2px; z-index:20; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b));
}
.dots {
  position:fixed; right:clamp(12px,2vw,26px); top:50%; transform:translateY(-50%);
  z-index:20; display:flex; flex-direction:column; gap:12px;
}
.dots a {
  width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.28;
  transition:opacity .35s, transform .35s; color:var(--ink);
}
.dots a.on { opacity:1; transform:scale(1.55); }

/* The close: our copy on our ground, and the wordmark large along the bottom,
   running off the right edge the way it does on the site. */
/* The copy sits at the top, not in the middle: the band above ends in solid
   colour, and the close starts the moment that solid does — no gap between the
   pattern shutting and the sentence beginning. The wordmark still anchors the
   bottom, so the height is what holds the two apart. */
.foot {
  position:relative; z-index:1; overflow:hidden;
  /* The copy sits at the top and the wordmark is pinned to the foot, so the
     height IS the gap between them — measured at 503px on a 900px viewport,
     halved here to ~250 by taking a quarter of the viewport out of the box. */
  min-height:72svh; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; text-align:center;
  padding:clamp(18px,2.5vh,36px) var(--gutter) clamp(150px,22vw,300px);
  /* Horizontal, not the 100deg it used to be. The star band above ends in solid
     colour made of stars, and each star is tinted by its own x across the
     viewport — a flat left-to-right ramp. Tilt this by ten degrees and the
     footer's top edge samples a different part of the ramp than the stars
     resting on it do: measured, a 4/255 step at the right-hand end, along a
     perfectly straight line, which is exactly the kind of edge the eye picks
     out. Flat here, flat there, and the seam disappears. */
  background:linear-gradient(90deg, var(--grad-close-a) 0%, var(--grad-close-b) 100%);
}
.foot-inner { position:relative; z-index:2; display:flex; flex-direction:column;
              align-items:center; max-width:820px; }
.foot-mark {
  position:absolute; z-index:1; right:20px; bottom:0;
  width:min(55%, 826px); color:#fff; opacity:.96; pointer-events:none;
}
.foot-mark svg { width:100%; height:auto; fill:currentColor; display:block; }

.cue {
  position:absolute; left:50%; bottom:clamp(40px,6vh,66px); transform:translateX(-50%);
  color:var(--ink-faint); line-height:0;
}
.cue-mouse { width:clamp(24px,2.1vw,32px); height:auto; display:block; overflow:visible;
             animation:cue-bob 2.3s var(--ease) infinite; }
.cue-wheel { transform-box:fill-box; transform-origin:center;
             animation:cue-wheel 2.3s var(--ease) infinite; }
.cue-chev  { opacity:.24; animation:cue-chev 2.3s var(--ease) infinite; }
.cue-chev + .cue-chev { animation-delay:.11s; }

/* it pokes down and comes back, rather than sliding */
@keyframes cue-bob  { 0%,100% { transform:translateY(0) }   34% { transform:translateY(7px) }
                      54% { transform:translateY(-2px) }    72% { transform:translateY(1px) } }
@keyframes cue-wheel{ 0%,100% { transform:translateY(0) }   34% { transform:translateY(5px) } }
@keyframes cue-chev { 0%,100% { opacity:.22 }               40% { opacity:.85 } }

.cta {
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  background:#fff; color:var(--grad-a); border-radius:999px;
  padding:15px 28px; font-weight:600; font-size:17px;
  box-shadow:0 12px 34px rgba(15,23,42,.2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta:hover { transform:translateY(-2px); box-shadow:0 18px 44px rgba(15,23,42,.26); }

/* Only the pieces that GSAP positions are held back - the old word, the date,
   the authors and the cue are all on screen from the first paint. */
html.intro .crash-new, html.intro .crash-ghost, html.intro .cover-sub { opacity:0; }
html.locked, html.locked body { overflow:hidden; height:100%; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .w > i { transform:none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; filter:none !important; }
  .plate { clip-path:none !important; }
  .draw { transform:scaleX(1) !important; }
  .bar i { width:var(--to,60%) !important; }
  .cue-mouse, .cue-wheel, .cue-chev { animation:none; }
  .ole-stand, .ole-eyes, .ole-lid,
  .ole-rig .o-pupil, .ole-rig .o-brow-l, .ole-rig .o-brow-r { animation:none; }
  .cue-chev { opacity:.6; }
  .ent-sso-pill, .ent-standards span, .ent-bars i, .ent-checks span {
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .ent-tick path, .ent-checks path { stroke-dashoffset:0 !important; transition:none !important; }
  .xp-wave, .xp-orb-star { animation:none !important; }
}