/* ============================================================
   JEEVO — LOGO + INTRO
   ============================================================ */

/* ---------- the lockup ---------- */
.nav-logo{ display:flex; align-items:center; text-decoration:none }
.nav-logo .jv-logo{ height:62px; width:auto; display:block; overflow:visible }
.navbar, .nav-container, .nav-logo{ overflow:visible }
@media (max-width:700px){ .nav-logo .jv-logo{ height:46px } }
.jv-logo--foot{ height:86px; width:auto; display:block }

/* .navbar is position:fixed z-index:1000 — a stacking context. Without this
   the veil paints over the whole bar and the intro is invisible. */
.navbar.jv-lift{ z-index:9995 !important }

/* ---------- layers ----------
   veil   9990  the cream screen
   navbar 9995  lifted so the logo shows above the veil
   flight 10001 the orb, above EVERYTHING, so it never passes behind
                the nav bar on its way to the corner
   ------------------------------------------------------------------ */
.jv-veil{
  position:fixed;
  inset:0;
  z-index:9990;
  background:#FFFDF8;
  opacity:1;
  transition:opacity .3s ease;
}
.jv-veil.is-out{ opacity:0; pointer-events:none }

.jv-flight{
  position:fixed;
  inset:0;
  z-index:10001;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:1;
  transition:opacity .4s ease;
}
.jv-flight.is-out{ opacity:0 }
/* Landing: the orb blinks out in the SAME frame the nav globe blinks in.
   Identical artwork, identical position and size, so nothing is seen to
   change — no fade, because a fade between two identical shapes is a ghost. */
.jv-flight.is-landed .jv-orb{ opacity:0; transition:none }

/* ---------- the greeting ---------- */
.jv-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.jv-namaste{
  margin:22px 0 0;
  font-family:'Kohinoor Devanagari','Devanagari Sangam MN','Noto Sans Devanagari',
              'Nirmala UI',system-ui,sans-serif;
  font-size:clamp(30px,5vw,42px);
  line-height:1.1;
  color:#5A2D0C;
  opacity:0;
  animation:jvGreet 1.1s cubic-bezier(.22,.7,.3,1) .45s forwards;
}
.jv-namaste-en{
  margin:6px 0 0;
  font-family:'Mukta',system-ui,sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.42em;
  text-indent:.42em;
  color:#C98A2E;
  opacity:0;
  animation:jvGreet 1.1s cubic-bezier(.22,.7,.3,1) .72s forwards;
}
@keyframes jvGreet{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}
/* the greeting bows out before the globe travels */
.jv-flight.is-greeted .jv-namaste,
.jv-flight.is-greeted .jv-namaste-en{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .5s ease, transform .5s ease;
  animation:none;
}

/* ---------- the travelling globe ---------- */
.jv-orb{
  width:clamp(150px,26vw,230px);
  height:auto;
  overflow:visible;
  display:block;
}
.jv-spin{ transform-origin:0 0; animation:jvSpin 18s linear infinite }
@keyframes jvSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* the plane rides the orbit */
.jv-orb__plane{
  offset-path:path('M 18 100 A 82 32 0 1 1 182 100 A 82 32 0 1 1 18 100');
  offset-rotate:auto;
  animation:jvOrbit 4.6s linear infinite;
}
@keyframes jvOrbit{ from{offset-distance:0%} to{offset-distance:100%} }
@supports not (offset-path: path('M 0 0 L 1 1')){
  .jv-orb__plane{ transform:translate(168px,88px) rotate(-16deg) }
}

/* the flight to the corner */
.jv-orb.is-flying{
  animation:jvFly .65s cubic-bezier(.22,.7,.18,1) forwards;
  will-change:transform;
}
@keyframes jvFly{
  from{ transform:translate(0,0) scale(1) }
  to  { transform:translate(var(--dx), var(--dy)) scale(var(--sc)) }
}
/* the ring and its plane are the loader's, not the logo's — let them go */
.jv-flight.is-flying .jv-orb__ring{ opacity:0; transition:opacity .7s ease-out }

/* ---------- the logo assembling ---------- */
.jv-logo__globe.jv-hold,
.jv-logo__word.jv-hold,
.jv-logo__swoosh.jv-hold{ opacity:0 }

.jv-logo__globe.jv-land{ opacity:1 }          /* identical artwork: straight cut */

/* jeev slides out from behind the globe */
.jv-logo__word.jv-slide{
  animation:jvWord .82s cubic-bezier(.18,.72,.24,1) .12s both;
  transform-box:fill-box;
}
@keyframes jvWord{
  from{ opacity:0; transform:translateX(30px) }
  55% { opacity:1 }
  to  { opacity:1; transform:none }
}
.jv-logo__swoosh.jv-slide{ animation:jvFade .66s ease-out .46s both }
@keyframes jvFade{ from{opacity:0} to{opacity:1} }

/* ---------- inline busy dots (forms) ---------- */
.jv-busy{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:rgba(255,253,248,.9); backdrop-filter:blur(2px); z-index:40;
}
.jv-busy span{
  width:9px; height:9px; border-radius:50%; background:#F5A623;
  animation:jvBounce .95s ease-in-out infinite;
}
.jv-busy span:nth-child(2){ animation-delay:.12s }
.jv-busy span:nth-child(3){ animation-delay:.24s }
@keyframes jvBounce{
  0%,80%,100%{ transform:translateY(0); opacity:.45 }
  40%{ transform:translateY(-7px); opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  .jv-veil{ display:none }
  .jv-spin,.jv-orb__plane,.jv-busy span,.jv-namaste,.jv-namaste-en{ animation:none }
  .jv-logo__globe.jv-hold,.jv-logo__word.jv-hold,.jv-logo__swoosh.jv-hold{ opacity:1 }
  .jv-logo__word.jv-slide,.jv-logo__swoosh.jv-slide{ animation:none }
}