/* Scrap Group — 2026 monochrome "liquid chrome" theme layer.
   Loaded last on index.html, on top of the pre-existing chrome-theme.css
   (which already reskins most components silver/chrome) plus the direct
   violet -> silver hex/rgb remap already applied to site-base.css,
   luxury.css, unify.css and chrome-theme.css. This file only adds what
   nothing else already provides: the liquid-chrome ambient background,
   editorial type utilities, and a store-card hover polish. Extends
   motion.css rather than replacing it. */

/* scrap-s.png (nav mark) is a purple-tinted asset with no monochrome
   export available — grayscale it and swap the legacy violet glow. */
html body .logo img{filter:grayscale(1) drop-shadow(0 0 16px rgba(233,236,240,.4)) drop-shadow(0 14px 28px rgba(0,0,0,.45))!important}

/* legacy-critical.css's default (non-reduced-motion) hero-avatar-wrap
   glow is still violet — chrome-theme.css only overrides it inside a
   prefers-reduced-motion block, so the normal state needs its own fix. */
html body #home .hero-avatar-wrap{background:radial-gradient(circle at 50% 50%,rgba(233,236,240,.20),rgba(201,205,214,.09) 42%,rgba(255,255,255,.045) 62%,transparent 74%)!important;box-shadow:0 0 54px rgba(201,205,214,.16),inset 0 0 42px rgba(255,255,255,.05)!important}
html body #home .hero-avatar-wrap::before{background:conic-gradient(from 220deg,transparent,rgba(233,236,240,.4),transparent 32%,rgba(255,255,255,.32),transparent 58%,rgba(201,205,214,.36),transparent)!important}
html body #home .hero-avatar-wrap::after{box-shadow:inset 0 0 34px rgba(233,236,240,.12)!important}
html body #home .hero-avatar,html body #home .hero-avatar-wrap img{box-shadow:0 24px 40px rgba(0,0,0,.52),0 0 22px rgba(233,236,240,.18)!important}

/* ── Liquid-chrome ambient field: layered blurred blobs + slow drift ── */
.ft{position:relative;overflow:hidden}
.stg{letter-spacing:.32em!important}
.chrome-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.chrome-field::before,.chrome-field::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)}
.chrome-field::before{width:62%;height:62%;top:-14%;left:-8%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}
.chrome-field::after{width:54%;height:54%;bottom:-18%;right:-6%;background:radial-gradient(circle,rgba(180,184,192,.13),transparent 70%)}
@keyframes chromeDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6%,4%) scale(1.1)}}
@keyframes chromeDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-5%,-6%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .chrome-field::before,.chrome-field::after{animation:none!important}
}

/* ── Editorial type utilities (Rent Touch-inspired oversized rhythm) ── */
.chrome-kicker{display:inline-block;font-family:var(--fb),sans-serif;font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:#9aa0ad}
.chrome-display{font-family:var(--fd),Georgia,serif;font-weight:400;letter-spacing:.03em}

/* ── Portfolio-style product card image zoom on hover ── */
.pc img{transition:transform .7s var(--ease-lux)}
.pc:hover img{transform:scale(1.05)}

/* ── Structural pass: bigger editorial rhythm site-wide ────────────── */
/* More generous vertical breathing room between sections. */
html body .sec{padding:132px 0!important}
html body .sec+.sec{padding-top:132px!important}

/* Fewer, bigger store cards — portfolio scale instead of a dense grid. */
html body .pg{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))!important;max-width:1240px!important;gap:34px!important}
html body .pc{max-width:460px!important}

/* Bigger founder-card numerals and tighter, larger nav type rhythm. */
html body .fc-num{font-size:15px!important;letter-spacing:.3em!important}
html body .nav-links{gap:34px!important}
html body .nav-links a{font-size:11px!important;letter-spacing:.16em!important}

/* Richer, larger liquid-chrome field: three overlapping blobs instead
   of two corner accents, so it reads as an immersive backdrop rather
   than a decorative corner glow (closer to the reference banner). */
.chrome-field::before{width:78%;height:78%;top:-22%;left:-16%;filter:blur(52px)}
.chrome-field::after{width:70%;height:70%;bottom:-26%;right:-14%;filter:blur(52px)}
.chrome-field{background:radial-gradient(46% 46% at 52% 42%,rgba(255,255,255,.06),transparent 72%)}

/* Bigger, more tracked footer copyright line. */
html body .ft-copy p{font-size:11px!important;letter-spacing:.24em!important}

/* ── Direction pass: "Glass Bento" ───────────────────────────────────
   Chosen direction: a floating glass-pill nav (kept, not flattened)
   and a bento-grid hero — a big glass tile for the pitch (badge,
   wordmark, tag, CTA) beside a second glass tile for the live Discord
   stats, instead of one long centered stack. Space Grotesk carries the
   headline instead of the serif, for the more contemporary/product feel. */

:root{
  --glass-bg:rgba(255,255,255,.055);
  --glass-line:rgba(255,255,255,.14);
  --glass-blur:14px;
}

/* Nav: keep the floating pill, just make it read more like glass. */
html body #nav{-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));background:rgba(10,10,12,.5)!important;border-color:var(--glass-line)!important}
html body #nav.stuck{background:rgba(8,8,10,.72)!important}

/* Hero: bento grid — main pitch tile + stats tile, side by side. */
html body .hero{min-height:100vh!important;padding-top:clamp(120px,16vh,190px)!important;display:flex!important;align-items:center!important}
html body .hero-in,html body section#home.hero>.hero-in,html body #home.hero>.hero-in,body>section#home.hero>.hero-in{
  display:grid!important;
  grid-template-columns:1.6fr 1fr!important;
  align-items:stretch!important;
  gap:22px!important;
  width:min(1180px,calc(100vw - 64px))!important;
  max-width:1180px!important;
  background:none!important;border:none!important;box-shadow:none!important;padding:0!important;
  text-align:start!important;
}
html body .hero-main-tile{
  grid-column:1;
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-line)!important;
  border-radius:28px!important;
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 30px 90px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(30px,4vw,52px)!important;
  display:flex!important;flex-direction:column;align-items:flex-start!important;text-align:start!important;
  gap:16px;
}
html body .hero-main-tile .hero-avatar-wrap{margin:0 0 4px!important;width:64px!important;height:64px!important;background:none!important;box-shadow:none!important}
html body .hero-main-tile .hero-avatar,html body .hero-main-tile .hero-avatar-wrap img{width:64px!important;height:64px!important;box-shadow:0 0 0 1px rgba(255,255,255,.3)!important}
html body .hero-main-tile .hero-avatar-wrap::before,html body .hero-main-tile .hero-avatar-wrap::after{display:none!important}
html body .hero-main-tile .h-line{display:none!important}
html body #home .h-badge,html body #home .hero-wordmark,html body #home #heroTag,html body #home .h-tag,html body #home .h-btns{text-align:start!important;justify-self:start!important;margin-left:0!important;margin-right:0!important}
html body .hero-main-tile .h-badge{margin:0!important;text-align:start!important}
html body .hero-wordmark,html body #home .hero-wordmark{
  font-family:'Space Grotesk',var(--fb),sans-serif!important;
  font-weight:700!important;text-transform:none!important;
  font-size:clamp(34px,4vw,58px)!important;line-height:1.04!important;letter-spacing:-.01em!important;
  text-align:start!important;max-width:none!important;
}
html body .hero-main-tile .h-tag{margin:0!important;text-align:start!important;max-width:440px}
html body .hero-main-tile .h-btns{justify-content:flex-start!important;width:auto!important}

html body .hero-stats-shell{
  grid-column:2;
  margin:0!important;max-width:none!important;
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-line)!important;
  border-radius:28px!important;
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 30px 90px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(22px,2.6vw,32px)!important;
  display:flex!important;flex-direction:column;justify-content:center;gap:20px;
}
html body .hero-stats-top{border-bottom:1px solid var(--glass-line)!important;padding-bottom:16px!important}
html body .hero-stats-grid{grid-template-columns:1fr!important;gap:14px!important;padding-top:4px!important}
html body .hero-stat-card{background:rgba(255,255,255,.03)!important;border-color:var(--glass-line)!important}

@media (max-width:980px){
  html body .hero-in{grid-template-columns:1fr!important}
  html body .hero-stats-shell{grid-column:1}
}

/* Section eyebrows/headlines: same geometric display for consistency. */
html body .sh{font-family:'Space Grotesk',var(--fb),sans-serif!important;font-weight:700!important;letter-spacing:-.01em!important}
html body .sh em{font-style:normal!important}

/* legacy-critical.css and chrome-theme.css both place the hero children
   with `html body #home ...` (ID) selectors, which outrank plain class
   rules. Without matching that specificity the stats panel gets pinned to
   a phantom third column (grid-column:3/4, grid-row:1/7) and stripped of
   its background, which is what broke the two-tile layout. */
html body #home .hero-stats-shell{
  grid-column:2!important;grid-row:auto!important;order:0!important;
  align-self:stretch!important;justify-self:stretch!important;
  width:auto!important;max-width:none!important;margin:0!important;
  padding:clamp(22px,2.4vw,30px)!important;
  background:var(--glass-bg)!important;
  border:1px solid var(--glass-line)!important;
  border-top:1px solid var(--glass-line)!important;
  border-radius:28px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;gap:18px!important;
}
html body #home .hero-stats-top{
  flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;
  gap:14px!important;padding:0 0 16px!important;margin:0!important;
  border-bottom:1px solid var(--glass-line)!important;text-align:start!important;
}
html body #home .hero-server-meta{align-items:flex-start!important;text-align:start!important}
html body #home .hero-server-name{white-space:normal!important}
html body #home .hero-join-btn{align-self:stretch!important;width:100%!important}
html body #home .hero-stats-grid,html body .hero-stats-grid{
  grid-template-columns:1fr!important;gap:10px!important;margin-top:0!important;padding-top:0!important;
}
html body #home .hero-stat-card{
  display:flex!important;flex-direction:row!important;align-items:baseline!important;justify-content:space-between!important;
  gap:12px!important;text-align:start!important;min-height:0!important;
  padding:12px 16px!important;border-radius:16px!important;
  background:rgba(255,255,255,.03)!important;border:1px solid var(--glass-line)!important;
}
html body #home .hero-stat-card::before{display:none!important}
html body #home .hero-stat-label{margin:0!important;order:1;font-size:10px!important}
html body #home .hero-stat-value{order:2;font-size:22px!important;line-height:1!important;text-align:end!important}
html body #home .hero-stat-copy{display:none!important}

/* Same for the main tile's children — they carry the ID-scoped centering. */
html body #home .hero-avatar-wrap{
  justify-self:start!important;align-self:flex-start!important;
  grid-column:auto!important;grid-row:auto!important;
  width:66px!important;height:66px!important;min-width:0!important;min-height:0!important;
  margin:0 0 6px!important;order:0!important;
  background:none!important;box-shadow:none!important;
}
html body #home .hero-avatar,html body #home .hero-avatar-wrap img{
  width:66px!important;height:66px!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.28)!important;
}
/* chrome-theme.css appends the tagline as a centered ::after on the
   wordmark — start-align it so it sits on the tile's text column. */
html body #home .hero-wordmark::after,html body #heroWordmark::after{
  text-align:start!important;margin-left:0!important;margin-right:0!important;max-width:520px!important;
}

@media (max-width:980px){
  html body #home .hero-stats-shell{grid-column:1!important}
}

/* ── Scroll performance ─────────────────────────────────────────────
   luxury.css applies backdrop-filter to every repeated card (.pc, .fc,
   .pki, .qb, .pl, …) — ~38 blurred layers on this page, each re-sampling
   what's behind it on every scroll frame. The translucent fill already
   carries the glass look on a dark ground, so keep the blur only where
   content actually passes behind it: the fixed nav, the two hero tiles,
   and overlays that are visible one at a time. */
html body .pc,html body .fc,html body .pki,html body .qb,html body .pl,
html body .abox,html body .form-lock,html body .ap-ok,html body .pnote,
html body .guest-box,html body .terms-box,html body .login-strip,
html body .tm-card,html body .hero-stat-card,
html body section#home.hero>.hero-in,html body #home.hero>.hero-in{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}

/* The one remaining moving decoration sits on its own layer so the hero
   text isn't repainted with it. */
html.has-motion .chrome-field::before,html.has-motion .chrome-field::after{will-change:transform}
@media (prefers-reduced-motion:reduce){
  html.has-motion .chrome-field::before,html.has-motion .chrome-field::after{will-change:auto}
}