@import url('lrl-tokens.css');
/* =========================================================
   The Lab — public landing page
   Pairs with: /the-lab/index.html + /assets/js/the-lab-landing.js
   Keyframes, hover states, principle switcher, responsive.
   ========================================================= */

@keyframes lab-pulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes lab-sheen { 0%, 58% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes lab-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

::selection { background: rgba(20,184,166,.2); }

/* ---- hover states (replace DC style-hover) ---- */
.lab-cta-primary { transition: background .2s ease; }
.lab-cta-primary:hover { background:var(--lrl-teal-700, #0f766e); }

.lab-cta-ghost { transition: border-color .2s ease, color .2s ease; }
.lab-cta-ghost:hover { border-color:#14b8a6; color:#0f766e; }

.lab-pillar { transition: border-color .2s ease, box-shadow .2s ease; }
.lab-pillar:hover { border-color:rgba(20,184,166,.4); box-shadow:0 18px 44px rgba(20,184,166,.12); }

.lab-builder { transition: border-color .2s ease, box-shadow .2s ease; }
.lab-builder:hover { border-color:rgba(20,184,166,.34); box-shadow:0 20px 46px rgba(20,184,166,.12); }

.lab-browse { transition: background .2s ease; }
.lab-browse:hover { background:rgba(20,184,166,.07); }

.lab-join-primary { transition: background .2s ease; }
.lab-join-primary:hover { background:var(--lrl-mint, #6ee7d8); }

.lab-join-ghost { transition: background .2s ease; }
.lab-join-ghost:hover { background:rgba(255,255,255,.12); }

/* ---- principle switcher ---- */
.lab-principle-btn {
  text-align:left; cursor:pointer; width:100%;
  border:1.5px solid #e6ebf1; border-radius:16px; padding:19px 22px;
  background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.04);
  transition: all .2s ease;
  font-family:inherit;
}
.lab-principle-btn .lab-principle-num   { color:#94a3b8; transition: color .2s ease; }
.lab-principle-btn .lab-principle-title { color:#475569; transition: color .2s ease; }
.lab-principle-btn:hover { border-color:rgba(20,184,166,.32); }
.lab-principle-btn.is-active {
  border-color:rgba(20,184,166,.5);
  background:rgba(20,184,166,.08);
  box-shadow:0 12px 28px rgba(20,184,166,.14);
}
.lab-principle-btn.is-active .lab-principle-num   { color:#0f766e; }
.lab-principle-btn.is-active .lab-principle-title { color:#07111f; }

/* ---- responsive ---- */
@media (max-width: 960px) {
  .lab-hero-grid,
  .lab-principles-grid,
  .lab-isnot-grid { grid-template-columns: 1fr !important; }
  .lab-pillars-grid,
  .lab-builders-grid,
  .lab-journey-grid { grid-template-columns: 1fr 1fr !important; }
  .lab-pillars-grid > * { grid-column: auto !important; }
  .lab-isnot-grid > div:first-child { position: static !important; }
  .lab-hero-h1 { font-size: 46px !important; }
}
@media (max-width: 560px) {
  .lab-hero-h1 { font-size: 38px !important; }
  .lab-sec-h { font-size: 32px !important; }
  .lab-pillars-grid,
  .lab-journey-grid { grid-template-columns: 1fr !important; }
}

/* Sheen respects reduced-motion (added with the shared hero-sheen pass). */
@media (prefers-reduced-motion: reduce) {
  [style*="lab-sheen"], [class*="sheen"], [class*="shimmer"], [class*="accent"] {
    animation: none !important;
  }
}