/* ─────────────────────────────────────────────────────────────────────────────
   CHATRIM theme C — "showcase": composition + motion on top of theme B
   Preview only. Loads AFTER dashboard.css, so B is the base and this adds the
   things a stylesheet alone could not: a full-bleed hero, a real type scale, and
   movement. Pairs with showcase.js, which ADDS nodes and classes and never edits
   an existing render function.

   Everything this file styles is either (a) a cx-* element that showcase.js
   created, so the page's own code has never heard of it, or (b) a safe property
   on an existing class. The one deliberate exception is .wrap's max-width — see
   the note there.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Give the page room. The single 680px column is the main reason it reads as
   a basic template; everything being the same width removes all hierarchy.
   max-width only — no display/position change, and the layout is already fluid. */
.wrap{ max-width:880px; padding-top:0; }

/* ═══ HERO ═══════════════════════════════════════════════════════════════════
   Full-bleed band built by showcase.js. 100vw with a negative inline margin is
   the standard way to break a centred column without touching its structure. */
.cx-hero{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw); margin-bottom:34px;
  min-height:clamp(420px,62vh,660px);
  /* Vertical padding, NOT just a min-height. On a short screen (1366x768 is the common one) the
     copy is taller than the min-height, the band grows to fit it EXACTLY, and the sub-goal bar
     ends up flush against the bottom edge touching the next section — which is what "the subs
     graphic is too low" was. Padding guarantees breathing room at any height. */
  padding:clamp(44px,6.5vh,86px) 0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
}
/* The page's own sky canvas sits behind everything and goes bright blue in daytime, which
   washed the whole band out. The hero owns its own dark backdrop so it reads the same at
   any hour, with the colour wash on top of that. */
.cx-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 20% 45%, rgba(54,226,230,.20), transparent 66%),
    radial-gradient(58% 68% at 82% 28%, rgba(255,178,61,.20), transparent 64%),
    linear-gradient(180deg,#04050a 0%,#070a12 55%,var(--bg) 100%);
  z-index:0;
  animation:cx-drift 22s ease-in-out infinite alternate;
}
@keyframes cx-drift{ from{transform:translate3d(-2%,-1%,0) scale(1)} to{transform:translate3d(2%,1.5%,0) scale(1.07)} }

/* the art, finally at a size worth looking at */
.cx-hero-art{
  position:absolute; right:clamp(-40px,2vw,60px); bottom:0;
  /* Sized by HEIGHT, width auto — the boss stays big and is meant to run behind the headline.
     I briefly capped the width here while chasing a "boss not showing" report; that turned out to
     be a 403 on /bosses for remote visitors, and the cap only made every wide boss small for no
     reason. width:auto keeps the natural aspect, so nothing is ever distorted, and the band's
     overflow:hidden handles anything that runs past the edge. */
  height:clamp(340px,66vh,660px);
  width:auto; max-width:none;
  /* The roster ranges from a near-black biker to a pale blue ice giant, so the art needs its own
     lift to read on a dark band rather than depending on each boss being conveniently bright. */
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.8)) saturate(1.18) contrast(1.1) brightness(1.1);
  z-index:1; opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
  transition:opacity 1.1s cubic-bezier(.2,.7,.3,1), transform 1.1s cubic-bezier(.2,.7,.3,1);
  pointer-events:none; user-select:none;
}
.cx-hero.cx-in .cx-hero-art{ opacity:1; transform:translate3d(0,0,0) scale(1); }
.cx-hero-art.cx-left{ right:auto; left:clamp(-40px,2vw,60px); }

/* A soft backlight behind the boss so its silhouette separates from the band — the roster runs
   from a near-black biker to a pale ice giant, and neither should depend on luck to read. */
.cx-hero::after{
  content:''; position:absolute; right:4%; bottom:0;
  width:min(52vw,760px); height:86%;
  background:radial-gradient(closest-side, rgba(255,214,150,.20), rgba(54,226,230,.08) 58%, transparent 72%);
  z-index:0; pointer-events:none;
}

/* copy sits ABOVE the art, with a soft scrim so the headline stays readable where the
   two overlap */
.cx-hero-copy{
  position:relative; z-index:2; text-align:left; width:100%; max-width:880px; padding:0 20px;
  text-shadow:0 2px 24px rgba(0,0,0,.65);
}
/* Scrim: dark enough to keep the headline readable, light enough that the boss reads THROUGH it
   rather than being buried. It fades out earlier now that the art is full size again. */
.cx-hero-copy::before{
  content:''; position:absolute; inset:-14% -8% -14% -40%;
  background:linear-gradient(90deg,rgba(4,5,10,.82) 0%,rgba(4,5,10,.44) 46%,transparent 74%);
  z-index:-1; pointer-events:none;
}

/* The hero carries the wordmark now, so the crest's duplicate title is redundant.
   Kept for a11y/SEO, visually hidden rather than removed from the DOM. */
.cx-hero ~ .crest h1{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.cx-hero ~ .crest{ margin-bottom:18px; }
.cx-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10.5px; font-weight:800; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:16px;
  padding:7px 14px; border-radius:999px;
  background:rgba(54,226,230,.09); border:1px solid rgba(54,226,230,.26);
}
.cx-eyebrow .cx-dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:cx-pulse 1.9s ease-in-out infinite; }
@keyframes cx-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.8)} }

.cx-title{
  font-family:'Cinzel',serif; font-weight:700;
  font-size:clamp(50px,10vw,116px); line-height:.9; letter-spacing:.015em;
  margin:0 0 18px; color:var(--t1);
  text-shadow:0 0 70px rgba(54,226,230,.26);
}
.cx-title em{
  font-style:normal; display:block;
  background:linear-gradient(100deg,#FFB23D 0%,#FFD98A 42%,#36E2E6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cx-sub{
  font-size:clamp(14.5px,1.7vw,18.5px); line-height:1.6; color:var(--t2);
  max-width:30ch; margin:0 0 26px;
}
/* ── Boss caption: says what you are looking at ───────────────────────────── */
.cx-boss{
  border-left:2px solid rgba(255,178,61,.55);
  padding:2px 0 2px 15px; margin:0 0 22px; max-width:56ch;   /* real lore needs real room */
}
.cx-boss-name{
  font-family:'Cinzel',serif; font-size:clamp(15px,1.8vw,19px); font-weight:700;
  letter-spacing:.14em; color:var(--gold); margin-bottom:5px;
}
.cx-boss-lore{ margin:0; font-size:clamp(12.5px,1.35vw,14px); line-height:1.68; color:var(--t2); font-style:italic; }

/* The generic tagline explains the site to a newcomer, but on a short screen it competes with the
   lore for room and pushes the goal bar down. The lore is the more interesting of the two, so the
   tagline is the one that yields. */
@media (max-height:820px){ .cx-sub{ display:none; } }

/* art + caption fade together on a boss swap */
.cx-hero.cx-swap .cx-hero-art,
.cx-hero.cx-swap .cx-boss{ opacity:0; transition:opacity .4s ease; }
.cx-boss{ transition:opacity .5s ease; }

/* ── Sub goal: the one number a viewer can actually act on ────────────────── */
.cx-goal{ max-width:360px; }
.cx-goal-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.cx-goal-l{ font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); }
.cx-goal-n{ font-size:13px; color:var(--t2); font-variant-numeric:tabular-nums; }
.cx-goal-n b{ font-size:clamp(20px,2.4vw,26px); color:var(--gold); font-weight:800; letter-spacing:-.01em; }
.cx-goal-bar{
  height:7px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.5);
}
.cx-goal-bar i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#FFB23D,#FFD98A);
  box-shadow:0 0 14px rgba(255,178,61,.5);
  transition:width 1.1s cubic-bezier(.2,.7,.3,1);
}

/* fades the hero into the page instead of ending on a hard edge */
.cx-hero-fade{ position:absolute; left:0; right:0; bottom:-1px; height:150px; background:linear-gradient(180deg,transparent,var(--bg)); z-index:0; pointer-events:none; }

/* ═══ SCROLL REVEAL ══════════════════════════════════════════════════════════
   showcase.js tags elements .cx-rv, then adds .cx-in when they enter view. Only
   opacity + transform, so nothing reflows and no layout is affected. */
.cx-rv{ opacity:0; transform:translate3d(0,22px,0); }
.cx-rv.cx-in{ opacity:1; transform:none; transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1); }

/* ═══ SCALE + RHYTHM ═════════════════════════════════════════════════════════ */
.crest{ margin-bottom:26px; }
.crest h1{ font-size:clamp(26px,3.6vw,38px); }

/* These sit on the page's live sky canvas, which goes bright blue in daytime — a dark theme's
   dim greys vanished against it. Brighter ink plus a dark halo so they read at any hour. */
.crest .countdown{
  color:#dce6f5; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6);
}
.crest .season-line{ text-shadow:0 1px 3px rgba(0,0,0,.8), 0 0 16px rgba(54,226,230,.35); }
.lb-title{
  font-size:13px; letter-spacing:.24em; margin:40px 0 14px;
  color:#e6ecf7; text-shadow:0 1px 3px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55);
}
.section-head span{ color:#c3cde0; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.about-card{ padding:clamp(18px,2.6vw,30px); }
.user-bar{ padding:clamp(16px,2.4vw,24px) clamp(18px,2.6vw,26px); }
.user-pts-num{ font-size:clamp(20px,2.8vw,30px) !important; line-height:1.1; }

/* numbers the eye can actually track while they count up */
.cx-counting{ font-variant-numeric:tabular-nums; }

/* ═══ MICRO-INTERACTION ══════════════════════════════════════════════════════ */
.bn, .lr, .about-card, .med-cell, .inv-sq{ will-change:transform; }
.bn:hover{ transform:translateY(-3px) scale(1.004); }
.lr:hover{ transform:translateX(5px); }
.tab, .s2-pill{ transform:translateZ(0); }
.tab.active{ animation:cx-pop .32s cubic-bezier(.2,.7,.3,1); }
@keyframes cx-pop{ 0%{transform:scale(.94)} 60%{transform:scale(1.035)} 100%{transform:scale(1)} }

/* the stream embed is the one genuinely big thing on the page — let it feel big */
.stream-wrap{ box-shadow:0 0 0 1px var(--bdr), 0 30px 70px rgba(0,0,0,.66); }

/* ═══ ACCESSIBILITY ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .cx-rv, .cx-rv.cx-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cx-hero-art{ opacity:1 !important; transform:none !important; transition:none !important; }
  .cx-hero-bg{ animation:none !important; }
  .cx-eyebrow .cx-dot{ animation:none !important; }
  .tab.active{ animation:none !important; }
}

@media(max-width:700px){
  .cx-hero{ min-height:clamp(380px,60vh,520px); align-items:flex-end; padding-bottom:28px; }
  .cx-hero-art{ height:clamp(230px,40vh,340px); right:-30px; opacity:.5 !important; }
  .cx-hero-copy{ text-align:left; }
  .cx-sub{ max-width:none; }
  .wrap{ max-width:none; }
}

/* Build marker — tiny, dim, bottom of the page. Exists so two machines can be compared at a
   glance when one of them looks stale. See the ?v= note in chatrim.html's <head>. */
.cx-build{
  margin:34px 0 0; text-align:center;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t3); opacity:.5; font-variant-numeric:tabular-nums;
}