/* JV Loader — GIF-principle (emblem build -> INTERNATIONAL -> JOVIAAN reveal)
   - Loops while page is loading.
   - On window load, it fades out and removes itself.
   - Background uses true black (#000) like your design.
*/

:root{
  --jv-bg: #000;
  --jv-dur: 1.5s;            /* total loop duration */
  --jv-fade-out: 320ms;

  /* ✅ smaller spacing */
  --jv-gap: clamp(10px, 1.4vw, 18px);

  /* ✅ smaller overall size */
  --jv-scale: 1;
}

/* full-screen overlay */
#jv-loader{
  position: fixed;
  inset: 0;
  background: var(--jv-bg);
  display: grid;
  place-items: center;
  z-index: 2147483647;
  opacity: 1;
  pointer-events: all;
  transition: opacity var(--jv-fade-out) ease;
}

/* hide state (after load) */
#jv-loader.is-hiding{
  opacity: 0;
  pointer-events: none;
}

#jv-loader .jv-stage{
  display: flex;
  align-items: center;
  gap: var(--jv-gap);

  /* ✅ slightly higher + scaled down */
  transform: translateY(0) scale(var(--jv-scale));
  transform-origin: center;
}

/* responsive sizing (smaller overall logo) */
#jv-loader .jv-emblem{
  position: relative;
  width: clamp(55px, 9vw, 110px); /* smaller than before */
  aspect-ratio: 270 / 185; /* emblem reference ratio */
}

#jv-loader .jv-wordmark{
  display: flex;
  flex-direction: column-reverse;  /* ✅ JOVIAAN top, INTERNATIONAL bottom */
  align-items: flex-end;           /* closer to your PNG alignment */
  gap: clamp(8px, 1.2vw, 14px);
}

#jv-loader .jv-joviaan{
  width: clamp(170px, 28vw, 420px); /* smaller max */
  height: auto;
}

#jv-loader .jv-international{
  width: clamp(140px, 22vw, 320px); /* smaller max */
  height: auto;
}

/* emblem pieces positioned to form final emblem */
.jv-piece{
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
}
.jv-piece img{
  position: absolute;
  height: auto;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.40));
}

/* these offsets are the exact positions extracted from your final PNG */
.jv-p1{ left: 0%;   top: 32.4%; width: 40.4%; }  /* x0=0 y0=60 w=109 h=125 */
.jv-p2{ left: 30.4%; top: 0%;   width: 36.3%; }  /* x0=82 y0=0  w=98  h=108 */
.jv-p3{ left: 34.4%; top: 0%;   width: 65.6%; }  /* x0=93 y0=0  w=177 h=185 */

.jv-p1 img, .jv-p2 img, .jv-p3 img{
  width: 100%;
}

/* GIF-like timeline — all animations share the same duration and loop */
#jv-loader .jv-p1 img{ animation: jv_p1 var(--jv-dur) linear infinite; }
#jv-loader .jv-p2 img{ animation: jv_p2 var(--jv-dur) linear infinite; }
#jv-loader .jv-p3 img{ animation: jv_p3 var(--jv-dur) linear infinite; }

#jv-loader .jv-international{
  opacity: 0;
  transform: translateY(8px);
  animation: jv_intl var(--jv-dur) linear infinite;
  will-change: transform, opacity;
}

/* JOVIAAN: reveal from left -> right (like the GIF) */
#jv-loader .jv-joviaan-wrap{
  opacity: 0;
  transform: translateY(6px);
  clip-path: inset(0 100% 0 0);
  animation: jv_jov var(--jv-dur) linear infinite;
  will-change: transform, opacity, clip-path;
}

/* Smooth fade-out at the end so loop restart isn't harsh */
@keyframes jv_p1{
  0%, 10% { opacity: 0; transform: translate(-12px, 10px) scale(0.92); }
  18%     { opacity: 1; transform: translate(0,0) scale(1); }
  92%     { opacity: 1; transform: translate(0,0) scale(1); }
  100%    { opacity: 0; transform: translate(0,0) scale(0.98); }
}
@keyframes jv_p2{
  0%, 14% { opacity: 0; transform: translate(0,-12px) scale(0.94); }
  22%     { opacity: 1; transform: translate(0,0) scale(1); }
  92%     { opacity: 1; transform: translate(0,0) scale(1); }
  100%    { opacity: 0; transform: translate(0,0) scale(0.98); }
}
@keyframes jv_p3{
  0%, 18% { opacity: 0; transform: translate(12px, 6px) scale(0.94); }
  26%     { opacity: 1; transform: translate(0,0) scale(1); }
  92%     { opacity: 1; transform: translate(0,0) scale(1); }
  100%    { opacity: 0; transform: translate(0,0) scale(0.98); }
}

@keyframes jv_intl{
  0%, 22%  { opacity: 0; transform: translateY(8px); }
  30%      { opacity: 1; transform: translateY(0); }
  92%      { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}

@keyframes jv_jov{
  0%, 30%  { opacity: 0; transform: translateY(6px); clip-path: inset(0 100% 0 0); }
  36%      { opacity: 1; transform: translateY(0);   clip-path: inset(0 100% 0 0); }
  66%      { opacity: 1; transform: translateY(0);   clip-path: inset(0 0 0 0); }
  92%      { opacity: 1; transform: translateY(0);   clip-path: inset(0 0 0 0); }
  100%     { opacity: 0; transform: translateY(0);   clip-path: inset(0 0 0 0); }
}

/* Reduced motion: show final logo instantly */
@media (prefers-reduced-motion: reduce){
  #jv-loader .jv-p1 img,
  #jv-loader .jv-p2 img,
  #jv-loader .jv-p3 img,
  #jv-loader .jv-international,
  #jv-loader .jv-joviaan-wrap{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
}