/* hub.css — Slide 1 · Hub 3D: wordmark DOGMA + mano Genesis (Blender) como menú.
   OWNER: hub. Super minimalista: canvas full-bleed + menú tipográfico con
   profundidad 3D que reacciona al puntero. Usa variables de css/tokens.css. */

#slide-1.slide--logo {
  background: var(--navy-900);
}

/* Pista de scroll: la slide 1 mide 300vh; hub.js clava el hub con translate3d
   mientras el scroll extra maneja el descenso del brazo. La slide 2 sólo llega
   cuando la G terminó de moverse. Sólo desktop con motion. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #slide-1.slide--logo {
    height: 300vh;
    min-height: 300vh;
    align-items: flex-start;
  }
  #slide-1 .hub {
    inset: 0 0 auto 0;
    height: 100vh;
  }
  #slide-1 .hub.hub--fixed {
    position: fixed;
    z-index: 4;
  }
}

/* Teléfono/tablet: misma pista de 300vh, pero el hub se clava con sticky
   (sin JS: el scroll táctil no avisa a tiempo para conmutar un fixed). */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  #slide-1.slide--logo {
    display: block;
    height: 300vh;
    min-height: 300vh;
    overflow: visible; /* .slide es overflow:hidden y eso anula el sticky */
  }
  #slide-1 .hub {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
}

.hub {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Punto de fuga compartido por el menú (el canvas hace su propio 3D) */
  perspective: 1100px;
}
.hub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* ---- Menú 3D de secciones ------------------------------------------- */
.hub__menu {
  position: absolute;
  right: clamp(28px, 6vw, 110px);
  top: 50%;
  transform:
    translateY(-50%)
    rotateY(calc(var(--hub-mx, 0) * -9deg))
    rotateX(calc(var(--hub-my, 0) * 6deg));
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 18px);
  z-index: 3;
  transition: transform .18s linear;
}
.hub__item {
  --depth: 0px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  transform: translateZ(var(--depth));
  transition: transform .35s var(--ease);
}
.hub__item:nth-child(1) { --depth: 46px; }
.hub__item:nth-child(2) { --depth: 30px; }
.hub__item:nth-child(3) { --depth: 16px; }
.hub__item:nth-child(4) { --depth: 4px; }
.hub__item:nth-child(5) { --depth: -8px; }
.hub__item:nth-child(6) { --depth: -20px; }
.hub__num {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--steel-dim);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease);
}
.hub__label {
  font-family: var(--font-head);
  font-size: clamp(15px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease), text-shadow .3s var(--ease), letter-spacing .3s var(--ease);
}
.hub__item::after {
  content: "";
  width: 0;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, var(--red), transparent);
  transition: width .35s var(--ease);
}
.hub__item:hover .hub__label,
.hub__item:focus-visible .hub__label {
  color: var(--ink);
  letter-spacing: .18em;
  text-shadow: 0 0 22px rgba(240,20,30,.45);
}
.hub__item:hover .hub__num,
.hub__item:focus-visible .hub__num { color: var(--red); }
.hub__item:hover::after,
.hub__item:focus-visible::after { width: 42px; }
.hub__item:focus-visible { outline: none; }

/* Entrada escalonada del menú */
.hub__item { opacity: 0; transform: translateZ(var(--depth)) translateX(26px); }
.hub.is-ready .hub__item {
  opacity: 1;
  transform: translateZ(var(--depth)) translateX(0);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease),
    color .3s var(--ease);
}
.hub.is-ready .hub__item:nth-child(1) { transition-delay: .15s; }
.hub.is-ready .hub__item:nth-child(2) { transition-delay: .24s; }
.hub.is-ready .hub__item:nth-child(3) { transition-delay: .33s; }
.hub.is-ready .hub__item:nth-child(4) { transition-delay: .42s; }
.hub.is-ready .hub__item:nth-child(5) { transition-delay: .51s; }
.hub.is-ready .hub__item:nth-child(6) { transition-delay: .60s; }

/* ---- Estado de carga / fallback -------------------------------------- */
.hub__status {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel-dim);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.hub__status.is-hidden { opacity: 0; }
.hub__spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(138,152,189,.3);
  border-top-color: var(--red);
  animation: hubspin .9s linear infinite;
}
@keyframes hubspin { to { transform: rotate(360deg); } }

/* Fallback sin WebGL: wordmark tipográfico plano */
.hub__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(56px, 12vw, 170px);
  letter-spacing: .22em;
  color: var(--ink);
  text-indent: .22em;
}
.hub.is-fallback .hub__fallback { display: flex; }
.hub.is-fallback .hub__canvas { display: none; }
/* La G: ligeramente girada y hundida — la mano la movió */
.hub__g {
  display: inline-block;
  transform: rotate(-13deg) translateY(.045em);
  transform-origin: 50% 78%;
}
/* La A: pirámide blanca SIN travesaño, con la bola roja al centro.
   Las patas van en ::before (clipeadas); la bola en ::after (sin clip). */
.hub__apyr {
  position: relative;
  width: .82em;
  height: .72em;
  margin-left: .06em;
  align-self: center;
}
.hub__apyr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(50% 0, 60% 0, 100% 100%, 79% 100%, 50% 19%, 21% 100%, 0 100%, 40% 0);
}
.hub__apyr::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .05em;
  width: .18em;
  height: .18em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--red);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  .hub__menu {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 88px;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .hub__label { font-size: 14px; }
  .hub__status { bottom: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub__menu { transform: translateY(-50%) !important; }
  .hub__item, .hub.is-ready .hub__item { transition: none; opacity: 1; }
  .hub__spinner { animation: none; }
}

/* ---- Barrido de reflejo entre slides (glare) --------------------------- */
/* Cada barrido es distinto: nav.js sortea ángulo (--ga), intensidad (--gk),
   duración (--gd), inclinación (--gsk) y dirección (run-l / run-r). */
.glare {
  --ga: 112deg;
  --gk: 1;
  --gd: 3.2s;
  --gsk: -9deg;
  position: fixed;
  inset: -12%;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(var(--ga),
    transparent 32%,
    rgba(111,147,255,calc(.016 * var(--gk))) 44%,
    rgba(245,248,255,calc(.032 * var(--gk))) 50%,
    rgba(111,147,255,calc(.013 * var(--gk))) 56%,
    transparent 68%);
  transform: translateX(-70%) skewX(var(--gsk));
}
.glare.run-l { animation: glare-l var(--gd) cubic-bezier(.32,.08,.28,.94); }
.glare.run-r { animation: glare-r var(--gd) cubic-bezier(.32,.08,.28,.94); }
@keyframes glare-l {
  0%   { opacity: 0; transform: translateX(-70%) skewX(var(--gsk)); }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%) skewX(var(--gsk)); }
}
@keyframes glare-r {
  0%   { opacity: 0; transform: translateX(70%) skewX(var(--gsk)); }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-70%) skewX(var(--gsk)); }
}
@media (prefers-reduced-motion: reduce) {
  .glare, .glare.run-l, .glare.run-r { animation: none; opacity: 0; }
}

/* Sin marca arriba: el menú de secciones va centrado */
.topnav { justify-content: center; }