/* ============================================================
   Festive decor: torans, malas, flowers, dividers, rangoli
   ============================================================ */

/* ---------- toran (hanging bells / mango leaves) ---------- */
.toran{
  position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-around;pointer-events:none;
  border-top:3px solid transparent;border-image:linear-gradient(90deg,transparent,#e6cb85 15%,#8f6d26 50%,#e6cb85 85%,transparent) 1;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.strand{transform-origin:50% 0;animation:sway var(--sw,3s) ease-in-out var(--dl,0s) infinite alternate}
.strand svg{display:block;overflow:visible;filter:drop-shadow(0 0 6px rgba(255,170,70,.5))}

/* ---------- flower garlands down the hero sides ---------- */
.mala{
  position:absolute;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:44px;
  pointer-events:none;transform-origin:50% 0;animation:sway 5.5s ease-in-out var(--dl,0s) infinite alternate;
}
.mala::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.4px;background:linear-gradient(var(--gold-hi),var(--gold-lo));box-shadow:0 0 6px rgba(230,190,110,.6)}
.mala .fl{position:relative;margin-bottom:calc(var(--w) * -.2);animation:none}
.mala .fl:nth-child(odd){transform:rotate(12deg)}
.mala .fl:nth-child(even){transform:rotate(-8deg)}

/* ---------- flowers + floral dividers ---------- */
.fl{
  flex:none;width:var(--w,40px);height:var(--w,40px);overflow:visible;
  filter:drop-shadow(0 0 8px rgba(255,170,70,.4)) drop-shadow(0 3px 4px rgba(0,0,0,.4));
  animation:bob 5s ease-in-out var(--dl,0s) infinite alternate;
}
.fl.sm{--w:22px}

.fdiv{
  display:flex;align-items:center;justify-content:center;gap:clamp(0px,.6vw,6px);
  max-width:min(100%,980px);margin:60px auto 0;overflow-x:clip;overflow-y:visible;
}
.fdiv.xl{margin-top:0}
.fdiv .ln{flex:1;height:1px;min-width:12px;background:linear-gradient(90deg,transparent,var(--gold-hi));filter:drop-shadow(0 0 4px rgba(230,190,110,.8))}
.fdiv .ln.r{transform:scaleX(-1)}
.fdiv .fl,.fdiv .md,.fdiv .lotus{flex:0 1 auto;min-width:0}
.fdiv.xl .fl{--w:52px}
.fdiv.xl .fl.sm{--w:28px}

.lotus{
  width:clamp(100px,20vw,170px);height:auto;overflow:visible;
  filter:drop-shadow(0 0 18px rgba(255,150,170,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.5));animation:lotusGlow 4s ease-in-out infinite alternate;
}
.fdiv.xl .lotus{width:clamp(130px,26vw,220px)}
@keyframes lotusGlow{to{filter:drop-shadow(0 0 30px rgba(255,190,200,.8)) drop-shadow(0 4px 6px rgba(0,0,0,.5))}}

.md{position:relative;width:clamp(30px,5vw,48px);margin:0 4px 8px;align-self:flex-end}
.md svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,160,60,.6))}
.mflame{
  position:absolute;left:46%;bottom:62%;width:16%;height:90%;transform:translateX(-50%);transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 72%,#fff6d8 0%,#ffcf6a 30%,#f08a24 62%,rgba(185,83,29,0) 100%);
  border-radius:50% 50% 50% 50%/70% 70% 30% 30%;
  filter:drop-shadow(0 0 8px #ffb347) drop-shadow(0 0 18px rgba(255,140,40,.8));animation:flicker 1.3s infinite ease-in-out alternate;
}

/* ---------- rangoli corners ---------- */
.rangoli{
  position:absolute;z-index:0;width:min(62vw,460px);aspect-ratio:1;opacity:.5;pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(224,116,42,.35));animation:rot 150s linear infinite;
}
.rangoli svg{display:block;width:100%;height:100%}
.rangoli.tl{top:-170px;left:-170px}
.rangoli.tr{top:-150px;right:-170px;animation-direction:reverse}
.rangoli.bl{bottom:-170px;left:-170px;animation-direction:reverse}
.rangoli.br{bottom:-170px;right:-170px}

/* ---------- bouquet at the foot of each arch ---------- */
.bouquet{position:absolute;left:0;right:0;bottom:0;height:92px;z-index:2;pointer-events:none}
.bouquet .fl{position:absolute}
.bouquet .b1{--w:64px;left:-12px;bottom:-16px}
.bouquet .b2{--w:56px;right:-10px;bottom:-14px}
.bouquet .b3{--w:26px;left:50px;bottom:34px}
.bouquet .b4{--w:22px;right:54px;bottom:30px}
.bouquet .lf{position:absolute;width:22px;height:60px;bottom:6px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.bouquet .l1{left:30px;transform:rotate(-34deg)}
.bouquet .l2{right:30px;transform:rotate(34deg)}

/* toran sits on top of the sections that carry one */
.details>.toran,.gamesec>.toran{z-index:3}

@media(max-width:700px){.rangoli{opacity:.32}}
@media(max-width:560px){
  .hide-s{display:none}
  .fdiv{gap:0}
  .fdiv .fl{--w:24px}
  .fdiv .fl.sm{--w:16px}
  .fdiv.xl .fl{--w:28px}
  .fdiv.xl .fl.sm{--w:16px}
  .fdiv .md{width:26px;margin:0 2px 6px}
  .fdiv .lotus{width:min(96px,26vw)}
  .fdiv.xl .lotus{width:min(120px,32vw)}
  .rangoli{width:70vw}
  .rangoli.tl,.rangoli.bl{left:-34vw}
  .rangoli.tr,.rangoli.br{right:-34vw}
}