/* =========================================================
   CLASTIE V57 - MINECRAFT FOX HERO
   User wanted a roaming Minecraft fox in the hero.
   ========================================================= */

.cl9-hero{
    overflow:hidden!important;
}

/* So the fox is clearly visible */
.cl52-hero-decor .cl52-glass,
.cl52-hero-decor .cl52-line{
    opacity:.12!important;
}

.cl57-hero-fox{
    position:absolute!important;
    right:6%!important;
    bottom:6%!important;
    width:min(25vw,350px)!important;
    z-index:2!important;
    pointer-events:none!important;
    animation:cl57FoxRoam 12s ease-in-out infinite alternate!important;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.38));
}
.cl57-hero-fox img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    image-rendering:auto!important;
    animation:cl57FoxBounce 1.15s ease-in-out infinite alternate!important;
    transform-origin:50% 85%!important;
}
.cl57-fox-shadow{
    position:absolute!important;
    left:50%!important;
    bottom:-4%!important;
    width:48%!important;
    height:10%!important;
    transform:translateX(-50%)!important;
    border-radius:50%!important;
    background:radial-gradient(ellipse at center, rgba(0,0,0,.38) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,0) 75%)!important;
    filter:blur(8px)!important;
    animation:cl57FoxShadow 1.15s ease-in-out infinite alternate!important;
}
@keyframes cl57FoxRoam{
    0%{transform:translate3d(-2%,0,0) scale(1) rotate(-2deg)}
    20%{transform:translate3d(6%,-1.2%,0) scale(1.03) rotate(1deg)}
    40%{transform:translate3d(14%,.6%,0) scale(1.01) rotate(-1deg)}
    60%{transform:translate3d(3%,-1.8%,0) scale(1.04) rotate(1.4deg)}
    80%{transform:translate3d(11%,.2%,0) scale(1.02) rotate(-.8deg)}
    100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
}
@keyframes cl57FoxBounce{
    from{transform:translateY(0) rotate(-1.2deg)}
    to{transform:translateY(-10px) rotate(1.2deg)}
}
@keyframes cl57FoxShadow{
    from{opacity:.32;transform:translateX(-50%) scale(1)}
    to{opacity:.18;transform:translateX(-50%) scale(.84)}
}

/* Make hero right side brighter so fox is obvious */
.cl9-hero-overlay{
    background:
      linear-gradient(90deg,
        rgba(4,9,16,.90) 0%,
        rgba(4,9,16,.74) 38%,
        rgba(4,9,16,.36) 61%,
        rgba(4,9,16,.14) 82%,
        rgba(4,9,16,.22) 100%),
      linear-gradient(180deg,
        rgba(4,9,16,.04),
        rgba(4,9,16,.08) 52%,
        rgba(4,9,16,.54) 100%)!important;
}

/* Keep content above */
.cl9-hero-inner{z-index:4!important;position:relative!important}

/* Better compact info row; keep previous fixes */
.cl9-info-row{
    max-width:720px!important;
    gap:14px!important;
}
.cl9-ip-card{
    width:360px!important;
    max-width:360px!important;
    flex:0 0 360px!important;
}
.cl9-ip-card b{
    max-width:220px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
}

@media (max-width: 1200px){
    .cl57-hero-fox{width:min(30vw,280px)!important;right:4%!important;bottom:5%!important}
}
@media (max-width: 900px){
    .cl57-hero-fox{width:min(40vw,220px)!important;right:2%!important;bottom:2%!important}
    .cl57-hero-fox img{animation-duration:1s!important}
}
@media (max-width: 700px){
    .cl57-hero-fox{width:160px!important;right:-6px!important;bottom:20px!important;opacity:.95!important}
    .cl9-ip-card{width:100%!important;max-width:100%!important;flex:1 1 100%!important}
}