/* =========================================================
   FINAL V13 — HARD OVERRIDE
   ========================================================= */

:root{
  --v13-purple:#9d6cff;
  --v13-cyan:#45d8ff;
  --v13-dark:#07090d;
}


/* =========================================================
   HOME HERO — ABSOLUTE HARD RESET
   ========================================================= */

body.v13-home .hero{
  display:block !important;

  position:relative !important;

  width:auto !important;
  max-width:none !important;

  min-height:0 !important;
  height:auto !important;
  max-height:none !important;

  margin:
    22px 3.2vw 0 !important;

  padding:
    54px 72px 62px !important;

  overflow:hidden !important;

  align-items:initial !important;
  justify-content:initial !important;

  place-items:initial !important;

  flex-direction:initial !important;

  isolation:isolate;

  border-radius:24px !important;

  background:
    radial-gradient(
      460px circle at 84% 14%,
      rgba(148,91,255,.13),
      transparent 62%
    ),
    radial-gradient(
      430px circle at 74% 78%,
      rgba(54,202,255,.055),
      transparent 66%
    ),
    linear-gradient(
      145deg,
      #181d25,
      #090c11 68%
    ) !important;

  border:
    1px solid rgba(157,108,255,.15) !important;

  box-shadow:
    0 28px 80px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* kill previous pseudo decorations */

body.v13-home .hero::before{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  pointer-events:none !important;

  z-index:-3 !important;

  opacity:.40 !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255,255,255,.015) 1px,
      transparent 1px
    ) !important;

  background-size:
    46px 46px !important;
}


body.v13-home .hero::after{
  content:"" !important;

  position:absolute !important;

  width:360px !important;
  height:360px !important;

  right:-90px !important;
  top:-115px !important;

  border-radius:50% !important;

  pointer-events:none !important;

  z-index:-2 !important;

  opacity:1 !important;

  background:
    radial-gradient(
      circle,
      rgba(157,108,255,.14),
      rgba(69,216,255,.05) 44%,
      transparent 70%
    ) !important;

  animation:
    v13Glow 9s ease-in-out infinite alternate !important;
}


@keyframes v13Glow{
  from{
    transform:
      translate3d(-10px,6px,0)
      scale(.96);
  }

  to{
    transform:
      translate3d(17px,-9px,0)
      scale(1.05);
  }
}


/* every normal child starts where it should */

body.v13-home .hero > *:not(.v13-scene){
  position:relative !important;

  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;

  transform:none !important;

  z-index:5 !important;
}


/* common wrappers */

body.v13-home .heroContent,
body.v13-home .heroInner,
body.v13-home .heroText,
body.v13-home .heroLeft{
  position:relative !important;

  top:auto !important;
  bottom:auto !important;

  min-height:0 !important;
  height:auto !important;

  margin:0 !important;

  padding:0 !important;

  display:block !important;

  align-items:initial !important;
  justify-content:initial !important;

  transform:none !important;
}


/* label starts at TOP */

body.v13-home .heroLabel{
  display:inline-flex !important;

  margin:
    0 0 28px !important;

  position:relative !important;

  top:auto !important;

  transform:none !important;
}


body.v13-home .hero h1{
  margin:
    0 !important;

  max-width:
    780px !important;

  font-size:
    clamp(64px,6vw,112px) !important;

  line-height:
    .94 !important;

  letter-spacing:
    -4px !important;

  color:#fff !important;
}


body.v13-home .hero h1 span{
  color:#a978ff !important;

  -webkit-text-fill-color:
    #a978ff !important;

  background:none !important;
}


body.v13-home .hero p{
  max-width:
    760px !important;

  margin:
    28px 0 0 !important;
}


body.v13-home .heroActions{
  margin-top:
    34px !important;
}


/* =========================================================
   HOME SCENE — ABSOLUTE, NEVER PUSHES TEXT
   ========================================================= */

.v13-scene{
  position:absolute !important;

  width:330px;
  height:270px;

  right:7%;
  top:10%;

  z-index:2;

  pointer-events:none;

  perspective:900px;

  opacity:.68;
}


.v13-block{
  --ore:#9d6cff;
  --base:#303640;

  position:absolute;

  width:70px;
  height:70px;

  border-radius:5px;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--base) 78%,white),
      var(--base)
    );

  border:
    1px solid rgba(255,255,255,.07);

  box-shadow:
    0 18px 38px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);

  animation:
    v13BlockFloat 8s ease-in-out infinite alternate;

  will-change:transform;
}


.v13-block::after{
  content:"";

  position:absolute;

  inset:16px;

  background:
    linear-gradient(
      135deg,
      transparent 0 36%,
      var(--ore) 36% 53%,
      transparent 53%
    );

  opacity:.75;

  filter:
    drop-shadow(
      0 0 8px
      color-mix(in srgb,var(--ore) 48%,transparent)
    );
}


.v13-block:nth-child(1){
  left:5px;
  top:28px;
}


.v13-block:nth-child(2){
  left:110px;
  top:85px;

  --base:#27373e;
  --ore:#45d8ff;

  animation-delay:-2s;
}


.v13-block:nth-child(3){
  left:215px;
  top:15px;

  --base:#372e40;
  --ore:#c084ff;

  animation-delay:-4s;
}


.v13-block:nth-child(4){
  left:75px;
  top:175px;

  --base:#29372e;
  --ore:#63d88b;

  animation-delay:-1s;
}


@keyframes v13BlockFloat{
  from{
    transform:
      translate3d(0,0,0)
      rotateX(5deg)
      rotateY(-6deg);
  }

  to{
    transform:
      translate3d(0,-13px,18px)
      rotateX(-4deg)
      rotateY(6deg);
  }
}


/* =========================================================
   MOBILE HOME — NO EMPTY GAP
   ========================================================= */

@media(max-width:700px){

  body.v13-home .hero{
    margin:
      18px 17px 0 !important;

    padding:
      30px 22px 34px !important;

    min-height:0 !important;

    height:auto !important;

    border-radius:
      20px !important;
  }


  .v13-scene{
    width:165px;
    height:100px;

    right:-28px;
    top:7px;

    transform:
      scale(.58)
      rotate(-5deg);

    transform-origin:
      top right;

    opacity:.40;
  }


  body.v13-home .heroLabel{
    margin:
      74px 0 22px !important;
  }


  body.v13-home .hero h1{
    font-size:
      clamp(42px,12vw,60px) !important;

    line-height:
      .95 !important;

    letter-spacing:
      -2px !important;
  }


  body.v13-home .hero p{
    margin-top:
      22px !important;

    font-size:
      16px !important;

    line-height:
      1.58 !important;
  }

}


/* =========================================================
   CUSTOM SIDEBAR ICONS
   ========================================================= */

.v13-custom-icon{
  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  border-radius:10px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #2b3039,
      #161a20
    );

  border:
    1px solid rgba(255,255,255,.08);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 18px rgba(0,0,0,.28);
}


.v13-custom-icon svg{
  width:28px;
  height:28px;

  display:block;
}


/* Recommended logo */

.v13-rec-icon{
  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(157,108,255,.28),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #262b35,
      #12161b
    );
}


/* About logo */

.v13-about-icon{
  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(69,216,255,.22),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #242c33,
      #12171b
    );
}


/* =========================================================
   DETAIL 3D WORLD — FORCE VISIBLE
   ========================================================= */

body.v13-detail{
  position:relative !important;

  background:
    #07090d !important;
}


.v13-world{
  position:fixed;

  inset:0;

  z-index:0 !important;

  overflow:hidden;

  pointer-events:none;

  perspective:1000px;

  background:
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--accent,#946aff) 11%,
        #102030
      ) 0%,

      #0a1520 31%,

      #080c10 67%,

      #050708 100%
    );
}


body.v13-detail > *:not(.v13-world){
  position:relative;

  z-index:2;
}


/* sky */

.v13-sky{
  position:absolute;

  inset:0;

  background:
    radial-gradient(
      circle at 77% 11%,
      color-mix(
        in srgb,
        var(--accent,#946aff) 15%,
        transparent
      ),
      transparent 26%
    );

  animation:
    v13Sky 11s ease-in-out infinite alternate;
}


@keyframes v13Sky{
  from{
    transform:
      translate3d(-8px,5px,0)
      scale(.98);
  }

  to{
    transform:
      translate3d(12px,-5px,0)
      scale(1.03);
  }
}


/* 3D Minecraft-style blocks */

.v13-world-block{
  --stone:#30363d;

  position:absolute;

  width:80px;
  height:80px;

  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--stone) 78%,white),
      var(--stone)
    );

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:4px;

  box-shadow:
    0 24px 55px rgba(0,0,0,.30);

  opacity:.48;

  animation:
    v13WorldFloat 10s ease-in-out infinite alternate;

  will-change:transform;
}


.v13-world-block::before{
  content:"";

  position:absolute;

  left:11px;
  right:11px;

  height:17px;

  top:-16px;

  transform:
    skewX(-45deg);

  background:
    color-mix(in srgb,var(--stone) 73%,white);
}


.v13-world-block::after{
  content:"";

  position:absolute;

  inset:18px;

  background:
    linear-gradient(
      135deg,
      transparent 0 36%,
      var(--accent,#946aff) 36% 54%,
      transparent 54%
    );

  opacity:.72;

  filter:
    drop-shadow(
      0 0 8px
      color-mix(
        in srgb,
        var(--accent,#946aff) 48%,
        transparent
      )
    );
}


.v13-world-block.one{
  left:4%;
  top:14%;
}


.v13-world-block.two{
  right:5%;
  top:25%;

  width:105px;
  height:105px;

  animation-delay:-3s;
}


.v13-world-block.three{
  left:12%;
  top:56%;

  width:56px;
  height:56px;

  animation-delay:-6s;
}


.v13-world-block.four{
  right:13%;
  top:72%;

  width:68px;
  height:68px;

  animation-delay:-8s;
}


.v13-world-block.five{
  left:48%;
  top:84%;

  width:48px;
  height:48px;

  animation-delay:-5s;
}


@keyframes v13WorldFloat{
  from{
    transform:
      translate3d(0,0,-15px)
      rotateX(5deg)
      rotateY(-5deg);
  }

  to{
    transform:
      translate3d(0,-20px,28px)
      rotateX(-5deg)
      rotateY(7deg);
  }
}


/* pixel ground */

.v13-ground{
  position:absolute;

  left:-8%;
  right:-8%;

  bottom:-80px;

  height:270px;

  opacity:.32;

  background:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      #293037,
      #101418
    );

  background-size:
    50px 50px,
    50px 50px,
    auto;

  transform:
    perspective(700px)
    rotateX(63deg)
    scale(1.25);

  transform-origin:
    bottom center;
}


/* cards semi-transparent */

body.v13-detail .detailHero,
body.v13-detail .panel{
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--accent,#946aff) 8%,
        rgba(19,22,28,.90)
      ),
      rgba(7,9,13,.93)
    ) !important;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--accent,#946aff) 18%,
      rgba(255,255,255,.08)
    ) !important;

  box-shadow:
    0 26px 75px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* =========================================================
   MOBILE DETAIL PERFORMANCE
   ========================================================= */

@media(max-width:700px){

  .v13-world-block{
    opacity:.24;

    animation-duration:
      14s;
  }


  .v13-world-block.three,
  .v13-world-block.five{
    display:none;
  }


  .v13-world-block.one{
    left:-30px;
  }


  .v13-world-block.two{
    right:-36px;
  }


  .v13-ground{
    opacity:.16;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;
  }

}