/* ============================================================
   HAZARD HOCKEY CLUB — Global Styles
   Colors: Black #0a0a0a | Blue #1a3bcc | Red #cc1a1a | White #ffffff
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@500;700&display=swap');

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

:root {
  --black:  #0a0a0a;
  --blue:   #1a3bcc;
  --blue-light: #2d55e8;
  --red:    #cc1a1a;
  --red-light: #e82d2d;
  --white:  #ffffff;
  --gray:   #888;
}

html, body {
  background: var(--black);
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
}

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loader.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* Rayos de fondo animados */
.loader-bg-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 10deg,
    rgba(26, 59, 204, 0.06) 10deg 20deg,
    transparent 20deg 30deg,
    rgba(204, 26, 26, 0.05) 30deg 40deg,
    transparent 40deg 50deg,
    rgba(26, 59, 204, 0.06) 50deg 60deg,
    transparent 60deg 70deg,
    rgba(204, 26, 26, 0.05) 70deg 80deg,
    transparent 80deg 90deg,
    rgba(26, 59, 204, 0.06) 90deg 100deg,
    transparent 100deg 110deg,
    rgba(204, 26, 26, 0.05) 110deg 120deg,
    transparent 120deg 130deg,
    rgba(26, 59, 204, 0.06) 130deg 140deg,
    transparent 140deg 150deg,
    rgba(204, 26, 26, 0.05) 150deg 160deg,
    transparent 160deg 170deg,
    rgba(26, 59, 204, 0.06) 170deg 180deg,
    transparent 180deg 190deg,
    rgba(204, 26, 26, 0.05) 190deg 200deg,
    transparent 200deg 210deg,
    rgba(26, 59, 204, 0.06) 210deg 220deg,
    transparent 220deg 230deg,
    rgba(204, 26, 26, 0.05) 230deg 240deg,
    transparent 240deg 250deg,
    rgba(26, 59, 204, 0.06) 250deg 260deg,
    transparent 260deg 270deg,
    rgba(204, 26, 26, 0.05) 270deg 280deg,
    transparent 280deg 290deg,
    rgba(26, 59, 204, 0.06) 290deg 300deg,
    transparent 300deg 310deg,
    rgba(204, 26, 26, 0.05) 310deg 320deg,
    transparent 320deg 330deg,
    rgba(26, 59, 204, 0.06) 330deg 340deg,
    transparent 340deg 350deg,
    rgba(204, 26, 26, 0.05) 350deg 360deg
  );
  animation: raysRotate 20s linear infinite;
  transform-origin: center;
}

@keyframes raysRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Contenido del loader */
.loader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Anillos giratorios */
.logo-ring {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  animation: spin linear infinite;
}

.ring-outer {
  width: 260px;
  height: 260px;
  border-width: 4px;
  border-color: var(--red) transparent var(--red) transparent;
  animation-duration: 2.4s;
  box-shadow: 0 0 20px var(--red), inset 0 0 20px rgba(204,26,26,0.15);
}

.ring-mid {
  width: 220px;
  height: 220px;
  border-width: 4px;
  border-color: transparent var(--blue) transparent var(--blue);
  animation-duration: 1.8s;
  animation-direction: reverse;
  box-shadow: 0 0 20px var(--blue), inset 0 0 20px rgba(26,59,204,0.15);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.logo {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  animation: logoPulse 2s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(26, 59, 204, 0.5), 0 0 60px rgba(204, 26, 26, 0.3);
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(26,59,204,0.5), 0 0 60px rgba(204,26,26,0.3); }
  50%       { box-shadow: 0 0 50px rgba(26,59,204,0.8), 0 0 90px rgba(204,26,26,0.5); }
}

/* Texto del loader */
.loader-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.club-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem;
  letter-spacing: 0.25em;
  background: linear-gradient(90deg, var(--blue-light), var(--white), var(--red-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loading-label {
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  color: var(--gray);
  text-transform: uppercase;
}

.dots span {
  animation: blink 1.2s infinite;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40%            { opacity: 1; }
}

/* Barra de progreso */
.progress-bar-wrap {
  width: 280px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--red));
  border-radius: 2px;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--blue);
}

/* ============================================================
   COMING SOON
   ============================================================ */
.hidden { display: none; }

#mainPage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.coming-soon-bg-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 10deg,
    rgba(26, 59, 204, 0.07) 10deg 20deg,
    transparent 20deg 30deg,
    rgba(204, 26, 26, 0.05) 30deg 40deg,
    transparent 40deg 50deg,
    rgba(26, 59, 204, 0.07) 50deg 60deg,
    transparent 60deg 70deg,
    rgba(204, 26, 26, 0.05) 70deg 80deg,
    transparent 80deg 90deg,
    rgba(26, 59, 204, 0.07) 90deg 100deg,
    transparent 100deg 110deg,
    rgba(204, 26, 26, 0.05) 110deg 120deg,
    transparent 120deg 130deg,
    rgba(26, 59, 204, 0.07) 130deg 140deg,
    transparent 140deg 150deg,
    rgba(204, 26, 26, 0.05) 150deg 160deg,
    transparent 160deg 170deg,
    rgba(26, 59, 204, 0.07) 170deg 180deg,
    transparent 180deg 190deg,
    rgba(204, 26, 26, 0.05) 190deg 200deg,
    transparent 200deg 210deg,
    rgba(26, 59, 204, 0.07) 210deg 220deg,
    transparent 220deg 230deg,
    rgba(204, 26, 26, 0.05) 230deg 240deg,
    transparent 240deg 250deg,
    rgba(26, 59, 204, 0.07) 250deg 260deg,
    transparent 260deg 270deg,
    rgba(204, 26, 26, 0.05) 270deg 280deg,
    transparent 280deg 290deg,
    rgba(26, 59, 204, 0.07) 290deg 300deg,
    transparent 300deg 310deg,
    rgba(204, 26, 26, 0.05) 310deg 320deg,
    transparent 320deg 330deg,
    rgba(26, 59, 204, 0.07) 330deg 340deg,
    transparent 340deg 350deg,
    rgba(204, 26, 26, 0.05) 350deg 360deg
  );
  animation: raysRotate 25s linear infinite;
  transform-origin: center;
}

.coming-soon {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 40px 24px;
}

.cs-logo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 32px;
  animation: logoPulse 3.5s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(26,59,204,0.5), 0 0 80px rgba(204,26,26,0.25);
}

.cs-eyebrow {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.5em;
  color: var(--blue-light);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cs-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 18vw, 10rem);
  line-height: 1;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--white) 30%, var(--red-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 28px;
}

.cs-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.cs-divider span:not(.cs-biohazard) {
  display: block;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue));
}

.cs-divider span:last-child {
  background: linear-gradient(90deg, var(--red), transparent);
}

.cs-biohazard {
  font-size: 1.6rem;
  color: var(--red-light);
  animation: bioSpin 8s linear infinite;
  display: inline-block;
}

@keyframes bioSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cs-message {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.cs-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.6em;
  color: var(--gray);
  animation: csPulse 2s ease-in-out infinite;
}

@keyframes csPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}