/* =====================================================================
   DIWALI FESTIVAL OVERLAY  —  Sharath Electrical & Electronics
   ---------------------------------------------------------------------
   Everything here is scoped to  html[data-festival="diwali"], which the
   inline script in index.html sets only inside the festival date window
   (see DIWALI_WINDOW in assets/js/diwali.js). Nothing in this file can
   affect the site outside that window.

   TO REMOVE AFTER THE FESTIVAL: delete the three Diwali lines in
   index.html (the stylesheet link, the .diwali markup block and the
   script tag) and these two files. Nothing else references them.
   ===================================================================== */

/* ------------------------------------------------- 1. Festive hero ---- */
/* The hero becomes a night sky so lamps and fireworks read properly.
   Design tokens are re-declared on .hero only, so every child picks up
   light-on-dark colours without touching the rest of the page.          */
[data-festival="diwali"] .hero {
  --text: #f3f6fb;
  --text-dim: #c4d0e2;
  --text-faint: #93a5bf;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --surface: #141d36;
  --surface-2: #1c2746;
  --gold: #e8b53f;
  --gold-bright: #ffd97a;
  --signal: #49e0cd;
  --glow: rgba(255, 183, 77, 0.3);
  --grid-line: rgba(255, 255, 255, 0.05);

  background:
    radial-gradient(1100px 520px at 50% 118%, rgba(255, 168, 56, 0.2), transparent 72%),
    radial-gradient(760px 420px at 12% -10%, rgba(123, 72, 196, 0.26), transparent 70%),
    linear-gradient(180deg, #080d22 0%, #121735 42%, #1f1940 74%, #2c1a35 100%);

  /* Required. `color` is inherited as a COMPUTED value from <body>, so
     re-declaring --text above does not change text already inheriting
     the light-theme colour — it has to be re-resolved here. */
  color: var(--text);
}

/* Gold on a dark field wants dark text inside filled buttons. */
[data-festival="diwali"] .hero .btn { --btn-fg: #121428; }
[data-festival="diwali"] .hero .btn--ghost { --btn-fg: var(--text); }
[data-festival="diwali"] .hero .btn--ghost:hover { color: var(--text); }

[data-festival="diwali"] .hero__scope { opacity: 0.42; }

/* The diya row occupies the bottom edge, so the scroll cue stands down. */
[data-festival="diwali"] .scroll-cue { display: none; }

/* --------------------------------------------- 2. Overlay container --- */
/* Belt and braces: the overlay is invisible unless the festival
   attribute is set, even if the markup is left in the page. */
.diwali { display: none; }

[data-festival="diwali"] .diwali {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;            /* above the hero backdrop, below .hero__grid (z 2) */
  overflow: hidden;
  pointer-events: none;
}

.diwali-greet { display: none; }
[data-festival="diwali"] .diwali-greet { display: inline-flex; }

.diwali__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ----------------------------------------------------- 3. Toran ------- */
/* A marigold-and-mango-leaf garland strung across the top of the hero.  */
/* The string the garland hangs from */
.diwali__toran::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0, #8d5a24 3%, #a66c2c 50%, #8d5a24 97%, transparent 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.diwali__toran {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 94px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-inline: 2px;
}

.toran__strand {
  display: grid;
  justify-items: center;
  gap: 2px;
  transform-origin: 50% 0;
  animation: toranSway 4.5s ease-in-out infinite;
}

@keyframes toranSway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

/* The cord the flowers hang from */
.toran__cord {
  width: 2px;
  height: 10px;
  background: linear-gradient(180deg, #8d5a24, #5e3a14);
  border-radius: 2px;
}

/* Marigold: concentric petal rings done with layered radial gradients */
.toran__flower {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffd24a 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #ff9f1a 0 42%, transparent 43%),
    radial-gradient(circle at 50% 50%, #ff7a00 0 70%, transparent 71%),
    #e85d04;
  box-shadow: 0 0 10px rgba(255, 140, 20, 0.45), inset 0 -2px 4px rgba(120, 40, 0, 0.45);
  position: relative;
}

.toran__flower::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1b8, #ffc233);
}

.toran__flower--alt {
  background:
    radial-gradient(circle at 50% 50%, #ffe9a3 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, #ffc233 0 42%, transparent 43%),
    radial-gradient(circle at 50% 50%, #ffa41b 0 70%, transparent 71%),
    #f48c06;
}

/* Mango leaf */
.toran__leaf {
  width: 13px;
  height: 26px;
  background: linear-gradient(160deg, #3f8f3a, #1f5e22 70%);
  border-radius: 60% 60% 55% 55% / 85% 85% 30% 30%;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.28);
  position: relative;
}

.toran__leaf::after {   /* midrib */
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 1px;
  height: 72%;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.toran__bead {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e8b53f);
  box-shadow: 0 0 8px rgba(255, 196, 70, 0.6);
}

/* ------------------------------------------------------ 4. Diyas ------ */
.diwali__diyas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 clamp(0.5rem, 3vw, 3rem) clamp(0.6rem, 2vw, 1.4rem);
  gap: 0.4rem;
}

.diya {
  position: relative;
  display: grid;
  justify-items: center;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}

/* Pool of warm light the lamp throws onto the scene */
.diya__halo {
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 110px;
  height: 70px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 168, 52, 0.42), rgba(255, 140, 20, 0.12) 45%, transparent 70%);
  animation: haloPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes haloPulse {
  0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.09); }
}

/* Teardrop flame: a square with three rounded corners, rotated 45° */
.diya__flame {
  width: 15px;
  height: 15px;
  margin-bottom: 1px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(45deg);
  transform-origin: 50% 80%;
  background: radial-gradient(circle at 50% 72%, #fffdf0 0%, #ffe9a6 22%, #ffc23c 50%, #ff8a1f 76%, #f4631a 100%);
  box-shadow: 0 0 16px 5px rgba(255, 158, 40, 0.55), 0 0 36px 14px rgba(255, 120, 20, 0.22);
  animation: flameFlicker 1.3s ease-in-out infinite alternate;
}

@keyframes flameFlicker {
  0%   { transform: rotate(45deg) scale(1, 1)       translate(0, 0);     opacity: 0.93; }
  25%  { transform: rotate(45deg) scale(0.93, 1.08) translate(0.4px, -0.6px); opacity: 1; }
  50%  { transform: rotate(45deg) scale(1.05, 0.95) translate(-0.4px, 0.3px); opacity: 0.96; }
  75%  { transform: rotate(45deg) scale(0.96, 1.05) translate(0.3px, -0.4px); opacity: 1; }
  100% { transform: rotate(45deg) scale(1.02, 0.98) translate(-0.2px, 0);     opacity: 0.95; }
}

/* Wick */
.diya__wick {
  width: 2px;
  height: 5px;
  background: #3a2a1a;
  border-radius: 1px;
  margin-bottom: -1px;
}

/* Clay lamp: a shallow bowl with a lighter rim */
.diya__body {
  position: relative;
  width: 46px;
  height: 17px;
  background: linear-gradient(180deg, #c2652f 0%, #9c4a21 45%, #6d3315 100%);
  border-radius: 4px 4px 46px 46px / 3px 3px 26px 26px;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.4);
}

.diya__body::before {   /* oil rim catching the flame light */
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 46px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #e08a4a, #a85426);
  box-shadow: inset 0 2px 3px rgba(255, 205, 140, 0.55);
}

.diya__body::after {    /* highlight */
  content: "";
  position: absolute;
  top: 4px;
  left: 18%;
  width: 26%;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 210, 160, 0.3);
  filter: blur(1px);
}

/* Smaller lamps on narrow screens */
@media (max-width: 700px) {
  /* Clear the garland: on phones the hero content starts near the top,
     so give it room to sit below the toran. */
  [data-festival="diwali"] .hero { padding-top: 5.6rem; }

  .diya__body { width: 32px; height: 13px; }
  .diya__body::before { width: 32px; height: 5px; }
  .diya__flame { width: 11px; height: 11px; }
  .diya__halo { width: 74px; height: 48px; }
  .diwali__toran { height: 74px; }
  .toran__flower { width: 15px; height: 15px; }
  .toran__leaf { width: 10px; height: 20px; }
}

/* ----------------------------------------- 4b. Scroll spark layer ---- */
/* A fixed, full-viewport canvas that emits embers and small crackers as
   the visitor scrolls. Created by diwali.js, so it disappears with the
   script. Sits above page content but below the navbar, the floating
   buttons and the modal, and never takes pointer events.               */
.diwali-trail { display: none; }

[data-festival="diwali"] .diwali-trail {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 70;
  pointer-events: none;
}

/* ------------------------------------------- 5. Greeting in the hero -- */
.diwali-greet {
  /* display is set by the gated rule above — do not re-declare it here,
     a later rule of equal specificity would defeat the off-switch. */
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 70, 0.4);
  background: linear-gradient(100deg, rgba(255, 170, 40, 0.18), rgba(255, 120, 20, 0.08));
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 0 22px rgba(255, 150, 30, 0.18);
}

.diwali-greet i {
  color: #ffd97a;
  font-size: 0.85rem;
  animation: greetTwinkle 2.4s ease-in-out infinite;
}

@keyframes greetTwinkle {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.86) rotate(12deg); }
}

/* ------------------------------------------------ 6. Reduced motion --- */
/* Lamps and garland stay (they are decoration, not motion); everything
   that moves is stilled, and diwali.js skips the fireworks entirely.    */
@media (prefers-reduced-motion: reduce) {
  .toran__strand,
  .diya__halo,
  .diya__flame,
  .diwali-greet i {
    animation: none !important;
  }
  .diya__flame { opacity: 1; }
}