/* ==========================================================
   App khulte hi 4D LOGO — 5 second, phir aage (assets/js/logo-khulna.js)
   Malik, 3 Oct 2026: 4D logo ka video bheja — "1 sec kam karo, app open
   karte hi ye logo dekhe fir pin ya otp wala page", phir "driver ke app me
   bhi", "ownner, manager, agent".

     index.html  (malik, manager, driver — manifest.json ka start_url)
     agent.html  (agent ka alag app)

   Video nahi, wahi animation (logo4d jaisa) HTML/CSS me: ~15 KB, har screen
   par saaf, SW se net ke bina bhi. Video ~600 KB hota aur SW use (Range ki
   wajah se) cache nahi karta. 6 se 5 second: animation ~4.2s me poori ho
   jati hai, baaki khada rehna tha — wahi ek second kam kiya.

   Naap --u me: logo 1080x1080 par bana tha, ab screen ki chhoti bhuja
   (vmin) me fit. Sab niyam `html.logo-chalu` ke peeche — JS na chale to
   kuch nahi chadhta (shuru-chale.js: JS band par bhi button chale).
   ========================================================== */
  @property --ls-cx { syntax: '<percentage>'; inherits: true; initial-value: 85%; }
  /* Sirf zaruri akshar (GADIHSB, aur naara) — app ke saath, OFL (assets/fonts/OFL-Barlow-Khand.txt) */
  @font-face { font-family: 'GH Logo'; src: url('../fonts/gh-logo-barlow.woff2') format('woff2'); font-style: italic; font-weight: 900; font-display: block; }
  @font-face { font-family: 'GH Naara'; src: url('../fonts/gh-logo-khand.woff2') format('woff2'); font-weight: 700; font-display: block; }

  .ls { display: none; }
  /* Logo ke peeche panna — pehli jhalak me safed na chamke; logo khud poori
     screen dhak leta hai (opaque), isliye neeche ka panna chhupana nahi padta. */
  html.logo-chalu body { background: #0A132B; }
  html.logo-chalu .madad-fab { visibility: hidden; }
  /* --u: 1080 ka ek hissa — logo 1080x1080 par bana tha, ab har screen ki
     chhoti bhuja (vmin) me fit */
  html.logo-chalu .ls { --u: calc(100vmin / 1080); display: block; position: fixed; inset: 0; z-index: 9999; overflow: hidden; cursor: pointer;
    background: radial-gradient(ellipse 70% 60% at 50% 42%, #1C3672 0%, #0F1F45 55%, #0A132B 100%); }

  .ls-sadak { position: absolute; left: 50%; bottom: calc(var(--u) * -40); width: calc(var(--u) * 2400); height: calc(var(--u) * 560);
    transform: translateX(-50%) perspective(calc(var(--u) * 420)) rotateX(62deg); transform-origin: 50% 100%; opacity: 0;
    background: linear-gradient(90deg, transparent 0 46%, rgba(255,255,255,.08) 46% 46.4%, transparent 46.4% 53.6%, rgba(255,255,255,.08) 53.6% 54%, transparent 54%),
                linear-gradient(180deg, rgba(43,79,158,0), rgba(43,79,158,.35));
    animation: ls-sadakAao 1s ease-out .05s both; }
  .ls-sadak::after { content: ''; position: absolute; left: calc(50% - var(--u) * 7); top: 0; width: calc(var(--u) * 14); height: 300%;
    background: repeating-linear-gradient(180deg, rgba(242,185,48,.7) 0 calc(var(--u) * 60), transparent calc(var(--u) * 60) calc(var(--u) * 130));
    animation: ls-patti 5s linear both; }
  @keyframes ls-sadakAao { to { opacity: 1; } }
  @keyframes ls-patti { from { transform: translateY(-66.6%); } to { transform: translateY(-27%); } }

  /* roshni ke dhabbe — logo ke beech se naap kar (lambe phone par bhi logo ke paas) */
  .ls-dhabba { position: absolute; width: calc(var(--u) * 520); height: calc(var(--u) * 520); border-radius: 50%; filter: blur(calc(var(--u) * 60)); opacity: 0;
    animation: ls-dhabba 5s ease-in-out both; }
  .ls-d1 { left: calc(50% - var(--u) * 660); top: calc(50% - var(--u) * 460); background: #2B4F9E; }
  .ls-d2 { left: calc(50% + var(--u) * 180); top: calc(50% - var(--u) * 160); background: #0F6E4A; animation-delay: .4s; }
  @keyframes ls-dhabba { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: .55; } 100% { opacity: .35; transform: scale(1.1); } }

  .ls-beech { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 34);
    animation: ls-vida .35s ease-in 4.65s both; }
  @keyframes ls-vida { to { opacity: 0; transform: scale(1.04); } }

  .ls-ic { width: calc(var(--u) * 270); height: calc(var(--u) * 270); filter: drop-shadow(0 calc(var(--u) * 30) calc(var(--u) * 34) rgba(0,0,0,.55));
    animation: ls-iconAao 1.05s cubic-bezier(.2,.85,.25,1.12) .15s both, ls-tairo 3s ease-in-out 1.3s infinite alternate; }
  @keyframes ls-iconAao { 0% { opacity: 0; transform: perspective(calc(var(--u) * 900)) rotateY(-120deg) translateZ(calc(var(--u) * -300)) scale(.5); }
                          70% { opacity: 1; } 100% { opacity: 1; transform: perspective(calc(var(--u) * 900)) rotateY(0) translateZ(0) scale(1); } }
  @keyframes ls-tairo { from { translate: 0 0; } to { translate: 0 calc(var(--u) * -10); } }

  .ls-naam-ghar { position: relative; }
  .ls-wm { position: relative; font: italic 900 calc(var(--u) * 142)/.9 'GH Logo', 'Barlow Condensed', sans-serif; white-space: nowrap; text-transform: uppercase;
    perspective: calc(var(--u) * 1000); transform-style: preserve-3d; }
  .ls-w3d { position: relative; display: inline-block; color: transparent;
    animation: ls-aksharAao .85s cubic-bezier(.18,.9,.22,1.18) both, ls-chamak .5s ease-in-out both;
    animation-delay: calc(.85s + var(--i, 0) * .075s), calc(3.2s + var(--i, 0) * .06s); }
  .ls-w3d.ls-khali { width: .16em; }
  .ls-w3d::before, .ls-w3d::after { content: attr(data-t); position: absolute; left: 0; top: 0; }
  .ls-w3d::before { color: var(--gehra); text-shadow: var(--ext, none); }
  .ls-w3d::after { background-image: linear-gradient(104deg, transparent 0 42%, rgba(255,255,255,.95) 49%, rgba(255,255,255,.95) 51%, transparent 58% 100%), var(--chehra);
    background-size: 320% 100%, 100% 100%; background-position: var(--ls-cx) 0, 0 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ls-gadi  { --gehra: #1E3D86; --chehra: linear-gradient(180deg, #FFFFFF 0%, #DCE6F7 45%, #A9C0EA 100%); }
  .ls-hisab { --gehra: #0B5A3B; --chehra: linear-gradient(180deg, #B4F5D6 0%, #4FD79F 45%, #1FA673 100%); }
  @keyframes ls-chamak { from { --ls-cx: 85%; } to { --ls-cx: 15%; } }
  @keyframes ls-aksharAao { 0% { opacity: 0; transform: translateZ(calc(var(--u) * -1100)) translateY(calc(var(--u) * 60)) rotateX(75deg); }
                            55% { opacity: 1; } 100% { opacity: 1; transform: none; } }

  .ls-gati { position: absolute; left: calc(var(--u) * -185); top: calc(var(--u) * 28); width: calc(var(--u) * 165); }
  .ls-gati i { display: block; height: calc(var(--u) * 13); border-radius: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 18);
    transform: skewX(-18deg); transform-origin: right; animation: ls-gatiAao .6s cubic-bezier(.3,.9,.3,1) both; }
  .ls-gati i:nth-child(1) { background: linear-gradient(90deg, rgba(255,255,255,0), #FFFFFF 55%, #A9C0EA); animation-delay: 1.55s; }
  .ls-gati i:nth-child(2) { width: 75%; margin-left: 25%; background: linear-gradient(90deg, rgba(27,166,114,0), #1BA672 55%, #0A4D34); animation-delay: 1.62s; }
  .ls-gati i:nth-child(3) { width: 50%; margin-left: 50%; background: linear-gradient(90deg, rgba(242,185,48,0), #F2B930 55%, #B9830D); animation-delay: 1.69s; }
  @keyframes ls-gatiAao { from { opacity: 0; transform: skewX(-18deg) scaleX(0); } to { opacity: 1; transform: skewX(-18deg) scaleX(1); } }

  .ls-patti { position: relative; width: calc(var(--u) * 700); height: calc(var(--u) * 70); margin-top: calc(var(--u) * -10); }
  .ls-rekha { position: absolute; left: 0; right: 0; top: calc(var(--u) * 30); height: calc(var(--u) * 14); transform: skewX(-18deg);
    background: repeating-linear-gradient(90deg, #DCE6F7 0 calc(var(--u) * 50), transparent calc(var(--u) * 50) calc(var(--u) * 70));
    filter: drop-shadow(calc(var(--u) * 2) calc(var(--u) * 4) 0 rgba(0,0,0,.45));
    clip-path: inset(0 100% 0 0); animation: ls-rekhaBano 1.25s cubic-bezier(.45,0,.2,1) 1.85s both; }
  @keyframes ls-rekhaBano { to { clip-path: inset(0 0 0 0); } }
  .ls-truck { position: absolute; left: 0; top: calc(var(--u) * -14); width: calc(var(--u) * 92); height: calc(var(--u) * 72);
    animation: ls-truckChale 1.25s cubic-bezier(.45,0,.2,1) 1.85s both; }
  @keyframes ls-truckChale { 0% { opacity: 0; transform: translateX(calc(var(--u) * -80)); } 8% { opacity: 1; }
                             88% { opacity: 1; transform: translateX(calc(var(--u) * 620)); } 100% { opacity: 0; transform: translateX(calc(var(--u) * 720)); } }

  .ls-naara { text-align: center; font: 700 calc(var(--u) * 56)/1 'GH Naara', 'Khand', 'Noto Sans Devanagari', sans-serif; letter-spacing: .02em; white-space: nowrap;
    background: linear-gradient(180deg, #F7CF63 0%, #D9A21E 55%, #A8770A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 3) 0 rgba(0,0,0,.45)); animation: ls-naaraAao .8s cubic-bezier(.2,.9,.3,1) 2.9s both; }
  @keyframes ls-naaraAao { from { opacity: 0; transform: translateY(calc(var(--u) * 26)) scale(.96); letter-spacing: .3em; }
                           to { opacity: 1; transform: none; letter-spacing: .02em; } }

  /* Hilti cheezein na chahne wale phone — seedha poora logo, 1.2s me aage (JS) */
  @media (prefers-reduced-motion: reduce) {
    .ls *, .ls *::before, .ls *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  }