/* ==========================================================================
   Experiments page
   ========================================================================== */
.ex-hero { position: relative; isolation: isolate; }
.ex-hero__field {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
.ex-hero .page-hero { padding-bottom: 80px; }

/* Bento grid */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 16px;
}
.ex-tile { position: relative; grid-column: span 1; grid-row: span 1; }
.ex-tile--lg { grid-column: span 2; grid-row: span 2; }
.ex-tile--wide { grid-column: span 2; }
.ex-tile--tall { grid-row: span 2; }

.ex-tile__btn {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: #fff;
  background: #000;
  isolation: isolate;
}
.ex-tile__art { position: absolute; inset: 0; z-index: -2; }
.ex-tile__art svg { transform: scale(1.08); transition: transform 1.2s var(--ease-out); }
.ex-tile__btn:hover .ex-tile__art svg,
.ex-tile__btn:focus-visible .ex-tile__art svg { transform: scale(1.2) rotate(-2deg); }
.ex-tile__btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65));
  z-index: -1;
  transition: opacity .5s;
}
.ex-tile__type {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 12px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.92);
  color: #000;
}
.ex-tile__info { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.ex-tile__title {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: 1.15;
}
.ex-tile--lg .ex-tile__title { font-size: clamp(28px, 3vw, 42px); }
.ex-tile__year { display: block; font-size: 13px; opacity: .75; margin-top: 4px; }
.ex-tile__plus {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  font-size: 20px;
  transform: scale(0) rotate(-90deg);
  transition: transform .5s var(--ease-out);
}
.ex-tile__btn:hover .ex-tile__plus,
.ex-tile__btn:focus-visible .ex-tile__plus { transform: scale(1) rotate(0); }

@media (max-width: 960px) {
  .ex-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
}
@media (max-width: 600px) {
  .ex-grid { grid-template-columns: 1fr; }
  .ex-tile--lg, .ex-tile--wide { grid-column: span 1; }
  .ex-tile--lg { grid-row: span 2; }
  .ex-tile--tall { grid-row: span 1; }
}

/* --------------------------------------------------------------------------
   Empty state: no experiments published yet ("something's cooking")
   -------------------------------------------------------------------------- */
.ex-empty {
  display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.2fr; gap: var(--s-8); align-items: center;
  padding: var(--s-8); margin-bottom: var(--s-10);
  border-radius: var(--r-xl); background: var(--blue-wash);
}
.ex-empty__pot { position: relative; justify-self: center; width: min(100%, 280px); padding-top: 56px; isolation: isolate; }
.ex-empty__pot::before {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 0;
  aspect-ratio: 1; border-radius: 50%; background: var(--blue-soft);
}
.ex-empty__mascot svg { filter: drop-shadow(0 12px 18px rgba(16,18,35,.14)); }
.ex-empty__steam { position: absolute; top: 0; left: 50%; translate: -50% 0; display: flex; gap: 14px; }
.ex-empty__steam i {
  width: 6px; height: 46px; border-radius: 6px;
  background: linear-gradient(to top, rgba(15,23,240,.35), rgba(15,23,240,0));
  animation: exSteam 2.4s ease-in-out infinite;
}
.ex-empty__steam i:nth-child(2) { animation-delay: .4s; height: 58px; }
.ex-empty__steam i:nth-child(3) { animation-delay: .8s; }
@keyframes exSteam {
  0% { opacity: 0; transform: translateY(14px) scaleY(.6); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px) scaleY(1.1); }
}
.ex-empty__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: #fbeedd; color: #7a3f00; font-size: 15px; font-weight: 500;
  margin-bottom: var(--s-5);
}
.ex-empty__badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: exPulse 2s infinite; }
@keyframes exPulse { 0% { box-shadow: 0 0 0 0 rgba(214,126,25,.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(214,126,25,0); } }
.ex-empty__title {
  font-size: clamp(40px, 5.4vw, 72px); font-weight: 500; line-height: 1.08;
  letter-spacing: var(--track-display); margin-bottom: var(--s-4);
}
.ex-empty__title .accent { color: var(--blue); }
.ex-empty__text { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--n-600); max-width: 32em; margin-bottom: var(--s-5); }
.ex-empty__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.ex-empty__list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--r-pill); background: #fff;
  font-size: 15px; color: var(--n-700); box-shadow: 0 0 0 1px var(--n-200) inset;
}
.ex-empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 960px) {
  .ex-empty { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) var(--s-6); text-align: left; }
  .ex-empty__pot { width: 200px; justify-self: start; }
}
@media (max-width: 600px) {
  .ex-empty { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); margin-bottom: var(--s-9); }
  .ex-empty__pot { width: 170px; }
  .ex-empty__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ex-empty__steam i, .ex-empty__badge i { animation: none; } .ex-empty__steam i { opacity: .6; } }