/* ================================================================
   GRUB SHADES DESIGN SYSTEM — Master CSS v4  (Anthropic-grade)
   Sideral Sync · 2026

   § 01  Design Tokens
   § 02  Global Polish
   § 03  Motion Primitives  ← ExpoOut everywhere, 30ms stagger
   § 04  Ambient Glow System
   § 05  Section System
   § 06  Card System  ← 3D lift, scan-line, overshoot hover
   § 07  Typography Refinements
   § 08  Info / Highlight Boxes
   § 09  CTA & Footer
   § 10  Hub Card Icons (SVG)
   § 11  Hub — Index Page  ← 3D perspective grid
   § 12  Keyframe Library
   § 13  Tablet (769–1024px)
   § 14  Mobile (≤768px)
   § 15  Small Mobile (≤480px)
   ================================================================ */


/* ── § 01  DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --gs-green:     #197B30;
  --gs-neon:      #2ECC40;
  --gs-black:     #0A0A0A;

  /* ExpoOut — main easing, gives physical weight */
  --ease-expo:    cubic-bezier(.16, 1, .3, 1);
  /* Overshoot — for toggles, card-release, buttons */
  --ease-over:    cubic-bezier(.34, 1.56, .64, 1);
  /* EaseIn — exit / disappear animations */
  --ease-in:      cubic-bezier(.55, 0, 1, .45);
}


/* ── § 02  GLOBAL POLISH ─────────────────────────────────────── */
::selection { background: rgba(25,123,48,.45); color: #fff; }

:focus-visible {
  outline: 1.5px solid rgba(46,204,64,.55);
  outline-offset: 2px;
}

::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb   { background: rgba(25,123,48,.55); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2ECC40; }

/* ·· Inline SVG icon wrapper (.ci) ·····························  */
.ci {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  margin-right: 4px;
}
.ci svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ·· Standalone card-icon SVG ·································· */
.card-icon > svg { width: 20px; height: 20px; }

/* ·· Check-box SVG (acomp checklists) ·························· */
.check-box { display: flex; align-items: center; justify-content: center; }
.check-box svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ·· Green status dot (message signatures) ····················· */
.ci-dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: #2ECC40;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 2px;
  flex-shrink: 0;
}

/* Full-page grain — centralises per-page texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  opacity: .28;
}


/* ── § 03  MOTION PRIMITIVES ─────────────────────────────────── */

/* ·· Scroll reveal (backward-compat + new variant) ·············· */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  .75s var(--ease-expo),
    transform .75s var(--ease-expo);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

.gs-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  .75s var(--ease-expo),
    transform .75s var(--ease-expo);
  will-change: opacity, transform;
}
.gs-reveal.gs-in { opacity: 1; transform: none; }

/* ·· Stagger parent — JS assigns --i to each child ·············· */
.gs-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  .6s var(--ease-expo),
    transform .6s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 30ms);   /* 30ms — Anthropic spec */
  will-change: opacity, transform;
}
.gs-stagger.gs-in > * { opacity: 1; transform: none; }

/* ·· Scale-in ··················································· */
.gs-scale {
  opacity: 0;
  transform: scale(.93);
  transition:
    opacity  .6s var(--ease-expo),
    transform .6s var(--ease-expo);
}
.gs-scale.gs-in { opacity: 1; transform: scale(1); }

/* ·· Line-wipe (clip-path) ·····································  */
.gs-line {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s var(--ease-expo);
}
.gs-line.gs-in { clip-path: inset(0 0% 0 0); }

/* ·· Hub-card entrance (controlled by motion.js stagger) ········ */
body.gs-ready .hub-card {
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition:
    opacity  .55s var(--ease-expo),
    transform .55s var(--ease-expo);
  will-change: opacity, transform;
}
body.gs-ready .hub-card.gs-in {
  opacity: 1;
  transform: none;
}

/* ·· Cover content page entrance ································ */
.cover-content {
  animation: gsPageIn .85s var(--ease-expo) both;
}


/* ── § 04  AMBIENT GLOW SYSTEM ───────────────────────────────── */
.cover {
  background-image:
    radial-gradient(ellipse 70% 55% at 85% -5%,  rgba(25,123,48,.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 95%,  rgba(46,204,64,.06) 0%, transparent 60%) !important;
  background-color: var(--black, #0A0A0A) !important;
}

/* Animated breathing glow on cover — slow, looping */
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 80% 20%, rgba(46,204,64,.07) 0%, transparent 60%);
  animation: gsCoverBreathe 7s var(--ease-expo) infinite alternate;
}

.hero {
  background-image:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(25,123,48,.07) 0%, transparent 65%) !important;
  background-color: var(--black, #0A0A0A) !important;
}

.cta-section {
  background-image:
    radial-gradient(ellipse 70% 70% at 50% -20%, rgba(25,123,48,.16) 0%, transparent 65%) !important;
  background-color: var(--black, #0A0A0A) !important;
}

/* Section ghost number — JS drives the parallax via transform */
.section-num {
  color: rgba(46,204,64,.03) !important;
  font-size: 140px !important;
  will-change: transform;
  transition: transform .1s linear;
}


/* ── § 05  SECTION SYSTEM ────────────────────────────────────── */
.section { position: relative; }

.section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(25,123,48,.18) 25%,
    rgba(46,204,64,.10) 50%,
    rgba(25,123,48,.18) 75%,
    transparent 100%
  );
  pointer-events: none;
}

/* Cat-header accent underline */
.cat-header { position: relative !important; overflow: hidden; }
.cat-header::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, #2ECC40, transparent);
}


/* ── § 06  CARD SYSTEM ───────────────────────────────────────── */

/* Expo / partner / msg cards */
.expo-card,
.partner-card,
.msg-card {
  transition:
    box-shadow .4s var(--ease-expo),
    transform .4s var(--ease-expo),
    border-left-color .25s var(--ease-expo) !important;
  will-change: transform;
}
.expo-card:hover,
.partner-card:hover,
.msg-card:hover {
  box-shadow:
    -3px 0 28px rgba(46,204,64,.09),
    0 8px 36px rgba(0,0,0,.42),
    inset 0 0 0 .5px rgba(25,123,48,.12) !important;
  transform: translateX(2px) translateY(-2px) !important;
}

/* Pitch quote */
.expo-card .pitch {
  border-image: linear-gradient(180deg, #2ECC40 0%, #197B30 100%) 1 !important;
  border-left-width: 2px !important;
}

/* Tags */
.tag-hot  { box-shadow: 0 0 10px rgba(192,57,43,.14) !important; }
.tag-warm { box-shadow: 0 0 10px rgba(184,133,10,.14) !important; }
.tag-cool { box-shadow: 0 0 10px rgba(26,82,118,.14) !important; }

/* Stat / meta */
.stat-card:hover,
.meta-card:hover {
  box-shadow: 0 0 0 .5px rgba(25,123,48,.14), 0 4px 24px rgba(0,0,0,.28) !important;
}

/* Hub cards — 3D lift on hover with expoOut + scan-line */
.hub-card {
  position: relative;
  overflow: hidden;
  transition:
    box-shadow  .45s var(--ease-expo),
    transform   .45s var(--ease-expo),
    border-left-color .25s var(--ease-expo),
    background  .35s var(--ease-expo) !important;
  will-change: transform;
}
.hub-card:hover {
  box-shadow:
    0 20px 60px rgba(0,0,0,.65),
    0 0 0 .5px rgba(25,123,48,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform: translateY(-4px) scale(1.012) !important;
}
.hub-card:hover .hub-card-title { color: #2ECC40 !important; }

/* Scan-line shimmer on hub-card hover */
.hub-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    rgba(46,204,64,.025) 1px,
    transparent 2px
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-expo);
}
.hub-card:hover::after { opacity: 1; }

/* Green left-border reveal on hub-card hover */
.hub-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #2ECC40, #197B30);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s var(--ease-expo);
}
.hub-card:hover::before { transform: scaleY(1); }


/* ── § 07  TYPOGRAPHY REFINEMENTS ────────────────────────────── */
.cover-sub,
.section-lead,
.hero-sub { line-height: 1.78 !important; }

.section-eyebrow,
.cover-eyebrow,
.cover-badge,
.hero-eyebrow {
  letter-spacing: 4px !important;
}

/* Cover badge — breathing shimmer */
.cover-badge {
  animation: gsBadgeShimmer 4s ease-in-out infinite;
}


/* ── § 08  INFO / HIGHLIGHT BOXES ────────────────────────────── */
.info-box,
.rule-box,
.tip {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 2px 12px rgba(0,0,0,.2) !important;
}

.highlight {
  box-shadow:
    0 20px 60px rgba(25,123,48,.28),
    0 0 0 1px rgba(46,204,64,.12) !important;
}


/* ── § 09  CTA & FOOTER ──────────────────────────────────────── */
footer, .footer, .kit-footer {
  border-top: .5px solid rgba(25,123,48,.06) !important;
  background: #000 !important;
}


/* ── § 10  HUB CARD SVG ICONS ────────────────────────────────── */
.hub-card-icon svg {
  width: 24px;
  height: 24px;
  color: var(--green, #197B30);
  transition:
    color     .35s var(--ease-expo),
    transform .35s var(--ease-over);
}
.hub-card:hover .hub-card-icon svg {
  color: var(--neon, #2ECC40);
  transform: scale(1.15) rotate(-4deg);
}


/* ── § 11  HUB — INDEX PAGE ──────────────────────────────────── */
#hub nav { padding-left: 0 !important; }

/* 3D perspective wrapper for hub-grid — JS drives entrance rotation */
#hub .hub-grid {
  perspective: 2000px;
  perspective-origin: 50% 25%;
}
#hub .hub-grid .hub-card {
  transform-style: preserve-3d;
}

/* Depth layers — JS assigns these classes */
.hub-card.z-near  { transform: translateZ(18px); }
.hub-card.z-mid   { transform: translateZ(0px);  }
.hub-card.z-far   { transform: translateZ(-12px); }


/* ── § 12  KEYFRAME LIBRARY ──────────────────────────────────── */

/* Page / cover entrance — slow trigger (S1 of Slow-Fast-Boom-Stop) */
@keyframes gsPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Cover breathing glow */
@keyframes gsCoverBreathe {
  from { opacity: .6; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.08); }
}

/* Pulsing dot on hub-back */
@keyframes grubPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* Badge shimmer — subtle glow pulse */
@keyframes gsBadgeShimmer {
  0%, 100% { box-shadow: 0 0 10px rgba(25,123,48,.10), 0 0 0 1px rgba(46,204,64,.12); }
  50%       { box-shadow: 0 0 24px rgba(46,204,64,.30), 0 0 0 1px rgba(46,204,64,.22); }
}

/* Progress bar entrance */
@keyframes gsProgressIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(var(--p, 0)); opacity: 1; }
}


/* ── § 13  TABLET (769–1024px) ───────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .cover-title   { font-size: clamp(52px, 9vw, 76px) !important; }
  .section-title { font-size: clamp(30px, 5vw, 44px) !important; }
  .container     { padding: 0 28px !important; }
}


/* ── § 14  MOBILE (≤768px) ───────────────────────────────────── */
@media (max-width: 768px) {

  /* 14-A  HUB-BACK FULL-WIDTH BAR ─────────────────────────────── */
  .hub-back {
    width: 100% !important;
    right: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(25,123,48,.22) !important;
    padding: 0 20px !important;
    gap: 12px !important;
    height: 50px !important;
    background: rgba(5,5,5,.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 1px 20px rgba(0,0,0,.5) !important;
  }

  .hub-back-arrow {
    font-size: 18px !important;
    color: #2ECC40 !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(46,204,64,.25) !important;
    flex-shrink: 0 !important;
  }

  .hub-back-text {
    font-size: 10px !important;
    letter-spacing: 3.5px !important;
    color: rgba(255,255,255,.55) !important;
  }

  /* Pulsing dot — right edge */
  .hub-back::after {
    content: '';
    position: absolute;
    right: 20px;
    width: 6px; height: 6px;
    background: #2ECC40;
    border-radius: 50%;
    box-shadow: 0 0 8px #2ECC40, 0 0 16px rgba(46,204,64,.4);
    animation: grubPulse 2.5s ease-in-out infinite;
  }

  /* 14-B  SECONDARY NAV — hidden on hub-back pages ─────────────── */
  .hub-back ~ nav { display: none !important; }

  /* 14-C  FIRST FOLD SPACING ───────────────────────────────────── */
  .hub-back ~ .cover     { padding-top: 50px !important; min-height: 100svh !important; min-height: 100vh !important; }
  .hub-back ~ .hero      { padding-top: 82px !important; }
  .hub-back ~ .container { padding-top: 70px !important; }

  /* 14-D  COVER CONTENT — flex centering, explicit horizontal padding */
  .cover-content {
    min-height: calc(100svh - 50px) !important;
    padding-top:    28px !important;
    padding-bottom: 40px !important;
    padding-left:   40px !important;
    padding-right:  40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* 14-E  COVER TYPOGRAPHY ─────────────────────────────────────── */
  .cover-title {
    font-size: clamp(40px, 10vw, 60px) !important;
    line-height: .9 !important;
    letter-spacing: -0.5px !important;
  }
  .cover-logo   { width: 72px !important; height: auto !important; margin-bottom: 20px !important; }
  .cover-badge  { font-size: 9px !important; letter-spacing: 2.5px !important; padding: 5px 14px !important; }
  .cover-sub    { font-size: 14px !important; line-height: 1.75 !important; }
  .cover-meta   { gap: 24px !important; padding-top: 24px !important; margin-top: 24px !important; flex-wrap: wrap !important; }
  .cover-meta-val   { font-size: 14px !important; font-weight: 700 !important; color: rgba(255,255,255,.88) !important; }
  .cover-meta-label { font-size: 8px !important; letter-spacing: 2.5px !important; }

  /* 14-F  HUB INDEX (no hub-back) ─────────────────────────────── */
  #hub nav, #hub .nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    height: 52px !important;
  }
  #hub .hero              { padding: 32px 16px 28px !important; }
  #hub .hero-title        { font-size: clamp(32px, 9vw, 48px) !important; line-height: .9 !important; }
  #hub .hub-grid          { padding: 12px 16px 32px !important; }

  /* Disable 3D effects on mobile */
  #hub .hub-grid          { perspective: none !important; }
  .hub-card.z-near,
  .hub-card.z-mid,
  .hub-card.z-far         { transform: none !important; }
}


/* ── § 15  SMALL MOBILE (≤480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .hub-back               { height: 48px !important; }
  .hub-back ~ .cover      { padding-top: 48px !important; }
  .hub-back ~ .hero       { padding-top: 78px !important; }
  .hub-back ~ .container  { padding-top: 64px !important; }

  .cover-content {
    min-height: calc(100svh - 48px) !important;
    padding-top:    20px !important;
    padding-bottom: 28px !important;
    padding-left:   20px !important;
    padding-right:  20px !important;
  }

  .cover-title {
    font-size: clamp(36px, 11vw, 52px) !important;
    letter-spacing: -1px !important;
  }

  .cover-meta {
    gap: 16px !important;
    padding-top: 18px !important;
    margin-top: 18px !important;
  }
}