@import url('../../css2-Mitrwght200300400500600700_swap.css');
@import url('../../css2-Rowdieswght300400700_swap.css');

@font-face {
  font-family: 'Unblocker';
  src: url(../../tournament/font/Unblocker.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: "Mitr", sans-serif;
  scroll-snap-type: none;
  position: relative;
}

/* Space for the mobile bottom nav (.bottom-nav-tr, hidden from 992px by d-lg-none).
   Was max-width:1024px, which left a 60px empty band under the footer at 992-1024px. */
@media (max-width: 991.98px) {
  body {
    padding-bottom: 60px;
  }
}


.section {
  scroll-snap-align: start;
  position: relative;
  padding: 50px 0;
}

:root {
  --white-gradient: linear-gradient(180deg,
      #FFFFFF 14%,
      #c7e7ff 57%,
      #a0deff 83%,
      #FFFFFF 100%);
}

@font-face {
  font-family: 'Unblocker';
  src: url('https://talesrunner.thehof.gg/asset/css/fonts/Unblocker.woff2') format('woff2'),
    url('https://talesrunner.thehof.gg/asset/css/fonts/Unblocker.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.btn:hover {
  /* border: none; */
}

.btn:active {
  /* border: none; */
}

a {
  transition: transform .3s ease;
}

a:hover {
  filter: brightness(1.1);
}

@media (min-width: 1025px) {
  #Sec-Event {
    background: url(../images/bg-sec-2.webp) top center no-repeat;
    background-size: cover;
    padding-top: 200px;
  }
}

@media (max-width: 1600px) {
  #Sec-News {
    background-size: cover;
  }
}

@media (max-width: 1200px) {

  #Sec-News {
    background-size: cover;
  }
}

@media (max-width: 1600px) {}

@media (max-width: 1600px) {
  #Sec-System {
    background-size: cover;
  }
}

@media (max-width: 1920px) {}

#Sec-Preregis::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
  z-index: 10;
}




@media (min-width: 1025px) {

  #Sec-Preregis {
    padding-top: 6%;
    padding-bottom: 60px;
    /* aspect-ratio: 16/9; */
  }
}

@media (min-width: 1920px) {
  .section {
    background-size: 100%;
    max-width: 1920px;
    margin: 0 auto;
  }
}

.bg-section1 {
  background: url(../images/bg-obt-sm.webp) top no-repeat;
  background-size: 115%;
}

.bg-section2 {
  background: url(https://talesrunner.thehof.gg/asset/images/s-presale/bg-s-presale.webp?v=3.6) top no-repeat;
  background-size: cover;
}

@media (min-width: 720px) {
  .bg-section1 {
    background-size: 110%;
  }
}

@media (min-width: 960px) {
  .bg-section1 {
    background: url(../images/bg-obt.webp) top no-repeat;
    background-size: 1500px;
  }
}

@media (min-width: 1440px) {
  .bg-section1 {
    background: url(../images/bg-obt.webp) top no-repeat;
    background-size: 1920px;
  }
}

@media (min-width: 1600px) {
  .bg-section1 {
    background: url(../images/bg-obt.webp) top no-repeat;
    background-size: 2500px;
  }
}

#Sec-Preregis {
  --sec1-l1-x: 0px;
  --sec1-l1-y: 0px;
  --sec1-l2-x: 0px;
  --sec1-l2-y: 0px;
  --sec1-l4-x: 0px;
  --sec1-l4-y: 0px;
}

.section1-parallax-bg {
  display: none;
}

@media (min-width: 960px) {
  #Sec-Preregis {
    overflow: hidden;
  }

  #Sec-Preregis>.container-fluid {
    position: relative;
    z-index: 5;
  }

  .section1-parallax-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .section1-bg-picture {
    display: contents;
  }

  .section1-bg-layer {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1500px;
    max-width: none;
    height: auto;
    user-select: none;
    pointer-events: none;
    transform: translate3d(-50%, 0, 0);
  }

  .section1-bg-layer.bg-layer-0 {
    z-index: 7;
  }

  .section1-bg-layer.bg-layer-1 {
    z-index: 6;
    will-change: transform;
    transform: translate3d(calc(-50% + var(--sec1-l1-x)), var(--sec1-l1-y), 0) scale(1.03);
  }

  .section1-bg-layer.bg-layer-2 {
    z-index: 5;
    will-change: transform;
    /* transform: translate3d(calc(-50% + var(--sec1-l2-x)), var(--sec1-l2-y), 0) scale(1.03); */
    transform: translate3d(calc(-50% + (var(--sec1-l2-x) * 1)), calc(var(--sec1-l1-y) * 0.2), 0) scale(1.03);
  }

  .section1-bg-layer.bg-layer-3 {
    z-index: 4;
    will-change: transform;
    transform: translate3d(calc(-50% + (var(--sec1-l1-x) * 0.2)), calc(var(--sec1-l2-y) * 0.8), 0) scale(1.03);
  }

  .section1-bg-layer.bg-layer-4 {
    z-index: 3;
  }

  .section1-bg-layer.bg-layer-5 {
    z-index: 2;
    will-change: transform;
    transform: translate3d(calc(-50% + var(--sec1-l4-x)), var(--sec1-l4-y), 0) scale(1.03);
  }

  .section1-bg-layer.bg-layer-6 {
    z-index: 1;
  }
}

@media (min-width: 1440px) {
  .section1-bg-layer {
    width: 1920px;
  }
}

@media (min-width: 1600px) {
  .section1-bg-layer {
    width: 2500px;
  }
}

@media (min-width: 960px) and (prefers-reduced-motion: reduce) {

  .section1-bg-layer.bg-layer-1,
  .section1-bg-layer.bg-layer-2,
  .section1-bg-layer.bg-layer-4 {
    will-change: auto;
    transform: translate3d(-50%, 0, 0);
  }
}