/* =========================
   GLOBAL
========================= */

body{
  margin:0;
  font-family:"Cinzel", serif;
}

html, body{
  height:100%;
  overflow-x:hidden;
}

/* =========================
   PRELOADER MAIN
========================= */

#preloader{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  min-height:100svh;

  background:
    linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.78)),
    url("https://img.freepik.com/premium-vector/black-gold-background-with-floral-pattern-it_608677-2142.jpg");

  background-size:cover;
  background-position:center;
  background-attachment:fixed;

  display:flex;
  /* justify-content:center; */
  align-items:center;
  overflow:hidden;
  z-index:999999;
}

/* =========================
   GOLD SWEEP LIGHT EFFECT
========================= */

#preloader::after{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(207,165,47,0.18) 50%,
    transparent 60%
  );
  transform:rotate(25deg);
  animation:goldSweep 7s linear infinite;
}

@keyframes goldSweep{
  0%{
    transform:translateX(-60%) rotate(25deg);
  }
  100%{
    transform:translateX(60%) rotate(25deg);
  }
}

/* =========================
   BRAND ROW
========================= */

.brand-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  z-index:2;

  opacity:0;
  transform:translateY(40px);
  animation:brandEntry 1.6s ease forwards;
}

@keyframes brandEntry{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   EMBLEM DESIGN
========================= */

.emblem{
  position:relative;
  width:230px;
  height:230px;
  border-radius:50%;
  border:2px solid rgba(207,165,47,0.7);
  display:flex;
  justify-content:center;
  align-items:center;

  animation:emblemGlow 4s ease-in-out infinite;
}

.emblem::before{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  border-radius:50%;
  border:1px solid rgba(207,165,47,0.4);
}

.emblem::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  border:2px solid #cfa52f;
  clip-path:circle(0% at 50% 50%);
  animation:ringDraw 2s ease forwards;
}

/* Glow Animation */

@keyframes emblemGlow{
  0%,100%{
    box-shadow:
      0 0 40px rgba(207,165,47,0.15),
      0 0 90px rgba(207,165,47,0.08);
  }
  50%{
    box-shadow:
      0 0 70px rgba(207,165,47,0.35),
      0 0 140px rgba(207,165,47,0.18);
  }
}

/* Ring Animation */

@keyframes ringDraw{
  to{
    clip-path:circle(50% at 50% 50%);
  }
}

/* =========================
   LOGO INSIDE EMBLEM
========================= */

.vr{
  opacity:0;
  transform:translateY(20px);
  animation:vrReveal 1.2s ease forwards;
  animation-delay:1.2s;
}

.vr img{
  width:120px;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,0.7));
}

@keyframes vrReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   REALTY TEXT IMAGE
========================= */

.vr-reality{
  opacity:0;
  transform:translateX(60px);
  animation:textReveal 1.6s ease forwards;
  animation-delay:1.8s;
}

.vr-reality img{
  width:420px;
  max-width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.8));
}

@keyframes textReveal{
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* =========================
   HIDE PRELOADER
========================= */

#preloader.hide{
  opacity:0;
  visibility:hidden;
  transition:0.6s ease;
}

/* =========================
   MOBILE OPTIMIZATION
========================= */

@media (max-width:768px){

  #preloader{
    padding:20px;
  }

  .brand-row{
    flex-direction:column;
    gap:35px;
    text-align:center;
  }

  .emblem{
    width:120px;
    height:120px;
  }

  .emblem::before{
    width:100px;
    height:100px;
  }

  .emblem::after{
    width:150px;
    height:150px;
  }

  .vr img{
    width:65px;
  }

  .vr-reality img{
    width:230px;
  }

}