/* BhaiFinder festive layer (Halloween → Diwali → Bhai Dooj → Chhath, 2026).
   Styles only the elements /assets/festive/festive.js injects, and only on the
   days that script picks, so this file does nothing on its own. */

/* ---------- fairy lights along the top ---------- */
.fx-lights{position:fixed;left:0;right:0;top:0;height:46px;z-index:95;pointer-events:none}
.fx-lights svg{display:block;width:100%;height:46px;overflow:visible}
.fx-wire{fill:none;stroke:rgba(60,40,20,.38);stroke-width:1}
html.dark .fx-wire,body.dark .fx-wire{stroke:rgba(255,226,180,.22)}
.fx-led{animation:fx-twinkle var(--d,3s) ease-in-out infinite;animation-delay:var(--o,0s)}
.fx-led .g{opacity:.55}
/* bulbs: white-hot cores at night, coloured glass on light backgrounds */
.fx-led .c{fill:#fffaf0}
.fx-led .cap{fill:rgba(255,226,180,.35)}
.fx-led .s{stroke:rgba(255,226,180,.3);stroke-width:1}
html:not(.dark) body:not(.dark) .fx-led .c{fill:var(--c);stroke:rgba(70,40,10,.28);stroke-width:.6}
html:not(.dark) body:not(.dark) .fx-led .g{opacity:.95}
html:not(.dark) body:not(.dark) .fx-led .cap{fill:#5b4630}
html:not(.dark) body:not(.dark) .fx-led .s{stroke:rgba(60,40,20,.5)}
html:not(.dark) body:not(.dark) .fx-lights svg{filter:saturate(1.45) contrast(1.06)}
html:not(.dark) body:not(.dark) .fx-wire{stroke:rgba(60,40,20,.55);stroke-width:1.1}
html:not(.dark) body:not(.dark) .fx-glowline{background:radial-gradient(60% 90px at 50% 0%,var(--fx-glow,rgba(255,190,90,.20)),transparent 75%),linear-gradient(rgba(255,200,120,.10),transparent 60px)}
@keyframes fx-twinkle{0%,100%{opacity:1}45%{opacity:.45}55%{opacity:.45}}
.fx-glowline{position:fixed;left:0;right:0;top:0;height:90px;z-index:2;pointer-events:none;
  background:radial-gradient(60% 90px at 50% 0%,var(--fx-glow,rgba(255,190,90,.20)),transparent 75%)}

/* ---------- hanging lanterns (desktop, Diwali days) ---------- */
.fx-lantern{position:fixed;top:44px;z-index:50;width:40px;pointer-events:none;transform-origin:50% 0;animation:fx-swing 5s ease-in-out infinite}
.fx-lantern.l{left:10px}.fx-lantern.r{right:10px;animation-delay:-2.4s}
.fx-lantern svg{display:block;width:40px;height:auto;filter:drop-shadow(0 0 18px rgba(255,150,40,.55))}
@keyframes fx-swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@media(max-width:1100px){.fx-lantern{display:none}}

/* ---------- Halloween bats ---------- */
.fx-bat{position:fixed;top:0;left:0;z-index:94;width:34px;pointer-events:none;opacity:0;animation:fx-fly var(--t,14s) linear infinite;animation-delay:var(--o,0s)}
.fx-bat svg{display:block;width:100%;height:auto;animation:fx-flap .28s ease-in-out infinite alternate;transform-origin:50% 60%}
html:not(.dark) body:not(.dark) .fx-bat path{fill:#2b1d3a}
@keyframes fx-flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes fx-fly{0%{opacity:0;transform:translate(-60px,var(--y,120px))}6%{opacity:.9}50%{transform:translate(50vw,calc(var(--y,120px) - 50px))}94%{opacity:.9}100%{opacity:0;transform:translate(calc(100vw + 60px),var(--y,120px))}}

/* ---------- particle canvas (fireworks / embers / glow) ---------- */
.fx-sky{position:fixed;inset:0 0 auto 0;width:100%;height:72vh;z-index:3;pointer-events:none;transition:opacity .6s}
.fx-sky.fx-hide{opacity:0}

/* ---------- Bhai's wish card ---------- */
.fx-wish{position:fixed;right:18px;bottom:18px;z-index:85;width:360px;display:flex;flex-direction:row-reverse;align-items:flex-end;gap:10px;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;transform:translateY(26px);opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s}
.fx-wish.fx-in{transform:none;opacity:1}
.fx-bhai{position:relative;flex:none;width:74px;height:94px;animation:fx-bob 3.2s ease-in-out infinite}
.fx-bhai img{width:74px;height:auto;display:block;filter:drop-shadow(0 10px 14px rgba(60,30,0,.28))}
.fx-prop{position:absolute;left:-14px;bottom:2px;font-size:30px;line-height:1;filter:drop-shadow(0 0 10px var(--fx-a,#ffb347))}
.fx-diya{position:absolute;left:-16px;bottom:4px;width:36px;height:28px}
.fx-flame{position:absolute;left:-4px;bottom:24px;width:11px;height:19px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,#fff7c2 0 25%,#ffc93a 45%,#ff7a1a 75%,transparent 80%);
  box-shadow:0 0 16px 7px rgba(255,170,40,.5);transform-origin:50% 100%;animation:fx-flicker .17s ease-in-out infinite alternate}
@keyframes fx-flicker{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.9,1.1) rotate(2deg)}}
@keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.fx-card{position:relative;flex:1;min-width:0;color:#fff4e0;border-radius:22px 22px 6px 22px;padding:15px 16px 14px;overflow:hidden;
  background:var(--fx-card,linear-gradient(135deg,#2a1206,#5a1d0c 55%,#7a2a0e));
  box-shadow:0 22px 44px -16px rgba(40,10,0,.6),inset 0 0 0 1px rgba(255,210,140,.25)}
.fx-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px 100px at 100% 0%,var(--fx-sheen,rgba(255,190,70,.35)),transparent 70%)}
.fx-chip{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fx-a,#ffd27a);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.3em .75em;margin-bottom:8px}
.fx-card b{display:block;font-size:1.04rem;font-weight:800;letter-spacing:-.01em;color:var(--fx-a,#ffd27a);margin:0 26px 3px 0;line-height:1.3}
.fx-card p{margin:0;font-size:.86rem;font-weight:500;line-height:1.5;color:rgba(255,244,224,.88)}
.fx-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.fx-acts a,.fx-acts button{font:inherit;font-size:.8rem;font-weight:700;border-radius:999px;padding:.55em 1em;cursor:pointer;text-decoration:none;border:0;line-height:1.2}
.fx-share{background:#25D366;color:#fff}
.fx-get{background:rgba(255,255,255,.12);color:#fff4e0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fx-acts a:hover,.fx-acts button:hover{filter:brightness(1.08)}
.fx-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#ffe9c4;
  font-size:15px;line-height:26px;text-align:center;cursor:pointer;padding:0}
.fx-close:hover{background:rgba(255,255,255,.22)}
/* after a few seconds the card tucks away, leaving Bhai; tap Bhai to open it again */
.fx-card{transform-origin:100% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s}
.fx-wish.fx-mini .fx-card{transform:scale(.6);opacity:0;pointer-events:none}
.fx-wish.fx-mini{width:auto}
.fx-bhai{cursor:pointer}
.fx-wish.fx-mini .fx-bhai::after{content:"";position:absolute;left:50%;top:55%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;
  border:2px solid var(--fx-a,#ffd27a);opacity:0;animation:fx-ping 2.4s ease-out infinite;pointer-events:none}
@keyframes fx-ping{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.35);opacity:0}}
@media(max-width:560px){
  .fx-wish{left:10px;right:10px;bottom:10px;width:auto;flex-direction:row}
  .fx-bhai{width:56px;height:74px}.fx-bhai img{width:56px}.fx-prop{font-size:24px;left:auto;right:-10px}
  .fx-diya{left:auto;right:-14px}.fx-flame{left:auto;right:-2px}
  .fx-card{border-radius:22px 22px 22px 6px;padding:13px 14px 12px;transform-origin:0 100%}
  .fx-wish.fx-mini{right:auto}.fx-card b{font-size:.95rem}.fx-card p{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .fx-led,.fx-lantern,.fx-bat,.fx-bhai,.fx-flame,.fx-bat svg{animation:none!important}
  .fx-bat,.fx-sky{display:none}
}