/* Festive greetings on the dashboard banner (2026-10-07). SHARED FILE: the
   same copy lives in learner/css/festive.css and admin/css/festive.css. */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fx-on > .dash-banner-left, .fx-on > .dash-banner-right, .fx-on > .dash-banner-avatar-wrap { position: relative; z-index: 1; }
.fx-abs, .fx-row, .fx-sway, .fx-kite, .fx-star { position: absolute; }
.fx-row { display: flex; align-items: flex-end; }
.fx-chip { display: inline-block; font: 700 11px/1.2 'Roboto', sans-serif; letter-spacing: .8px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 8px; }
.fx-line { display: inline-flex; gap: 8px; align-items: center; background: rgba(255,255,255,.08); border-radius: 4px; padding: 7px 12px; margin: 6px 0; font-size: 13px; color: #ffffff; }
.fx-tribute { margin: 6px 0 8px; color: #ffffff; }
.fx-tribute-title { font-size: 16px; font-weight: 700; }
.fx-tribute-quote { font-size: 13px; font-style: italic; color: #d6dde1; margin-top: 2px; }
.fx-x { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border: 0; border-radius: 4px; background: rgba(255,255,255,.1); color: #d6dde1; font-size: 18px; line-height: 1; cursor: pointer; }
.fx-x:hover { background: rgba(255,255,255,.2); }

@keyframes fxFlick { 0%,100% { transform: scaleY(1); opacity: 1 } 40% { transform: scaleY(1.16); opacity: .85 } 70% { transform: scaleY(.92) } }
@keyframes fxGlow { 0%,100% { opacity: .3 } 50% { opacity: .65 } }
@keyframes fxTwinkle { 0%,100% { opacity: .15; transform: scale(.5) } 50% { opacity: 1; transform: scale(1) } }
@keyframes fxDrift { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-14px,10px) scale(1.12) } }
@keyframes fxPuff { 0% { transform: translate(0,0) scale(.3); opacity: 0 } 20% { opacity: .9 } 100% { transform: translate(var(--dx),var(--dy)) scale(1); opacity: 0 } }
@keyframes fxSway { 0%,100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } }
@keyframes fxFall { 0% { transform: translate(0,-20px) } 100% { transform: translate(var(--sx),320px) } }
@keyframes fxConfetti { 0% { transform: translate(0,-20px) rotate(0) } 100% { transform: translate(var(--sx),320px) rotate(var(--rot)) } }
@keyframes fxBlink { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes fxKite { 0%,100% { transform: translate(0,0) rotate(-6deg) } 50% { transform: translate(10px,-12px) rotate(6deg) } }
@keyframes fxWave { 0%,100% { transform: translateY(0) skewY(0) } 50% { transform: translateY(-4px) skewY(-1.5deg) } }
@keyframes fxSpin { to { transform: rotate(360deg) } }
@keyframes fxBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes fxBloom { 0%,100% { transform: scale(1) } 50% { transform: scale(1.04) } }
@keyframes fxClackL { 0%,100% { transform: rotate(-28deg) } 50% { transform: rotate(-8deg) } }
@keyframes fxClackR { 0%,100% { transform: rotate(28deg) } 50% { transform: rotate(8deg) } }
@keyframes fxRise { 0% { transform: translateY(0); opacity: 0 } 20% { opacity: .8 } 100% { transform: translateY(-120px); opacity: 0 } }
@keyframes fxDraw { 0% { stroke-dashoffset: 300 } 60%,100% { stroke-dashoffset: 0 } }

.fx-flame { transform-origin: 50% 100%; animation: fxFlick 1.4s ease-in-out infinite; }
.fx-halo, .fx-lamp { animation: fxGlow 2.4s ease-in-out infinite; }
.fx-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd56b; animation: fxTwinkle 2.6s ease-in-out infinite; }
.fx-gold { position: absolute; width: 3px; height: 3px; border-radius: 50%; animation: fxBlink 2.4s ease-in-out infinite; }
.fx-blob { position: absolute; border-radius: 50%; filter: blur(18px); opacity: .55; animation: fxDrift 7s ease-in-out infinite; }
.fx-puff { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: fxPuff 3.2s ease-out infinite; }
.fx-star { animation: fxTwinkle 2.8s ease-in-out infinite; }
.fx-sway { top: 0; transform-origin: 50% 0; animation: fxSway 3.4s ease-in-out infinite; }
.fx-flake { position: absolute; top: 0; border-radius: 50%; background: #ffffff; animation: fxFall linear infinite; }
.fx-bulb { position: absolute; width: 9px; height: 9px; border-radius: 50%; animation: fxBlink 1.6s ease-in-out infinite; }
.fx-confetti { position: absolute; top: 0; animation: fxConfetti linear infinite; }
.fx-year { transform: translateY(-50%); font: 700 64px 'Roboto', sans-serif; letter-spacing: 2px; color: rgba(242,210,122,.22); }
.fx-kite { transform-origin: 50% 100%; animation: fxKite 4s ease-in-out infinite; }
.fx-sun { animation: fxGlow 3s ease-in-out infinite; }
.fx-flag { width: 260px; transform: translateY(-50%); display: flex; flex-direction: column; }
.fx-band { height: 44px; animation: fxWave 4s ease-in-out infinite; }
.fx-chakra { animation: fxSpin 24s linear infinite; }
.fx-bob { animation: fxBob 2.6s ease-in-out infinite; }
.fx-turn { transform-origin: 110px 110px; animation: fxSpin 60s linear infinite; }
.fx-bloom { transform-origin: 110px 110px; animation: fxBloom 4s ease-in-out infinite; }
.fx-flag-tri { position: absolute; top: 0; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 28px solid #ff9f1c; }
.fx-dandiya { position: relative; width: 80px; height: 130px; }
.fx-stickL, .fx-stickR { position: absolute; top: 0; transform-origin: 50% 100%; }
.fx-stickL { left: 18px; animation: fxClackL 1.6s ease-in-out infinite; }
.fx-stickR { left: 50px; animation: fxClackR 1.6s ease-in-out infinite; }
.fx-mote { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffe08a; animation: fxRise 5s linear infinite; }
.fx-chalk { stroke-dasharray: 300; animation: fxDraw 5s ease-in-out infinite; }

/* Small screens: decoration fades back so text and numbers stay clear. */
@media (max-width: 760px) { .fx-layer { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .fx-layer *, .fx-layer { animation: none !important; }
  .fx-flake, .fx-confetti { display: none; }
}