/* KaalChakra video loading screen: full-screen MP4 intro; tap, click, key, scroll or video completion opens the site.
 * Everything is scoped to .kcl and html.kcl-on, so nothing else on the site is affected. */
.kcl { display: none; }
html.kcl-on, html.kcl-on body {
  overflow: hidden;
  height: 100%;
}
html.kcl-on .kcl {
  position: fixed; inset: 0; z-index: 2147483000;
  width: 100%; width: 100vw;
  height: 100%; height: 100vh; height: 100dvh;
  display: grid; place-items: center; overflow: hidden;
  background: #1D2B5E;
  background: radial-gradient(ellipse at center, #243572 0%, #1D2B5E 65%, #152048 100%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Desktop & widescreen: full-screen cover */
.kcl__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  background: #1D2B5E;
}

/* Mobile & Portrait screens: keep entire emblem and text completely visible and centered */
@media (max-aspect-ratio: 120/100), (max-width: 820px) and (orientation: portrait) {
  .kcl__video {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; max-width: none;
    height: auto; max-height: 85vh; max-height: 85dvh;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
}

/* Very compact mobile screens (under 380px wide) */
@media (max-width: 380px) {
  .kcl__video {
    width: 100vw;
  }
  .kcl__enter {
    padding: .6rem 1.4rem;
    font-size: .76rem;
  }
}

.kcl__enter {
  position: absolute; left: 50%;
  bottom: max(2rem, env(safe-area-inset-bottom) + .9rem);
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: .4rem;
  min-height: 44px;
  padding: .7rem 1.8rem;
  border: 1px solid rgba(244, 178, 26, .4);
  border-radius: 999px;
  background: rgba(14, 22, 54, .7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  font: 600 .82rem/1 'Mukta', 'Noto Sans Gujarati', system-ui, -apple-system, sans-serif;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244, 178, 26, .95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 16px rgba(244, 178, 26, .2);
  opacity: 0; animation: kcl-in .7s ease .7s forwards;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .25s ease;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kcl__enter:hover, .kcl__enter:focus-visible, .kcl__enter:active {
  color: #fff;
  border-color: #F4B21A;
  background: rgba(244, 178, 26, .3);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .55), 0 0 24px rgba(244, 178, 26, .45);
  transform: translate(-50%, -2px);
}
.kcl__enter:focus-visible { outline: 2px solid #F4B21A; outline-offset: 3px; }
.kcl__enter::after {
  content: ''; width: 8px; height: 8px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); animation: kcl-nudge 2.2s ease-in-out 1.5s infinite;
}
@keyframes kcl-in { to { opacity: 1; } }
@keyframes kcl-nudge { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(3px, 3px); } }

/* leaving: the landing lifts away like a curtain and the site is already in place beneath it */
html.kcl-on .kcl.is-leaving {
  pointer-events: none;
  animation: kcl-lift .85s cubic-bezier(.7, 0, .2, 1) forwards;
}
.kcl.is-leaving .kcl__enter { opacity: 0; animation: none; transition: opacity .2s ease; }
@keyframes kcl-lift { to { transform: translateY(-100%); opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .kcl__enter { animation: none; opacity: 1; }
  .kcl__enter::after { animation: none; }
  html.kcl-on .kcl.is-leaving { animation-duration: .01s; }
}