
/* =============================================================
   LA ROJA RP v1.25 — TRUE LIVE HERO
   CLEAN IMAGE BACKGROUND + 100% REAL ANIMATED HTML CONTENT
   ============================================================= */

@media(min-width:1101px){

  .lr121-hero{
    position:relative!important;
    width:100%!important;
    height:552px!important;
    min-height:552px!important;
    max-height:552px!important;
    aspect-ratio:auto!important;

    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) 360px!important;
    gap:24px!important;
    align-items:center!important;

    padding:26px 66px 78px!important;

    background:
      linear-gradient(90deg,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.20) 36%,
        rgba(0,0,0,.03) 65%,
        rgba(0,0,0,.10) 100%),
      url("visuals-v125/hero-city-car-heli-clean.jpg") center center/cover no-repeat!important;

    border-bottom:2px solid rgba(235,30,33,.66)!important;
    overflow:hidden!important;
    box-shadow:inset 0 -72px 96px rgba(0,0,0,.43)!important;
  }

  /* absolutely no old screenshot/background UI */
  .lr121-hero:before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:
      radial-gradient(circle at 68% 24%,rgba(255,49,17,.075),transparent 22rem),
      linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.18))!important;
  }

  .lr121-hero:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:linear-gradient(112deg,transparent 0%,rgba(255,48,19,.025) 47%,transparent 57%)!important;
    background-size:220% 100%!important;
    animation:lr125SceneSweep 8s linear infinite!important;
  }

  /* ---------------------------------------------------------
     LEFT REAL CONTENT
     --------------------------------------------------------- */
  .lr114-home-copy{
    position:relative!important;
    z-index:6!important;
    opacity:1!important;
    pointer-events:auto!important;
    width:auto!important;
    height:auto!important;
    left:auto!important;
    top:auto!important;
    max-width:660px!important;
    margin:0!important;
    align-self:center!important;
  }

  .lr114-home-copy .lr19-kicker{
    display:block!important;
    opacity:1!important;
    color:#ffc13a!important;
    font-size:9px!important;
    letter-spacing:.18em!important;
    margin:0 0 4px!important;
    animation:lr125Kicker 2.6s ease-in-out infinite!important;
  }

  .lr114-home-copy h1{
    display:block!important;
    opacity:1!important;
    margin:0!important;
    color:#fff!important;
    font-size:72px!important;
    line-height:.86!important;
    letter-spacing:-.06em!important;
    white-space:nowrap!important;
    text-shadow:0 15px 38px rgba(0,0,0,.78)!important;
    animation:lr125Title 3.1s ease-in-out infinite!important;
  }

  .lr114-home-copy h1 strong{
    display:inline-block!important;
    color:#ee2028!important;
    animation:lr125RP 1.45s ease-in-out infinite!important;
  }

  .lr114-home-copy h1:after{
    content:""!important;
    display:block!important;
    width:47%!important;
    height:2px!important;
    margin-top:9px!important;
    background:linear-gradient(90deg,#ee2028,#ffc13a,transparent)!important;
    box-shadow:0 0 12px rgba(238,32,40,.26)!important;
    animation:lr125TitleRail 2.3s ease-in-out infinite!important;
  }

  .lr114-home-copy h2{
    display:block!important;
    opacity:1!important;
    margin:12px 0 8px!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1.1!important;
    animation:lr125Subtitle 3s ease-in-out infinite!important;
  }

  .lr114-home-copy p{
    display:block!important;
    opacity:1!important;
    max-width:590px!important;
    margin:0!important;
    color:#dcc9c0!important;
    font-size:12px!important;
    line-height:1.62!important;
  }

  .lr114-home-copy .lr19-home-actions{
    position:static!important;
    display:flex!important;
    opacity:1!important;
    gap:11px!important;
    margin:18px 0 0!important;
    pointer-events:auto!important;
  }

  .lr114-home-copy .lr19-home-actions a{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:174px!important;
    min-height:42px!important;
    opacity:1!important;
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    border-radius:6px!important;
    font-size:9px!important;
    animation:lr125Cta 3s ease-in-out infinite!important;
  }
  .lr114-home-copy .lr19-home-actions a:nth-child(2){
    animation-delay:.35s!important;
  }

  .lr114-home-copy .lr19-home-meta{
    display:flex!important;
    opacity:1!important;
    gap:15px!important;
    margin-top:15px!important;
    color:#dfccc3!important;
    font-size:8px!important;
  }

  .lr114-home-copy .lr19-home-meta span{
    display:inline-flex!important;
    opacity:1!important;
    animation:lr125Meta 3.1s ease-in-out infinite!important;
  }
  .lr114-home-copy .lr19-home-meta span:nth-child(2){animation-delay:.35s!important}
  .lr114-home-copy .lr19-home-meta span:nth-child(3){animation-delay:.7s!important}


  /* ---------------------------------------------------------
     RIGHT REAL LIVE PROMO + DISCORD
     --------------------------------------------------------- */
  .lr116-hero-side{
    position:relative!important;
    z-index:7!important;
    opacity:1!important;
    width:360px!important;
    height:auto!important;
    max-width:none!important;
    right:auto!important;
    top:auto!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    justify-self:end!important;
    align-self:center!important;
  }

  .lr116-hero-side:before{
    display:none!important;
  }

  .lr116-promo-card{
    display:block!important;
    opacity:1!important;
    width:100%!important;
    height:auto!important;
    min-height:305px!important;
    max-height:none!important;
    flex:none!important;
    padding:14px 15px 13px!important;
    border-radius:8px!important;
    background:linear-gradient(160deg,rgba(24,4,5,.96),rgba(7,2,2,.98))!important;
    border:1px solid rgba(237,37,35,.55)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.46)!important;
    animation:lr125PromoFloat 2.5s ease-in-out infinite!important;
  }

  .lr116-promo-kicker{
    opacity:1!important;
    font-size:8px!important;
    animation:lr125Gold 2s ease-in-out infinite!important;
  }

  .lr116-promo-value{
    opacity:1!important;
    font-size:42px!important;
    line-height:.92!important;
    margin:5px 0 0!important;
    animation:lr125Discount 1.8s ease-in-out infinite!important;
  }

  .lr116-promo-sub{
    opacity:1!important;
    font-size:9px!important;
  }

  .lr116-promo-code{
    opacity:1!important;
    min-height:38px!important;
    height:38px!important;
    margin:9px 0 7px!important;
    padding:0 11px!important;
    font-size:8px!important;
    animation:lr125Code 2s ease-in-out infinite!important;
  }

  .lr116-promo-code b{
    font-size:11px!important;
  }

  .lr116-promo-timer-wrap{
    opacity:1!important;
    padding-top:6px!important;
  }

  .lr116-promo-timer{
    gap:4px!important;
    margin-top:5px!important;
  }

  .lr116-promo-timer>span{
    opacity:1!important;
    width:24%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:4px!important;
    font-size:12px!important;
    animation:lr125Timer 2.2s ease-in-out infinite!important;
  }
  .lr116-promo-timer>span:nth-child(2){animation-delay:.18s!important}
  .lr116-promo-timer>span:nth-child(3){animation-delay:.36s!important}
  .lr116-promo-timer>span:nth-child(4){animation-delay:.54s!important}

  .lr116-promo-cta{
    opacity:1!important;
    height:38px!important;
    min-height:38px!important;
    margin-top:8px!important;
    font-size:8px!important;
  }

  .lr116-discord-panel{
    opacity:1!important;
    width:100%!important;
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
    flex:none!important;
    padding:11px 12px!important;

    display:grid!important;
    grid-template-columns:1fr 58px!important;
    grid-template-areas:
      "title icon"
      "copy icon"
      "button button"!important;
    row-gap:3px!important;
    column-gap:10px!important;
    align-items:center!important;

    background:linear-gradient(160deg,rgba(13,4,4,.96),rgba(5,2,2,.98))!important;
    border:1px solid rgba(255,137,28,.28)!important;
    border-radius:8px!important;
    animation:lr125Discord 3s ease-in-out infinite!important;
  }

  .lr116-discord-panel>span{
    grid-area:title!important;
    opacity:1!important;
    font-size:8px!important;
  }

  .lr116-discord-panel>p{
    grid-area:copy!important;
    opacity:1!important;
    margin:0!important;
    font-size:7px!important;
    line-height:1.35!important;
  }

  .lr116-discord-panel>.lr19-discord-big{
    grid-area:icon!important;
    opacity:1!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
  }

  .lr116-discord-panel>.lr19-discord-big svg{
    width:54px!important;
    height:42px!important;
  }

  .lr116-discord-panel>.lr19-discord-login-main{
    grid-area:button!important;
    opacity:1!important;
    height:34px!important;
    min-height:34px!important;
    margin:3px 0 0!important;
    font-size:8px!important;
  }


  /* ---------------------------------------------------------
     REAL BOTTOM FOUR INFO BLOCKS
     --------------------------------------------------------- */
  .lr115-roleplay-stats{
    display:grid!important;
    opacity:1!important;
    position:absolute!important;
    z-index:7!important;
    left:66px!important;
    bottom:14px!important;
    width:810px!important;
    height:66px!important;
    grid-template-columns:repeat(4,1fr)!important;
    background:rgba(3,2,2,.84)!important;
    border:1px solid rgba(255,137,28,.28)!important;
    backdrop-filter:blur(5px)!important;
  }

  .lr115-roleplay-stats>div{
    opacity:1!important;
    min-height:64px!important;
    padding:9px 10px!important;
    animation:lr125Stat 3.8s ease-in-out infinite!important;
  }
  .lr115-roleplay-stats>div:nth-child(2){animation-delay:.3s!important}
  .lr115-roleplay-stats>div:nth-child(3){animation-delay:.6s!important}
  .lr115-roleplay-stats>div:nth-child(4){animation-delay:.9s!important}

  .lr115-roleplay-stats b{
    opacity:1!important;
    font-size:11px!important;
  }

  .lr115-roleplay-stats span{
    opacity:1!important;
    font-size:7px!important;
  }


  /* ---------------------------------------------------------
     Coupon behavior
     --------------------------------------------------------- */
  .lr121-hero:not(.lr125-has-promo) .lr116-promo-card{
    display:none!important;
  }

  .lr121-hero:not(.lr125-has-promo) .lr116-hero-side{
    justify-content:flex-end!important;
  }


  /* ---------------------------------------------------------
     Interaction
     --------------------------------------------------------- */
  .lr19-home-actions a:hover,
  .lr116-promo-cta:hover,
  .lr116-discord-panel>.lr19-discord-login-main:hover{
    transform:translateY(-3px) scale(1.025)!important;
    filter:brightness(1.14)!important;
    box-shadow:0 14px 35px rgba(0,0,0,.44),0 0 24px rgba(238,32,40,.22)!important;
  }
}


/* =============================================================
   KEYFRAMES
   ============================================================= */
@keyframes lr125SceneSweep{
  from{background-position:180% 0}
  to{background-position:-40% 0}
}
@keyframes lr125Kicker{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@keyframes lr125Title{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
@keyframes lr125RP{
  0%,100%{filter:brightness(1);text-shadow:0 0 8px rgba(238,32,40,.22)}
  50%{filter:brightness(1.36);text-shadow:0 0 17px rgba(238,32,40,.58),0 0 31px rgba(238,32,40,.28)}
}
@keyframes lr125TitleRail{
  0%,100%{transform:scaleX(.38);opacity:.42}
  50%{transform:scaleX(1);opacity:1}
}
@keyframes lr125Subtitle{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}
@keyframes lr125Cta{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.30)}
  50%{box-shadow:0 12px 33px rgba(0,0,0,.42),0 0 18px rgba(238,32,40,.18)}
}
@keyframes lr125Meta{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes lr125PromoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes lr125Gold{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@keyframes lr125Discount{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.045);filter:brightness(1.27)}
}
@keyframes lr125Code{
  0%,100%{box-shadow:0 0 0 rgba(255,193,58,0)}
  50%{box-shadow:0 0 17px rgba(255,193,58,.13)}
}
@keyframes lr125Timer{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-2px);filter:brightness(1.18)}
}
@keyframes lr125Discord{
  0%,100%{box-shadow:0 14px 34px rgba(0,0,0,.35)}
  50%{box-shadow:0 17px 40px rgba(0,0,0,.44),0 0 18px rgba(88,101,242,.10)}
}
@keyframes lr125Stat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}


/* Keep v1.24 responsive layout below desktop */
@media(max-width:1100px){
  .lr121-hero{
    background:
      linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.15)),
      url("visuals-v125/hero-city-car-heli-clean.jpg") center center/cover no-repeat!important;
  }
}
