/* ════════════════════════════════════════════════════════════════
   Vasy – Diwali to New Year Login Animation (Festive Left Panel)
   ════════════════════════════════════════════════════════════════ */

:root {
  --blue: #0081B6;
  --blue2: #339BD5;
  --blue3: #53B0E1;
  --sky: #87D1F1;
  --champ: #f3dfae;
}

/* Stage container support */
.vasy-login-page .login {
  container-type: inline-size;
  container-name: stage;
}

/* ---------- LEFT: promotional panel with festive animation ---------- */
.fest {
  --tr: 2000ms;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: clamp(56px, 11vh, 96px) 64px 40px;
  isolation: isolate;
  background: linear-gradient(155deg, #0b3552 0%, #0f4f78 38%, #0a3a5c 70%, #082a44 100%);
  font-family: 'Outfit', system-ui, sans-serif;
  min-height: 100%;
}

.fest::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}

.fest .layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fest .bg-dw {
  z-index: 0;
  background:
    radial-gradient(55% 45% at 82% 84%, rgba(255,178,74,.34), transparent 70%),
    radial-gradient(45% 35% at 10% 6%, rgba(243,223,174,.10), transparent 70%);
  transition: opacity calc(var(--tr)*1.3) ease;
}

.fest .bg-ny {
  z-index: 0;
  opacity: 0;
  background:
    radial-gradient(70% 55% at 75% 6%, rgba(135,209,241,.42), transparent 70%),
    radial-gradient(60% 50% at 10% 98%, rgba(51,155,213,.55), transparent 70%),
    radial-gradient(40% 30% at 48% 42%, rgba(243,223,174,.12), transparent 70%),
    linear-gradient(155deg, #0a4468 0%, #0d6a99 45%, #0a4d78 100%);
  transition: opacity calc(var(--tr)*1.3) ease;
}

.fest[data-stage="ny"] .bg-ny,
.fest[data-stage="tr"] .bg-ny {
  opacity: 1;
}

.fest[data-stage="tr"] .bg-dw,
.fest[data-stage="ny"] .bg-dw {
  opacity: 0;
}

.fest.ent-dw .bg-dw {
  animation: fadein 1.2s both;
}

.fest .brandmark,
.fest .lp__watermark,
.vasy-login-page .fest .brandmark,
.vasy-login-page .fest .lp__watermark {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 420px;
  height: 420px;
  color: #fff;
  pointer-events: none;
  transform: rotate(-8deg);
  z-index: 2;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity calc(var(--tr)*1.2) ease, visibility 0s calc(var(--tr)*1.2);
}

.fest[data-stage="dw"] .brandmark,
.fest[data-stage="dw"] .lp__watermark,
.vasy-login-page .fest[data-stage="dw"] .brandmark,
.vasy-login-page .fest[data-stage="dw"] .lp__watermark {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity calc(var(--tr)*1.2) ease, visibility 0s calc(var(--tr)*1.2);
}

.fest[data-stage="tr"] .brandmark,
.fest[data-stage="tr"] .lp__watermark,
.fest[data-stage="ny"] .brandmark,
.fest[data-stage="ny"] .lp__watermark,
.vasy-login-page .fest[data-stage="tr"] .brandmark,
.vasy-login-page .fest[data-stage="tr"] .lp__watermark,
.vasy-login-page .fest[data-stage="ny"] .brandmark,
.vasy-login-page .fest[data-stage="ny"] .lp__watermark {
  opacity: .07 !important;
  visibility: visible !important;
  transition: opacity calc(var(--tr)*1.2) ease, visibility 0s 0s;
}

.fest .dwdecor {
  z-index: 1;
  transition: opacity var(--tr) ease .4s;
}

.fest[data-stage="tr"] .dwdecor,
.fest[data-stage="ny"] .dwdecor {
  opacity: 0;
}

.fest.ent-dw .dwin {
  animation: fadein 1.8s 1.8s both;
}

.fest .lampglow {
  position: absolute;
  right: -6%;
  bottom: -2%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,196,100,.5), rgba(255,196,100,0));
  transition: opacity calc(var(--tr)*.6) ease;
}

.fest[data-stage="tr"] .lampglow,
.fest[data-stage="ny"] .lampglow {
  opacity: 0;
}

.fest .mandala {
  position: absolute;
  right: -110px;
  bottom: -130px;
  width: 540px;
  height: 540px;
  opacity: .22;
}

.fest .lantern {
  position: absolute;
  top: 0;
  transform-origin: 50% 0;
}

.fest .lantern .lg {
  opacity: .55;
}

.fest .diya {
  position: absolute;
  right: 3%;
  bottom: 38px;
  width: 180px;
  width: min(210px, 12cqw);
  aspect-ratio: 78/60;
  height: auto;
  overflow: visible;
}

.fest .flame {
  transform-origin: 50% 100%;
}

.fest .glow {
  transform-origin: 50% 50%;
}

.fest .nydecor {
  z-index: 1;
  opacity: 0;
  transition: opacity calc(var(--tr)*1.2) ease;
}

.fest[data-stage="ny"] .nydecor {
  opacity: 1;
}

.fest .trail {
  position: absolute;
  height: 1.5px;
  width: 200px;
  background: linear-gradient(90deg, rgba(135,209,241,0), rgba(190,230,250,.85), rgba(243,223,174,0));
  opacity: 0;
  transform: rotate(-28deg);
}

.fest .fx {
  z-index: 2;
  overflow: hidden;
}

.fest .p {
  position: absolute;
  border-radius: 50%;
  background: #f3d58a;
  opacity: 0;
}

.fest .st {
  position: absolute;
  width: 8px;
  height: 8px;
  opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  background: #f3dfae;
}

.fest .pd {
  transition: opacity 1.6s ease;
}

.fest .pn {
  opacity: 0;
  transition: opacity 1.8s ease 1s;
}

.fest[data-stage="tr"] .pd,
.fest[data-stage="ny"] .pd {
  opacity: 0;
}

.fest[data-stage="ny"] .pn {
  opacity: 1;
}

.fest.ent-dw .pd {
  animation: fadein 1.5s .3s both;
}

/* transition effects: light sweep, converging particles, soft flash */
.fest .sweepband {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 55%;
  opacity: 0;
  background: linear-gradient(105deg, transparent 15%, rgba(243,223,174,.28) 45%, rgba(255,255,255,.34) 50%, rgba(135,209,241,.22) 55%, transparent 85%);
  transform: translateX(-120%);
}

.fest[data-stage="tr"] .sweepband {
  animation: sweepx calc(var(--tr)*.9) .15s ease-in-out forwards;
}

.fest .cv {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d0, #f0c36a);
  opacity: 0;
}

.fest[data-stage="tr"] .cv {
  animation: converge calc(var(--tr)*.8) var(--dl) cubic-bezier(.5,0,.3,1) forwards;
}

.fest .flash {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 60%;
  aspect-ratio: 1;
  margin: -30% 0 0 -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,236,190,.4), rgba(255,236,190,0));
  opacity: 0;
}

.fest[data-stage="tr"] .flash {
  animation: flashpulse calc(var(--tr)*.7) calc(var(--tr)*.55) ease-out forwards;
}

.fest .fw {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(.2);
}

.fest .fw svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fest .fw line {
  stroke-width: 1.6;
  stroke-linecap: round;
}

.fest .fw.go {
  animation: fwpop var(--fd, 1.8s) cubic-bezier(.15,.7,.3,1) forwards;
}

.fest .rk {
  position: absolute;
  width: 2px;
  height: 48px;
  margin-left: -1px;
  background: linear-gradient(to top, rgba(190,230,250,0), #e8f6ff);
  border-radius: 2px;
  top: 105%;
  opacity: 0;
}

.fest .rk.go {
  animation: rkup var(--rd, 1s) cubic-bezier(.2,.6,.3,1) forwards;
}

/* content */
.fest .flogo {
  position: relative;
  z-index: 3;
  display: block;
  height: 40px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 0;
}

.fest.ent-dw .flogo {
  animation: fadein 1s .1s both;
}

.fest .content {
  position: relative;
  z-index: 3;
  margin: 94px 0 0;
  padding-top: 0;
}

.fest .tstack {
  display: grid;
}

.fest .tstack > * {
  grid-area: 1/1;
}

.fest .g {
  --ws: 18px;
  --hs: 36px;
  --bs: 108px;
  --ps: 21px;
  transition: opacity calc(var(--tr)*.55) ease, transform calc(var(--tr)*.55) ease;
}

.fest .g.ny {
  --hs: 36px;
  --bs: 92px;
  --ps: 21px;
  opacity: 0;
}

.fest .g .wish {
  display: block;
  font: 300 var(--ws)/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .08em;
  color: rgba(255,255,255,.8);
  margin-bottom: 12px;
}

.fest .g .happy {
  display: block;
  font: 300 var(--hs)/1.1 'Outfit', system-ui, sans-serif;
  letter-spacing: .2em;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.fest .g .big {
  display: block;
  font: 600 var(--bs)/1.02 'Outfit', system-ui, sans-serif;
  letter-spacing: -.02em;
  padding-bottom: 8px;
  background: linear-gradient(100deg, #d9ad57 0%, #f7e3ad 38%, #fff6d8 50%, #f7e3ad 62%, #d9ad57 100%);
  background-size: 260% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.fest .g p {
  margin: 16px 0 0;
  font: 300 var(--ps)/1.5 'Outfit', system-ui, sans-serif;
  color: rgba(255,255,255,.82);
  max-width: 540px;
}

.fest .g .wish,
.fest .g .happy,
.fest .g .big,
.fest .g p {
  transition: font-size calc(var(--tr)*.9) cubic-bezier(.3,.6,.2,1), margin calc(var(--tr)*.9) ease;
}

/* default: Happy Diwali fades out, Happy New Year takes its place */
.fest[data-stage="tr"] .g.dw,
.fest[data-stage="ny"] .g.dw {
  opacity: 0;
  transform: translateY(-10px);
}

.fest[data-stage="ny"] .g.ny {
  opacity: 1;
}

/* optional: keep the Happy Diwali text on screen above Happy New Year */
.fest[data-keep="1"] .tstack {
  display: flex;
  flex-direction: column;
}

.fest[data-keep="1"] .g.ny {
  --hs: 28px;
  --bs: 84px;
  --ps: 20px;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height calc(var(--tr)*.9) ease, margin-top calc(var(--tr)*.9) ease, opacity calc(var(--tr)*.5) ease;
}

.fest[data-keep="1"][data-stage="tr"] .g.dw,
.fest[data-keep="1"][data-stage="ny"] .g.dw {
  opacity: 1;
  transform: none;
  --ws: 12px;
  --hs: 18px;
  --bs: 56px;
  --ps: 17px;
}

.fest[data-keep="1"][data-stage="tr"] .g.dw p,
.fest[data-keep="1"][data-stage="ny"] .g.dw p {
  margin-top: 8px;
}

.fest[data-keep="1"][data-stage="tr"] .g.ny,
.fest[data-keep="1"][data-stage="ny"] .g.ny {
  max-height: 340px;
  margin-top: 34px;
}

.fest[data-keep="1"] .g.ny .wish {
  display: none;
}

.fest.instant .g,
.fest.instant .g * {
  transition: none !important;
}

.fest.ent-dw .g.dw .wish { animation: wishin .9s .7s both; }
.fest.ent-dw .g.dw .happy { animation: fadein 1s 1s both; }
.fest.ent-dw .g.dw .big { animation: rise 1.1s 1.3s cubic-bezier(.2,.7,.2,1) both, shine 2.4s 2.2s ease-out both; }
.fest.ent-dw .g.dw p { animation: fadein 1.1s 2s both; }
.fest.ent-ny .g.ny .wish { animation: wishin .9s both; }
.fest.ent-ny .g.ny .happy { animation: fadein 1s .25s both; }
.fest.ent-ny .g.ny .big { animation: rise 1.2s .3s cubic-bezier(.2,.7,.2,1) both, shine 2.6s 1.2s ease-out both; }
.fest.ent-ny .g.ny p { animation: fadein 1.1s 1.2s both; }

.fest .stats {
  display: flex;
  gap: 34px;
  margin-top: 38px;
}

.fest .stat b {
  display: block;
  font: 600 40px/1.1 'Outfit', system-ui, sans-serif;
  letter-spacing: -.02em;
}

.fest .stat b i {
  font-style: normal;
  color: var(--blue3);
}

.fest .stat span {
  display: block;
  font: 300 16px 'Outfit', system-ui, sans-serif;
  color: rgba(255,255,255,.72);
  margin-top: 4px;
}

.fest.ent-dw .stat { animation: rise .9s both; }
.fest.ent-dw .stat:nth-child(1) { animation-delay: 2.2s; }
.fest.ent-dw .stat:nth-child(2) { animation-delay: 2.45s; }
.fest.ent-dw .stat:nth-child(3) { animation-delay: 2.7s; }

/* animations */
@keyframes wishin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes shine {
  0% { background-position: 100% 0; filter: drop-shadow(0 0 0 rgba(255,215,130,0)); }
  45% { filter: drop-shadow(0 0 14px rgba(255,215,130,.55)); }
  100% { background-position: 0 0; filter: drop-shadow(0 0 0 rgba(255,215,130,0)); }
}
@keyframes flick {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1) skewX(0); }
  20% { transform: translateY(-.8px) scaleY(1.07) scaleX(.96) skewX(-1.5deg); }
  45% { transform: translateY(.3px) scaleY(.96) scaleX(1.03) skewX(1deg); }
  70% { transform: translateY(-1px) scaleY(1.05) scaleX(.97) skewX(1.8deg); }
}
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.12); } }
@keyframes lbreathe { 0%, 100% { opacity: .4; } 50% { opacity: .75; } }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes fwpop {
  0% { opacity: 0; transform: scale(.2); }
  8% { opacity: 1; }
  30% { opacity: .95; transform: scale(.95); }
  100% { opacity: 0; transform: scale(1.18) translateY(10px); }
}
@keyframes rkup { 0% { opacity: 1; top: 105%; } 85% { opacity: 1; } 100% { opacity: 0; top: var(--ty); } }
@keyframes rise2 { 0% { opacity: 0; transform: translate(0,0); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--dx),-120px); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1); } }
@keyframes sweepx { 0% { opacity: 0; transform: translateX(-120%); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(220%); } }
@keyframes converge { 0% { opacity: 0; transform: translate(var(--sx),var(--sy)); } 20% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(0,0); } }
@keyframes flashpulse { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes trail { 0% { opacity: 0; transform: translateX(-40px) rotate(-28deg); } 10% { opacity: .9; } 35% { opacity: 0; transform: translateX(340px) rotate(-28deg); } 100% { opacity: 0; transform: translateX(340px) rotate(-28deg); } }

.fest .flame { animation: flick 1.8s ease-in-out infinite; }
.fest .glow { animation: breathe 3.5s ease-in-out infinite; }
.fest .lantern .lg { animation: lbreathe 4s ease-in-out infinite; }
.fest .lantern { animation: sway 7s ease-in-out infinite; }
.fest .pd .p { animation: rise2 var(--d) var(--w) linear infinite; }
.fest .pn .st { animation: twinkle var(--d) var(--w) ease-in-out infinite; }
.fest .pn .p { animation: rise2 var(--d) var(--w) linear infinite; }
.fest[data-stage="ny"] .trail { animation: trail var(--d) var(--w) ease-in-out infinite; }
.fest.paused * { animation-play-state: paused !important; }

/* responsive */
@container stage (max-width: 1180px) {
  .fest { padding: clamp(48px, 9vh, 80px) 44px 34px; }
  .fest .g.dw { --ws: 16px; --hs: 30px; --bs: 88px; --ps: 19px; }
  .fest .g.ny { --ws: 16px; --hs: 30px; --bs: 76px; --ps: 19px; }
  .fest[data-keep="1"] .g.ny { --hs: 24px; --bs: 72px; --ps: 18px; }
  .fest[data-keep="1"][data-stage="tr"] .g.dw,
  .fest[data-keep="1"][data-stage="ny"] .g.dw { --hs: 16px; --bs: 48px; --ps: 16px; }
  .fest .diya { width: 150px; }
  .fest .stats { gap: 28px; }
  .fest .stat b { font-size: 34px; }
}

@media (max-width: 1180px) {
  .fest { padding: clamp(48px, 9vh, 80px) 44px 34px; }
  .fest .g.dw { --ws: 16px; --hs: 30px; --bs: 88px; --ps: 19px; }
  .fest .g.ny { --ws: 16px; --hs: 30px; --bs: 76px; --ps: 19px; }
  .fest[data-keep="1"] .g.ny { --hs: 24px; --bs: 72px; --ps: 18px; }
  .fest[data-keep="1"][data-stage="tr"] .g.dw,
  .fest[data-keep="1"][data-stage="ny"] .g.dw { --hs: 16px; --bs: 48px; --ps: 16px; }
  .fest .diya { width: 150px; }
  .fest .stats { gap: 28px; }
  .fest .stat b { font-size: 34px; }
}

@container stage (max-width: 860px) {
  .login { grid-template-columns: 1fr; height: auto; }
  .fest { padding: 34px 24px 30px; min-height: 640px; }
  .fest[data-keep="1"] { min-height: 820px; }
  .fest .content { margin-top: 83px; }
  .fest .g.dw { --ws: 15px; --hs: 24px; --bs: 66px; --ps: 16.5px; }
  .fest .g.ny { --ws: 15px; --hs: 24px; --bs: 58px; --ps: 16.5px; }
  .fest[data-keep="1"] .g.ny { --hs: 20px; --bs: 54px; --ps: 16px; }
  .fest[data-keep="1"][data-stage="tr"] .g.dw,
  .fest[data-keep="1"][data-stage="ny"] .g.dw { --hs: 15px; --bs: 44px; --ps: 15px; }
  .fest .g p { max-width: 310px; }
  .fest .diya { width: 110px; right: 4%; bottom: 26px; }
  .fest .mandala { width: 320px; height: 320px; right: -80px; bottom: -80px; }
  .fest .brandmark,
  .fest .lp__watermark { width: 200px; height: 200px; right: -24px; bottom: -36px; }
  .fest[data-stage="dw"] .brandmark,
  .fest[data-stage="dw"] .lp__watermark { opacity: 0 !important; visibility: hidden !important; }
  .fest[data-stage="tr"] .brandmark,
  .fest[data-stage="tr"] .lp__watermark,
  .fest[data-stage="ny"] .brandmark,
  .fest[data-stage="ny"] .lp__watermark { opacity: .10 !important; visibility: visible !important; }
  .fest .stats { gap: 18px; margin-top: 28px; }
  .fest .stat b { font-size: 26px; }
  .fest .stat span { font-size: 13px; }
}

@media (max-width: 860px) {
  .vasy-login-page .login { grid-template-columns: 1fr; height: auto; min-height: 100%; }
  .fest { padding: 34px 24px 30px; min-height: 640px; }
  .fest[data-keep="1"] { min-height: 820px; }
  .fest .content { margin-top: 83px; }
  .fest .g.dw { --ws: 15px; --hs: 24px; --bs: 66px; --ps: 16.5px; }
  .fest .g.ny { --ws: 15px; --hs: 24px; --bs: 58px; --ps: 16.5px; }
  .fest[data-keep="1"] .g.ny { --hs: 20px; --bs: 54px; --ps: 16px; }
  .fest[data-keep="1"][data-stage="tr"] .g.dw,
  .fest[data-keep="1"][data-stage="ny"] .g.dw { --hs: 15px; --bs: 44px; --ps: 15px; }
  .fest .g p { max-width: 310px; }
  .fest .diya { width: 110px; right: 4%; bottom: 26px; }
  .fest .mandala { width: 320px; height: 320px; right: -80px; bottom: -80px; }
  .fest .brandmark,
  .fest .lp__watermark { width: 200px; height: 200px; right: -24px; bottom: -36px; }
  .fest[data-stage="dw"] .brandmark,
  .fest[data-stage="dw"] .lp__watermark { opacity: 0 !important; visibility: hidden !important; }
  .fest[data-stage="tr"] .brandmark,
  .fest[data-stage="tr"] .lp__watermark,
  .fest[data-stage="ny"] .brandmark,
  .fest[data-stage="ny"] .lp__watermark { opacity: .10 !important; visibility: visible !important; }
  .fest .stats { gap: 18px; margin-top: 28px; }
  .fest .stat b { font-size: 26px; }
  .fest .stat span { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .fest * { animation: none !important; }
  .fest .fw, .fest .rk, .fest .p, .fest .st, .fest .cv, .fest .trail, .fest .sweepband, .fest .flash { display: none; }
}

/* ==========================================================================
   Header Festive UI: Option 2 (Jewelled Garland) - barfx & o2
   ========================================================================== */

/* Header background with subtle warm festive champagne gradient */
.m-header.festive-garland,
#m_header.festive-garland,
.m-header[data-opt="garland"],
#m_header[data-opt="garland"] {
  background: linear-gradient(90deg, #fff 0%, #fffaf2 70%, #fff3df 100%) !important;
  /*position: relative;*/
}

.m-header.festive-garland .m-brand,
#m_header.festive-garland .m-brand {
  background: transparent !important;
}

/* Ensure header interactive controls stay above barfx */
#m_header > *:not(.barfx) {
  position: relative;
  z-index: 1;
}

/* Barfx container positioned over the header */
.m-header .barfx,
#m_header .barfx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.m-header .barfx svg,
#m_header .barfx svg,
.barfx svg {
  display: block;
}

/* 2 Jewelled Garland */
.o2 {
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: visible;
  pointer-events: none;
}

.o2 .bd {
  opacity: .4;
  animation: o2tw 3.6s var(--bd, 0s) ease-in-out infinite;
}

.o2 .core {
  transform-box: fill-box;
  transform-origin: center;
  animation: o2ch 9s var(--ch, 0s) ease-in-out infinite;
}

@keyframes o2tw {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@keyframes o2ch {
  0%, 72%, 100% { transform: scale(1); }
  79% { transform: scale(1.9); }
  88% { transform: scale(1); }
}

/* Pause animations when tab is inactive */
.paused .barfx *,
#m_header.paused .barfx * {
  animation-play-state: paused !important;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .barfx *,
  .festzone * {
    animation: none !important;
  }
  .barfx .o2 .bd {
    opacity: .8;
  }
}


/* ==========================================================================
   Header Festive UI: Diya & Crackers Zone (.festzone)
   Ported from React (FestiveDecorations.jsx & header.css)
   ========================================================================== */
.festzone {
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 48px;
  flex: 1 1 220px;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.festzone .fdiya {
  position: absolute;
  right: 56px;
  top: 50%;
  margin-top: -24px;
  width: 62px;
  height: 48px;
  overflow: visible;
}

.festzone .flame {
  transform-origin: 50% 100%;
  animation: flick 1.8s ease-in-out infinite;
}

.festzone .glow {
  transform-origin: 50% 50%;
  animation: breathe 3.5s ease-in-out infinite;
}

.festzone .lamp {
  position: absolute;
  right: 0;
  top: 0;
  width: 174px;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 100, .35), rgba(255, 196, 100, 0));
  animation: lampb 3.5s ease-in-out infinite;
}

.festzone .spark {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #e0aa4d;
  opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: drift var(--d, 8s) var(--w, 0s) ease-in-out infinite;
}

.festzone .burst {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  opacity: 0;
  transform: scale(.3);
  animation: pop var(--d, 9s) var(--w, 0s) ease-out infinite;
}

.festzone .burst svg {
  width: 100%;
  height: 100%;
}

.festzone .burst line {
  stroke: #d9a441;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.festzone .burst .s2 {
  stroke: #f0c36a;
}

.festzone .burst circle {
  fill: #e0aa4d;
}

/* Crackers beside the diya (anchored from the right) */
.festzone .anaar {
  position: absolute;
  right: 140px;
  bottom: 8px;
  width: 13px;
  height: 10px;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  background: linear-gradient(#d3573a, #8f2a1c);
}

.festzone .anaar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3.5px;
  height: 2px;
  background: #f0c36a;
}

.festzone .fs {
  position: absolute;
  right: 145px;
  bottom: 16px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f0b13a;
  box-shadow: 0 0 5px 1px rgba(255, 190, 70, .8);
  opacity: 0;
  animation: fount 8s var(--w, 0s) ease-out infinite;
}

.festzone .spk {
  position: absolute;
  right: 196px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  animation: spk 1.2s ease-in-out infinite;
}

.festzone .spk line {
  stroke: #d9a441;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.festzone .rkt {
  position: absolute;
  right: 256px;
  top: 100%;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(#f0c36a, rgba(240, 195, 106, 0));
  opacity: 0;
  animation: rocket 11s var(--w, 2.5s) cubic-bezier(.2, .7, .3, 1) infinite;
}

.festzone .burst.mb {
  right: 248px;
  left: auto;
  top: 24%;
  margin: -18px -18px 0 0;
  width: 36px;
  height: 36px;
}

/* Animations Keyframes */
@keyframes lampb {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}

@keyframes pop {
  0% { opacity: 0; transform: scale(.3); }
  6% { opacity: .95; }
  16% { opacity: .8; transform: scale(1); }
  26%, 100% { opacity: 0; transform: scale(1.12); }
}

@keyframes drift {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: .9; }
  60% { opacity: .5; transform: translate(5px, -8px); }
  85% { opacity: 0; }
}

@keyframes fount {
  0% { opacity: 0; transform: translate(0, 0); }
  2% { opacity: 1; }
  13% { opacity: 1; transform: translate(calc(var(--dx) * .65), var(--dy)); }
  26% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * .15)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * .15)); }
}

@keyframes spk {
  0%, 100% { opacity: .5; transform: scale(.82) rotate(0); }
  50% { opacity: 1; transform: scale(1.08) rotate(12deg); }
}

@keyframes rocket {
  0% { opacity: 0; top: 100%; }
  1% { opacity: 1; }
  8% { opacity: .9; top: 26%; }
  10%, 100% { opacity: 0; top: 24%; }
}

/* Paused State */
.paused .festzone *,
#m_header.paused .festzone * {
  animation-play-state: paused !important;
}

@media (max-width: 1024px) {
  .festzone {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .festzone * {
    animation: none !important;
  }
  .festzone .burst,
  .festzone .spark,
  .festzone .fs,
  .festzone .rkt {
    display: none;
  }
  .festzone .glow {
    opacity: .7;
  }
}
@media (max-width: 1024px) {
  #m_header > *:not(.barfx){z-index: unset;}
  .m-header .barfx, #m_header .barfx{background:#fff;}
}