/* ======================================
   PETAK DANUM PREMIUM LOADER
====================================== */

#preloader {
  position: fixed;
  inset: 0;

  z-index: 999999;

  background:
    radial-gradient(circle at center,
      #0f2d22 0%,
      #081c15 40%,
      #030807 100%);

  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* MOTIF DAYAK */

.pattern{
    position:absolute;
    inset:-20%;

    background-image:
        url("../images/dayak/batang-garing.png");

    background-repeat:no-repeat;
    background-position:center;

    background-size:min(1000px, 70vw);

    opacity:.06;

    filter:
        brightness(2)
        contrast(1.2)
        blur(1px);

    animation:
        sacredFloat 20s ease-in-out infinite alternate;

    transform-origin:center;
}

@keyframes move1{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-300px);
    }
}

@keyframes sacredFloat{

    0%{
        transform:
            scale(1)
            rotate(-1deg);
    }

    100%{
        transform:
            scale(1.08)
            rotate(1deg);
    }

}
.pattern::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.08),
            transparent 60%
        );

    mix-blend-mode:screen;
}
.pattern::after{

    content:"";

    position:absolute;

    top:-20%;
    left:50%;

    width:700px;
    height:700px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.15),
            transparent 70%
        );

    filter:blur(80px);

    animation:
        glowBreath 6s ease-in-out infinite;
}
@keyframes glowBreath{

    0%,100%{
        opacity:.4;
        transform:
            translateX(-50%)
            scale(1);
    }

    50%{
        opacity:1;
        transform:
            translateX(-50%)
            scale(1.2);
    }

}

.particles span{
    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#d4af37;

    box-shadow:
        0 0 10px #d4af37;

    animation:
        particleFloat 8s linear infinite;
}

.particles span:nth-child(1){
    left:20%;
    top:80%;
}

.particles span:nth-child(2){
    left:35%;
    top:70%;
}

.particles span:nth-child(3){
    left:60%;
    top:85%;
}

.particles span:nth-child(4){
    left:75%;
    top:75%;
}

.particles span:nth-child(5){
    left:50%;
    top:90%;
}

.particles span:nth-child(6){
    left:85%;
    top:80%;
}
@keyframes particleFloat{

    from{
        transform:
            translateY(0);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{
        transform:
            translateY(-400px);
        opacity:0;
    }

}
/* GOLD LIGHT */

.gold-orb {
  position: absolute;

  width: 600px;
  height: 600px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(212, 175, 55, .25),
      transparent 70%);

  filter: blur(100px);

  animation:
    orbMove 10s ease-in-out infinite alternate;
}

@keyframes orbMove {
  from {
    transform:
      translate(-150px, -50px);
  }

  to {
    transform:
      translate(150px, 50px);
  }
}

.loader-content {
  position: relative;

  z-index: 10;

  text-align: center;

  color: white;
}

/* LOGO */

.logo-box {
  overflow: hidden;
}

.logo24 {
  width: 250px;
  max-width: 75vw;

  opacity: 0;

  transform:
    translateY(80px) scale(.7);

  margin-bottom: -20px;
  /* mendekatkan logo ke garis */
}

/* TITLE */

.loader-content h1 {
  margin-top: 8px;
  /* sebelumnya 20px */
  margin-bottom: 6px;

  font-size: clamp(30px, 4vw, 60px);
  letter-spacing: 8px;
  font-weight: 800;
  opacity: 0;

  line-height: 1.1;
}

.loader-content p {
  margin-top: 0;

  letter-spacing: 3px;

  opacity: 0;

  color: rgba(255, 255, 255, .8);
}

.year-line {
  width: 280px;
  height: 1px;

  background: rgba(255, 255, 255, .15);

  margin: 15px auto;
  /* sebelumnya 25px */
}

.year-line span {

  display: block;

  width: 0%;

  height: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      #d4af37,
      transparent);
}

.hero {
  opacity: 0;
}

.logo-wrapper {
  position: relative;

  width: 320px;
  height: 320px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin: auto;
}

.loader-ring {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;

  stroke: rgba(255, 255, 255, .08);

  stroke-width: 2;
}

.ring-progress {
  fill: none;

  stroke: #d4af37;

  stroke-width: 4;

  stroke-linecap: round;

  stroke-dasharray: 597;
  stroke-dashoffset: 597;

  filter:
    drop-shadow(0 0 15px rgba(212, 175, 55, .8));
}

.logo24 {
  width: 220px;
  position: relative;
  z-index: 2;
}

.loader-ring {
  animation:
    rotateRing 12s linear infinite;

  transform-origin: center;
}

@keyframes rotateRing {

  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(270deg);
  }

}

.logo-wrapper::before {

  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(212, 175, 55, .35),
      transparent 70%);

  filter: blur(30px);

  animation:
    pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: scale(1);
    opacity: .5;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

}