/* assets/css/kubet-ui.css */

:root{
  --kubet-hero-overlay-start: rgba(4, 12, 32, 0.95);
  --kubet-hero-overlay-end: rgba(13, 92, 171, 0.85);
  --kubet-hero-text-glow: 0 0 24px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 204, 0, 0.45);
  --kubet-hero-subtext-color: rgba(255, 255, 255, 0.9);
  --kubet-cta-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
  --kubet-transition-fast: 0.3s ease;
}

/* Desktop-first cinematic enhancements */
@media (min-width: 992px){
  /* Hero section overlay + depth */
  .hero-section,
  .home-hero-section{
    position: relative;
    overflow: hidden;
    background-color: #020815;
  }

  .hero-section::before,
  .home-hero-section::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.08) 0, transparent 40%),
                linear-gradient(120deg, var(--kubet-hero-overlay-start) 0%, var(--kubet-hero-overlay-end) 65%, rgba(0, 0, 0, 0.95) 100%);
    opacity: 0.98;
    pointer-events: none;
    z-index: 1;
  }

  .hero-slide,
  .home-hero-section .hero-slide{
    position: relative;
    z-index: 2;
  }

  /* Hero typography */
  .hero-heading h1,
  .hero-heading h2{
    font-size: 3.3rem;
    font-weight: 800;
    line-height: 1.05;
    color: #ffffff;
    text-shadow: var(--kubet-hero-text-glow);
    letter-spacing: 0.5px;
    margin-bottom: 0.35em;
  }

  .hero-subheading,
  .hero-subheading p{
    font-size: 1.15rem;
    color: var(--kubet-hero-subtext-color);
    opacity: 0.9;
  }

  /* Initial neutral state for animated elements */
  .hero-slide .hero-heading,
  .hero-slide .hero-subheading,
  .hero-slide .hero-cta-row{
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--kubet-transition-fast),
      transform var(--kubet-transition-fast);
  }

  /* Active slide motion (toggled by JS) */
  .hero-slide.is-active .hero-heading{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
  }
  .hero-slide.is-active .hero-subheading{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.12s;
  }
  .hero-slide.is-active .hero-cta-row{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
  }

  /* CTA buttons – Kubet gradients */
  .btn-register{
    background-image: linear-gradient(135deg, #ff9800 0%, #ffb733 45%, #ffcc66 100%);
    color: #120b04;
    box-shadow: var(--kubet-cta-shadow);
    transform-origin: center;
    transition:
      transform var(--kubet-transition-fast),
      box-shadow var(--kubet-transition-fast),
      filter var(--kubet-transition-fast);
  }
  .btn-register:hover{
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  }

  .btn-login{
    background-image: linear-gradient(135deg, #1e88e5 0%, #42a5f5 45%, #64b5f6 100%);
    color: #ffffff;
    box-shadow: var(--kubet-cta-shadow);
    transform-origin: center;
    transition:
      transform var(--kubet-transition-fast),
      box-shadow var(--kubet-transition-fast),
      filter var(--kubet-transition-fast);
  }
  .btn-login:hover{
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  }

  /* Category cards hover motion */
  .category-card{
    cursor: pointer;
  }
  .category-image{
    transition:
      transform var(--kubet-transition-fast),
      box-shadow var(--kubet-transition-fast);
    will-change: transform;
  }
  .category-card:hover .category-image{
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
  }

  /* Jackpot bar – glowing number */
  .jackpot-section,
  .home-jackpot-bar{
    position: relative;
    background: radial-gradient(circle at 0 0, rgba(13, 92, 171, 0.6), transparent 55%),
                linear-gradient(120deg, #020824 0%, #061b3a 45%, #01030a 100%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9);
  }

  .jackpot-amount{
    font-size: 2.6rem;
    font-weight: 800;
    color: #ffeb3b;
    text-shadow: 0 0 16px rgba(255, 235, 59, 0.9), 0 0 45px rgba(255, 214, 0, 0.85);
    letter-spacing: 1px;
  }

  .jackpot-label{
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.82rem;
    opacity: 0.85;
  }

  .jackpot-subtext{
    color: rgba(255, 255, 255, 0.82);
  }

  /* Winner marquee subtle motion (CSS-only) */
  .winner-marquee-track{
    white-space: nowrap;
    overflow: hidden;
    position: relative;
  }
  .winner-marquee-track .winner-item{
    display: inline-block;
    padding-right: 3rem;
  }
  .winner-marquee-track::before,
  .winner-marquee-track::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    pointer-events: none;
  }
  .winner-marquee-track::before{
    left: 0;
    background: linear-gradient(to right, #020815, rgba(2, 8, 21, 0));
  }
  .winner-marquee-track::after{
    right: 0;
    background: linear-gradient(to left, #020815, rgba(2, 8, 21, 0));
  }

  /* Provider logos strip refinement */
  .provider-logo{
    opacity: 0.7;
    filter: grayscale(1);
    transition:
      opacity var(--kubet-transition-fast),
      filter var(--kubet-transition-fast),
      transform var(--kubet-transition-fast);
  }
  .provider-logo-col:hover .provider-logo{
    opacity: 1;
    filter: grayscale(0.2);
    transform: translateY(-4px);
  }
}