/* ============================================================ */
/* GPS PRODUCT PAGES — Design System + Animation System          */
/* Greenpoint Seeds | gps-product-pages.css                      */
/* Upload to: /wp-content/themes/YOUR-THEME/assets/css/          */
/* ============================================================ */

/* --- CSS VARIABLES --- */
:root {
  /* Backgrounds */
  --gps-bg-void: #020617;
  --gps-bg-base: #0a0f1a;
  --gps-bg-elevated: #111827;
  --gps-bg-surface: #1e293b;

  /* Text */
  --gps-text-primary: #f1f5f9;
  --gps-text-body: #e2e8f0;
  --gps-text-secondary: #94a3b8;
  --gps-text-muted: #64748b;

  /* Accents */
  --gps-green: #22c55e;
  --gps-green-glow: rgba(34, 197, 94, 0.15);
  --gps-purple: #a855f7;
  --gps-purple-soft: #c084fc;
  --gps-purple-glow: rgba(168, 85, 247, 0.15);
  --gps-pink: #f472b6;
  --gps-pink-glow: rgba(244, 114, 182, 0.15);
  --gps-amber: #f59e0b;
  --gps-amber-glow: rgba(245, 158, 11, 0.15);
  --gps-red: #f87171;
  --gps-red-glow: rgba(239, 68, 68, 0.15);
  --gps-blue: #3b82f6;
  --gps-blue-glow: rgba(59, 130, 246, 0.15);
  --gps-gold: #fbbf24;
  --gps-gold-glow: rgba(251, 191, 36, 0.15);

  /* Border */
  --gps-border: #334155;
  --gps-border-hover: #475569;

  /* Timing */
  --gps-fast: 150ms;
  --gps-normal: 250ms;
  --gps-slow: 400ms;
  --gps-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gps-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gps-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Fonts */
  --gps-mono: 'JetBrains Mono', monospace;
  --gps-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ============================================================ */
/* WRAPPER                                                       */
/* ============================================================ */
.gps-product-wrap {
  font-family: var(--gps-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gps-text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gps-product-wrap *,
.gps-product-wrap *::before,
.gps-product-wrap *::after {
  box-sizing: border-box;
}


/* ============================================================ */
/* SCROLL REVEAL SYSTEM                                          */
/* ============================================================ */
.gps-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--gps-ease-out), transform 0.6s var(--gps-ease-out);
}

.gps-reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s var(--gps-ease-out), transform 0.5s var(--gps-ease-out);
}

.gps-reveal.visible,
.gps-reveal-left.visible {
  opacity: 1;
  transform: translate(0);
}

.gps-reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.5s var(--gps-ease-bounce), transform 0.5s var(--gps-ease-bounce);
}

.gps-reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.gps-reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.gps-reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.gps-reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.gps-reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.gps-reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
.gps-reveal-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
.gps-reveal-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }

.gps-reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ============================================================ */
/* HERO                                                          */
/* ============================================================ */
.gps-hero {
  background: linear-gradient(135deg, var(--gps-bg-void) 0%, var(--gps-bg-base) 50%, #1a0a2e 100%);
  border: 1px solid var(--gps-purple);
  border-radius: 16px;
  padding: 48px 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.gps-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gps-green), var(--gps-purple), var(--gps-green));
}

/* Accent color variants for hero border */
.gps-hero.pink-accent  { border-color: var(--gps-pink); }
.gps-hero.pink-accent::before  { background: linear-gradient(90deg, var(--gps-green), var(--gps-pink), var(--gps-green)); }
.gps-hero.amber-accent { border-color: var(--gps-amber); }
.gps-hero.amber-accent::before { background: linear-gradient(90deg, var(--gps-green), var(--gps-amber), var(--gps-green)); }
.gps-hero.green-accent { border-color: var(--gps-green); }
.gps-hero.green-accent::before { background: linear-gradient(90deg, var(--gps-green), var(--gps-green), var(--gps-green)); }
.gps-hero.blue-accent  { border-color: var(--gps-blue); }
.gps-hero.blue-accent::before  { background: linear-gradient(90deg, var(--gps-green), var(--gps-blue), var(--gps-green)); }

.gps-hero-glow-right {
  position: absolute;
  bottom: 0; right: 0;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.gps-hero-glow-left {
  position: absolute;
  top: 0; left: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.gps-hero-tag {
  font-family: var(--gps-mono);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gps-purple);
  margin: 0 0 12px 0;
}

.gps-hero h1,
.gps-hero .gps-hero-title {
  font-size: 52px;
  font-weight: 800;
  color: var(--gps-text-primary);
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0 0 16px 0;
  animation: gpsHeroGlow 6s ease-in-out infinite;
}

@keyframes gpsHeroGlow {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50% { text-shadow: 0 0 20px rgba(34, 197, 94, 0.08); }
}

.gps-hero-lineage {
  font-size: 20px;
  color: var(--gps-text-body);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.gps-hero-lineage .mother { color: var(--gps-purple); font-weight: 600; }
.gps-hero-lineage .father { color: var(--gps-green); font-weight: 600; }
.gps-hero-lineage .x      { color: var(--gps-text-muted); margin: 0 8px; }

/* Pink mother accent */
.gps-hero.pink-accent .gps-hero-tag,
.gps-hero.pink-accent .gps-hero-lineage .mother { color: var(--gps-pink); }

.gps-hero-tagline {
  font-size: 15px;
  color: var(--gps-text-secondary);
  font-style: italic;
  max-width: 600px;
  line-height: 1.6;
  margin: 0;
}

.gps-hero-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.gps-hero-badge,
.gps-badge {
  display: inline-block;
  font-family: var(--gps-mono);
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform var(--gps-fast) var(--gps-ease), box-shadow var(--gps-fast);
}

.gps-badge:hover { transform: translateY(-1px); }

.gps-badge.purple {
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.3);
  color: var(--gps-purple);
}
.gps-badge.green {
  background: var(--gps-green-glow);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--gps-green);
}
.gps-badge.pink {
  background: var(--gps-pink-glow);
  border: 1px solid rgba(244,114,182,0.3);
  color: var(--gps-pink);
}
.gps-badge.amber {
  background: var(--gps-amber-glow);
  border: 1px solid rgba(245,158,11,0.3);
  color: var(--gps-amber);
}
.gps-badge.muted {
  background: rgba(241,245,249,0.06);
  border: 1px solid var(--gps-border);
  color: var(--gps-text-secondary);
}


/* ============================================================ */
/* OPENING QUOTE                                                 */
/* ============================================================ */
.gps-opening-quote {
  background: var(--gps-bg-base);
  border-left: 3px solid var(--gps-purple);
  border-radius: 0 12px 12px 0;
  padding: 32px 36px;
  margin-bottom: 32px;
  transition: border-color var(--gps-normal), background var(--gps-slow);
}

.gps-opening-quote:hover {
  border-color: var(--gps-purple-soft);
  background: rgba(168,85,247,0.03);
}

.gps-opening-quote.pink-accent  { border-left-color: var(--gps-pink); }
.gps-opening-quote.pink-accent:hover  { border-color: #f9a8d4; background: rgba(244,114,182,0.03); }
.gps-opening-quote.amber-accent { border-left-color: var(--gps-amber); }
.gps-opening-quote.green-accent { border-left-color: var(--gps-green); }

.gps-opening-quote p {
  font-size: 18px;
  color: var(--gps-text-body);
  line-height: 1.7;
  font-style: italic;
  margin: 0;
}

.gps-opening-quote .attribution {
  font-family: var(--gps-mono);
  font-size: 12px;
  color: var(--gps-text-muted);
  margin-top: 16px;
  letter-spacing: 1px;
  font-style: normal;
}


/* ============================================================ */
/* STAT GRID                                                     */
/* ============================================================ */
.gps-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.gps-stat-card {
  background: var(--gps-bg-elevated);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: transform var(--gps-slow) var(--gps-ease-bounce),
              border-color var(--gps-normal),
              box-shadow var(--gps-slow);
  cursor: default;
}

.gps-stat-card:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--gps-green);
  box-shadow: 0 4px 20px var(--gps-green-glow);
}

.gps-stat-card .icon  { font-size: 28px; margin-bottom: 8px; }
.gps-stat-card .label {
  font-family: var(--gps-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gps-text-muted);
  margin-bottom: 8px;
}
.gps-stat-card .value {
  font-family: var(--gps-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--gps-green);
}
.gps-stat-card .value.purple { color: var(--gps-purple); }
.gps-stat-card .value.pink   { color: var(--gps-pink); }
.gps-stat-card .value.amber  { color: var(--gps-amber); }

.gps-stat-card .sub {
  font-family: var(--gps-mono);
  font-size: 12px;
  color: var(--gps-text-secondary);
  margin-top: 4px;
}


/* ============================================================ */
/* SECTION HEADERS                                               */
/* ============================================================ */
.gps-section-header { margin-bottom: 8px; }

.gps-section-tag {
  font-family: var(--gps-mono);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gps-purple);
  display: inline-block;
  margin: 0;
  transition: text-shadow var(--gps-normal);
}

.gps-section-tag:hover { text-shadow: 0 0 12px var(--gps-purple-glow); }

.gps-section-tag.green { color: var(--gps-green); }
.gps-section-tag.green:hover { text-shadow: 0 0 12px var(--gps-green-glow); }
.gps-section-tag.pink  { color: var(--gps-pink); }
.gps-section-tag.pink:hover  { text-shadow: 0 0 12px var(--gps-pink-glow); }
.gps-section-tag.amber { color: var(--gps-amber); }
.gps-section-tag.amber:hover { text-shadow: 0 0 12px var(--gps-amber-glow); }

.gps-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gps-text-primary);
  margin: 0 0 8px 0;
}

.gps-section-subtitle {
  font-size: 15px;
  color: var(--gps-text-secondary);
  line-height: 1.6;
  margin: 0;
}


/* ============================================================ */
/* CARDS                                                         */
/* ============================================================ */
.gps-card {
  background: var(--gps-bg-base);
  border: 1px solid var(--gps-border);
  border-radius: 16px;
  padding: 36px;
  margin-bottom: 32px;
}

.gps-card.elevated { background: var(--gps-bg-elevated); }
.gps-card.void     { background: var(--gps-bg-void); }
.gps-card.purple-border { border-color: var(--gps-purple); }


/* ============================================================ */
/* GENETIC BARS                                                  */
/* ============================================================ */
.gps-gene-bar-wrap { margin-bottom: 20px; }
.gps-gene-row      { margin-bottom: 20px; }
.gps-gene-row:last-child { margin-bottom: 0; }

.gps-gene-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.gps-gene-label .name { color: var(--gps-text-body); font-size: 14px; font-weight: 600; }
.gps-gene-label .pct  { font-family: var(--gps-mono); font-size: 14px; font-weight: 700; }
.gps-gene-label .pct.purple { color: var(--gps-purple); }
.gps-gene-label .pct.green  { color: var(--gps-green); }
.gps-gene-label .pct.amber  { color: var(--gps-amber); }
.gps-gene-label .pct.pink   { color: var(--gps-pink); }

.gps-gene-track {
  background: var(--gps-bg-surface);
  border-radius: 6px;
  height: 10px;
  overflow: hidden;
  position: relative;
}

.gps-gene-fill {
  height: 100%;
  border-radius: 6px;
  width: 0%;
  transition: width 1.2s var(--gps-ease-out);
  position: relative;
  overflow: hidden;
}

.gps-gene-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: gpsShimmer 3s ease-in-out infinite 1.5s;
}

@keyframes gpsShimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

.gps-gene-fill.purple { background: linear-gradient(90deg, var(--gps-purple), var(--gps-purple-soft)); }
.gps-gene-fill.green  { background: linear-gradient(90deg, var(--gps-green), #4ade80); }
.gps-gene-fill.amber  { background: linear-gradient(90deg, var(--gps-amber), #fbbf24); }
.gps-gene-fill.pink   { background: linear-gradient(90deg, var(--gps-pink), #f9a8d4); }
.gps-gene-fill.blue   { background: linear-gradient(90deg, var(--gps-blue), #60a5fa); }

/* Staggered fill delay when parent becomes visible */
.gps-gene-bar-wrap.visible .gps-gene-row:nth-child(1) .gps-gene-fill { transition-delay: 0ms; }
.gps-gene-bar-wrap.visible .gps-gene-row:nth-child(2) .gps-gene-fill { transition-delay: 150ms; }
.gps-gene-bar-wrap.visible .gps-gene-row:nth-child(3) .gps-gene-fill { transition-delay: 300ms; }
.gps-gene-bar-wrap.visible .gps-gene-row:nth-child(4) .gps-gene-fill { transition-delay: 450ms; }


/* ============================================================ */
/* LINEAGE GROUPS                                                */
/* ============================================================ */
.gps-lineage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.gps-lineage-card {
  background: rgba(10,15,26,0.7);
  border: 1px solid var(--gps-border);
  border-radius: 10px;
  padding: 20px;
  transition: transform var(--gps-slow) var(--gps-ease-bounce), border-color var(--gps-normal);
}

.gps-lineage-card:hover { transform: translateY(-2px); border-color: var(--gps-border-hover); }

.gps-lineage-card .line-tag {
  font-family: var(--gps-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.gps-lineage-card .line-tag.purple { color: var(--gps-purple); }
.gps-lineage-card .line-tag.green  { color: var(--gps-green); }
.gps-lineage-card .line-tag.amber  { color: var(--gps-amber); }
.gps-lineage-card .line-tag.pink   { color: var(--gps-pink); }

.gps-lineage-card .strain-name { color: var(--gps-text-primary); font-weight: 700; font-size: 16px; margin: 0 0 4px 0; }
.gps-lineage-card .formula     { color: var(--gps-text-secondary); font-size: 13px; margin: 0 0 8px 0; }
.gps-lineage-card .breeder     { color: var(--gps-text-muted); font-size: 12px; margin: 0; }


/* ============================================================ */
/* DEEP SECTIONS (Mother / Father)                               */
/* ============================================================ */
.gps-deep-section {
  background: var(--gps-bg-base);
  border: 1px solid var(--gps-border);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 32px;
}

.gps-deep-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.gps-deep-header .bar { width: 40px; height: 3px; border-radius: 2px; }
.gps-deep-header .bar.purple { background: var(--gps-purple); }
.gps-deep-header .bar.green  { background: var(--gps-green); }
.gps-deep-header .bar.pink   { background: var(--gps-pink); }

.gps-deep-header .tag {
  font-family: var(--gps-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
}
.gps-deep-header .tag.purple { color: var(--gps-purple); }
.gps-deep-header .tag.green  { color: var(--gps-green); }
.gps-deep-header .tag.pink   { color: var(--gps-pink); }

.gps-deep-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--gps-text-primary);
  margin: 0 0 8px 0;
}

.gps-deep-title .breeder-note {
  font-weight: 400;
  font-size: 20px;
  color: var(--gps-text-secondary);
}

.gps-deep-subtitle {
  font-size: 14px;
  color: var(--gps-text-muted);
  font-style: italic;
  margin: 0 0 28px 0;
}

.gps-prose {
  color: var(--gps-text-body);
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}

.gps-prose .mono        { font-family: var(--gps-mono); color: var(--gps-purple); }
.gps-prose .mono.green  { color: var(--gps-green); }
.gps-prose .mono.pink   { color: var(--gps-pink); }


/* ============================================================ */
/* TIMELINE                                                      */
/* ============================================================ */
.gps-timeline {
  border-left: 2px solid var(--gps-purple);
  padding-left: 24px;
  margin-bottom: 28px;
}

.gps-timeline.green { border-color: var(--gps-green); }
.gps-timeline.pink  { border-color: var(--gps-pink); }

.gps-timeline-item {
  margin-bottom: 20px;
  transition: transform var(--gps-normal) var(--gps-ease);
  cursor: default;
}
.gps-timeline-item:last-child { margin-bottom: 0; }
.gps-timeline-item:hover { transform: translateX(4px); }

.gps-timeline-item .year {
  font-family: var(--gps-mono);
  font-size: 12px;
  color: var(--gps-purple);
  margin: 0 0 4px 0;
}

.gps-timeline.green .gps-timeline-item .year { color: var(--gps-green); }
.gps-timeline.pink  .gps-timeline-item .year { color: var(--gps-pink); }

.gps-timeline-item .desc {
  color: var(--gps-text-body);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}


/* ============================================================ */
/* TABLES                                                        */
/* ============================================================ */
.gps-table-wrap {
  background: var(--gps-bg-elevated);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.gps-table-wrap.mt { margin-top: 24px; }

.gps-table-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gps-border);
}

.gps-table-header .label {
  font-family: var(--gps-mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}
.gps-table-header .label.purple { color: var(--gps-purple); }
.gps-table-header .label.green  { color: var(--gps-green); }
.gps-table-header .label.pink   { color: var(--gps-pink); }
.gps-table-header .label.amber  { color: var(--gps-amber); }
.gps-table-header .label.muted  { color: var(--gps-text-muted); }

.gps-table {
  width: 100%;
  border-collapse: collapse;
}

.gps-table tr      { border-bottom: 1px solid rgba(30,41,59,0.6); }
.gps-table tr:last-child { border-bottom: none; }

.gps-table td,
.gps-table th {
  padding: 14px 20px;
  font-size: 13px;
  text-align: left;
}

.gps-table th {
  color: var(--gps-text-muted);
  font-family: var(--gps-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gps-border);
}

.gps-table td.key { color: var(--gps-text-secondary); width: 40%; }
.gps-table td.val { color: var(--gps-text-primary); font-family: var(--gps-mono); }
.gps-table td.val.purple    { color: var(--gps-purple); }
.gps-table td.val.green     { color: var(--gps-green); }
.gps-table td.val.amber     { color: var(--gps-amber); }
.gps-table td.val.pink      { color: var(--gps-pink); }
.gps-table td.val.red       { color: var(--gps-red); }
.gps-table td.val.bold      { font-weight: 600; }
.gps-table td.val.highlight { color: var(--gps-text-primary); font-weight: 600; }


/* ============================================================ */
/* CALLOUT BOXES                                                 */
/* ============================================================ */
.gps-callout {
  background: var(--gps-bg-elevated);
  border-left: 3px solid var(--gps-purple);
  border-radius: 0 10px 10px 0;
  padding: 24px 28px;
  margin-top: 24px;
  transition: border-color var(--gps-normal), background var(--gps-slow), box-shadow var(--gps-slow);
}

.gps-callout:hover {
  border-color: var(--gps-purple-soft);
  background: rgba(168,85,247,0.03);
  box-shadow: -2px 0 20px rgba(168,85,247,0.05);
}

.gps-callout.green-accent { border-left-color: var(--gps-green); }
.gps-callout.green-accent:hover { border-color: #4ade80; background: rgba(34,197,94,0.03); box-shadow: -2px 0 20px rgba(34,197,94,0.05); }

.gps-callout.pink-accent { border-left-color: var(--gps-pink); }
.gps-callout.pink-accent:hover { border-color: #f9a8d4; background: rgba(244,114,182,0.03); box-shadow: -2px 0 20px rgba(244,114,182,0.05); }

.gps-callout.amber-accent { border-left-color: var(--gps-amber); }
.gps-callout.amber-accent:hover { border-color: #fbbf24; background: rgba(245,158,11,0.03); box-shadow: -2px 0 20px rgba(245,158,11,0.05); }

.gps-callout .callout-tag {
  font-family: var(--gps-mono);
  font-size: 11px;
  color: var(--gps-text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.gps-callout .callout-body {
  color: var(--gps-text-body);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.gps-callout .callout-note {
  color: var(--gps-text-secondary);
  font-size: 13px;
  font-style: italic;
  margin: 12px 0 0 0;
}


/* ============================================================ */
/* SUB-COMPONENT CARDS                                           */
/* ============================================================ */
.gps-sub-card {
  background: var(--gps-bg-elevated);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 20px;
  transition: border-color var(--gps-normal);
}

.gps-sub-card:hover { border-color: var(--gps-border-hover); }

.gps-sub-card .sub-tag {
  font-family: var(--gps-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}
.gps-sub-card .sub-tag.green  { color: var(--gps-green); }
.gps-sub-card .sub-tag.purple { color: var(--gps-purple); }
.gps-sub-card .sub-tag.pink   { color: var(--gps-pink); }

.gps-sub-card .sub-title { color: var(--gps-text-primary); font-size: 15px; font-weight: 600; margin: 0 0 12px 0; }
.gps-sub-card .sub-body  { color: var(--gps-text-body); font-size: 14px; line-height: 1.7; margin: 0 0 16px 0; }


/* ============================================================ */
/* PILLAR GRID                                                   */
/* ============================================================ */
.gps-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.gps-pillar-card {
  background: var(--gps-bg-base);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform var(--gps-slow) var(--gps-ease-bounce),
              border-color var(--gps-normal),
              box-shadow var(--gps-slow);
}

.gps-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.gps-pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  transition: height var(--gps-fast);
}

.gps-pillar-card:hover::before { height: 4px; }

.gps-pillar-card.purple-top::before { background: var(--gps-purple); }
.gps-pillar-card.purple-top:hover   { border-color: rgba(168,85,247,0.3); box-shadow: 0 8px 24px rgba(168,85,247,0.08); }

.gps-pillar-card.green-top::before  { background: var(--gps-green); }
.gps-pillar-card.green-top:hover    { border-color: rgba(34,197,94,0.3); box-shadow: 0 8px 24px rgba(34,197,94,0.08); }

.gps-pillar-card.amber-top::before  { background: var(--gps-amber); }
.gps-pillar-card.amber-top:hover    { border-color: rgba(245,158,11,0.3); box-shadow: 0 8px 24px rgba(245,158,11,0.08); }

.gps-pillar-card.pink-top::before   { background: var(--gps-pink); }
.gps-pillar-card.pink-top:hover     { border-color: rgba(244,114,182,0.3); box-shadow: 0 8px 24px rgba(244,114,182,0.08); }

.gps-pillar-card .num {
  font-family: var(--gps-mono);
  font-size: 36px;
  font-weight: 800;
  margin: 0 0 12px 0;
}
.gps-pillar-card.purple-top .num { color: rgba(168,85,247,0.15); }
.gps-pillar-card.green-top  .num { color: rgba(34,197,94,0.15); }
.gps-pillar-card.amber-top  .num { color: rgba(245,158,11,0.15); }
.gps-pillar-card.pink-top   .num { color: rgba(244,114,182,0.15); }

.gps-pillar-card .pillar-title { font-size: 18px; font-weight: 700; color: var(--gps-text-primary); margin: 0 0 12px 0; }
.gps-pillar-card .pillar-body  { color: var(--gps-text-body); font-size: 14px; line-height: 1.7; margin: 0; }


/* ============================================================ */
/* TERPENE TAGS                                                  */
/* ============================================================ */
.gps-terp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.gps-terp-tag {
  display: inline-block;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: transform var(--gps-fast) var(--gps-ease-bounce);
}
.gps-terp-tag:hover { transform: scale(1.05); }

.gps-terp-tag.purple { background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.3); color: var(--gps-purple-soft); }
.gps-terp-tag.green  { background: var(--gps-green-glow); border: 1px solid rgba(34,197,94,0.3); color: #4ade80; }
.gps-terp-tag.amber  { background: var(--gps-amber-glow); border: 1px solid rgba(245,158,11,0.3); color: #fbbf24; }
.gps-terp-tag.red    { background: var(--gps-red-glow); border: 1px solid rgba(239,68,68,0.3); color: var(--gps-red); }
.gps-terp-tag.pink   { background: var(--gps-pink-glow); border: 1px solid rgba(244,114,182,0.3); color: #f9a8d4; }
.gps-terp-tag.muted  { background: rgba(241,245,249,0.08); border: 1px solid var(--gps-border); color: var(--gps-text-secondary); }

/* Terpene rows */
.gps-terp-wrap .gps-terp-row {
  transition: transform var(--gps-normal) var(--gps-ease);
}
.gps-terp-wrap .gps-terp-row:hover { transform: translateX(4px); }


/* ============================================================ */
/* PHENO CARDS                                                   */
/* ============================================================ */
.gps-pheno-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.gps-pheno-card {
  background: var(--gps-bg-base);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform var(--gps-slow) var(--gps-ease-bounce),
              border-color var(--gps-normal),
              box-shadow var(--gps-slow);
}

.gps-pheno-card:hover { transform: translateY(-4px); }

.gps-pheno-card.winner {
  border-color: var(--gps-purple);
  box-shadow: 0 0 30px rgba(168,85,247,0.08);
}
.gps-pheno-card.winner:hover { box-shadow: 0 8px 30px rgba(168,85,247,0.15); }

.gps-pheno-card.green-card:hover { border-color: rgba(34,197,94,0.4); box-shadow: 0 8px 24px rgba(34,197,94,0.08); }
.gps-pheno-card.red-card:hover   { border-color: rgba(239,68,68,0.4); box-shadow: 0 8px 24px rgba(239,68,68,0.08); }
.gps-pheno-card.pink-card:hover  { border-color: rgba(244,114,182,0.4); box-shadow: 0 8px 24px rgba(244,114,182,0.08); }

.gps-pheno-badge {
  display: inline-block;
  font-family: var(--gps-mono);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.gps-pheno-badge.green  { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: var(--gps-green); }
.gps-pheno-badge.red    { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); color: var(--gps-red); }
.gps-pheno-badge.purple { background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.4); color: var(--gps-purple); }
.gps-pheno-badge.pink   { background: var(--gps-pink-glow); border: 1px solid rgba(244,114,182,0.4); color: var(--gps-pink); }

.gps-pheno-card .pheno-title { font-size: 18px; font-weight: 700; color: var(--gps-text-primary); margin: 0 0 12px 0; }
.gps-pheno-card .pheno-body  { color: var(--gps-text-body); font-size: 14px; line-height: 1.7; margin: 0 0 16px 0; }

.gps-pheno-card .pheno-stats { border-top: 1px solid var(--gps-bg-surface); padding-top: 12px; }
.gps-pheno-card.winner .pheno-stats { border-color: rgba(168,85,247,0.3); }

.gps-pheno-card .pheno-stat-line { font-size: 12px; margin: 0 0 4px 0; }
.gps-pheno-card .pheno-stat-line:last-child { margin-bottom: 0; }
.gps-pheno-card .pheno-stat-line .lbl { color: var(--gps-text-muted); }
.gps-pheno-card .pheno-stat-line .val { font-family: var(--gps-mono); }
.gps-pheno-card .pheno-stat-line .val.purple { color: var(--gps-purple); }
.gps-pheno-card .pheno-stat-line .val.green  { color: var(--gps-green); }
.gps-pheno-card .pheno-stat-line .val.red    { color: var(--gps-red); }
.gps-pheno-card .pheno-stat-line .val.muted  { color: var(--gps-text-secondary); }


/* ============================================================ */
/* PULL QUOTE                                                    */
/* ============================================================ */
.gps-pull-quote {
  background: var(--gps-bg-elevated);
  border: 1px solid var(--gps-purple);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 24px;
  transition: background var(--gps-slow), box-shadow var(--gps-slow);
}

.gps-pull-quote:hover {
  background: rgba(168,85,247,0.04);
  box-shadow: 0 4px 20px rgba(168,85,247,0.08);
}

.gps-pull-quote.pink-accent { border-color: var(--gps-pink); }
.gps-pull-quote.pink-accent:hover { background: rgba(244,114,182,0.04); box-shadow: 0 4px 20px rgba(244,114,182,0.08); }

.gps-pull-quote .quote-text {
  font-size: 15px;
  color: var(--gps-text-body);
  font-style: italic;
  line-height: 1.7;
  margin: 0 0 8px 0;
}

.gps-pull-quote .quote-attribution {
  font-family: var(--gps-mono);
  font-size: 12px;
  color: var(--gps-purple);
  letter-spacing: 1px;
  margin: 0;
}


/* ============================================================ */
/* ICON GRID (Cultivation)                                       */
/* ============================================================ */
.gps-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.gps-icon-card {
  background: var(--gps-bg-elevated);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  padding: 28px;
  transition: transform var(--gps-slow) var(--gps-ease-bounce), border-color var(--gps-normal);
}

.gps-icon-card:hover { transform: translateY(-2px); border-color: var(--gps-border-hover); }

.gps-icon-card .card-icon  { font-size: 32px; margin-bottom: 12px; }
.gps-icon-card .card-title { font-size: 16px; font-weight: 700; color: var(--gps-text-primary); margin: 0 0 10px 0; }
.gps-icon-card .card-body  { color: var(--gps-text-body); font-size: 14px; line-height: 1.7; margin: 0; }


/* ============================================================ */
/* CLOSING SECTION                                               */
/* ============================================================ */
.gps-closing {
  background: linear-gradient(135deg, var(--gps-bg-void) 0%, var(--gps-bg-base) 50%, #1a0a2e 100%);
  border: 1px solid var(--gps-border);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.gps-closing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gps-purple), var(--gps-green));
}


/* ============================================================ */
/* LINEAGE TREE                                                  */
/* ============================================================ */
.gps-tree-wrap { padding: 28px 24px; }

.gps-tree {
  font-family: var(--gps-mono);
  font-size: 13px;
  color: var(--gps-text-body);
  line-height: 1.8;
  white-space: pre;
  overflow-x: auto;
}

.gps-tree .root       { color: var(--gps-text-primary); font-weight: 700; font-size: 15px; }
.gps-tree .mother     { color: var(--gps-purple); font-weight: 600; }
.gps-tree .father     { color: var(--gps-green); font-weight: 600; }
.gps-tree .sub        { color: var(--gps-text-body); }
.gps-tree .note       { color: var(--gps-text-muted); }
.gps-tree .note-italic { color: var(--gps-text-muted); font-style: italic; }


/* ============================================================ */
/* QUICK REFERENCE FOOTER                                        */
/* ============================================================ */
.gps-quick-ref {
  background: var(--gps-bg-elevated);
  border: 1px solid var(--gps-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.gps-quick-ref .ref-tag {
  font-family: var(--gps-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gps-text-muted);
  margin: 0 0 12px 0;
}

.gps-quick-ref .ref-lineage {
  font-size: 16px;
  font-weight: 600;
  color: var(--gps-text-primary);
  margin: 0 0 12px 0;
}
.gps-quick-ref .ref-lineage .mother { color: var(--gps-purple); }
.gps-quick-ref .ref-lineage .father { color: var(--gps-green); }
.gps-quick-ref .ref-lineage .x      { color: var(--gps-text-muted); margin: 0 6px; }
.gps-quick-ref .ref-lineage .arrow  { color: var(--gps-text-muted); margin: 0 6px; }

.gps-quick-ref .ref-specs {
  font-family: var(--gps-mono);
  font-size: 12px;
  color: var(--gps-text-secondary);
  margin: 0 0 16px 0;
}

.gps-quick-ref .ref-brand {
  font-family: var(--gps-mono);
  font-size: 11px;
  color: var(--gps-text-muted);
  padding-top: 16px;
  border-top: 1px solid rgba(30,41,59,0.6);
  margin: 0;
}


/* ============================================================ */
/* DIVIDER                                                       */
/* ============================================================ */
.gps-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gps-border), transparent);
  margin: 32px 0;
}


/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */
@media (max-width: 640px) {
  .gps-hero { padding: 32px 24px; }
  .gps-deep-section { padding: 28px 20px; }
  .gps-card { padding: 24px 20px; }
  .gps-closing { padding: 28px 20px; }
  .gps-deep-title { font-size: 26px; }
  .gps-hero h1, .gps-hero .gps-hero-title { font-size: 36px; }
  .gps-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .gps-pillar-grid,
  .gps-pheno-grid,
  .gps-icon-grid { grid-template-columns: 1fr; }
}


/* ============================================================ */
/* REDUCED MOTION                                                */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gps-reveal, .gps-reveal-left, .gps-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .gps-gene-fill { transition: none !important; }
  .gps-gene-fill::after { animation: none !important; }
  .gps-hero h1, .gps-hero .gps-hero-title { animation: none !important; }
  .gps-timeline-item { opacity: 1 !important; transform: none !important; }
  .gps-terp-row { opacity: 1 !important; transform: none !important; }
}