
/* =============================================================
   LA ROJA RP v1.21 — MOCKUP MATCH PASS
   Clean scenic backgrounds + exact desktop proportions
   ============================================================= */

:root{
  --lr121-red:#ee2025;
  --lr121-red-dark:#8e090d;
  --lr121-orange:#ff6818;
  --lr121-gold:#ffc13a;
  --lr121-black:#020202;
  --lr121-panel:rgba(8,3,3,.86);
}

/* -------------------------------------------------------------
   HEADER / NAV — clean, centered, no brand block
   ------------------------------------------------------------- */
.lr19-header{
  height:66px!important;
  min-height:66px!important;
  grid-template-columns:1fr auto!important;
  padding:0 clamp(24px,3.8vw,72px)!important;
  background:#030303!important;
  border-bottom:1px solid rgba(255,126,21,.26)!important;
}
.lr19-header>.lr19-brand{display:none!important}
.lr19-nav{
  justify-self:center!important;
  gap:22px!important;
}
.lr19-nav a{
  font-size:9px!important;
  padding:24px 5px 20px!important;
}
.lr19-header-actions{
  justify-self:end!important;
}

/* -------------------------------------------------------------
   HOME HERO — same composition as approved mockup
   ------------------------------------------------------------- */
.lr121-hero{
  width:100%!important;
  height:610px!important;
  min-height:610px!important;
  max-height:610px!important;
  aspect-ratio:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.52fr) minmax(330px,.48fr)!important;
  gap:26px!important;
  align-items:center!important;
  padding:34px clamp(42px,5vw,86px) 104px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:2px solid rgba(231,27,30,.65)!important;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(5,1,1,.34) 40%,rgba(3,1,1,.08) 67%,rgba(2,1,1,.22) 100%),
    url("visuals-v121/hero-exact-clean.jpg") center center / cover no-repeat!important;
  box-shadow:inset 0 -80px 105px rgba(0,0,0,.46)!important;
}
.lr121-hero:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 68% 26%,rgba(255,55,19,.07),transparent 23rem),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.25))!important;
}
.lr121-hero:after{display:none!important}
.lr19-city-glow{display:none!important}

.lr114-home-copy{
  position:relative!important;
  z-index:4!important;
  max-width:700px!important;
  align-self:center!important;
}
.lr114-home-copy .lr19-kicker{
  font-size:9px!important;
  letter-spacing:.18em!important;
}
.lr114-home-copy h1{
  margin:6px 0 0!important;
  font-size:clamp(60px,6.1vw,110px)!important;
  line-height:.86!important;
  white-space:nowrap!important;
  text-shadow:0 15px 40px rgba(0,0,0,.78)!important;
}
.lr114-home-copy h2{
  margin:14px 0 9px!important;
  font-size:clamp(16px,1.15vw,22px)!important;
}
.lr114-home-copy p{
  max-width:610px!important;
  font-size:12px!important;
  line-height:1.62!important;
  color:#ddc9bf!important;
}
.lr19-home-actions{
  margin-top:18px!important;
  gap:12px!important;
}
.lr19-home-actions a{
  min-width:152px!important;
  min-height:43px!important;
  padding:0 18px!important;
  border-radius:7px!important;
  font-size:9px!important;
}
.lr19-home-meta{
  margin-top:15px!important;
  gap:16px!important;
  font-size:8px!important;
}

/* right stack: promo + Discord exactly contained */
.lr116-hero-side{
  position:relative!important;
  z-index:5!important;
  width:min(395px,100%)!important;
  justify-self:end!important;
  align-self:center!important;
  gap:10px!important;
}
.lr116-promo-card{
  min-height:0!important;
  max-height:none!important;
  padding:16px 16px 14px!important;
  border-radius:8px!important;
  background:linear-gradient(160deg,rgba(23,4,5,.94),rgba(5,2,2,.95))!important;
  border:1px solid rgba(237,37,35,.54)!important;
}
.lr116-promo-kicker{
  font-size:8px!important;
}
.lr116-promo-value{
  margin:5px 0 1px!important;
  font-size:clamp(32px,2.9vw,49px)!important;
  line-height:.98!important;
}
.lr116-promo-sub{
  font-size:9px!important;
}
.lr116-promo-code{
  min-height:40px!important;
  margin:10px 0 8px!important;
  font-size:8px!important;
}
.lr116-promo-code b{font-size:11px!important}
.lr116-promo-timer-wrap{padding-top:7px!important}
.lr116-promo-timer{gap:5px!important;margin-top:5px!important}
.lr116-promo-timer>span{
  min-width:50px!important;
  min-height:37px!important;
  padding:5px!important;
  font-size:13px!important;
}
.lr116-promo-cta{
  min-height:39px!important;
  margin-top:9px!important;
  font-size:9px!important;
}
.lr116-discord-panel{
  min-height:112px!important;
  max-height:130px!important;
  padding:12px 14px!important;
  background:rgba(8,3,3,.90)!important;
  border:1px solid rgba(255,137,28,.30)!important;
  border-radius:8px!important;
}
.lr116-discord-panel>.lr19-discord-big{
  width:54px!important;
  height:54px!important;
}
.lr116-discord-panel>.lr19-discord-big svg{
  width:50px!important;
  height:39px!important;
}
.lr116-discord-panel>span{
  font-size:8px!important;
}
.lr116-discord-panel>p{
  font-size:8px!important;
  line-height:1.4!important;
}
.lr116-discord-panel>.lr19-discord-login-main{
  min-height:35px!important;
  font-size:8px!important;
}

/* stats bar anchored exactly inside hero bottom */
.lr115-roleplay-stats{
  position:absolute!important;
  left:clamp(42px,5vw,86px)!important;
  bottom:17px!important;
  width:min(960px,67%)!important;
  height:68px!important;
  grid-template-columns:repeat(4,1fr)!important;
  z-index:5!important;
  border:1px solid rgba(255,137,28,.28)!important;
  background:rgba(3,2,2,.84)!important;
  backdrop-filter:blur(5px)!important;
}
.lr115-roleplay-stats>div{
  min-height:66px!important;
  padding:9px 10px!important;
}
.lr115-roleplay-stats b{
  font-size:11px!important;
}
.lr115-roleplay-stats span{
  font-size:7px!important;
}

/* -------------------------------------------------------------
   SHOP / VEHICLES — no broken old background
   ------------------------------------------------------------- */
body.woocommerce-shop .page-header,
body.woocommerce-shop .entry-header,
body.woocommerce-shop header.entry-header,
body.woocommerce-shop .woocommerce-products-header,
body.woocommerce-shop .woocommerce-products-header__title,
body.woocommerce-shop .term-description,
body.post-type-archive-product>.page-header,
body.post-type-archive-product .page-title{
  display:none!important;
}
body.woocommerce-shop .site-content,
body.woocommerce-shop #content,
body.woocommerce-shop .content-area,
body.woocommerce-shop .site-main{
  margin-top:0!important;
  padding-top:0!important;
}
.lr113-shop{
  padding-top:22px!important;
}
.lr113-shop .lr-shop-hero,
.lr19-category-feature{
  background:
    linear-gradient(90deg,rgba(5,1,1,.90),rgba(12,3,2,.58),rgba(3,1,1,.25)),
    url("visuals-v121/shop-vehicles-clean.jpg") center center / cover no-repeat!important;
  border:1px solid rgba(255,139,28,.28)!important;
}
.lr113-shop .lr-shop-hero{
  min-height:285px!important;
  border-radius:14px!important;
}
.lr19-category-feature{
  min-height:195px!important;
}

/* -------------------------------------------------------------
   POLICY — clean cinematic hero
   ------------------------------------------------------------- */
.lr19-policy .lr-policy-hero{
  min-height:380px!important;
  background:
    linear-gradient(90deg,rgba(3,1,1,.96),rgba(8,2,2,.66),rgba(2,1,1,.34)),
    url("visuals-v121/policy-clean.jpg") center center / cover no-repeat!important;
  border:1px solid rgba(255,139,28,.28)!important;
}
.lr19-policy .lr-policy-hero h1{
  text-shadow:0 10px 34px rgba(0,0,0,.78)!important;
}

/* -------------------------------------------------------------
   CART / CHECKOUT / PRODUCT — fix ugly/broken backgrounds
   ------------------------------------------------------------- */
.lr121-commerce .lr110-page-heading,
.lr121-commerce .lr111-checkout-heading{
  min-height:210px!important;
  display:flex!important;
  align-items:center!important;
  background:
    linear-gradient(90deg,rgba(3,1,1,.93),rgba(9,2,2,.64),rgba(3,1,1,.35)),
    url("visuals-v121/commerce-clean.jpg") center center / cover no-repeat!important;
  border:1px solid rgba(255,139,28,.24)!important;
  border-bottom:0!important;
}
.lr121-commerce .lr110-page-heading h1{
  color:#fff!important;
  text-shadow:0 8px 28px rgba(0,0,0,.74)!important;
}
.lr121-commerce .lr110-product-shell,
.lr121-commerce .lr110-cart-shell,
.lr121-commerce .lr111-checkout-shell{
  background:#020202!important;
  border-color:rgba(255,139,28,.17)!important;
}

/* -------------------------------------------------------------
   FOOTER — single footer, clean, no social section
   ------------------------------------------------------------- */
.lr121-footer{
  width:100%!important;
  min-height:330px!important;
  height:330px!important;
  aspect-ratio:auto!important;
  display:grid!important;
  grid-template-columns:1.10fr .62fr .68fr .76fr 1.54fr!important;
  gap:clamp(18px,2vw,36px)!important;
  align-items:center!important;
  padding:26px clamp(28px,4vw,72px)!important;
  background:
    linear-gradient(90deg,rgba(1,1,1,.96) 0%,rgba(2,1,1,.88) 48%,rgba(3,1,1,.48) 72%,rgba(2,1,1,.28) 100%),
    url("visuals-v121/footer-soldiers-clean.jpg") center center / cover no-repeat!important;
  border-top:2px solid rgba(230,28,30,.62)!important;
}
.lr121-footer .lr116-footer-brand .lr19-brand-name{
  font-size:24px!important;
}
.lr121-footer .lr116-footer-brand p{
  max-width:300px!important;
  font-size:8px!important;
  line-height:1.5!important;
}
.lr121-footer .lr116-footer-brand small{
  display:block!important;
  margin-top:10px!important;
  font-size:7px!important;
}
.lr121-footer .lr19-socials{
  display:none!important;
}
.lr121-footer .lr116-footer-col{
  gap:6px!important;
}
.lr121-footer .lr116-footer-col>b{
  font-size:9px!important;
}
.lr121-footer .lr116-footer-col a{
  font-size:8px!important;
}
.lr121-footer .lr116-footer-community-copy{
  width:min(330px,100%)!important;
  margin-left:auto!important;
  padding:14px!important;
  background:rgba(5,2,2,.52)!important;
  backdrop-filter:blur(4px)!important;
  border:1px solid rgba(255,139,28,.18)!important;
  border-radius:7px!important;
}
.lr121-footer .lr116-footer-community-copy>span{
  font-size:7px!important;
}
.lr121-footer .lr116-footer-community-copy h3{
  margin:4px 0 6px!important;
  font-size:14px!important;
}
.lr121-footer .lr116-footer-community-copy p{
  font-size:8px!important;
}
.lr121-footer .lr19-footer-discord{
  min-height:34px!important;
  font-size:8px!important;
}

/* ensure only one footer */
.lr19-site>.lr19-why,
.lr19-site>.lr19-newsletter,
.lr19-site>.lr19-copy,
body.laroja-v19-page footer.site-footer,
body.laroja-v19-page .site-footer,
body.laroja-v19-page .wp-site-blocks>footer,
body.laroja-v19-page footer.wp-block-template-part{
  display:none!important;
}

/* -------------------------------------------------------------
   ANIMATION PASS — much more movement, same clean composition
   ------------------------------------------------------------- */

/* Hero title entrance + neon energy */
.lr114-home-copy{
  animation:lr121HeroIn .85s cubic-bezier(.18,.82,.28,1) both!important;
}
.lr116-hero-side{
  animation:lr121SideIn .95s .12s cubic-bezier(.18,.82,.28,1) both!important;
}
.lr114-home-copy h1{
  animation:lr121TitleBreathe 3.1s ease-in-out infinite!important;
}
.lr114-home-copy h1 strong{
  animation:lr121RPNeon 1.5s ease-in-out infinite!important;
}
.lr114-home-copy h1:after{
  content:"";
  display:block;
  width:52%;
  height:2px;
  margin-top:10px;
  background:linear-gradient(90deg,var(--lr121-red),var(--lr121-gold),transparent);
  box-shadow:0 0 12px rgba(238,32,37,.24);
  animation:lr121TitleLine 2.3s ease-in-out infinite;
}

/* CTA buttons: continuous attention + hover */
.lr19-primary,
.lr19-secondary,
.lr116-promo-cta,
.lr19-discord-login-main,
.lr19-discord-register,
.lr19-product-grid .lr-btn-small,
.lr113-shop ul.products li.product .button,
.lr110-product-shell .single_add_to_cart_button,
.lr110-cart-shell .checkout-button,
.lr111-checkout-shell #place_order,
.lr111-checkout-shell .wc-block-components-checkout-place-order-button,
.lr19-footer-discord,
.lr-policy-btn{
  position:relative!important;
  overflow:hidden!important;
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease!important;
}
.lr19-primary:after,
.lr19-secondary:after,
.lr116-promo-cta:after,
.lr19-discord-login-main:after,
.lr19-discord-register:after,
.lr19-product-grid .lr-btn-small:after,
.lr113-shop ul.products li.product .button:after,
.lr110-product-shell .single_add_to_cart_button:after,
.lr110-cart-shell .checkout-button:after,
.lr111-checkout-shell #place_order:after,
.lr111-checkout-shell .wc-block-components-checkout-place-order-button:after,
.lr19-footer-discord:after,
.lr-policy-btn:after{
  content:"";
  position:absolute;
  top:-45%;
  bottom:-45%;
  width:32%;
  left:-45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);
  animation:lr121ButtonSweep 3.6s ease-in-out infinite;
  pointer-events:none;
}
.lr19-primary,
.lr116-promo-cta,
.lr110-cart-shell .checkout-button,
.lr111-checkout-shell #place_order{
  animation:lr121PrimaryPulse 2.6s ease-in-out infinite!important;
}
.lr19-primary:hover,
.lr19-secondary:hover,
.lr116-promo-cta:hover,
.lr19-discord-login-main:hover,
.lr19-discord-register:hover,
.lr19-product-grid .lr-btn-small:hover,
.lr113-shop ul.products li.product .button:hover,
.lr110-product-shell .single_add_to_cart_button:hover,
.lr110-cart-shell .checkout-button:hover,
.lr111-checkout-shell #place_order:hover,
.lr111-checkout-shell .wc-block-components-checkout-place-order-button:hover,
.lr19-footer-discord:hover,
.lr-policy-btn:hover{
  transform:translateY(-4px) scale(1.03)!important;
  filter:brightness(1.14)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.46),0 0 26px rgba(238,32,37,.22)!important;
}

/* Promo animations */
.lr116-promo-card{
  animation:lr121PromoFloat 2.5s ease-in-out infinite!important;
}
.lr116-promo-kicker{
  animation:lr121GoldBlink 2.0s ease-in-out infinite!important;
}
.lr116-promo-value{
  animation:lr121DiscountPunch 1.8s ease-in-out infinite!important;
}
.lr116-promo-code{
  animation:lr121CodeGlow 2.0s ease-in-out infinite!important;
}
.lr116-promo-timer>span{
  animation:lr121TimerPulse 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}

/* Stats cards */
.lr115-roleplay-stats>div{
  animation:lr121StatFloat 4s ease-in-out infinite!important;
}
.lr115-roleplay-stats>div:nth-child(2){animation-delay:.35s!important}
.lr115-roleplay-stats>div:nth-child(3){animation-delay:.70s!important}
.lr115-roleplay-stats>div:nth-child(4){animation-delay:1.05s!important}

/* Product cards and images */
.lr19-product-grid .lr-product-card,
.lr113-shop ul.products li.product,
.lr-policy-summary-card,
.lr-policy-section{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.lr19-product-grid .lr-product-card:hover,
.lr113-shop ul.products li.product:hover,
.lr-policy-summary-card:hover,
.lr-policy-section:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(255,181,44,.58)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 22px rgba(205,20,22,.10)!important;
}
.lr19-product-grid .lr-product-media img,
.lr113-shop ul.products li.product img{
  transition:transform .42s cubic-bezier(.2,.76,.3,1),filter .34s ease!important;
}
.lr19-product-grid .lr-product-card:hover .lr-product-media img,
.lr113-shop ul.products li.product:hover img{
  transform:scale(1.055)!important;
  filter:brightness(1.07) saturate(1.06)!important;
}

/* Nav movement */
.lr19-nav a{
  transition:transform .18s ease,color .18s ease,text-shadow .18s ease!important;
}
.lr19-nav a:hover{
  transform:translateY(-2px) scale(1.04)!important;
  color:#fff!important;
  text-shadow:0 0 12px rgba(255,190,48,.16);
}

/* Floating Discord */
.lr-discord-float{
  animation:lr121DiscordFloat 2.5s ease-in-out infinite!important;
}
.lr-discord-float:before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:22px;
  border:1px solid rgba(88,101,242,.22);
  animation:lr121DiscordRing 2.5s ease-out infinite;
  pointer-events:none;
}

/* page section reveal */
.lr121-reveal{
  opacity:0;
  transform:translateY(26px) scale(.988);
}
.lr121-reveal.lr121-visible{
  animation:lr121Reveal .72s cubic-bezier(.18,.82,.28,1) forwards;
}

@keyframes lr121HeroIn{
  from{opacity:0;transform:translateX(-30px)}
  to{opacity:1;transform:none}
}
@keyframes lr121SideIn{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:none}
}
@keyframes lr121TitleBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.08)}
}
@keyframes lr121RPNeon{
  0%,100%{filter:brightness(1);text-shadow:0 0 8px rgba(238,32,37,.22)}
  50%{filter:brightness(1.34);text-shadow:0 0 16px rgba(238,32,37,.54),0 0 30px rgba(238,32,37,.28)}
}
@keyframes lr121TitleLine{
  0%,100%{transform:scaleX(.38);opacity:.42}
  50%{transform:scaleX(1);opacity:1}
}
@keyframes lr121ButtonSweep{
  0%,34%{left:-45%;opacity:0}
  45%{opacity:1}
  63%{left:118%;opacity:0}
  100%{left:118%;opacity:0}
}
@keyframes lr121PrimaryPulse{
  0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.32)}
  50%{box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 18px rgba(238,32,37,.20)}
}
@keyframes lr121PromoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes lr121GoldBlink{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@keyframes lr121DiscountPunch{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.045);filter:brightness(1.26)}
}
@keyframes lr121CodeGlow{
  0%,100%{box-shadow:0 0 0 rgba(255,193,58,0)}
  50%{box-shadow:0 0 20px rgba(255,193,58,.14)}
}
@keyframes lr121TimerPulse{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-2px);filter:brightness(1.18)}
}
@keyframes lr121StatFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes lr121DiscordFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes lr121DiscordRing{
  0%{transform:scale(.92);opacity:.5}
  100%{transform:scale(1.14);opacity:0}
}
@keyframes lr121Reveal{
  to{opacity:1;transform:none}
}

/* Responsive */
@media(max-width:1100px){
  .lr121-hero{
    height:auto!important;
    min-height:780px!important;
    max-height:none!important;
    grid-template-columns:1fr!important;
    padding:40px 24px 190px!important;
  }
  .lr116-hero-side{
    justify-self:start!important;
    width:min(420px,100%)!important;
    margin-top:18px!important;
  }
  .lr115-roleplay-stats{
    left:24px!important;
    width:calc(100% - 48px)!important;
    bottom:18px!important;
  }
  .lr121-footer{
    height:auto!important;
    min-height:430px!important;
    grid-template-columns:repeat(2,1fr)!important;
    background-position:center bottom!important;
  }
  .lr121-footer .lr116-footer-community{
    grid-column:1/-1!important;
  }
}
@media(max-width:700px){
  .lr19-header{
    grid-template-columns:1fr!important;
  }
  .lr19-header-actions{display:none!important}
  .lr114-home-copy h1{
    white-space:normal!important;
    font-size:58px!important;
  }
  .lr121-hero{
    min-height:830px!important;
  }
  .lr115-roleplay-stats{
    grid-template-columns:repeat(2,1fr)!important;
    height:auto!important;
  }
  .lr121-footer{
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:28px 20px!important;
  }
  .lr121-footer .lr116-footer-community{
    grid-column:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}
