/* =============================================================
   Sinhala & Tamil New Year Decorations
   Infinity PTE Coaching — April 2026
   ============================================================= */

/* ── Auspicious colour palette ── */
:root {
  --ny-saffron:    #FF9933;
  --ny-gold:       #FFD700;
  --ny-crimson:    #DC143C;
  --ny-erabadu:    #FF4500;
  --ny-lotus:      #FF6B9D;
  --ny-leaf:       #4CAF50;
  --ny-betel:      #2E7D32;
  --ny-deep-gold:  #C8860A;
  --ny-ivory:      #FFF8E7;
  --ny-sky:        #87CEEB;
  --ny-purple:     #9B59B6;

  /* JS writes the banner height here so every layer can reference it */
  --ny-banner-h:   0px;
}

/* ═══════════════════════════════════════════════════════════
   BANNER
   ═══════════════════════════════════════════════════════════ */
#ny-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 950;
  background: linear-gradient(
    135deg,
    #b8000a 0%,
    #FF9933 25%,
    #FFD700 50%,
    #FF9933 75%,
    #b8000a 100%
  );
  background-size: 400% 100%;
  animation: ny-banner-slide 6s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a0500;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 14px rgba(220, 20, 60, 0.45);
  overflow: hidden;
  cursor: default;
  user-select: none;
  pointer-events: none;
}

.ny-banner-close {
  pointer-events: auto;
}

#ny-banner::before,
#ny-banner::after {
  content: '';
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  background: linear-gradient(90deg, rgba(184,0,10,0.8), transparent);
  pointer-events: none;
}
#ny-banner::before { left: 0; }
#ny-banner::after  { right: 0; transform: scaleX(-1); }

.ny-banner-text {
  animation: ny-banner-pulse 2.2s ease-in-out infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ny-banner-emoji {
  font-size: 1.15rem;
  animation: ny-spin 3s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.ny-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.2);
  border: none;
  color: #fff;
  font-size: 0.75rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.2s;
  z-index: 951;
}
.ny-banner-close:hover { background: rgba(0,0,0,0.5); }

/* ═══════════════════════════════════════════════════════════
   HEADER & BODY PUSH
   ═══════════════════════════════════════════════════════════ */
body.ny-active {
  padding-top: var(--ny-banner-h) !important;
}

body.ny-active header,
body.ny-active #header {
  top: var(--ny-banner-h) !important;
  transition: top 0.3s ease !important;
}

/* ═══════════════════════════════════════════════════════════
   CANVAS — particle rain lives below every nav element
   ═══════════════════════════════════════════════════════════ */
#ny-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 850;   /* completely behind the main content wrapper wherever possible */
}

/* ═══════════════════════════════════════════════════════════
   OIL LAMPS & KOHA & ERABADU
   ═══════════════════════════════════════════════════════════ */
.ny-lamp {
  position: fixed;
  z-index: 990;
  width: 52px;
  height: 52px;
  pointer-events: none;
  opacity: 0.45;
  animation: ny-lamp-glow 2s ease-in-out infinite alternate;
}
.ny-lamp.top-left  { left: 6px; }
.ny-lamp.top-right { right: 6px; }
.ny-lamp svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px #FFD700) drop-shadow(0 0 18px #FF9933);
}

.ny-erabadu-corner {
  position: fixed;
  z-index: 900;
  width: 80px;
  height: 80px;
  pointer-events: none;
  opacity: 0.45;
  animation: ny-lotus-float 6s ease-in-out infinite;
}
.ny-erabadu-corner.bottom-left  { bottom: 10px; left: 6px; }
.ny-erabadu-corner.bottom-right {
  bottom: 10px; right: 6px;
  transform: scaleX(-1);
  animation: ny-lotus-float-r 6.5s ease-in-out infinite;
}

.ny-koha-bird {
  position: fixed;
  z-index: 860;
  width: 60px;
  height: 60px;
  pointer-events: none;
  opacity: 0.45;
  animation: ny-koha-fly 18s linear infinite;
  transform: scaleX(-1); /* Facing right by default */
}

/* ═══════════════════════════════════════════════════════════
   KOLAM STRIP
   ═══════════════════════════════════════════════════════════ */
#ny-kolam-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--ny-saffron)  0px,   var(--ny-saffron) 20px,
    var(--ny-erabadu) 20px,   var(--ny-erabadu) 40px,
    var(--ny-gold)    40px,   var(--ny-gold)    60px,
    var(--ny-betel)   60px,   var(--ny-betel)   80px,
    var(--ny-crimson) 80px,   var(--ny-crimson) 100px,
    var(--ny-purple) 100px,   var(--ny-purple) 120px
  );
  background-size: 120px 6px;
  animation: ny-kolam-scroll 4s linear infinite;
  z-index: 900;
  pointer-events: none;
  opacity: 0.45;
}

/* ═══════════════════════════════════════════════════════════
   GARLAND
   ═══════════════════════════════════════════════════════════ */
#ny-garland {
  position: fixed;
  left: 0;
  width: 100%;
  height: 28px;
  z-index: 998;
  pointer-events: none;
  opacity: 0.45;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════
   GREETING MODAL
   ═══════════════════════════════════════════════════════════ */
#ny-greeting {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 100000;
  background: linear-gradient(145deg, #1a0500, #3d0d00);
  border: 2px solid var(--ny-gold);
  border-radius: 20px;
  padding: 36px 44px;
  text-align: center;
  color: var(--ny-ivory);
  font-family: 'Lato', sans-serif;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.3),
    0 0 40px rgba(255,153,51,0.5),
    0 20px 60px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  max-width: 420px;
  width: 90vw;
}

#ny-greeting.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

#ny-greeting .ny-greeting-title {
  font-size: 1.65rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--ny-gold), var(--ny-saffron), var(--ny-crimson));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
  line-height: 1.2;
}
#ny-greeting .ny-greeting-sinhala {
  font-size: 1.05rem;
  color: var(--ny-gold);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
#ny-greeting .ny-greeting-tamil {
  font-size: 1rem;
  color: var(--ny-saffron);
  margin-bottom: 18px;
  letter-spacing: 0.03em;
}
#ny-greeting .ny-greeting-sub {
  font-size: 0.86rem;
  color: rgba(255,248,231,0.7);
  margin-bottom: 22px;
}

#ny-greeting-close {
  background: linear-gradient(135deg, var(--ny-saffron), var(--ny-crimson));
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 28px;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  letter-spacing: 0.04em;
}
#ny-greeting-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220,20,60,0.45);
}

/* ═══════════════════════════════════════════════════════════
   FIREWORKS
   ═══════════════════════════════════════════════════════════ */
.ny-firework {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 840;
  animation: ny-firework-burst 0.8s ease-out forwards;
}

/* ═══════════════ KEYFRAMES ═══════════════ */

@keyframes ny-banner-slide {
  0%   { background-position: 0% 50%;   }
  100% { background-position: 400% 50%; }
}
@keyframes ny-banner-pulse {
  from { text-shadow: 0 0 4px rgba(0,0,0,0.3); }
  to   { text-shadow: 0 0 12px rgba(0,0,0,0.15), 0 0 3px #fff; }
}
@keyframes ny-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes ny-lamp-glow {
  from { filter: drop-shadow(0 0 6px #FFD700) brightness(1); }
  to   { filter: drop-shadow(0 0 22px #FF9933) drop-shadow(0 0 8px #fff) brightness(1.3); }
}
@keyframes ny-lotus-float {
  0%,100% { transform: translateY(0)    rotate(0deg);  opacity: 0.85; }
  50%      { transform: translateY(-8px) rotate(4deg); opacity: 0.95; }
}
@keyframes ny-lotus-float-r {
  0%,100% { transform: scaleX(-1) translateY(0);     opacity: 0.85; }
  50%      { transform: scaleX(-1) translateY(-8px); opacity: 0.95; }
}
@keyframes ny-koha-fly {
  0%   { transform: scaleX(-1) translate(-120vw, 30vh) rotate(-15deg); }
  25%  { transform: scaleX(-1) translate(-60vw, 15vh) rotate(5deg); }
  50%  { transform: scaleX(-1) translate(0vw, 20vh) rotate(-5deg); }
  75%  { transform: scaleX(-1) translate(60vw, 10vh) rotate(15deg); }
  100% { transform: scaleX(-1) translate(120vw, 25vh) rotate(-10deg); }
}
@keyframes ny-kolam-scroll {
  from { background-position: 0 0;     }
  to   { background-position: 120px 0; }
}
@keyframes ny-firework-burst {
  0%   { transform: scale(0);   opacity: 1;   }
  60%  { transform: scale(1.8); opacity: 0.7; }
  100% { transform: scale(2.5); opacity: 0;   }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .ny-lamp           { width: 36px; height: 36px; }
  .ny-erabadu-corner { width: 55px; height: 55px; }
  .ny-koha-bird      { width: 45px; height: 45px; }
  #ny-greeting       { padding: 26px 18px; }
  #ny-greeting .ny-greeting-title { font-size: 1.2rem; }
  #ny-banner         { font-size: 0.78rem; padding: 5px 36px 5px 16px; }
}