/*
 * Festive mode (Diwali) — loaded only while Settings > Festive Mode is on.
 * See inc/festive.php and assets/js/festive.js.
 *
 * 1. Diya (clay lamp with a gently swaying flame)
 * 2. Diyas on the red menu bar
 * 3. Diyas in the bottom corners
 * 4. Opening celebration (crackers over the page)
 */

/* ==========================================================================
   1. Diya
   ========================================================================== */

.iv-diya {
  --d: 40px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--d);
  height: calc(var(--d) * 0.95);
  line-height: 0;
  pointer-events: none;
}

.iv-diya__lamp {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35));
}

.iv-diya__flame {
  position: absolute;
  left: 50%;
  bottom: calc(var(--d) * 0.36);
  width: calc(var(--d) * 0.3);
  height: calc(var(--d) * 0.56);
  margin-left: calc(var(--d) * -0.15);
  transform-origin: 50% 95%;
  animation: iv-diya-sway 3.2s ease-in-out infinite;
}

.iv-diya__flame svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.iv-diya__halo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--d) * 0.38);
  width: calc(var(--d) * 1.9);
  height: calc(var(--d) * 1.9);
  margin: 0 0 calc(var(--d) * -0.6) calc(var(--d) * -0.95);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 90, 0.55) 0%, rgba(255, 160, 50, 0.18) 38%, rgba(255, 140, 0, 0) 68%);
  animation: iv-diya-halo 3.2s ease-in-out infinite;
}

/* Gentle: a small lean and a breath, not a jump. */
@keyframes iv-diya-sway {
  0%, 100% { transform: rotate(-1.5deg) scaleY(1); }
  30%      { transform: rotate(1deg) scaleY(1.04); }
  60%      { transform: rotate(-0.5deg) scaleY(0.97); }
  80%      { transform: rotate(1.5deg) scaleY(1.02); }
}

@keyframes iv-diya-halo {
  0%, 100% { opacity: 0.85; transform: scale(0.96); }
  50%      { opacity: 1; transform: scale(1.04); }
}

/* Neighbouring lamps don't move in step. */
.iv-diya--small .iv-diya__flame,
.iv-diya--small .iv-diya__halo,
.iv-festive-nav--end .iv-diya__flame,
.iv-festive-nav--end .iv-diya__halo {
  animation-delay: -1.3s;
}

/* ==========================================================================
   2. Menu bar: one diya before होम and one after the last item (desktop)
   ========================================================================== */

.iv-festive .iv-nav {
  background:
    radial-gradient(ellipse 110px 50px at 0% 60%, rgba(255, 190, 70, 0.3), rgba(255, 190, 70, 0) 70%) left / 50% 100% no-repeat,
    radial-gradient(ellipse 110px 50px at 100% 60%, rgba(255, 190, 70, 0.3), rgba(255, 190, 70, 0) 70%) right / 50% 100% no-repeat,
    var(--iv-primary);
  border-bottom: 2px solid #f4c430;
}

.iv-festive .iv-nav__inner {
  justify-content: flex-start;
  gap: 0;
}

.iv-festive-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  align-self: flex-end;
  padding-bottom: 5px;
}

.iv-festive-nav .iv-diya {
  --d: 30px;
}

.iv-festive-nav--start {
  margin-right: 0.35rem;
}

.iv-festive-nav--end {
  margin-left: 0.6rem;
}

/* ==========================================================================
   3. Diyas in the bottom corners
   ========================================================================== */

.iv-festive-corner {
  position: fixed;
  z-index: 1030;
  bottom: 12px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.iv-festive-corner--left {
  left: 14px;
}

.iv-festive-corner--right {
  right: 14px;
  flex-direction: row-reverse;
}

.iv-festive-corner .iv-diya {
  --d: 44px;
}

.iv-festive-corner .iv-diya--small {
  --d: 32px;
}

/* Marigold petals under the lamps. */
.iv-festive-corner::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -8px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 15% 50%, #ffb703 0 4px, transparent 5px),
    radial-gradient(circle at 32% 70%, #fb8500 0 4px, transparent 5px),
    radial-gradient(circle at 50% 40%, #ffb703 0 4px, transparent 5px),
    radial-gradient(circle at 68% 70%, #fb8500 0 4px, transparent 5px),
    radial-gradient(circle at 85% 50%, #ffb703 0 4px, transparent 5px),
    radial-gradient(ellipse, rgba(255, 170, 60, 0.35), rgba(255, 170, 60, 0) 70%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Keep the back-to-top button clear of the right-hand diyas. */
.iv-festive--corners .iv-totop {
  bottom: 5.4rem;
}

@media (max-width: 767.98px) {
  .iv-festive-corner {
    bottom: calc(var(--iv-tabbar-h, 58px) + env(safe-area-inset-bottom) + 10px);
  }

  .iv-festive-corner .iv-diya--small {
    display: none;
  }

  .iv-festive-corner .iv-diya {
    --d: 34px;
  }

  .iv-festive--corners .iv-totop {
    bottom: calc(var(--iv-tabbar-h, 58px) + env(safe-area-inset-bottom) + 4.2rem);
  }

  .iv-festive--corners .iv-top10__fab {
    bottom: calc(var(--iv-tabbar-h, 58px) + env(safe-area-inset-bottom) + 7.6rem);
  }
}

/* ==========================================================================
   4. Opening celebration
   ========================================================================== */

.iv-festive-show {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the sticky menu and the admin bar */
  pointer-events: none; /* the website stays usable underneath */
}

.iv-festive-show[hidden] {
  display: none;
}

.iv-festive-show__night {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(40, 10, 50, 0.72), rgba(6, 3, 18, 0.86) 70%);
  transition: opacity 1s ease;
}

.iv-festive-show__night.is-on {
  opacity: 1;
}

.iv-festive-show__night i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.2;
  animation: iv-festive-twinkle 2.2s ease-in-out infinite;
}

@keyframes iv-festive-twinkle {
  50% { opacity: 0.9; }
}

.iv-festive-show__flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 30%), rgba(255, 220, 150, 0.35), rgba(255, 220, 150, 0) 40%);
  transition: opacity 0.6s;
}

.iv-festive-show__flash.is-on {
  opacity: 1;
  transition: none;
}

.iv-festive-show__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.iv-festive-show__greet {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.iv-festive-show__greet.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.iv-festive-show__greet.is-off {
  opacity: 0;
  transform: translate(-50%, -60%) scale(1);
  transition-duration: 1s;
}

.iv-festive-show__small {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffe8a3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.iv-festive-show__big {
  display: block;
  white-space: nowrap;
  font-family: "Tiro Devanagari Hindi", "Anek Devanagari", serif;
  font-size: clamp(46px, 12vw, 104px);
  line-height: 1.15;
  background: linear-gradient(100deg, #f59f00 0%, #ffd43b 20%, #fffbe6 30%, #ffd43b 40%, #f59f00 60%, #ffe066 80%, #f59f00 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 170, 40, 0.65)) drop-shadow(0 3px 0 rgba(80, 0, 10, 0.9));
  animation: iv-festive-shine 2.6s linear infinite;
}

@keyframes iv-festive-shine {
  from { background-position: 100% 0; }
  to   { background-position: -150% 0; }
}

.iv-festive-show__line {
  display: block;
  width: 0;
  height: 2px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, #ffd43b, transparent);
  transition: width 1.2s 0.5s ease;
}

.iv-festive-show__greet.is-on .iv-festive-show__line {
  width: 80%;
}

@media (prefers-reduced-motion: reduce) {
  .iv-diya__flame,
  .iv-diya__halo,
  .iv-festive-show__big {
    animation: none;
  }
}

@media print {
  .iv-festive-corner,
  .iv-festive-nav,
  .iv-festive-show {
    display: none !important;
  }
}