/*!
 * KCN Festival Animations — core layer rules
 * Always loaded (tiny). Per-festival visuals live in their own CSS
 * file and are only fetched when that festival is actually active.
 */

/* Full-viewport ambient layer: fireworks, snow, sleigh, colour bursts...
   Fixed + pointer-events:none so it can NEVER intercept a click, sit
   under the header, and never shifts page layout. */
.kcn-fest-ambient {
  position: fixed;
  inset: 0;
  z-index: 60;               /* below header (120) and mobile menu (119) */
  pointer-events: none;
  overflow: hidden;
}
.kcn-fest-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-page "identity" layer, anchored inside the hero/subhero section
   itself so it clips to the same rounded corners and never bleeds
   into the header or footer. Sits behind the hero's own text/CTA
   layer (.wrap is z-index:3 in theme-v2.css). */
.kcn-fest-hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* FRONT layer sits above the hero copy (.wrap is z-index 3) so showpieces are
   never hidden; it never intercepts clicks (pointer-events:none). */
.kcn-fest-front { z-index: 5; }

/* Greeting ("Merry Christmas", "Happy Onam" ...): ONE compact line, centred at the top of the
   hero (above the "Chartered Accountants" pill, never overlapping it or the artwork).
   Original festival fonts/colours, completely static — no animation, no movement. */
.kcn-fest-greet {
  position: absolute; left: 50%; top: 80px; z-index: 6; white-space: nowrap; text-align: center;
  transform: translateX(-50%); pointer-events: none;
  animation: kcnGreetIn 1.1s cubic-bezier(.16,1,.3,1) both, kcnGreetGlow 3.2s ease-in-out 1.1s infinite;
}
/* every OTHER animation/transition a module put on the badge is still stripped for
   safety (colours/fonts stay exactly as each festival defined them) — only the two
   shared entrance + glow animations above are allowed to run on the wrapper itself. */
.kcn-fest-greet * { animation: none !important; transition: none !important; }
.kcn-fest-greet > * {
  position: static !important; display: flex !important; flex-direction: row; align-items: baseline; justify-content: center; gap: .4em;
  left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  width: auto !important; text-align: center !important; opacity: 1 !important; transform: none !important;
}
.kcn-fest-greet [class*="-badge-line"] { display: inline !important; font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.1 !important; }
.kcn-fest-greet [class*="-badge-year"] { display: inline !important; font-size: clamp(34px, 5.2vw, 56px) !important; line-height: 1.1 !important; background-position: 50% 0 !important; }
.kcn-fest-greet [class*="-badge-jai"] { display: none !important; }
@keyframes kcnGreetIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.82); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(2px) scale(1.05); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes kcnGreetGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(240, 217, 140, .18)); }
  50%      { filter: drop-shadow(0 0 20px rgba(240, 217, 140, .5)); }
}
html.kcn-fest-reduced .kcn-fest-greet { animation: none !important; opacity: 1; }
@media (max-width: 640px) {
  .kcn-fest-greet { top: 84px; }
  .kcn-fest-greet [class*="-badge-line"] { font-size: clamp(12px, 3vw, 14px) !important; }
  .kcn-fest-greet [class*="-badge-year"] { font-size: clamp(26px, 8.5vw, 34px) !important; }
}

/* Perspective floor grid — same look as the dashboard's floor, tinted per festival. */
.kcn-fest-floor {
  position: absolute; left: 50%; bottom: -10px; width: 78%; height: 260px; margin-left: -39%;
  transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg);
  background:
    linear-gradient(rgba(240, 217, 140, .22) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(240, 217, 140, .22) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(ellipse at 50% 60%, var(--fg, #C9A227), transparent 65%);
  opacity: .32; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 70%, #000 30%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 70%, #000 30%, transparent 72%);
}
@media (max-width: 640px) { .kcn-fest-floor { height: 150px; } }

/* Shared "extruded" look for showpieces: navy thickness + gold rim light + soft floor shadow */
.kcn-3d-filter {
  filter: drop-shadow(1px 1px 0 #0a1230) drop-shadow(2px 3px 0 #080e26) drop-shadow(0 0 1.5px rgba(240, 217, 140, .7)) drop-shadow(0 16px 16px rgba(0, 0, 0, .5));
}

/* Utility for any small DOM element (diya, flag, chakra...) placed
   inside .kcn-fest-hero — keeps it to the edges/corners so headline
   copy and buttons are never covered, mirroring the site's existing
   floating-icon safe-zone convention. */
.kcn-fest-edge {
  position: absolute;
}

/* Reduced motion: continuous/looping effects are switched off by each
   module when this class is present; anything still shown should be
   static. This rule is a blanket safety net for any leftover
   CSS-only animation a module forgets to gate. */
html.kcn-fest-reduced .kcn-fest-ambient *,
html.kcn-fest-reduced .kcn-fest-hero * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (max-width: 640px) {
  .kcn-fest-ambient { opacity: .92; }
}