/*
 * laorbit — estilos
 *
 * Estética brutalista de mercado: rectángulos de color plano (sin borde,
 * sin radius, sin sombra), tipografía de rótulo (Bungee) + monospace
 * (Space Mono), fondo al color de la categoría activa.
 *
 * Estructura:
 *   #stage  → letreros (móvil: franjas apiladas / desktop: revueltos)
 *   #picker → wheel picker de categorías (barra inferior crema)
 *   #popup  → ficha de proyecto: embed + créditos
 */

:root {
  --ink: #1a1a1a;
  --papel: #fffce8;

  /* color de la categoría activa (lo pisa JS) */
  --cat-color: #e4007c;

  /* altura del menú inferior (el stage ocupa el resto) */
  --picker-h: 15dvh;

  --font-rotulo: "Bungee", "Arial Black", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
}

@media (min-width: 900px) {
  :root {
    --picker-h: 10dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-mono);
  color: var(--ink);
  background: var(--cat-color);
  transition: background-color 0.45s ease;

  /* stage arriba (flexible) + picker abajo (fijo): siempre llenan la pantalla */
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ── marca ── */

#brand {
  position: fixed;
  top: 14px;
  left: 18px;
  z-index: 20;
  pointer-events: none;
}

#brand h1 {
  font-family: var(--font-rotulo);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: var(--ink);
}

/* ── zona de letreros ── */

#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;

  /* móvil: franjas apiladas */
  display: flex;
  flex-direction: column;
  padding: 9dvh 4vw 2dvh;
  gap: 1.5dvh;
}

.franja {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* ── letrero ──
   un único estilo: rectángulo de color plano, sin nada más.
   la gracia está en la inclinación (--rot), el descuadre (--tx)
   y el balanceo continuo */

.letrero {
  --rot: 0deg;
  --tx: 0%;
  position: relative;
  z-index: var(--z, 1);
  border: none;
  cursor: pointer;
  /* el color va en ::before (recortado); el botón queda transparente
     para que la pegatina pueda asomar fuera del cartón */
  background: transparent;
  /* cada letrero lleva su propia fuente de rótulo (--f, la pone JS),
     como si cada puestero pintara el suyo */
  font-family: var(--f, var(--font-rotulo));
  color: var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 0.9em 1.2em;

  /* móvil: estrechos para jugar con el aire a los lados */
  width: 64%;
  max-width: 480px;

  /* el texto escala con el ancho del propio letrero (unidades cq) */
  container-type: inline-size;

  /* la sombra sigue la silueta recortada (drop-shadow, no box-shadow) */
  filter: drop-shadow(4px 6px 0 rgba(26, 26, 26, 0.3));

  transform: translateX(var(--tx)) rotate(var(--rot));
  animation:
    caer 0.5s calc(var(--d, 0) * 70ms) cubic-bezier(0.2, 1.6, 0.4, 1) backwards,
    sway var(--dur, 4s) calc(var(--d, 0) * -1.3s) ease-in-out infinite alternate;
}

/* el cartón: color plano con contorno irregular, como cortado a mano.
   el polígono (--clip) lo genera JS, distinto y estable por proyecto */
.letrero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  clip-path: var(--clip, none);
}

.letrero:hover,
.letrero:focus-visible {
  z-index: 50;
  animation-name: caer, wobble;
}

.letrero .titulo {
  font-weight: 400;
  font-size: clamp(0.95rem, 10cqw, 5rem);
  line-height: 1.12;
  text-wrap: balance;
}

.letrero .meta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.55rem, 3cqw, 1rem);
  letter-spacing: 0.15em;
  text-transform: lowercase;
  opacity: 0.65;
}

/* pegatina de highlight, como etiqueta de precio */
.letrero .estrella {
  position: absolute;
  top: -0.5em;
  right: -0.3em;
  width: 2.1em;
  height: 2.1em;
  display: grid;
  place-items: center;
  font-size: clamp(0.75rem, 5cqw, 1.5rem);
  background: var(--ink);
  color: var(--papel);
  border-radius: 50%;
  transform: rotate(14deg);
}

/* ── desktop: rejilla de puestos ──
   JS reparte el stage en tantas celdas como proyectos y cada
   letrero llena la suya (--x/--y/--w en px, con jitter) */

@media (min-width: 900px) {
  #stage {
    display: block;
    padding: 0;
  }

  .franja {
    display: contents;
  }

  .letrero {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    max-width: none;
    padding: 0.8em 1.1em;
  }
}

/* ── picker inferior ──
   barra crema con borde superior grueso; palabra activa centrada,
   swipe horizontal (scroll-snap) y botones < > cuadrados */

#picker {
  height: var(--picker-h);
  flex: none;
  background: var(--papel);
  border-top: 4px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3vw;
  padding-inline: 4vw;
}

.pick-btn {
  border: 3px solid var(--ink);
  background: var(--papel);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.9rem, 2dvh, 1.2rem);
  width: 2.4em;
  height: 2.4em;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
}

.pick-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

.pick-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

#wheel {
  display: flex;
  overflow-x: auto;
  cursor: grab;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

#wheel::-webkit-scrollbar {
  display: none;
}

/* mientras se arrastra con el ratón: sin snap (se re-engancha al soltar) */
#wheel.arrastrando {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.wheel-item {
  flex: 0 0 64%;
  scroll-snap-align: center;
  text-align: center;
  font-family: var(--font-rotulo);
  font-weight: 400;
  font-size: clamp(1rem, 2.8dvh, 1.5rem);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.2;
  transform: scale(0.75);
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
}

.wheel-item:first-child {
  margin-left: 18%;
}

.wheel-item:last-child {
  margin-right: 18%;
}

.wheel-item.activa {
  opacity: 1;
  transform: scale(1);
}

@media (min-width: 900px) {
  .wheel-item {
    flex-basis: 34%;
  }

  .wheel-item:first-child {
    margin-left: 33%;
  }

  .wheel-item:last-child {
    margin-right: 33%;
  }
}

/* ── popup de proyecto ── */

#popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26, 26, 26, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4dvh 4vw;
  animation: fundido 0.18s ease-out;
}

#popup.oculto {
  display: none;
}

#popup.cerrando {
  animation: fundido 0.16s ease-in reverse forwards;
}

.sheet {
  position: relative;
  background: var(--papel);
  border: 4px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  width: min(680px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2rem);
  animation: pop-in 0.18s cubic-bezier(0.2, 1.4, 0.4, 1);
}

#popup.cerrando .sheet {
  animation: pop-out 0.16s ease-in forwards;
}

#cerrar-popup {
  position: sticky;
  top: 0;
  float: right;
  border: 3px solid var(--ink);
  background: var(--cat-color);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  width: 2em;
  height: 2em;
  cursor: pointer;
}

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  background: var(--cat-color);
  color: var(--papel);
  padding: 0.4em 0.8em;
  margin-bottom: 0.8em;
}

#popup-titulo {
  font-family: var(--font-rotulo);
  font-weight: 400;
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  line-height: 1.1;
  margin-bottom: 0.7em;
}

.embed {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 3px solid var(--ink);
  margin-bottom: 1.1em;
}

.embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#popup-descripcion {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 1.5em;
}

#popup-creditos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.9em 1.4em;
  margin-bottom: 1.5em;
}

#popup-creditos .rol {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  opacity: 0.55;
}

#popup-creditos .nombre {
  font-weight: 700;
  font-size: 0.9rem;
}

#popup-extra {
  font-style: italic;
  font-size: 0.78rem;
  opacity: 0.7;
  border-top: 3px solid var(--ink);
  padding-top: 1em;
}

#popup-extra:empty {
  display: none;
}

/* ── animaciones ── */

@keyframes caer {
  from {
    transform: translateX(var(--tx)) translateY(-14dvh) rotate(calc(var(--rot) + 6deg));
    opacity: 0;
  }
}

@keyframes sway {
  from {
    transform: translateX(var(--tx)) rotate(calc(var(--rot) - 1deg));
  }

  to {
    transform: translateX(var(--tx)) rotate(calc(var(--rot) + 1deg));
  }
}

@keyframes fundido {
  from {
    opacity: 0;
  }
}

@keyframes pop-in {
  from {
    transform: scale(0.92) translateY(14px);
    opacity: 0;
  }
}

@keyframes pop-out {
  to {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
  }
}

@keyframes wobble {
  from {
    transform: translateX(var(--tx)) rotate(calc(var(--rot) - 2deg)) scale(1.04);
  }

  to {
    transform: translateX(var(--tx)) rotate(calc(var(--rot) + 2deg)) scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {

  .letrero,
  .letrero:hover {
    animation: none;
  }

  body {
    transition: none;
  }
}