/* ==========================================================
   ANIGYE PREMIUM PRELOADER V1.1
========================================================== */

#aap-preloader,
#aap-preloader *{box-sizing:border-box}

#aap-preloader{
  --aap-red:#ef2b35;
  --aap-red2:#ff434c;
  --aap-black:#050709;
  --aap-panel:#0a0d11;
  --aap-white:#fff;
  --aap-ease:cubic-bezier(.16,.84,.24,1);

  position:fixed;
  z-index:2147483000;
  inset:0;
  width:100vw;
  height:100dvh;
  min-height:100vh;
  overflow:hidden;
  background:#050709;
  color:#fff;
  font-family:"Manrope",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  isolation:isolate;
}

#aap-preloader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .38s ease .48s,visibility .38s ease .48s;
}

#aap-preloader .aap-ambient{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

#aap-preloader .aap-grid{
  position:absolute;
  inset:-2%;
  opacity:.78;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 45%,#000 0%,rgba(0,0,0,.78) 45%,transparent 82%);
}

#aap-preloader .aap-beam{
  position:absolute;
  top:-25%;
  width:1px;
  height:150%;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.16),transparent);
}

#aap-preloader .aap-beam--1{
  left:23%;
  transform:rotate(17deg);
  animation:aapBeamOne 5.2s ease-in-out infinite alternate;
}

#aap-preloader .aap-beam--2{
  right:21%;
  transform:rotate(-14deg);
  animation:aapBeamTwo 6.8s ease-in-out infinite alternate;
}

@keyframes aapBeamOne{
  to{transform:translateX(54px) rotate(17deg);opacity:.45}
}
@keyframes aapBeamTwo{
  to{transform:translateX(-48px) rotate(-14deg);opacity:.42}
}

#aap-preloader .aap-orbit{
  position:absolute;
  left:50%;
  top:43%;
  border:1px solid rgba(255,255,255,.035);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

#aap-preloader .aap-orbit::after{
  content:"";
  position:absolute;
  left:50%;
  top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--aap-red);
  box-shadow:0 0 0 6px rgba(239,43,53,.07);
}

#aap-preloader .aap-orbit--1{
  width:min(630px,47vw);
  height:min(630px,47vw);
  animation:aapOrbit 24s linear infinite;
}

#aap-preloader .aap-orbit--2{
  width:min(820px,62vw);
  height:min(820px,62vw);
  animation:aapOrbitReverse 36s linear infinite;
}

@keyframes aapOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes aapOrbitReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}

#aap-preloader .aap-speed{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:.19;
}

#aap-preloader .aap-speed i{
  position:absolute;
  right:-30vw;
  width:28vw;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  animation:aapSpeed 3.5s linear infinite;
}

#aap-preloader .aap-speed i:nth-child(1){top:20%}
#aap-preloader .aap-speed i:nth-child(2){top:36%;width:18vw;animation-delay:.6s}
#aap-preloader .aap-speed i:nth-child(3){top:55%;width:34vw;animation-delay:1.4s}
#aap-preloader .aap-speed i:nth-child(4){top:70%;width:21vw;animation-delay:2.1s}
#aap-preloader .aap-speed i:nth-child(5){top:84%;width:31vw;animation-delay:.95s}

@keyframes aapSpeed{
  to{transform:translateX(-160vw) scaleX(1.7);opacity:0}
}

#aap-preloader .aap-shell{
  position:relative;
  z-index:4;
  width:min(1420px,calc(100vw - 80px));
  height:100%;
  margin:0 auto;
  padding:38px 0 42px;
  display:grid;
  grid-template-rows:auto minmax(250px,1fr) auto;
}

#aap-preloader .aap-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

#aap-preloader .aap-brand{
  display:flex;
  align-items:center;
  gap:13px;
}

#aap-preloader .aap-brand img{
  width:auto;
  height:38px;
  max-width:150px;
  object-fit:contain;
}

#aap-preloader .aap-brand span{
  color:rgba(255,255,255,.30);
  font-size:7px;
  font-weight:800;
  letter-spacing:.16em;
}

#aap-preloader .aap-live{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.34);
  font-size:6px;
  font-weight:800;
  letter-spacing:.13em;
}

#aap-preloader .aap-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--aap-red);
  box-shadow:0 0 0 6px rgba(239,43,53,.08);
  animation:aapPulse 1.7s ease-in-out infinite;
}

@keyframes aapPulse{
  50%{opacity:.35;transform:scale(.72)}
}

#aap-preloader .aap-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

#aap-preloader .aap-stage__number{
  position:absolute;
  left:3%;
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.018);
  font-size:clamp(210px,25vw,480px);
  line-height:.72;
  font-weight:900;
  letter-spacing:-.10em;
  user-select:none;
}

#aap-preloader .aap-car{
  position:relative;
  width:min(780px,60vw);
  color:rgba(255,255,255,.74);
  transform:translateY(-1vh);
}

#aap-preloader .aap-car svg{
  width:100%;
  height:auto;
  overflow:visible;
}

#aap-preloader .aap-car__body,
#aap-preloader .aap-car__roof,
#aap-preloader .aap-car__hood,
#aap-preloader .aap-car__trim,
#aap-preloader .aap-car__character,
#aap-preloader .aap-car__diffuser,
#aap-preloader .aap-car__mirror,
#aap-preloader .aap-car__hoodline,
#aap-preloader .aap-car__shadowline,
#aap-preloader .aap-wheel,
#aap-preloader .aap-wheel-inner,
#aap-preloader .aap-wheel-core,
#aap-preloader .aap-wheel-spokes{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

#aap-preloader .aap-car__body--main{
  stroke-width:2.4;
  stroke:rgba(255,255,255,.82);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.08));
}

#aap-preloader .aap-car__body--lower,
#aap-preloader .aap-car__roof{
  stroke-width:2.05;
  stroke:rgba(255,255,255,.62);
}

#aap-preloader .aap-car__trim,
#aap-preloader .aap-car__character,
#aap-preloader .aap-car__hoodline{
  stroke-width:1.45;
  stroke:rgba(255,255,255,.34);
}

#aap-preloader .aap-car__diffuser,
#aap-preloader .aap-car__mirror,
#aap-preloader .aap-car__shadowline{
  stroke-width:1.5;
  stroke:rgba(239,43,53,.54);
}

#aap-preloader .aap-car__window{
  fill:rgba(255,255,255,.032);
  stroke:rgba(255,255,255,.22);
  stroke-width:1.35;
  vector-effect:non-scaling-stroke;
}

#aap-preloader .aap-wheel{
  stroke:rgba(255,255,255,.74);
  stroke-width:2.2;
}

#aap-preloader .aap-wheel-inner{
  stroke:rgba(255,255,255,.18);
  stroke-width:1.45;
  stroke-dasharray:5 8;
  transform-box:fill-box;
  transform-origin:center;
  animation:aapWheel 1.2s linear infinite;
}

#aap-preloader .aap-wheel-core{
  stroke:rgba(255,255,255,.32);
  stroke-width:1.5;
}

#aap-preloader .aap-wheel-spokes{
  stroke:rgba(255,255,255,.22);
  stroke-width:1.2;
  transform-box:fill-box;
  transform-origin:center;
  animation:aapWheel 1.2s linear infinite;
}

@keyframes aapWheel{to{transform:rotate(360deg)}}

#aap-preloader .aap-light{
  fill:none;
  stroke-width:5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

#aap-preloader .aap-light--front{
  stroke:#fff;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.92));
  animation:aapHeadlight 1.8s ease-in-out infinite alternate;
}

#aap-preloader .aap-light--rear{
  stroke:var(--aap-red);
  filter:drop-shadow(0 0 9px rgba(239,43,53,.9));
}

#aap-preloader .aap-light--accent{
  stroke:rgba(255,255,255,.65);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
}

@keyframes aapHeadlight{to{opacity:.45}}

#aap-preloader .aap-car__glow{
  position:absolute;
  left:21%;
  right:11%;
  bottom:10%;
  height:15%;
  background:radial-gradient(ellipse,rgba(239,43,53,.22),transparent 72%);
  filter:blur(19px);
  animation:aapGlow 2.1s ease-in-out infinite alternate;
}

#aap-preloader .aap-car__glow--secondary{
  left:33%;
  right:31%;
  bottom:17%;
  height:10%;
  background:radial-gradient(ellipse,rgba(255,255,255,.09),transparent 75%);
  filter:blur(16px);
  animation:aapGlowSecondary 3s ease-in-out infinite alternate;
}

@keyframes aapGlow{to{opacity:.42;transform:scaleX(.86)}}

@keyframes aapGlowSecondary{to{opacity:.28;transform:scaleX(1.12)}}

#aap-preloader .aap-scan{
  position:absolute;
  top:-7%;
  bottom:-7%;
  left:0;
  width:2px;
  background:linear-gradient(to bottom,transparent,var(--aap-red),transparent);
  box-shadow:0 0 24px 6px rgba(239,43,53,.14);
  animation:aapScan 2.65s var(--aap-ease) infinite;
}

@keyframes aapScan{
  0%{left:2%;opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{left:98%;opacity:0}
}

#aap-preloader .aap-road{
  position:absolute;
  left:8%;
  right:8%;
  bottom:9%;
  height:34px;
}

#aap-preloader .aap-road>i{
  position:absolute;
  left:0;
  right:0;
  top:17px;
  height:1px;
  background:rgba(255,255,255,.09);
}

#aap-preloader .aap-road__dash{
  position:absolute;
  top:16px;
  width:90px;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  animation:aapRoad 2.1s linear infinite;
}

#aap-preloader .aap-road__dash--1{left:17%}
#aap-preloader .aap-road__dash--2{left:48%;animation-delay:.55s}
#aap-preloader .aap-road__dash--3{left:74%;animation-delay:1.1s}

@keyframes aapRoad{
  to{transform:translateX(-220px);opacity:0}
}

#aap-preloader .aap-copy{
  width:min(980px,100%);
  margin:0 auto;
}

#aap-preloader .aap-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:rgba(255,255,255,.40);
  font-size:6px;
  font-weight:800;
  letter-spacing:.15em;
}

#aap-preloader .aap-kicker span{
  width:26px;
  height:1px;
  background:var(--aap-red);
}

#aap-preloader h1{
  margin:8px 0 0;
  color:#fff;
  font-size:clamp(52px,5vw,86px);
  line-height:.83;
  letter-spacing:-.067em;
  font-weight:830;
}

#aap-preloader h1 span,
#aap-preloader h1 em{display:block}

#aap-preloader h1 em{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.66);
  font-style:normal;
}

#aap-preloader .aap-status{
  margin-top:17px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

#aap-preloader .aap-status__copy span{
  display:block;
  color:rgba(255,255,255,.68);
  font-size:9.5px;
  font-weight:760;
}

#aap-preloader .aap-status__copy small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.25);
  font-size:6px;
  font-weight:700;
  letter-spacing:.07em;
}

#aap-preloader .aap-status strong{
  color:rgba(255,255,255,.84);
  font-size:28px;
  line-height:.8;
  letter-spacing:-.06em;
  font-weight:800;
}

#aap-preloader .aap-status strong::after{
  content:"%";
  margin-left:2px;
  color:var(--aap-red);
  font-size:.45em;
  letter-spacing:0;
}

#aap-preloader .aap-progress{
  position:relative;
  width:100%;
  height:2px;
  margin-top:11px;
  background:rgba(255,255,255,.09);
}

#aap-preloader .aap-progress i{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--aap-red),var(--aap-red2));
  box-shadow:0 0 16px rgba(239,43,53,.34);
  transition:width .18s linear;
}

#aap-preloader .aap-progress>span{
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.06),0 0 14px rgba(255,255,255,.48);
  transform:translate(-50%,-50%);
  transition:left .18s linear;
}

#aap-preloader .aap-meta{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.20);
}

#aap-preloader .aap-meta span{
  flex:0 0 auto;
  font-size:5px;
  font-weight:800;
  letter-spacing:.13em;
}

#aap-preloader .aap-meta i{
  flex:1 1 auto;
  height:1px;
  background:rgba(255,255,255,.07);
}

/* exit reveal */
#aap-preloader .aap-shutter{
  position:absolute;
  z-index:30;
  left:0;
  width:100%;
  height:51%;
  background:#050709;
  pointer-events:none;
  transform:scaleY(0);
}

#aap-preloader .aap-shutter--top{
  top:0;
  transform-origin:top;
}

#aap-preloader .aap-shutter--bottom{
  bottom:0;
  transform-origin:bottom;
}

#aap-preloader.is-completing .aap-progress i{width:100%!important}
#aap-preloader.is-completing .aap-progress>span{left:100%!important}

#aap-preloader.is-exiting .aap-shell{
  opacity:0;
  transform:scale(.985);
  filter:blur(4px);
  transition:opacity .26s ease,transform .42s var(--aap-ease),filter .35s ease;
}

#aap-preloader.is-exiting .aap-shutter{
  animation:aapShutter .7s var(--aap-ease) forwards;
}

@keyframes aapShutter{
  0%{transform:scaleY(0)}
  38%{transform:scaleY(1)}
  62%{transform:scaleY(1)}
  100%{transform:scaleY(0)}
}

/* ==========================================================
   MOBILE
========================================================== */
@media(max-width:820px){
  #aap-preloader .aap-shell{
    width:calc(100vw - 28px);
    padding:25px 0 30px;
    grid-template-rows:auto minmax(220px,1fr) auto;
  }

  #aap-preloader .aap-brand img{
    height:30px;
    max-width:120px;
  }

  #aap-preloader .aap-brand span{
    display:none;
  }

  #aap-preloader .aap-live{
    font-size:4px;
    letter-spacing:.10em;
  }

  #aap-preloader .aap-stage{
    align-items:center;
  }

  #aap-preloader .aap-car{
    width:min(100vw,520px);
    transform:translateY(-1vh);
  }

  #aap-preloader .aap-stage__number{
    left:-8%;
    font-size:49vw;
  }

  #aap-preloader .aap-orbit--1{
    width:78vw;
    height:78vw;
  }

  #aap-preloader .aap-orbit--2{
    width:112vw;
    height:112vw;
  }

  #aap-preloader .aap-road{
    left:0;
    right:0;
    bottom:12%;
  }

  #aap-preloader .aap-copy{
    width:100%;
  }

  #aap-preloader .aap-kicker{
    font-size:4.5px;
    letter-spacing:.13em;
  }

  #aap-preloader .aap-kicker span{
    width:20px;
  }

  #aap-preloader h1{
    margin-top:7px;
    font-size:clamp(43px,12vw,61px);
    line-height:.81;
  }

  #aap-preloader .aap-status{
    margin-top:15px;
  }

  #aap-preloader .aap-status__copy span{
    font-size:7.5px;
  }

  #aap-preloader .aap-status__copy small{
    font-size:5px;
  }

  #aap-preloader .aap-status strong{
    font-size:22px;
  }

  #aap-preloader .aap-meta{
    margin-top:11px;
  }

  #aap-preloader .aap-meta span{
    font-size:4px;
  }
}

@media(max-width:430px){
  #aap-preloader .aap-shell{
    width:calc(100vw - 24px);
    padding-top:22px;
    padding-bottom:25px;
  }

  #aap-preloader .aap-car{
    width:115vw;
  }

  #aap-preloader h1{
    font-size:clamp(39px,11.6vw,50px);
  }

  #aap-preloader .aap-status__copy small{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #aap-preloader *,
  #aap-preloader *::before,
  #aap-preloader *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}
