/* hub.css — full-viewport 3-panel split, drenched per person */

html, body { height: 100%; overflow: hidden; }
body { background: oklch(0.10 0.01 60); }

.hub {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100dvh;
  width: 100vw;
  gap: 0;
}

.panel {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition:
    flex-grow 800ms var(--ease-out-expo),
    filter 600ms var(--ease-out-quart);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-5) var(--space-4);
  isolation: isolate;
}

.panel::after {
  content: "";
  position: absolute; inset: 0;
  background: oklch(0 0 0 / 0.18);
  pointer-events: none;
  transition: opacity 600ms var(--ease-out-quart);
  z-index: 1;
}
.hub:hover .panel:not(:hover)::after { opacity: 0.5; }
.hub:hover .panel:hover::after { opacity: 0; }
.hub:hover .panel:not(:hover) { filter: saturate(0.6); }

.panel--maxi      { background: oklch(0.18 0.08 320); color: oklch(0.96 0.02 95);  }
.panel--alejandro { background: oklch(0.95 0.02 80);  color: oklch(0.22 0.01 20);  }
.panel--adri      { background: oklch(0.16 0.13 285); color: oklch(0.97 0.02 285); }

.panel__role {
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  z-index: 2;
}

.panel__name {
  font-family: var(--font-display);
  font-size: clamp(var(--type-7), 6vw, var(--type-10));
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-start;
  z-index: 2;
}

.panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--type-2);
  letter-spacing: 0.05em;
  z-index: 2;
}
.panel__cta::after {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  transition: width 500ms var(--ease-out-expo);
}
.panel:hover .panel__cta::after { width: 4rem; }

.panel canvas, .panel svg.ignite {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}

/* Header */
.brand {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.96 0.005 80);
  mix-blend-mode: difference;
}
.brand strong { font-weight: 700; }
.brand .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; align-self: center; opacity: 0.7; }
.brand a { text-decoration: none; opacity: 0.7; }
.brand a:hover { opacity: 1; }

.legal {
  position: fixed;
  bottom: var(--space-2);
  right: var(--space-3);
  z-index: 60;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(0.96 0.005 80);
  mix-blend-mode: difference;
  opacity: 0.6;
}

/* Page-load reveal */
.panel { opacity: 0; transform: translateY(8px); animation: rise 1100ms var(--ease-out-expo) forwards; }
.panel--maxi      { animation-delay: 80ms; }
.panel--alejandro { animation-delay: 160ms; }
.panel--adri      { animation-delay: 240ms; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 720px) {
  .hub { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; }
  .panel__name { writing-mode: horizontal-tb; transform: none; font-size: clamp(var(--type-7), 12vw, var(--type-9)); }
}