/* =========================================================
   Innovation Lab — hub page
   Deep-space "experiments wing" treatment. Bridges the light
   marketing system and the dark COSMOS flagship.
   Layout/paint lives inline in index.html (matches the system);
   this file holds only what inline can't do: keyframes, hovers,
   reveal states, canvas base, responsive collapse.
   ========================================================= */

/* ---- scroll reveal ---- */
.il-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.7,.2,1), transform .7s cubic-bezier(.22,.7,.2,1); }
.il-reveal.is-in { opacity: 1; transform: none; }
.il-reveal[data-delay="1"] { transition-delay: .08s; }
.il-reveal[data-delay="2"] { transition-delay: .16s; }
.il-reveal[data-delay="3"] { transition-delay: .24s; }

/* ---- keyframes ---- */
@keyframes il-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes il-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes il-sheen { to { background-position: 200% center; } }
@keyframes il-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
@keyframes il-blip { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes il-spin { to { transform: rotate(360deg); } }

/* ---- hovers ---- */
.il-btn-primary { transition: filter .2s, transform .2s, box-shadow .2s; }
.il-btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(45,212,191,.4); }
.il-btn-ghost { transition: background .2s, border-color .2s, color .2s; }
.il-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(94,234,212,.55); }
.il-link { transition: color .2s, gap .2s; }
.il-link:hover { color: #5eead4; }

.il-exp { transition: transform .28s cubic-bezier(.22,.7,.2,1), box-shadow .28s, border-color .28s; }
.il-exp:hover { transform: translateY(-6px); box-shadow: 0 30px 64px rgba(7,17,31,.5); border-color: rgba(94,234,212,.5); }
.il-exp:hover .il-exp-go { gap: 12px; color: #5eead4; }
.il-exp-go { transition: gap .2s, color .2s; }

.il-thread { transition: transform .24s, border-color .24s, background .24s; }
.il-thread:hover { transform: translateY(-4px); border-color: rgba(45,212,191,.5); background: #0b1c33; }

.il-chip { transition: all .2s; }
.il-chip:hover { border-color: rgba(94,234,212,.55); color: #cffafe; }

/* ---- experiment card status fade-out when filtered ---- */
.il-exp.is-hidden { display: none; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .il-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .il-exp-grid { grid-template-columns: 1fr !important; }
  .il-thread-grid { grid-template-columns: 1fr 1fr !important; }
  .il-method-grid { grid-template-columns: 1fr 1fr !important; }
  .il-cosmos-grid { grid-template-columns: 1fr !important; }
  .il-h1 { font-size: 46px !important; }
}
@media (max-width: 620px) {
  .il-thread-grid, .il-method-grid { grid-template-columns: 1fr !important; }
  .il-h1 { font-size: 38px !important; }
  .il-pipeline { flex-direction: column !important; align-items: stretch !important; }
  .il-pipeline-arrow { transform: rotate(90deg); }
}