/* Holiday decorations around the logo — see includes/holidays.php and Admin → Holidays.
   Loaded on the website only while a holiday is showing, and on the admin Holidays page. */
.brand-logo { position: relative; display: inline-flex; flex: none; isolation: isolate; }
.hol-deco { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hol-deco svg, .hol-deco span { position: absolute; display: block; }
.hol-easter .hol-deco, .hol-remember .hol-deco { z-index: auto; }
.hol-easter .hol-deco > svg, .hol-remember .hol-deco > svg { z-index: 2; }

/* Falling / rising particles behind the logo and name */
.hol-fx { position: absolute; left: -16px; right: -16px; top: -14px; bottom: -14px; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  transition: opacity 1.5s; }
.hol-fx i { position: absolute; top: -12px; left: var(--x); width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: var(--c); opacity: .8;
  animation: hol-fall var(--d) linear var(--t) infinite; }
.hol-fx-xmas i { box-shadow: 0 0 3px rgba(120, 145, 170, .5); }
.hol-fx-newyear i, .hol-fx-independence i, .hol-fx-celebrate i { width: calc(4px * var(--s)); height: calc(8px * var(--s)); border-radius: 1px; }
.hol-fx-easter i { width: calc(7px * var(--s)); height: calc(5px * var(--s)); border-radius: 60% 0 60% 0; }
.hol-fx-teachers i, .hol-fx-eid i, .hol-fx-remember i { top: auto; bottom: -12px; width: calc(8px * var(--s)); height: calc(8px * var(--s)); border-radius: 0;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); animation-name: hol-rise; }
.hol-fx-remember i { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; clip-path: none; }
.hol-fx-hearts i { top: auto; bottom: -12px; width: calc(9px * var(--s)); height: calc(8px * var(--s)); border-radius: 0; animation-name: hol-rise;
  clip-path: path('M4.5 8C4.5 8 0 5 0 2.4 0 1 1 0 2.3 0 3.2 0 4 .6 4.5 1.4 5 .6 5.8 0 6.7 0 8 0 9 1 9 2.4 9 5 4.5 8 4.5 8Z'); }
@keyframes hol-fall { from { transform: translate3d(0, 0, 0) rotate(0); } to { transform: translate3d(var(--dx), 125px, 0) rotate(540deg); } }
@keyframes hol-rise { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 20% { opacity: .95; } 100% { transform: translate3d(var(--dx), -120px, 0) scale(1.1); opacity: 0; } }

/* Christmas */
.hol-hat { width: 38px; top: -18px; left: -13px; transform: rotate(-22deg); transform-origin: 40% 85%; animation: hol-wobble 3.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.hol-holly { width: 24px; right: -7px; bottom: -5px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
@keyframes hol-wobble { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-14deg); } }

/* New Year */
.hol-burst { width: 30px; opacity: 0; animation: hol-burst 2.8s ease-out infinite; }
.hol-burst.b1 { top: -15px; left: -16px; }
.hol-burst.b2 { width: 24px; top: -18px; left: 55%; animation-delay: .9s; }
.hol-burst.b3 { width: 26px; bottom: -12px; left: -18px; animation-delay: 1.8s; }
@keyframes hol-burst { 0% { transform: scale(.15); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
.hol-deco .hol-year { right: -9px; bottom: -6px; padding: .2rem .38rem; border-radius: 999px; background: linear-gradient(135deg, #e3c078, #c89a3f); color: #3b0a15;
  font: 700 .62rem/1 var(--sans, 'DM Sans', system-ui, sans-serif); letter-spacing: .04em; box-shadow: 0 3px 8px -3px rgba(59, 10, 21, .5); animation: hol-pop 2.8s ease-in-out infinite; }
@keyframes hol-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Uganda flag */
.hol-flag { width: 34px; top: -17px; left: -19px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.hol-cloth { transform-box: fill-box; transform-origin: 0 50%; animation: hol-wave 1.5s ease-in-out infinite alternate; }
@keyframes hol-wave { from { transform: skewY(-5deg) scaleX(.93); } to { transform: skewY(4deg) scaleX(1); } }
.hol-deco .hol-ribbon { left: 50%; bottom: -6px; width: 42px; height: 6px; margin-left: -21px; border-radius: 3px;
  background: linear-gradient(90deg, #111 0 33.3%, #fcdc04 0 66.6%, #d90000 0); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .35); }

/* Easter */
.hol-deco .hol-rays { inset: -16px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(227, 192, 120, .55) 0 7deg, transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent);
  animation: hol-spin 40s linear infinite; }
.hol-egg { width: 14px; bottom: -7px; animation: hol-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.hol-egg.e1 { left: -8px; --r: -16deg; }
.hol-egg.e2 { left: 50%; margin-left: -7px; bottom: -10px; --r: 0deg; animation-delay: .4s; }
.hol-egg.e3 { right: -8px; --r: 16deg; animation-delay: .8s; }
@keyframes hol-bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-3px) rotate(var(--r, 0deg)); } }
@keyframes hol-spin { to { transform: rotate(360deg); } }

/* Teachers */
.hol-apple { width: 22px; top: -11px; left: -12px; animation: hol-bob 2.8s ease-in-out infinite; --r: -12deg; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.hol-pencil { width: 34px; bottom: -6px; left: -16px; transform: rotate(-18deg); transform-origin: 80% 50%; animation: hol-write 2.2s ease-in-out infinite; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
@keyframes hol-write { 0%, 100% { transform: rotate(-18deg) translateX(0); } 50% { transform: rotate(-12deg) translateX(2px); } }

/* Celebration — balloons */
.hol-balloon { width: 14px; animation: hol-float 3.2s ease-in-out infinite; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.hol-balloon.l1 { width: 13px; top: -14px; left: -13px; --r: -12deg; }
.hol-balloon.l2 { width: 14px; top: -19px; left: -2px; --r: 4deg; animation-delay: .6s; }
.hol-balloon.l3 { width: 11px; top: -6px; left: -21px; --r: -20deg; animation-delay: 1.2s; }
@keyframes hol-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-5px) rotate(calc(var(--r, 0deg) + 5deg)); } }

/* Hearts */
.hol-heart { animation: hol-beat 1.8s ease-in-out infinite; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.hol-heart.h1 { width: 16px; top: -10px; left: -13px; --r: -15deg; }
.hol-heart.h2 { width: 11px; top: -15px; left: 48%; --r: 10deg; animation-delay: .3s; }
.hol-heart.h3 { width: 12px; bottom: -5px; left: -14px; --r: -8deg; animation-delay: .6s; }
@keyframes hol-beat { 0%, 100% { transform: scale(1) rotate(var(--r, 0deg)); } 15% { transform: scale(1.2) rotate(var(--r, 0deg)); } 30% { transform: scale(1) rotate(var(--r, 0deg)); } 45% { transform: scale(1.12) rotate(var(--r, 0deg)); } }

/* Eid */
.hol-moon { width: 24px; top: -14px; left: -14px; animation: hol-float 4s ease-in-out infinite; --r: -10deg; filter: drop-shadow(0 0 4px rgba(227, 192, 120, .7)); }
.hol-lantern { width: 13px; bottom: -10px; left: -17px; transform-origin: 50% 0; animation: hol-swing 3s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 213, 79, .6)); }
.hol-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: hol-flicker .9s ease-in-out infinite alternate; }
@keyframes hol-flicker { from { transform: scale(1, 1); opacity: 1; } to { transform: scale(.88, 1.08); opacity: .82; } }

/* Remembrance — candle */
.hol-candle { width: 13px; bottom: -6px; left: -15px; filter: drop-shadow(0 0 5px rgba(255, 179, 0, .55)); }
.hol-deco .hol-glow { inset: -12px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 213, 79, .45), transparent);
  animation: hol-pulse 3.5s ease-in-out infinite; }
@keyframes hol-pulse { 0%, 100% { opacity: .6; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }

/* Greeting tag hanging under the header logo */
.hol-tag { position: absolute; top: calc(100% + 12px); left: -6px; z-index: 5; white-space: nowrap; pointer-events: none;
  padding: .34rem .7rem; border-radius: 999px; border: 1px solid #e3c078; background: #6b1127; color: #fff;
  font: 600 .72rem/1.2 var(--sans, 'DM Sans', system-ui, sans-serif); letter-spacing: .01em; box-shadow: 0 8px 18px -10px rgba(59, 10, 21, .7);
  transform-origin: 26px -12px; animation: hol-tag-in .6s .5s cubic-bezier(.2, .8, .2, 1.2) both, hol-swing 5s 1.2s ease-in-out infinite;
  transition: opacity .25s, visibility .25s; }
.hol-tag::before { content: ""; position: absolute; top: -5px; left: 22px; width: 8px; height: 8px; background: inherit; border-left: inherit; border-top: inherit; transform: rotate(45deg); }
.hol-xmas .hol-tag { background: #b71c1c; border-color: #fff; }
.hol-independence .hol-tag { background: #111; color: #fcdc04; border-color: #d90000; }
.hol-easter .hol-tag { background: #fffaf0; color: #6b1127; }
.hol-celebrate .hol-tag { background: #1e3a8a; border-color: #fdd835; }
.hol-hearts .hol-tag { background: #ad1457; border-color: #f8bbd0; }
.hol-eid .hol-tag { background: #14532d; color: #fff3c4; }
.hol-remember .hol-tag { background: #2b2b2b; color: #f5d78e; }
.site-header.is-scrolled .hol-tag { opacity: 0; visibility: hidden; }
@keyframes hol-tag-in { from { opacity: 0; transform: translateY(-8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hol-swing { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-1.6deg); } }
.hol-lantern { animation-name: hol-lamp; }
@keyframes hol-lamp { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Coloured line under the header */
.holiday-line .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; transition: opacity 1.2s;
  background: linear-gradient(90deg, #6b1127, #c89a3f, #e3c078, #c89a3f, #6b1127) 0 0 / 200% 100%; animation: hol-shimmer 6s linear infinite; }
.holiday-independence.holiday-line .site-header::after { background: linear-gradient(90deg, #111 0 33.3%, #fcdc04 0 66.6%, #d90000 0); animation: none; }
.holiday-xmas.holiday-line .site-header::after { background: radial-gradient(circle, #e53935 0 1.6px, transparent 2px) 0 0 / 24px 4px, radial-gradient(circle, #43a047 0 1.6px, transparent 2px) 12px 0 / 24px 4px, #f4efe6;
  height: 4px; bottom: -4px; animation: hol-twinkle 1.6s steps(2) infinite; }
.holiday-easter.holiday-line .site-header::after { background: linear-gradient(90deg, #f4b6c2, #f6d776, #b5d8a6, #b8c7f0, #f4b6c2); animation: none; }
.holiday-celebrate.holiday-line .site-header::after { background: linear-gradient(90deg, #e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935) 0 0 / 200% 100%; }
.holiday-hearts.holiday-line .site-header::after { background: linear-gradient(90deg, #f8bbd0, #e53950, #ad1457, #e53950, #f8bbd0) 0 0 / 200% 100%; }
.holiday-eid.holiday-line .site-header::after { background: linear-gradient(90deg, #14532d, #c89a3f, #e3c078, #c89a3f, #14532d) 0 0 / 200% 100%; }
.holiday-remember.holiday-line .site-header::after { background: #2b2b2b; animation: none; }
@keyframes hol-twinkle { 50% { filter: brightness(1.5) saturate(1.3); } }
@keyframes hol-shimmer { to { background-position: -200% 0; } }

/* After the set animation time (data-hol-anim on <body>, see main.js) */
.hol-done .hol-deco *, .hol-done .hol-tag, .hol-done .site-header::after { animation: none !important; }
.hol-done .hol-burst { opacity: 1; }
.hol-done .hol-fx { opacity: 0; }
.hol-gone .hol-deco, .hol-gone .hol-fx, .hol-gone .hol-tag { opacity: 0; visibility: hidden; transition: opacity 1.2s, visibility 1.2s; }
.hol-gone .site-header::after { opacity: 0; }

@media (max-width: 640px) {
  .hol-tag { font-size: .66rem; padding: .28rem .6rem; top: calc(100% + 10px); }
  .hol-hat { width: 32px; top: -15px; left: -11px; }
  .hol-flag { width: 28px; left: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hol-fx { display: none; }
  .hol *, .hol-tag, .holiday-line .site-header::after { animation: none !important; }
  .hol-burst { opacity: 1; }
}