/* ====== Shri Sarvajanik Navdurga Utsav Samiti — Logo Intro ====== *
 * Session-once premium splash (markup in index.html, logic in intro.js).
 * The overlay is position:fixed, so it is fully taken out of the document
 * flow and can never cause layout shifts. The homepage keeps loading and
 * rendering behind it.
 * ================================================================== */

/* Safety: if this file ever fails to load, the overlay must stay hidden
   and must never affect layout. (The run-state rule below has higher
   specificity, so it still wins when this file loads normally.) */
#navdurga-intro {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999; /* above every site header/modal (max in style.css: 1200) */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--cream, #fffaf1);
}

/* First page load of the browser session → full intro (set by the inline
   gate script in index.html <head>). Timeline:
   0.00–1.20s  logo fades in and zooms from 86% → 106%
   1.20–1.60s  gentle hold
   1.60–2.25s  overlay fades out while the logo eases to 112%  (reveal)  */
html.nd-intro-run #navdurga-intro {
  display: flex;
  animation: nd-intro-exit 0.65s cubic-bezier(0.4, 0, 0.2, 1) 1.6s both;
}

/* Scroll lock — only ever applied/removed by intro.js, so a scripting
   failure can never leave the page unscrollable. */
html.nd-intro-lock { overflow: hidden; }

.nd-intro__logo {
  display: block;
  /* 320px→150px, 375px→150px, 430px→172px, desktop→280px: never too
     large on small screens, never overflowing (no horizontal scroll). */
  width: clamp(150px, 40vw, 280px);
  height: auto;
  max-height: 62vh;
  object-fit: contain; /* aspect ratio always preserved */
  user-select: none;
  will-change: transform, opacity;
  animation: nd-intro-logo 2.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nd-intro-logo {
  0% {
    opacity: 0;
    transform: scale(0.86);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* premium ease-out */
  }
  53% { /* ~1.2s: zoom + fade-in complete */
    opacity: 1;
    transform: scale(1.06);
    animation-timing-function: linear;
  }
  71% { /* ~0.4s hold */
    opacity: 1;
    transform: scale(1.06);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  100% { /* subtle continue while the overlay fades away */
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes nd-intro-exit {
  0% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  99% {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
  }
  100% {
    /* Even if intro.js never runs, the finished overlay can never block
       clicks, keyboard access or the page behind it. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@keyframes nd-intro-logo-fade {
  from { opacity: 0; transform: scale(1); }
  to   { opacity: 1; transform: scale(1); }
}

/* Accessibility: no zoom, no movement — just a very short, simple fade. */
@media (prefers-reduced-motion: reduce) {
  html.nd-intro-run #navdurga-intro {
    animation: nd-intro-exit 0.35s ease 0.45s both; /* total ≈ 0.8s */
  }
  .nd-intro__logo {
    animation: nd-intro-logo-fade 0.35s ease both;
    will-change: auto;
  }
}