/* ============================================================
   INDIACOT — Cinematic map intro
   Zoom into India → push into Gujarat → pin Rajkot → logo.
   Screen stays clean bone until the map is ready (no loading bar).
   ============================================================ */
.mi-stage{position:fixed;inset:0;z-index:10000;background:var(--bg);overflow:hidden;
  transition:opacity 1s ease;will-change:opacity;}
.mi-stage.gone{opacity:0;pointer-events:none;}

.mi-viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}

/* focal bloom at screen centre (where Gujarat lands) */
.mi-glow{position:absolute;left:50%;top:50%;width:62vmin;height:62vmin;border-radius:50%;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(176,125,18,.4),rgba(176,125,18,0) 65%);
  transition:opacity 1.1s ease,transform 1.5s cubic-bezier(.4,0,.2,1);}
.mi-stage.zoom-gj .mi-glow{opacity:1;transform:translate(-50%,-50%) scale(1);animation:miGlow 3.2s ease-in-out 1.2s infinite;}
.mi-stage.to-logo .mi-glow{opacity:0;}
@keyframes miGlow{0%,100%{opacity:.45;}50%{opacity:.85;}}

/* the map: aspect-locked so the FULL country fits any screen at the start */
.mi-world{position:relative;z-index:1;width:min(92vw,66vh);aspect-ratio:612 / 696;
  transform-origin:10.78% 51%;
  transform:translate(0,0) scale(.94);opacity:0;will-change:transform,opacity;
  transition:opacity 1s ease,transform 1.7s cubic-bezier(.6,0,.18,1);}
.mi-stage.show-map .mi-world{opacity:1;transform:translate(0,0) scale(1);}
.mi-stage.zoom-gj .mi-world{transform:translate(39.2%,-1%) scale(2.5);}
.mi-map{display:block;width:100%;height:100%;}

.mi-state{fill:rgba(27,25,22,.05);stroke:rgba(27,25,22,.24);stroke-width:.5;
  transition:fill 1s ease,stroke 1s ease,opacity 1s ease;}
.mi-gj{fill:rgba(176,125,18,.18);stroke:rgba(176,125,18,.5);}
.mi-stage.zoom-gj .mi-state{opacity:.35;}
.mi-stage.zoom-gj .mi-gj{fill:rgba(176,125,18,.95);stroke:rgba(176,125,18,1);stroke-width:.7;opacity:1;}

.mi-pin{position:absolute;left:8.6%;top:51.5%;opacity:0;
  transform-origin:50% 100%;transform:translate(-50%,-100%) scale(0);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.5,.4,1);}
.mi-stage.show-pin .mi-pin{opacity:1;transform:translate(-50%,-100%) scale(.4);}
.mi-pin svg{display:block;width:64px;height:auto;}
.mi-pin .mi-ping{position:absolute;left:50%;bottom:13px;width:30px;height:30px;border-radius:50%;
  transform:translate(-50%,50%);background:rgba(176,125,18,.5);}
.mi-stage.show-pin .mi-pin .mi-ping{animation:miPing 1.8s ease-out infinite;}
.mi-pin .mi-ping2{background:rgba(176,125,18,.3);}
.mi-stage.show-pin .mi-pin .mi-ping2{animation:miPing 1.8s ease-out .9s infinite;}
@keyframes miPing{0%{transform:translate(-50%,50%) scale(.5);opacity:.75;}
  100%{transform:translate(-50%,50%) scale(3);opacity:0;}}

/* caption — fully hidden until the sequence starts (no loading flash) */
.mi-label{position:absolute;left:0;right:0;bottom:9%;z-index:2;
  font-family:var(--label,'IBM Plex Mono',monospace);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;transition:opacity .6s ease;}
.mi-stage.show-map .mi-label{opacity:1;}
.mi-stage.to-logo .mi-label{opacity:0;}
.mi-eyebrow{font-size:clamp(10px,2.6vmin,12px);font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--text-mute,#8a8170);}
.mi-place{font-size:clamp(26px,5.2vmin,46px);font-weight:700;letter-spacing:.02em;color:var(--ink,#1b1916);line-height:1;}
.mi-place.swap{animation:miSwap .6s cubic-bezier(.2,.8,.2,1);}
@keyframes miSwap{from{opacity:0;transform:translateY(10px);filter:blur(3px);}to{opacity:1;transform:none;filter:none;}}

/* final logo reveal */
.mi-logo{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:24px;box-sizing:border-box;opacity:0;pointer-events:none;transition:opacity .8s ease;}
.mi-stage.to-logo .mi-viewport{opacity:0;transition:opacity .7s ease;}
.mi-stage.to-logo .mi-logo{opacity:1;}
.mi-logo img{height:clamp(54px,11vmin,88px);width:auto;max-width:80vw;object-fit:contain;}
.mi-stage.to-logo .mi-logo img{animation:miLogo 1s .1s cubic-bezier(.2,.8,.2,1) both;}
@keyframes miLogo{from{opacity:0;transform:translateY(14px) scale(.97);filter:blur(2px);}to{opacity:1;transform:none;filter:none;}}
.mi-logo .mi-line{width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#c9a14a,#b07d12);}
.mi-stage.to-logo .mi-logo .mi-line{animation:miLine 1.1s .4s cubic-bezier(.7,0,.2,1) both;}
@keyframes miLine{from{width:0;}to{width:min(220px,46vw);}}
.mi-logo .mi-tag{font-family:var(--label,'IBM Plex Mono',monospace);font-size:clamp(10px,2.5vmin,12.5px);
  font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text-mute,#8a8170);opacity:0;text-align:center;}
.mi-stage.to-logo .mi-logo .mi-tag{animation:miTag .8s .85s ease both;}
@keyframes miTag{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* skip — hidden until the sequence actually starts */
.mi-skip{position:absolute;right:22px;bottom:18px;z-index:4;font-family:var(--label,monospace);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-mute,#8a8170);
  background:none;border:0;cursor:pointer;opacity:0;transition:opacity .4s;}
.mi-stage.show-map .mi-skip,.mi-stage.to-logo .mi-skip{opacity:.7;}
.mi-skip:hover{opacity:1;}

body.mi-lock{overflow:hidden;height:100svh;}

@media(prefers-reduced-motion:reduce){
  .mi-world,.mi-pin,.mi-place,.mi-glow,.mi-logo img,.mi-logo .mi-line,.mi-state{transition-duration:.25s;animation:none;}
  .mi-stage.zoom-gj .mi-world{transform:translate(0,0) scale(1);}
}