/* ===================================================================
   2026-09-01 (revised): site-wide transparent 3D logo popup.
   Explicitly separate from the header - the header itself is untouched
   by this file. Built entirely by brand-reveal.js at runtime; nothing
   here is ever shown unless that script creates the element, so a page
   with JS disabled is completely unaffected.
   A single perspective() transform on one element (the card), no
   ancestor `perspective` + child `preserve-3d` - same reasoning as the
   home-page 3D redesign: fewer cross-browser edge cases to worry about.
   =================================================================== */
.brand-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  padding: 1rem;
}
.brand-reveal-overlay.is-visible { opacity: 1; }

.brand-reveal-card {
  position: relative;
  width: clamp(240px, 36vw, 420px);
  height: clamp(240px, 36vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: perspective(1300px) rotateX(var(--brand-rx, 10deg)) rotateY(var(--brand-ry, -14deg)) scale(.78);
  opacity: 0;
  transition: transform 1s cubic-bezier(.19,.82,.24,1), opacity 1s ease;
  animation: brandRevealFloat 6s ease-in-out infinite;
  animation-play-state: paused;
}
.brand-reveal-overlay.is-visible .brand-reveal-card {
  transform: perspective(1300px) rotateX(0deg) rotateY(0deg) scale(1);
  opacity: 1;
  animation-play-state: running;
}
@keyframes brandRevealFloat {
  0%, 100% { transform: perspective(1300px) rotateX(0deg) rotateY(0deg) translate3d(0,0,0) scale(1); }
  50% { transform: perspective(1300px) rotateX(2deg) rotateY(3deg) translate3d(var(--brand-float-x, 6px), -14px, 0) scale(1.03); }
}

/* Off-white glass backing card behind the logo (per request - was a dark,
   navy-tinted disc before). Kept as a soft rounded square rather than a
   circle: this particular logo is a wider emblem-plus-Sanskrit-wordmark
   composition, and a circle would either crop it tightly or force the
   card much larger than needed - a rounded rectangle uses the space the
   logo actually needs. Still glass/transparent (blur + partial opacity),
   just warm-white instead of dark, which also happens to give the logo's
   own grey/red coloring better contrast to sit against. */
.brand-reveal-glow {
  position: absolute;
  inset: 4%;
  border-radius: 34px;
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.96), rgba(250,247,240,.9) 55%, rgba(238,232,218,.82) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 90px rgba(20,20,15,.22), inset 0 1px 0 rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.6);
}

.brand-reveal-logo {
  position: relative;
  width: 76%;
  height: 76%;
  object-fit: contain;
  opacity: .94;
  filter: drop-shadow(0 14px 22px rgba(20,20,15,.22));
}

@media (max-width: 480px) {
  .brand-reveal-card { width: clamp(200px, 62vw, 300px); height: clamp(200px, 62vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  /* Belt-and-braces: brand-reveal.js already exits before ever creating
     this element under reduced motion, but if it somehow exists anyway,
     it should not animate. */
  .brand-reveal-card, .brand-reveal-overlay { transition: none !important; animation: none !important; }
}