/* TKWM-40632a5f-41f0-9fe6-22f804d522ac
   Ajustes propios de Take.

   El fondo "Underwater" ahora es el canvas de cubos 3D (js/cubes-bg.js): blanco y negro, sin imagen de fondo.
   (Antes aqui habia un fondo de ciudad futurista detras del canvas de three.js; ya no existe.) */

/* Boton de fondo bloqueado (Settings > Background > Skyline): en gris y no se puede pulsar. */
.settings-background button.is-locked,
.settings-background button:disabled {
  opacity: .38;
  filter: grayscale(1);
  cursor: not-allowed;
  color: #b3bec5;
  background: transparent;
  border-color: #f3f4f51a;
}
.settings-background button.is-locked:hover,
.settings-background button:disabled:hover { background: transparent; border-color: #f3f4f51a; }

/* --- Alineacion del menu y de los paneles ------------------------------------------------ */

/* Movil: la flecha ▶ estaba dentro del flex y empujaba las etiquetas ~10px a la izquierda del centro
   (logo, tagline y hint si estan centrados). Se saca del flujo para que la etiqueta quede centrada de verdad. */
@media (max-width: 768px) {
  .hero-menu-item { position: relative; }
  .hero-menu-label { text-align: center; }
  .hero-menu-arrow { position: absolute; right: 16px; top: 50%; margin-top: -.6em; line-height: 1.2; }
}

/* Escritorio: las etiquetas tienen 20px de padding dentro de su caja y quedaban sangradas respecto al logo,
   al tagline y al hint. Se corre la caja 20px a la izquierda para que el TEXTO quede en el mismo borde. */
@media (min-width: 769px) {
  .hero-menu { margin-left: -20px; }
  .hero-menu-hint { margin-left: 0; }
  .hero-menu-stage .hero-menu-hint { padding-left: 0; }
}

/* El letter-spacing agrega espacio despues de la ultima letra y el titulo de la derecha ("about me")
   quedaba unos px metido respecto a la linea divisoria. */
.hero-panel-header h1 { margin-right: -.12em; }

/* --- Aviso "Hardware acceleration is disabled" ---------------------------------------------------------
   Sube al aparecer, se puede cerrar con la X y, si no, se quita solo a los pocos segundos bajando.
   Usa la propiedad `translate` (no `transform`) para no pisar el -translate-x-1/2 que lo centra.
   A proposito NO se apaga con "reducir movimiento": ese es justo el caso en el que sale el aviso y se quiere ver. */
.hw-toast{animation:hw-toast-in .5s cubic-bezier(.22,1,.36,1) both}
.hw-toast--leaving{animation:hw-toast-out .5s cubic-bezier(.55,0,.8,.3) forwards;pointer-events:none}
@keyframes hw-toast-in{from{translate:0 calc(100% + 28px);opacity:0}to{translate:0 0;opacity:1}}
@keyframes hw-toast-out{from{translate:0 0;opacity:1}to{translate:0 calc(100% + 28px);opacity:0}}