/* Dharti Group — preloader / logo reveal

   Built on the client's approved opener storyboard,
   data/For Website/Website_Opener_Animation.pdf (25 vector frames):

     navy field
       -> base bar descends and lands
       -> middle chevron descends, floating above it
       -> crown chevron descends, the three sitting apart
       -> the stack compresses into the finished mark
       -> "We are"
       -> DHARTI GROUP
       -> CREATING VALUES
       -> the field lifts away

   Geometry note. The three animated chevrons are the real paths from
   assets/brand/dharti-mark.svg, carrying the real gradients from
   assets/brand/dharti-logo.svg (linear-pattern-0/1/2, re-origined into the
   mark's own coordinate space). The wordmark and the tagline are two
   clipped copies of assets/brand/dharti-logo.svg itself. The percentages
   below are derived from that file's viewBox (238 158 124 128):

     mark      x 243.28..351.32   y 163.46..217.48   ->  4.258% / 4.266% / 87.129% / 42.203%
     DHARTI    y 225.35..245.21 ) -> band  49.5% .. 86.6%
     G R O U P y 253.48..264.98 )
     CREATING  y 272.80..278.55   -> band  86.6% .. 100%

   So the animated mark sits exactly where the lockup's own mark sits, and
   the three parts read as one logo the moment they meet.
   ============================================================ */

/* ============================================================
   THE FIELD
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(115% 85% at 50% 44%, var(--ink-3) 0%, rgba(16,32,60,0) 64%),
    var(--ink);
}

/* seen already this session, or JS finished with it */
.intro--instant,
.intro--gone{ display:none; }

/* ============================================================
   THE LOCKUP STAGE
   One aspect box, 124:128, matching dharti-logo.svg's viewBox.
   Everything inside is positioned as a percentage of it.
   ============================================================ */
.intro__stage{
  position:relative;
  width:min(clamp(190px, 21vw, 320px), 40vh);
  aspect-ratio:124 / 128;
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}

/* --- "We are", flush with the mark's left edge, well above it --- */
.intro__weare{
  position:absolute; left:4.258%;
  bottom:calc(100% + clamp(1rem, 4vh, 2.4rem));
  margin:0; white-space:nowrap;
  font-size:clamp(.58rem, .82vw, .7rem); font-weight:300;
  letter-spacing:.42em; color:var(--bone-dim);
  opacity:0; animation:introFade .7s var(--ease) 2.36s forwards;
}

/* ============================================================
   THE MARK — three layers, built the way the storyboard builds it
   ============================================================ */
.apex{
  position:absolute;
  left:4.258%; top:4.266%; width:87.129%; height:42.203%;
  overflow:visible;            /* layers float outside the box while building */
}

/* px here is SVG user units: the mark's own viewBox is 108.04 x 54.02,
   so -46px is a fall of roughly one mark-height. */
.apex__l{
  opacity:0;
  transform:translateY(var(--enter));
  will-change:transform, opacity;
  animation:
    apexDrop .72s cubic-bezier(.16,.84,.44,1) var(--at) forwards,
    apexLock .78s var(--ease) 1.48s forwards;
}
/* base bar first, then middle, then crown — each further from home  */
.apex__l--base { --at:.08s; --enter:-46px; --float:  0px; }
.apex__l--mid  { --at:.40s; --enter:-62px; --float:-16px; }
.apex__l--crown{ --at:.72s; --enter:-82px; --float:-36px; }

@keyframes apexDrop{
  0%  { opacity:0; transform:translateY(var(--enter)); }
  38% { opacity:1; }
  100%{ opacity:1; transform:translateY(var(--float)); }
}
/* the compression: the floating stack closes down onto the base bar */
@keyframes apexLock{
  from{ transform:translateY(var(--float)); }
  to  { transform:translateY(0); }
}

/* ============================================================
   WORDMARK + TAGLINE — the real lockup, revealed a band at a time
   ============================================================ */
.intro__word,
.intro__tag{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  opacity:0; will-change:transform, opacity;
}
.intro__word{
  clip-path:inset(49.5% 0 13.4% 0);
  animation:introRise .85s var(--ease) 2.52s forwards;
}
.intro__tag{
  clip-path:inset(86.6% 0 0 0);
  animation:introFade .75s var(--ease) 3.02s forwards;
}

@keyframes introFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes introRise{
  from{ opacity:0; transform:translateY(4%); }
  to  { opacity:1; transform:none; }
}

/* ============================================================
   SKIP
   ============================================================ */
.intro__skip{
  position:absolute; z-index:2;
  bottom:clamp(1.4rem, 4vh, 2.4rem); right:var(--gutter);
  background:none; border:0; padding:.5rem .25rem; cursor:pointer;
  font-family:inherit; font-size:.6rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  transition:color .3s var(--ease), opacity .28s var(--ease);
  /* `backwards` so the button's resting state stays opacity:1 and it can
     still be transitioned out when the curtain goes up. */
  opacity:1; animation:introFade .6s var(--ease) 1s backwards;
}
.intro__skip:hover{ color:var(--bone); }
.intro__skip:focus-visible{ color:var(--bone); outline:1px solid var(--gold); outline-offset:6px; }

/* ============================================================
   THE CURTAIN
   The field does not fade out; it lifts, and the edge it lifts on is
   the mark's own chevron — apex at 33.34%, the same 36.02/108.04 the
   logo is drawn to. The lockup drifts up and away just ahead of it.
   ============================================================ */
/* the stage carries "We are", the mark and the lockup out together — their
   own animations are fill:forwards, so they cannot be faded individually. */
.intro--leaving .intro__stage{ opacity:0; transform:translateY(-14px); }
.intro--leaving .intro__skip{ opacity:0; pointer-events:none; }
.intro--leaving{
  animation:introCurtain 1s cubic-bezier(.76,0,.24,1) .38s forwards;
}
@keyframes introCurtain{
  from{ clip-path:polygon(0 0, 100% 0, 100% 118%, 33.34% 100%, 0 118%); }
  to  { clip-path:polygon(0 0, 100% 0, 100%   0%, 33.34% -18%, 0   0%); }
}

/* skipped — same move, impatient */
.intro--fast .intro__stage{ transition-duration:.24s, .3s; }
.intro--fast{ animation-duration:.6s; animation-delay:.14s; }

/* ============================================================
   REDUCED MOTION — the end state, held briefly, then removed.
   No drop, no compression, no curtain.
   ============================================================ */
.intro--still .apex__l,
.intro--still .intro__weare,
.intro--still .intro__word,
.intro--still .intro__tag,
.intro--still .intro__skip{
  animation:none !important;
  opacity:1; transform:none;
}
.intro--still .intro__stage{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .intro .apex__l,
  .intro .intro__weare,
  .intro .intro__word,
  .intro .intro__tag,
  .intro .intro__skip{ animation-delay:0s !important; }
}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media (max-width:600px){
  .intro__stage{ width:min(62vw, 34vh); }
  .intro__skip{ right:auto; left:50%; transform:translateX(-50%); }
}