/* splash.css — site-wide entry intro.
 * A 50%-transparent backdrop (the portal shows through, dimmed) with a full-width
 * dark BAND across the middle that carries the Vedic tagline. The tagline shatters
 * into drifting mantras/formulae, then "Happy Learning!" appears, then the whole
 * intro lifts upward and scroll unlocks. Driven by splash.js. */

html.splash-active { overflow: hidden !important; }        /* lock scroll while the intro is up */

#vsplash {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(35, 28, 18, 0.42);                       /* warm dim → portal felt behind */
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  cursor: pointer;
  transition: opacity 0.55s ease, transform 0.85s cubic-bezier(0.7, 0, 0.2, 1);
  will-change: opacity, transform;
}
html.splash-done #vsplash { display: none !important; }    /* already seen this session → never flash */
#vsplash.vs-lift { opacity: 0; transform: translateY(-100%); pointer-events: none; }  /* lifts away */

/* the dark band — only this strip is dark; above & below stays 50% see-through */
.vs-band {
  position: relative; width: 100%; overflow: hidden;
  padding: clamp(2rem, 6vh, 4rem) 4%;
  background: linear-gradient(180deg, #fdf6e6 0%, #f6e8c8 55%, #efdcb0 100%);
  box-shadow: 0 18px 60px rgba(120, 90, 30, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(227, 93, 4, 0.25);
  border-bottom: 1px solid rgba(227, 93, 4, 0.25);
}

.vs-stage { position: relative; max-width: 940px; margin: 0 auto; min-height: 132px; }

/* tagline core (shown first, then dissolves) */
.vs-core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; text-align: center; z-index: 2;
  transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}
.vs-core.vs-out { opacity: 0; transform: translate(-50%, -50%) scale(1.06); filter: blur(5px); }

.vs-rule { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 0.5rem; }
.vs-rule i { height: 1px; width: min(28vw, 160px); display: block; background: linear-gradient(90deg, transparent, rgba(227, 93, 4, 0.5)); }
.vs-rule i:last-child { background: linear-gradient(90deg, rgba(227, 93, 4, 0.5), transparent); }
.vs-rule b {
  font-family: 'Tiro Devanagari Sanskrit', serif; font-weight: 400; font-size: 1.5rem; line-height: 1; color: #e85d04;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 12px rgba(255, 150, 40, 0.28);
  animation: vsOm 4.5s ease-in-out infinite;
}
.vs-main {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: 0.3px; line-height: 1.25;
  font-size: clamp(1.15rem, 3vw, 1.95rem); margin: 0 0 0.35rem;
  color: #13212e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.vs-sub {
  font-family: 'Tiro Devanagari Sanskrit', serif; font-weight: 400; line-height: 1.4;
  font-size: clamp(0.95rem, 1.9vw, 1.18rem); color: rgba(19, 33, 46, 0.74); margin: 0 0 0.6rem;
}
.vs-credit {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
  font-family: 'DM Sans', sans-serif; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 2.5px;
  font-weight: 600; color: rgba(19, 33, 46, 0.6); padding: 0.32rem 0.95rem; border-radius: 999px;
  border: 1px solid rgba(227, 93, 4, 0.3); background: rgba(255, 122, 24, 0.08);
}
.vs-author { font-family: 'Fraunces', Georgia, serif; text-transform: none; font-weight: 600; font-size: 0.92rem; color: #e85d04; letter-spacing: 0.3px; }

/* drifting fragments (mantras + formulae) */
.vs-frag-layer { position: absolute; inset: -10% -2%; z-index: 1; pointer-events: none; }
.vs-frag {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
  font-family: 'DM Mono', monospace; font-size: 0.85rem; color: #b8560a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 8px rgba(255, 150, 40, 0.25);
  transform: translate(-50%, -50%) scale(0.6); will-change: transform, opacity, filter;
  animation: vsFrag 1.9s cubic-bezier(0.33, 0, 0.2, 1) forwards; animation-delay: var(--d, 0s);
}
.vs-frag.dev { font-family: 'Tiro Devanagari Sanskrit', serif; color: #9a4f12; }

/* the final greeting */
.vs-title {
  position: absolute; top: 50%; left: 50%; z-index: 3; text-align: center; width: 100%;
  transform: translate(-50%, calc(-50% + 14px)) scale(0.96); opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vs-title.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vs-title b {
  display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 700; line-height: 1.1;
  font-size: clamp(2rem, 6vw, 3.2rem);
  background: linear-gradient(100deg, #c44d02, #ff7a18, #e85d04, #ff7a18, #c44d02); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.vs-title small {
  display: block; margin-top: 0.5rem; font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(19, 33, 46, 0.62);
}

@keyframes vsOm {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 150, 40, 0.5), 0 0 3px rgba(255, 214, 156, 0.8); transform: translateY(0); }
  50% { text-shadow: 0 0 24px rgba(255, 150, 40, 0.95), 0 0 9px rgba(255, 214, 156, 1); transform: translateY(-1px); }
}
@keyframes vsSheen { from { background-position: 0 center; } to { background-position: -230% center; } }
@keyframes vsFrag {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(0deg); filter: blur(0); }
  16%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0); }
  55%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -40px))) scale(1.15) rotate(var(--dr, 0deg)); filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .vs-main, .vs-rule b, .vs-frag { animation: none; }
  #vsplash { transition: opacity 0.3s ease; }
}