/* ==========================================================================
   RepTap shell — public site and operator platform only.

   SCOPING CONTRACT
   Every rule in this file is namespaced under [data-shell]. Gym-facing pages
   (/m/<slug>, /g/<gym>) never set that attribute, so nothing here can reach
   them. core.css and member.css are deliberately untouched for the same
   reason: machine.html loads both, and editing either would change the gym
   interface. Redesign work goes here instead.

   Direction: premium gym technology. Near-black foundation, light behaving
   like it does in a dark room — pooled, directional, falling off — rather
   than flat panels of colour. Steel, glass and glow, not neon.
   ========================================================================== */

[data-shell] {
  /* ---- foundation ------------------------------------------------- */
  --sh-black:      #050505;
  --sh-near:       #08080A;
  --sh-base:       #0B0B0D;
  --sh-raised:     #111114;

  /* ---- glass ------------------------------------------------------ */
  --sh-glass:        rgba(16, 16, 20, 0.55);
  --sh-glass-strong: rgba(20, 20, 26, 0.72);
  --sh-glass-light:  rgba(30, 30, 38, 0.42);
  --sh-glass-line:   rgba(255, 255, 255, 0.09);
  --sh-glass-line-2: rgba(255, 255, 255, 0.16);
  --sh-blur:         20px;

  /* ---- text ------------------------------------------------------- */
  --sh-text:    #F7F6F5;      /* faintly warm, avoids clinical blue-white */
  --sh-muted:   #A2A3A9;
  --sh-faint:   #74757C;

  /* ---- environment accents ---------------------------------------- */
  --sh-red:     #FF3B47;
  --sh-red-deep:#8E1119;
  --sh-blue:    #3C8DFF;
  --sh-blue-deep:#0B3A82;
  --sh-violet:  #A46BFF;
  --sh-violet-deep:#4A1E8C;

  /* The live accent. Sections retint this, so one variable drives every
     border, glow and focus ring in the current environment. */
  --sh-accent:      var(--sh-red);
  --sh-accent-deep: var(--sh-red-deep);
  --sh-accent-soft: rgba(255, 59, 71, 0.14);
  --sh-accent-line: rgba(255, 59, 71, 0.34);

  /* ---- structure -------------------------------------------------- */
  --sh-r-sm: 10px; --sh-r-md: 16px; --sh-r-lg: 22px; --sh-r-xl: 30px;
  --sh-r-pill: 999px;
  --sh-max: 1200px;

  --sh-shadow:      0 20px 60px rgba(0, 0, 0, 0.55);
  --sh-shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.4);

  --sh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sh-dur: 220ms;
  --sh-dur-slow: 520ms;
}

/* Environment retinting. Applied per section on the public page. */
[data-shell] .env-red    { --sh-accent: var(--sh-red);    --sh-accent-deep: var(--sh-red-deep);
                           --sh-accent-soft: rgba(255,59,71,.14);  --sh-accent-line: rgba(255,59,71,.34); }
[data-shell] .env-blue   { --sh-accent: var(--sh-blue);   --sh-accent-deep: var(--sh-blue-deep);
                           --sh-accent-soft: rgba(60,141,255,.14); --sh-accent-line: rgba(60,141,255,.34); }
[data-shell] .env-violet { --sh-accent: var(--sh-violet); --sh-accent-deep: var(--sh-violet-deep);
                           --sh-accent-soft: rgba(164,107,255,.15);--sh-accent-line: rgba(164,107,255,.36); }

/* ------------------------------------------------------------------ base */
body[data-shell] {
  background: var(--sh-black);
  color: var(--sh-text);
  -webkit-font-smoothing: antialiased;
}

[data-shell] .sh-wrap {
  width: 100%;
  max-width: var(--sh-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ------------------------------------------------------------ typography */
[data-shell] .sh-display {
  font-size: clamp(2.75rem, 7.2vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin: 0;
}
[data-shell] .sh-h2 {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
  margin: 0;
}
[data-shell] .sh-h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
}
[data-shell] .sh-lede {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--sh-muted);
  margin: 0;
  max-width: 52ch;
}
[data-shell] .sh-body { font-size: 0.9375rem; line-height: 1.6; color: var(--sh-muted); margin: 0; }
[data-shell] .sh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.6875rem; font-weight: 650;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sh-faint);
}
[data-shell] .sh-eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--sh-accent);
  box-shadow: 0 0 10px var(--sh-accent);
}
[data-shell] .sh-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------- glass */
[data-shell] .glass {
  position: relative;
  background: var(--sh-glass);
  backdrop-filter: blur(var(--sh-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--sh-blur)) saturate(140%);
  border: 1px solid var(--sh-glass-line);
  border-radius: var(--sh-r-lg);
  box-shadow: var(--sh-shadow-soft);
}
/* A hairline of light along the top edge, the way a real pane catches it. */
[data-shell] .glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  [data-shell] .glass { background: rgba(17, 17, 21, 0.94); }
}

[data-shell] .glass-lit {
  border-color: var(--sh-accent-line);
  box-shadow: var(--sh-shadow-soft),
              0 0 46px -14px var(--sh-accent),
              inset 0 1px 0 rgba(255,255,255,.06);
}

/* -------------------------------------------------------------- buttons */
[data-shell] .sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--sh-r-pill);
  border: 1px solid var(--sh-glass-line-2);
  background: var(--sh-glass-light);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--sh-text);
  font-size: 0.9375rem; font-weight: 560; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none;
  transition: transform var(--sh-dur) var(--sh-ease),
              border-color var(--sh-dur) var(--sh-ease),
              background var(--sh-dur) var(--sh-ease),
              box-shadow var(--sh-dur) var(--sh-ease);
}
[data-shell] .sh-btn .arw {
  transition: transform var(--sh-dur) var(--sh-ease);
  display: inline-block;
}
[data-shell] .sh-btn:hover {
  border-color: var(--sh-accent-line);
  box-shadow: 0 0 34px -12px var(--sh-accent);
}
[data-shell] .sh-btn:hover .arw { transform: translateX(4px); }
[data-shell] .sh-btn:active { transform: scale(0.985); }

[data-shell] .sh-btn-primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
    color-mix(in srgb, var(--sh-accent) 88%, #000);
  border-color: color-mix(in srgb, var(--sh-accent) 60%, transparent);
  color: #fff;
  font-weight: 620;
  box-shadow: 0 10px 34px -12px var(--sh-accent), inset 0 1px 0 rgba(255,255,255,.28);
}
[data-shell] .sh-btn-primary:hover {
  box-shadow: 0 14px 44px -10px var(--sh-accent), inset 0 1px 0 rgba(255,255,255,.34);
}

/* ---------------------------------------------------------------- focus */
[data-shell] :focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------ reveal */
[data-shell][data-anim] .sh-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
[data-shell][data-anim] .sh-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--sh-dur-slow) var(--sh-ease) var(--sh-delay, 0ms),
              transform var(--sh-dur-slow) var(--sh-ease) var(--sh-delay, 0ms);
}
[data-shell][data-anim] .sh-reveal.is-done { will-change: auto; }
/* Recovery path snaps: a suspended transition in a background tab would
   otherwise leave content invisible. */
[data-shell][data-anim] .sh-reveal.is-instant {
  opacity: 1; transform: none; transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-shell][data-anim] .sh-reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  [data-shell] * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}