/* ==========================================================
   Avennex — hero
   States the studio over the haze and hands the page a horizon
   to start from.
   ========================================================== */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(48vw 40vw at 82% 34%, rgba(124, 58, 237, 0.3), transparent 66%),
    radial-gradient(34vw 26vw at 62% 70%, rgba(246, 184, 75, 0.12), transparent 64%);
  color: var(--panel-ink);
  --rule: var(--panel-rule);
  --hair: var(--panel-hair);
  --ink: var(--panel-ink);
  --ink-2: var(--panel-ink-2);
  --ink-3: var(--panel-ink-3);
  --mark: var(--mark-lit);
  --paper: var(--panel);
  --paper-3: var(--panel-3);
}

.hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 92px;
  padding-bottom: 48px;
}
.hero-grid { width: 100%; align-items: start; }

.hero-content { grid-column: 1 / 10; position: relative; z-index: 2; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.hero-eyebrow::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--panel-rule);
  flex: none;
}

.hero-headline { color: var(--panel-ink); }
.hero-headline-sub {
  display: block;
  color: var(--royal-lit);
  font-weight: 400;
}
.hero-subtext { margin-top: 28px; max-width: 44ch; }

.hero-links { margin-top: 44px; max-width: 480px; border-top: 1px solid var(--panel-rule); }
.hero-link {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 16px;
  padding-block: 15px;
  border-bottom: 1px solid var(--panel-rule);
  transition: padding-left var(--t-base) var(--ease-out);
}
.hero-link:hover { padding-left: 10px; }
.hero-link-index {
  font-family: var(--label);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--panel-ink-2);
}
.hero-link-label {
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.hero-link-arrow {
  color: var(--panel-ink-2);
  transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease);
}
.hero-link:hover .hero-link-arrow { transform: translateX(7px); color: var(--mark-lit); }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .hero-content { grid-column: 1 / 10; }
  .hero-body { padding-top: 100px; }
}

@media (max-width: 720px) {
  .hero { min-height: 100svh; }
  .hero-body { padding-top: 84px; padding-bottom: 26px; }
  .hero-content { grid-column: 1 / -1; }
  .hero-headline { font-size: clamp(1.85rem, 8.4vw, 2.5rem); }
  .hero-subtext { margin-top: 20px; font-size: 0.95rem; }
  .hero-links { margin-top: 26px; }
  .hero-link { padding-block: 12px; grid-template-columns: 24px 1fr auto; gap: 12px; }
  .hero-link-label { font-size: 0.92rem; }
}

@media (max-width: 400px) {
  .hero-headline { font-size: clamp(1.7rem, 7.9vw, 2.15rem); }
  .hero-eyebrow { margin-bottom: 22px; }
  .hero-subtext { margin-top: 17px; }
  .hero-links { margin-top: 22px; }
  .hero-link { padding-block: 10px; }
}

/* ---------- cube ---------- */

.hero-content { grid-column: 1 / 8; }

.hero-cube {
  grid-column: 8 / 13;
  align-self: center;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.hero-cube-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1;
  cursor: grab;
  touch-action: pan-y;
}
.hero-cube-stage:active { cursor: grabbing; }
.hero-cube-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-cube-glow {
  filter: blur(16px) saturate(1.4);
  opacity: 0.85;
  pointer-events: none;
}
.hero-cube-caption {
  min-height: 3.4em;
  margin-top: -18px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.hero-cube-caption.is-on { opacity: 1; transform: none; filter: none; }
.hero-cube-meta {
  display: block;
  font-family: var(--label);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--panel-ink-3);
}
.hero-cube-name {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--panel-ink);
}
.hero-cube-name b {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--mark-lit);
  margin-right: 10px;
  vertical-align: 2px;
}

@media (max-width: 1180px) {
  .hero-content { grid-column: 1 / 8; }
}

@media (max-width: 720px) {
  .hero-content { grid-column: 1 / -1; }
  .hero-cube { grid-column: 1 / -1; margin-top: 18px; }
  .hero-cube-stage { max-width: min(78vw, 320px); }
  .hero-cube-caption { margin-top: -10px; min-height: 3em; }
}