/* ============================================================================
   festive-logo.css — animated logo effects for each holiday season.
   ----------------------------------------------------------------------------
   Loaded only while a season is live (see config/festive.php). The <html>
   element carries the season:

     season-hw    Halloween        flickering pumpkin-orange / purple glow,
                                   little bats circling the menu logo
     season-xmas  Christmas        warm red-green-gold glow, gentle swing,
                                   twinkling snowflakes around the logo
     season-ny    Happy New Year   gold shimmer that cycles through firework
                                   colours, sparkles popping around the logo

   …and "logo-fx" when that season's "Logo effect" box is ticked.

   Only the brand logo is targeted (any image under /img/logo…), so payment
   logos such as gcash-logo.png are never touched. The animations use
   `filter`, `rotate` and `scale`, never `transform`, so the navbar's own
   hover-zoom keeps working on top of them.

   Everything stops for visitors who ask their device to reduce motion; they
   keep a still glow instead.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Sizing — the seasonal logos carry decorations around the badge, so they
   get a little more height to keep the name readable.
   ------------------------------------------------------------------------ */
[data-navbar] img[src*="logo-newyear"] { height: 62px !important; margin: -6px 0; }
footer img[src*="logo-newyear"]        { height: 6.25rem !important; }
.admin-sidebar img[src*="logo-newyear"]{ height: 4.25rem !important; }
@media (max-width: 640px) {
  [data-navbar] img[src*="logo-newyear"] { height: 54px !important; }
}

/* The anchor around the menu logo becomes the stage for the sparkles. */
html.logo-fx [data-navbar] a:has(> img[src*="/img/logo"]),
html.logo-fx .admin-sidebar a:has(> img[src*="/img/logo"]) {
  position: relative;
  isolation: isolate;
}

html.logo-fx img[src*="/img/logo"] {
  will-change: filter;
  transform-origin: 50% 0%;
}

/* ===========================================================================
   HALLOWEEN
   ======================================================================== */
html.season-hw.logo-fx img[src*="/img/logo"] {
  animation: fxl-hw-glow 4.2s ease-in-out infinite;
}
@keyframes fxl-hw-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(242,140,40,.55)) drop-shadow(0 0 14px rgba(242,140,40,.25)); }
  45%      { filter: drop-shadow(0 0 7px rgba(255,160,60,.85)) drop-shadow(0 0 22px rgba(122,68,184,.45)); }
  /* a quick candle-flicker */
  50%      { filter: drop-shadow(0 0 2px rgba(242,140,40,.35)) brightness(.88); }
  53%      { filter: drop-shadow(0 0 8px rgba(255,160,60,.9))  drop-shadow(0 0 24px rgba(122,68,184,.5)); }
  56%      { filter: drop-shadow(0 0 3px rgba(242,140,40,.4))  brightness(.92); }
  60%      { filter: drop-shadow(0 0 7px rgba(255,160,60,.8))  drop-shadow(0 0 20px rgba(122,68,184,.4)); }
}

/* Two small bats circling the menu logo. */
html.season-hw.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before,
html.season-hw.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after {
  content: "";
  position: absolute;
  width: 16px; height: 9px;
  top: 50%; left: 50%;
  pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'%3E%3Cpath fill='%231a1022' d='M16 6c1-2 2-3 2-3l1 3c3-3 8-4 13-2-3 1-5 4-5 7-2-2-5-2-6 1-1-1-3-1-5 1-2-2-4-2-5-1-1-3-4-3-6-1 0-3-2-6-5-7 5-2 10-1 13 2l1-3s1 1 2 3z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 3px rgba(242,140,40,.8));
  z-index: 2;
}
html.season-hw.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before {
  animation: fxl-bat-orbit 7s linear infinite;
}
html.season-hw.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after {
  animation: fxl-bat-orbit 9.5s linear infinite reverse;
  animation-delay: -3s;
  width: 12px; height: 7px;
}
@keyframes fxl-bat-orbit {
  0%   { translate: -60px -30px; scale: 1;   }
  25%  { translate:  55px -34px; scale: .8;  }
  50%  { translate:  64px  14px; scale: 1.1; }
  75%  { translate: -58px  18px; scale: .85; }
  100% { translate: -60px -30px; scale: 1;   }
}

/* ===========================================================================
   CHRISTMAS
   ======================================================================== */
html.season-xmas.logo-fx img[src*="/img/logo"] {
  animation:
    fxl-xmas-glow  5s ease-in-out infinite,
    fxl-xmas-swing 6s ease-in-out infinite;
}
@keyframes fxl-xmas-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(224,56,75,.55))  drop-shadow(0 0 16px rgba(212,175,55,.25)); }
  33%      { filter: drop-shadow(0 0 6px rgba(47,179,106,.6))  drop-shadow(0 0 18px rgba(212,175,55,.3));  }
  66%      { filter: drop-shadow(0 0 7px rgba(232,205,112,.75)) drop-shadow(0 0 20px rgba(224,56,75,.3));  }
}
@keyframes fxl-xmas-swing {
  0%, 100% { rotate: -1.4deg; }
  50%      { rotate:  1.4deg; }
}

/* Twinkling snowflakes either side of the menu logo. */
html.season-xmas.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before,
html.season-xmas.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after {
  content: "\2744";            /* ❄ */
  position: absolute;
  font-size: 13px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 12px rgba(160,210,255,.7);
  pointer-events: none;
  z-index: 2;
}
html.season-xmas.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before {
  top: -2px; left: -8px;
  animation: fxl-twinkle 2.6s ease-in-out infinite;
}
html.season-xmas.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after {
  bottom: -2px; right: -6px; font-size: 10px;
  animation: fxl-twinkle 3.1s ease-in-out infinite .9s;
}

/* ===========================================================================
   HAPPY NEW YEAR
   ======================================================================== */
html.season-ny.logo-fx img[src*="/img/logo"] {
  animation:
    fxl-ny-glow  6s linear infinite,
    fxl-ny-pulse 3s ease-in-out infinite;
}
@keyframes fxl-ny-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(245,208,107,.8))  drop-shadow(0 0 18px rgba(245,208,107,.35)) brightness(1.04); }
  25%      { filter: drop-shadow(0 0 6px rgba(255,111,181,.75)) drop-shadow(0 0 20px rgba(245,208,107,.3))  brightness(1.08); }
  50%      { filter: drop-shadow(0 0 7px rgba(94,230,208,.75))  drop-shadow(0 0 20px rgba(190,140,255,.3))  brightness(1.04); }
  75%      { filter: drop-shadow(0 0 6px rgba(190,140,255,.75)) drop-shadow(0 0 20px rgba(255,111,181,.3))  brightness(1.08); }
}
@keyframes fxl-ny-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.025; }
}

/* Sparkles popping around the menu logo. */
html.season-ny.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before,
html.season-ny.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after {
  content: "\2726";            /* ✦ */
  position: absolute;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
html.season-ny.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before {
  top: -4px; right: -8px; font-size: 14px;
  color: #F5D06B;
  text-shadow: 0 0 8px rgba(245,208,107,.95);
  animation: fxl-pop 1.9s ease-in-out infinite;
}
html.season-ny.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after {
  bottom: -2px; left: -8px; font-size: 11px;
  color: #FF6FB5;
  text-shadow: 0 0 8px rgba(255,111,181,.9);
  animation: fxl-pop 2.3s ease-in-out infinite 1s;
}

/* ===========================================================================
   SHARED
   ======================================================================== */
@keyframes fxl-twinkle {
  0%, 100% { opacity: .15; scale: .7; rotate: 0deg; }
  50%      { opacity: 1;   scale: 1.15; rotate: 90deg; }
}
@keyframes fxl-pop {
  0%, 60%, 100% { opacity: 0; scale: .3; rotate: 0deg; }
  70%           { opacity: 1; scale: 1.25; rotate: 45deg; }
  85%           { opacity: .7; scale: 1; rotate: 90deg; }
}

/* Reduced motion: a still glow, no movement, no sparkles. */
@media (prefers-reduced-motion: reduce) {
  html.logo-fx img[src*="/img/logo"] { animation: none !important; rotate: none; scale: none; }
  html.season-hw.logo-fx   img[src*="/img/logo"] { filter: drop-shadow(0 0 6px rgba(242,140,40,.6)); }
  html.season-xmas.logo-fx img[src*="/img/logo"] { filter: drop-shadow(0 0 6px rgba(224,56,75,.5)); }
  html.season-ny.logo-fx   img[src*="/img/logo"] { filter: drop-shadow(0 0 6px rgba(245,208,107,.7)); }
  html.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::before,
  html.logo-fx [data-navbar] a:has(> img[src*="/img/logo"])::after { display: none; }
}