/* SPORTONOM visual effects (see assets/js/effects.js). Decorative only. */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 22; }

/* Lightning flash (monsoon) */
.fx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 23; background: rgba(205,225,255,.9); opacity: 0; }
.fx-flash.go { animation: fx-flash 1.1s ease-out; }
@keyframes fx-flash { 0% { opacity: 0; } 6% { opacity: .38; } 12% { opacity: .04; } 20% { opacity: .3; } 100% { opacity: 0; } }

/* Greeting ribbon (festivals) */
.fx-ribbon { position: relative; z-index: 24; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .45rem 2.6rem; text-align: center; font-weight: 700; font-size: .86rem; letter-spacing: .02em; color: #fff; }
.fx-ribbon-pk { background: linear-gradient(90deg, #0b6b3a, #1fa35a 50%, #0b6b3a); }
.fx-ribbon-gold { background: linear-gradient(90deg, #7a5a00, #c99700 50%, #7a5a00); }
.fx-ribbon-ny { background: linear-gradient(90deg, #6a1b9a, #1685ff 50%, #21d5ba); }
.fx-ribbon-close { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: rgba(255,255,255,.18); color: #fff; width: 1.6rem; height: 1.6rem; border-radius: 50%; line-height: 1; cursor: pointer; }
.fx-ribbon-close:hover { background: rgba(255,255,255,.32); }

/* Independence Day bunting */
.fx-bunting { position: fixed; top: 0; left: 0; right: 0; height: 34px; pointer-events: none; z-index: 23; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='34' viewBox='0 0 72 34'%3E%3Cpath d='M0 0h36L18 32z' fill='%231fa35a'/%3E%3Cpath d='M36 0h36L54 32z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x top left / 72px 34px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.25)); }

/* Ramzan lanterns */
.fx-lanterns { position: fixed; top: 0; left: 0; right: 0; height: 0; pointer-events: none; z-index: 23; }
.fx-lantern { position: absolute; top: 0; transform-origin: 50% -30px; animation: fx-swing 3.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,200,80,.7)); padding-top: var(--drop, 20px); }
.fx-lantern::before { content: ""; position: absolute; left: 50%; top: -30px; width: 1px; height: calc(var(--drop, 20px) + 8px); background: rgba(255,225,150,.55); }
@keyframes fx-swing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Floating sports balls (hero + footer) */
.hero, .site-footer { position: relative; }
.hero > .container, .site-footer > .container { position: relative; z-index: 1; }
.fx-balls { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-ball { position: absolute; opacity: .38; filter: saturate(.9) drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation: fx-float 9s ease-in-out infinite; will-change: transform; }
@keyframes fx-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(10px, -26px, 0) rotate(180deg); } }

/* Visitor on/off button + "why is it snowing?" chip */
.fx-dock { position: fixed; left: 14px; bottom: 14px; z-index: 26; display: flex; align-items: center; gap: .5rem; }
.fx-toggle { border: 1px solid rgba(255,255,255,.18); background: rgba(7,17,31,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; line-height: 1; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.3); transition: transform .15s ease, opacity .15s ease; }
.fx-toggle { width: 42px; height: 42px; border-radius: 50%; font-size: 1.15rem; }
.fx-toggle:hover { transform: scale(1.06); }
.fx-toggle.off { opacity: .55; filter: grayscale(1); }
@media (max-width: 991.98px) { .fx-dock { bottom: calc(4.3rem + env(safe-area-inset-bottom) + 10px); } .fx-toggle { width: 38px; height: 38px; font-size: 1rem; } }

/* Gentle seasonal tint on the page edge (no layout impact) */
html[data-fx="winter"] body::after, html[data-fx="monsoon"] body::after, html[data-fx="summer"] body::after, html[data-fx="autumn"] body::after, html[data-fx="spring"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 21;
}
html[data-fx="winter"] body::after { box-shadow: inset 0 0 120px rgba(160,205,255,.16); }
html[data-fx="monsoon"] body::after { box-shadow: inset 0 0 140px rgba(40,90,150,.22); }
html[data-fx="summer"] body::after { box-shadow: inset 0 0 140px rgba(255,170,60,.13); }
html[data-fx="autumn"] body::after { box-shadow: inset 0 0 130px rgba(210,120,40,.13); }
html[data-fx="spring"] body::after { box-shadow: inset 0 0 130px rgba(255,150,190,.12); }

@media (prefers-reduced-motion: reduce) {
  .fx-ball, .fx-lantern, .fx-flash.go { animation: none !important; }
}
@media print { .fx-canvas, .fx-flash, .fx-ribbon, .fx-bunting, .fx-lanterns, .fx-balls, .fx-dock, .fx-notice { display: none !important; } }

/* Hang lanterns / bunting just below the greeting ribbon */
html[data-fx="ramzan"] .fx-lanterns, html[data-fx="independence"] .fx-bunting { top: 36px; }

/* Season message: tells visitors why snow / rain / leaves are falling */
.fx-notice { position: fixed; left: 50%; width: max-content; top: var(--fx-notice-top, 90px); z-index: 1040; display: flex; align-items: center; gap: .6rem; max-width: min(560px, calc(100vw - 24px)); padding: .65rem .8rem .65rem 1rem; border-radius: 999px; color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.35; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 14px 36px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translate(-50%, -26px); transition: opacity .45s ease, transform .45s ease; background: rgba(22,133,255,.82); }
.fx-notice.show { opacity: 1; transform: translate(-50%, 0); }
.fx-notice-winter { background: linear-gradient(120deg, rgba(40,120,220,.88), rgba(120,190,255,.82)); }
.fx-notice-autumn { background: linear-gradient(120deg, rgba(190,90,25,.9), rgba(225,150,50,.85)); }
.fx-notice-spring { background: linear-gradient(120deg, rgba(214,70,130,.88), rgba(255,150,190,.82)); }
.fx-notice-monsoon { background: linear-gradient(120deg, rgba(30,70,130,.92), rgba(70,130,200,.85)); }
.fx-notice-summer { background: linear-gradient(120deg, rgba(230,120,20,.9), rgba(255,190,70,.85)); }
.fx-notice-close { flex: none; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff; line-height: 1; cursor: pointer; }
.fx-notice-close:hover { background: rgba(255,255,255,.4); }
@media (max-width: 575.98px) { .fx-notice { border-radius: 18px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) { .fx-notice { transition: none; } }