/* LUZMU V17 — Jerarquía visual, animaciones sutiles y CTAs premium */

:root{
  --lm-gold:#e4ae3f;
  --lm-gold-soft:#ffd879;
  --lm-red:#8f1d14;
  --lm-blue:#15345d;
}

/* 1) Jerarquía visual: Castle Siege y Rankings llaman más la atención */
.dashboard-grid{
  grid-template-columns:0.95fr 1.05fr 1.22fr 1.35fr!important;
  gap:16px!important;
  align-items:stretch!important;
}

.featured-card{
  position:relative!important;
  transform:translateY(-4px)!important;
  box-shadow:
    0 22px 48px rgba(0,0,0,.46),
    0 0 0 1px rgba(229,172,56,.16)!important;
}

.featured-card::before{
  filter:drop-shadow(0 0 8px rgba(231,177,64,.16))!important;
}

.featured-card-siege{
  min-height:458px!important;
}

.featured-card-ranking{
  min-height:458px!important;
}

.featured-card .section-heading h2{
  font-size:20px!important;
  letter-spacing:.8px!important;
}

.featured-card-siege .siege-neutral-crest,
.featured-card-siege .siege-neutral-crest.legendary{
  width:235px!important;
  height:220px!important;
}

.featured-card-ranking .home-ranking-table{
  font-size:13px!important;
}

/* 2) Botones principales más grandes y con identidad visual clara */
.cta-row{
  gap:16px!important;
  margin-top:22px!important;
}

.cta-row a{
  min-width:215px!important;
  min-height:74px!important;
  padding:14px 24px!important;
  border-radius:5px!important;
  font-size:15px!important;
  letter-spacing:.4px!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease,
    border-color .22s ease!important;
}

.cta-row a small{
  margin-top:6px!important;
  font-size:10px!important;
  letter-spacing:.7px!important;
}

.cta-create{
  color:#1b1002!important;
  background:
    linear-gradient(180deg,#ffd56f 0%,#d2901b 52%,#8a5108 100%)!important;
  border:1px solid #ffe69c!important;
}

.cta-download{
  color:#fff0dc!important;
  background:
    linear-gradient(180deg,#9b2b1d 0%,#64150f 55%,#2e0705 100%)!important;
  border:1px solid #d15c46!important;
}

.cta-discord{
  color:#edf4ff!important;
  background:
    linear-gradient(180deg,#244d83 0%,#122d50 55%,#071426 100%)!important;
  border:1px solid #4d75a4!important;
}

/* glow sweep */
.cta-row a{
  position:relative!important;
  overflow:hidden!important;
}

.cta-row a::after{
  content:""!important;
  position:absolute!important;
  top:-30%!important;
  left:-35%!important;
  width:32%!important;
  height:170%!important;
  transform:rotate(18deg)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent)!important;
  opacity:0!important;
  transition:left .6s ease,opacity .25s ease!important;
}

.cta-row a:hover{
  transform:translateY(-4px) scale(1.015)!important;
  filter:brightness(1.08)!important;
  box-shadow:
    0 20px 40px rgba(0,0,0,.44),
    0 0 22px rgba(226,169,53,.16),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
}

.cta-row a:hover::after{
  left:108%!important;
  opacity:1!important;
}

/* 3) Logo animation: very subtle floating + glow */
.hero-logo-premium{
  animation:luzmuLogoFloat 5.5s ease-in-out infinite!important;
  will-change:transform,filter!important;
}

@keyframes luzmuLogoFloat{
  0%,100%{
    transform:translateY(0);
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.52))
           drop-shadow(0 0 10px rgba(234,175,58,.10));
  }
  50%{
    transform:translateY(-6px);
    filter:drop-shadow(0 15px 22px rgba(0,0,0,.48))
           drop-shadow(0 0 18px rgba(234,175,58,.22));
  }
}

/* 4) Golden particles layer */
.hero-section{
  position:relative!important;
  overflow:hidden!important;
}

.luzmu-particles{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.luzmu-particle{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:radial-gradient(circle,#fff3bd 0%,#e7ac32 50%,transparent 72%);
  box-shadow:0 0 8px rgba(230,171,49,.7);
  opacity:.0;
  animation:luzmuParticleRise linear infinite;
}

@keyframes luzmuParticleRise{
  0%{
    transform:translate3d(0,40px,0) scale(.7);
    opacity:0;
  }
  18%{opacity:.65}
  82%{opacity:.4}
  100%{
    transform:translate3d(var(--drift,20px),-180px,0) scale(1.15);
    opacity:0;
  }
}

.hero-main{
  position:relative!important;
  z-index:2!important;
}

/* 5) Online counter pulse */
.server-info-panel dd.online,
.server-online-footer,
.online-light{
  animation:luzmuOnlinePulse 2.8s ease-in-out infinite!important;
}

@keyframes luzmuOnlinePulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22)}
}

/* gentle card hover, not exaggerated */
.dashboard-grid .section-card{
  transition:transform .22s ease,box-shadow .22s ease!important;
}

.dashboard-grid .section-card:hover{
  transform:translateY(-5px)!important;
  box-shadow:
    0 24px 48px rgba(0,0,0,.46),
    0 0 20px rgba(224,165,46,.09)!important;
}

.featured-card:hover{
  transform:translateY(-8px)!important;
}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  .hero-logo-premium,
  .server-info-panel dd.online,
  .server-online-footer,
  .online-light,
  .luzmu-particle{
    animation:none!important;
  }
  .cta-row a,
  .dashboard-grid .section-card{
    transition:none!important;
  }
}

/* Responsive hierarchy */
@media(max-width:1200px){
  .dashboard-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .featured-card-siege,
  .featured-card-ranking{
    min-height:430px!important;
  }
}

@media(max-width:900px){
  .dashboard-grid{
    grid-template-columns:1fr!important;
  }
  .featured-card{
    transform:none!important;
  }
  .cta-row{
    justify-content:center!important;
  }
  .cta-row a{
    min-width:200px!important;
  }
}

@media(max-width:560px){
  .cta-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:min(370px,94vw)!important;
    margin-inline:auto!important;
  }
  .cta-row a{
    width:100%!important;
    min-width:0!important;
  }
}