/* ==========================================================================
   ORD CAPITAL - HERO ROULETTE HEADLINE (ESTILOS MODULARES REUTILIZABLES)
   Inspirado en la identidad de marca: Oro Metálico & Verde Bosque Esmeralda
   ========================================================================== */

:root {
  /* Tipografía de la marca */
  --ord-font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ord-font-brand: 'Cinzel', serif;

  /* Paleta cromática extraída del Logo Oficial ORD Capital */
  --ord-gold-light: #FDF2B5;
  --ord-gold-main: #D4AF37;
  --ord-gold-deep: #997B19;
  --ord-green-forest: #061D12;
  --ord-green-deep: #0B281B;
  --ord-green-emerald: #00C26F;
  --ord-green-bright: #10B981;
  
  /* Degradados de la cápsula (Fondo verde bosque de lujo y borde oro/esmeralda) */
  --ord-gradient-capsule-bg: linear-gradient(
    135deg, 
    rgba(6, 29, 18, 0.95) 0%, 
    rgba(11, 40, 27, 0.88) 50%, 
    rgba(4, 18, 11, 0.97) 100%
  );
  
  --ord-gradient-capsule-border: linear-gradient(
    135deg, 
    #FDF2B5 0%, 
    #D4AF37 32%, 
    #00C26F 72%, 
    #059669 100%
  );

  --ord-slot-height: clamp(80px, 11vw, 116px);
  --ord-ease-roulette: cubic-bezier(0.22, 1, 0.36, 1);
}

.ord-roulette-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.ord-roulette-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55ch;
  font-family: var(--ord-font-main);
  font-size: clamp(2.2rem, 5.5vw, 4.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

.ord-static-phrase {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
  letter-spacing: -0.015em;
}

/* Roulette Slot Container (con ancho adaptativo suave) */
.ord-roulette-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ord-slot-height);
  width: 360px;
  vertical-align: middle;
  perspective: 1200px;
  user-select: none;
  transition: width 0.5s var(--ord-ease-roulette);
}

/* Cápsula de degradado verde bosque y marco de oro con holgura */
.ord-capsule-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 84%; /* Holgura vertical */
  border-radius: 9999px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  transition: all 0.5s var(--ord-ease-roulette);
}

.ord-capsule-bg {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--ord-gradient-capsule-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ord-capsule-glow {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  box-shadow: 
    0 0 35px rgba(212, 175, 55, 0.28),
    0 0 70px rgba(0, 194, 111, 0.18),
    inset 0 0 25px rgba(212, 175, 55, 0.18);
  animation: ordCapsuleBreath 4.5s ease-in-out infinite;
}

.ord-capsule-border {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 1.8px solid transparent;
  background: var(--ord-gradient-capsule-border) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ord-capsule-sheen {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(253, 242, 181, 0.35) 50%, 
    transparent 100%
  );
  transform: skewX(-25deg);
  animation: ordLightSweep 4.5s infinite 1s;
}

/* Track vertical */
.ord-roulette-track {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Palabras de la ruleta */
.ord-roulette-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--ord-font-main);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 
    transform 0.65s var(--ord-ease-roulette),
    opacity 0.65s var(--ord-ease-roulette),
    filter 0.65s var(--ord-ease-roulette),
    color 0.4s ease;
  pointer-events: none;
}

/* Estado Activo: Dentro de la cápsula (100% nítida, resplandor dorado-esmeralda) */
.ord-roulette-word.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: blur(0px);
  color: #ffffff;
  text-shadow: 
    0 0 22px rgba(212, 175, 55, 0.6),
    0 0 35px rgba(0, 194, 111, 0.4),
    0 2px 10px rgba(0, 0, 0, 0.9);
  z-index: 5;
}

/* Estado Previo: Arriba (desenfocada) */
.ord-roulette-word.is-prev {
  transform: translate(-50%, calc(-50% - var(--ord-slot-height) * 0.95)) scale(0.85);
  opacity: 0.28;
  filter: blur(4.5px);
  color: #94a3b8;
  z-index: 2;
}

/* Estado Posterior: Abajo (desenfocada) */
.ord-roulette-word.is-next {
  transform: translate(-50%, calc(-50% + var(--ord-slot-height) * 0.95)) scale(0.85);
  opacity: 0.28;
  filter: blur(4.5px);
  color: #94a3b8;
  z-index: 2;
}

/* Fuera de rango */
.ord-roulette-word.is-far-above {
  transform: translate(-50%, calc(-50% - var(--ord-slot-height) * 1.9)) scale(0.65);
  opacity: 0;
  filter: blur(10px);
  z-index: 1;
}

.ord-roulette-word.is-far-below {
  transform: translate(-50%, calc(-50% + var(--ord-slot-height) * 1.9)) scale(0.65);
  opacity: 0;
  filter: blur(10px);
  z-index: 1;
}

/* Animaciones */
@keyframes ordCapsuleBreath {
  0%, 100% {
    box-shadow: 
      0 0 35px rgba(212, 175, 55, 0.25),
      0 0 70px rgba(0, 194, 111, 0.16),
      inset 0 0 22px rgba(212, 175, 55, 0.16);
  }
  50% {
    box-shadow: 
      0 0 50px rgba(212, 175, 55, 0.42),
      0 0 90px rgba(0, 194, 111, 0.26),
      inset 0 0 32px rgba(212, 175, 55, 0.26);
  }
}

@keyframes ordLightSweep {
  0% { left: -100%; }
  30%, 100% { left: 140%; }
}

@media (max-width: 820px) {
  .ord-roulette-title {
    flex-direction: column;
    gap: 0.6rem;
    font-size: clamp(1.9rem, 7vw, 3rem);
  }
}