:root {
  --color-pink: #ff5c8d;
  --color-green: #00d285;
  --color-gold: #cfaa3d;
  --color-red: #ff3b30;
  --color-yellow: #eaff00;

  --box-size: 110px;
}

html {
  scroll-behavior: smooth;
}

.bg-pink {
  background-color: var(--color-pink);
  color: #000;
}
.bg-green {
  background-color: var(--color-green);
  color: #000;
}
.bg-gold {
  background-color: var(--color-gold);
  color: #000;
}
.bg-red {
  background-color: var(--color-red);
  color: #000;
}
.bg-yellow {
  background-color: var(--color-yellow);
  color: #000;
}

.text-pink {
  color: var(--color-pink);
}
.text-green {
  color: var(--color-green);
}
.text-gold {
  color: var(--color-gold);
}
.text-red {
  color: var(--color-red);
}
.text-black {
  color: #000 !important;
}

body {
  background-color: #000;
  font-family: "Helvetica Neue", Arial, sans-serif;
  touch-action: none;
}

#rippleCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* === CAPA DE TRANSICIÓN (Onda de Color Ajustada) === */
#page-transition {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 2000;
  pointer-events: none;

  /* TRANSICIÓN BASE (Desktop) - Un poco más rápida (0.5s) */
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);

  /* Variable CSS que JS llenará dinámicamente */
  --target-scale: 50;
}

#page-transition.active {
  /* Usamos la variable calculada por JS para precisión exacta */
  transform: translate(-50%, -50%) scale(var(--target-scale));
}

/* --- CLASE MAESTRA PARA LOS CUADROS --- */
.corner-box {
  position: fixed;
  width: var(--box-size);
  height: var(--box-size);
  border: none;
  padding: 0;
  z-index: 10;
  cursor: pointer;
  transition: filter 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 !important;
  font-size: 1rem;
  letter-spacing: 0.5px;
  will-change: transform;
}

.corner-box:focus-visible,
.central-logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (hover: hover) {
  .corner-box:hover {
    filter: brightness(1.1);
    z-index: 20;
  }
}

.corner-tl {
  top: 0;
  left: 0;
}
.corner-tr {
  top: 0;
  right: 0;
}
.corner-bl {
  bottom: 0;
  left: 0;
}
.corner-br {
  bottom: 0;
  right: 0;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  width: 100%;
  pointer-events: none;
}
.rotate-45-neg {
  transform: rotate(-45deg);
}
.rotate-45 {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .corner-box:hover .content-wrapper {
    transform: rotate(0deg);
  }
}

.central-logo {
  cursor: pointer;
  z-index: 5;
}
.central-logo img {
  filter: invert(1);
  max-width: 300px;
  width: 100%;
  transform: scale(0.9);
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.3s ease;
}
.central-logo:hover img {
  transform: scale(1);
  filter: invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
}

.custom-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--box-size);
  height: var(--box-size);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 !important;
  z-index: 1060;
  transition: filter 0.3s;
}
.custom-close-btn:hover {
  filter: brightness(1.1);
}
.custom-close-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.modal.fade .modal-dialog {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate3d(0, 100%, 0);
}
.modal.show .modal-dialog {
  transform: translate3d(0, 0, 0);
}

.social-link {
  color: #fff;
  font-size: 2.5rem;
  transition:
    color 0.3s,
    transform 0.3s;
  display: block;
}
.social-link:hover {
  color: var(--color-red);
  transform: scale(1.2);
}
.tracking-widest {
  letter-spacing: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .central-logo img,
  .corner-box,
  .content-wrapper,
  .social-link,
  .custom-close-btn,
  .modal.fade .modal-dialog,
  #page-transition {
    transition: none !important;
    transform: none !important;
  }
  .fade {
    transition: none !important;
  }
}

@media (max-width: 767.98px) {
  :root {
    --box-size: 80px;
  }
  .central-logo img {
    max-width: 80vw;
  }
  .corner-box {
    font-size: 0.8rem;
  }
  .social-link {
    font-size: 1.8rem;
  }
  .custom-close-btn .fs-1 {
    font-size: 1.5rem !important;
  }

  /* TRANSICIÓN MÓVIL: Súper rápida (0.35s) */
  #page-transition {
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  }
}