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

/* ---------- the lockup ---------- */
/* the lockup stacks: logo, then the tagline as real text underneath, so the
   tagline can be a readable size instead of scaling with the artwork */
/* the logo stays flush on the page gutter; the tagline stretches to the
   logo's width and centres its text inside it, so the block is symmetrical
   without dragging the logo off the margin */
.nav-logo{
  --jv-logo-h:78px;              /* one source of truth for the lockup size */
  --jv-logo-w:calc(var(--jv-logo-h) * 416 / 184);   /* the svg's own ratio */
  display:flex; flex-direction:column; align-items:flex-start;
  text-decoration:none;
  position:relative; padding-bottom:16px;  /* reserves the tagline's row */
}
.nav-logo .jv-logo{ height:var(--jv-logo-h); width:auto; display:block; overflow:visible }
.nav-logo__tag{
  font:700 10px/1.25 'Martel','Mukta',Georgia,serif;
  /* dark brown, not a lighter shade of the wordmark: at this size the old
     #CE7A2E reached only 3.2:1 on the cream, which is why it read faint.
     #4A2410 is 13.3:1 - it reads at a glance. */
  color:#4A2410; letter-spacing:.01em;
  /* ONE line, pinned to the centre of the logo. It is taken out of flow so
     it cannot widen the lockup and shove the logo off the page gutter, and
     translateX(-50%) makes any overhang fall evenly either side - a centred
     line in a too-narrow box spills to the RIGHT only, which looks lopsided. */
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  white-space:nowrap; text-align:center;
}
.navbar, .nav-container, .nav-logo{ overflow:visible }
/* Phones: smaller, but still a single line. */
@media (max-width:700px){
  .nav-logo{ --jv-logo-h:76px }
  .nav-logo__tag{ font-size:9.5px }
}
.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) .3s 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) .55s 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 1.3s 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,
.nav-logo__tag.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 .9s 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 .7s ease-out .5s both }
@keyframes jvFade{ from{opacity:0} to{opacity:1} }

/* the tagline comes last - only once the logo has settled in the corner.
   word ends at 1.02s, swoosh at 1.2s, so this starts just after. */
.nav-logo__tag.jv-slide{ animation:jvTag .65s ease-out 1.2s both }
/* NB: these must carry the translateX(-50%) that centres the tagline on the
   logo. An animation with fill:both holds its final transform forever, so a
   bare "transform:none" here silently cancels the centring once the intro
   finishes - which only shows up after the animation has actually run. */
@keyframes jvTag{
  from{ opacity:0; transform:translateX(-50%) translateY(5px) }
  to  { opacity:1; transform:translateX(-50%) }
}

/* ---------- 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,
  .nav-logo__tag.jv-hold{ opacity:1 }
  .jv-logo__word.jv-slide,.jv-logo__swoosh.jv-slide,.nav-logo__tag.jv-slide{ animation:none }
}