/*
 * Seasonal header: the Halloween item (October) and the Holiday item (October
 * through December). Linked from
 * resources/views/partials/new_nav_desktop2.blade.php while either is in
 * season, so it reaches every Laravel and CMS page that renders the shared
 * header.
 * Ported from WishDesk: SWAC client/src/components/layout/halloween-nav.css
 * and holiday-nav.css.
 *
 * One 38s cycle that repeats while the page is open:
 *   1s      the witch takes off and crosses in 6.4s
 *   +10s    pause
 *   17.4s   three bats cross, staggered 0.7s apart, about 11.5s in all
 *   +10s    pause, then the witch again
 * Every flight shares the 38s duration, so keyframe percentages are seconds / 38.
 *
 * Nothing moves until <html> has .sw-hw-can-pause, which the pause control adds
 * once it is in the footer. A page without that control keeps a lit, still
 * lantern and tree (WCAG 2.2.2).
 */

:root {
  --sw-hw-pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 6.6 L11.4 3.9 C11.5 3 12.3 2.4 13.3 2.6 L13.6 3.5 C12.9 3.6 12.7 4.1 12.7 4.7 L12.9 6.6 Z' fill='%235E6B2D'/%3E%3Cellipse cx='7.4' cy='14.2' rx='6.2' ry='7.4' fill='%23D9601C'/%3E%3Cellipse cx='16.6' cy='14.2' rx='6.2' ry='7.4' fill='%23D9601C'/%3E%3Cellipse cx='12' cy='14.2' rx='5.4' ry='8' fill='%23EB7A2E'/%3E%3Cg fill='%236A2A0C'%3E%3Cpolygon points='6.6,12.6 9.9,12.6 8.25,9.9'/%3E%3Cpolygon points='14.1,12.6 17.4,12.6 15.75,9.9'/%3E%3Cpath d='M6.4 15.2 L17.6 15.2 L16.4 18.2 L14.7 16.9 L12 18.9 L9.3 16.9 L7.6 18.2 Z'/%3E%3C/g%3E%3C/svg%3E");
  --sw-hw-pumpkin-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23FFD45C'%3E%3Cpolygon points='6.6,12.6 9.9,12.6 8.25,9.9'/%3E%3Cpolygon points='14.1,12.6 17.4,12.6 15.75,9.9'/%3E%3Cpath d='M6.4 15.2 L17.6 15.2 L16.4 18.2 L14.7 16.9 L12 18.9 L9.3 16.9 L7.6 18.2 Z'/%3E%3C/g%3E%3C/svg%3E");
  --sw-holiday-tree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='14' y='25' width='4' height='5' rx='.8' fill='%231b5a5e'/%3E%3Cpath d='M16 5 8 15h4L5 23h5l-5 5h22l-5-5h5l-7-8h4Z' fill='%231b5a5e'/%3E%3Cpath d='m16 5-8 10h4l-7 8h5l-5 5h11Z' fill='%23339966'/%3E%3Cpath d='M11 16c3 2 6 3 11 3M9 23c4 2 8 2 14 1' fill='none' stroke='%2366cc99' stroke-width='.7' opacity='.65'/%3E%3Cpath d='m16 1.5 1.3 2.7 3 .4-2.2 2.1.5 3-2.6-1.4-2.6 1.4.5-3-2.2-2.1 3-.4Z' fill='%23ffd580'/%3E%3Ccircle cx='17' cy='22' r='1' fill='%23d2232a'/%3E%3Ccircle cx='13.8' cy='26.2' r='.9' fill='%23d2232a'/%3E%3C/svg%3E");
  --sw-holiday-tree-lights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23ffd580'%3E%3Ccircle cx='13.3' cy='13' r='2.3' opacity='.2'/%3E%3Ccircle cx='13.3' cy='13' r='1.35'/%3E%3Ccircle cx='13.3' cy='13' r='.65' fill='%23FFFFFF'/%3E%3Ccircle cx='19' cy='17' r='2.3' opacity='.2'/%3E%3Ccircle cx='19' cy='17' r='1.35'/%3E%3Ccircle cx='19' cy='17' r='.65' fill='%23FFFFFF'/%3E%3Ccircle cx='11' cy='21.5' r='2.3' opacity='.2'/%3E%3Ccircle cx='11' cy='21.5' r='1.35'/%3E%3Ccircle cx='11' cy='21.5' r='.65' fill='%23FFFFFF'/%3E%3Ccircle cx='21.5' cy='25.5' r='2.3' opacity='.2'/%3E%3Ccircle cx='21.5' cy='25.5' r='1.35'/%3E%3Ccircle cx='21.5' cy='25.5' r='.65' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Lantern icon: add the modifier class to a nav link ---- */

.sugarwish-desktop-nav a.nav-link.nav-link--has-halloween-icon,
.sugarwish-mobile-menu a.primary-nav-link.primary-nav-link--has-halloween-icon {
  position: relative;
  padding-left: 44px;
  white-space: nowrap;
}

/* The pumpkin with its carved face, on a 34px box that also holds the glow. */
.nav-link--has-halloween-icon::before,
.primary-nav-link--has-halloween-icon::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -15px;
  background:
    var(--sw-hw-pumpkin) 6px 4px / 22px 22px no-repeat,
    radial-gradient(circle, rgba(255, 196, 80, 0.28) 0%, rgba(255, 196, 80, 0) 65%);
  pointer-events: none;
}

/* The candle-lit face over the carved one. Its opacity is what flickers. */
.nav-link--has-halloween-icon::after,
.primary-nav-link--has-halloween-icon::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--sw-hw-pumpkin-lit) center / 22px 22px no-repeat;
  pointer-events: none;
}

/* Optical centring against the desktop label's cap height. */
.nav-link--has-halloween-icon::before,
.nav-link--has-halloween-icon::after {
  top: 45%;
}

@media screen and (min-width: 1023.5px) {
  .sw-hw-can-pause .nav-link--has-halloween-icon::after {
    animation: sw-hw-flicker 3.1s linear infinite;
  }

  /* The candle catches a draught while the link is hovered. */
  .sw-hw-can-pause .nav-link--has-halloween-icon:hover::after {
    animation-duration: 1.3s;
  }
}

@keyframes sw-hw-flicker {
  0% { opacity: 1; }
  6% { opacity: 0.82; }
  9% { opacity: 1; }
  21% { opacity: 0.9; }
  24% { opacity: 0.7; }
  27% { opacity: 1; }
  46% { opacity: 0.86; }
  49% { opacity: 1; }
  63% { opacity: 0.76; }
  66% { opacity: 0.95; }
  82% { opacity: 0.88; }
  85% { opacity: 1; }
  100% { opacity: 1; }
}

/* ---- Holiday tree icon: add the modifier class to a nav link ---- */

.sugarwish-desktop-nav a.nav-link.nav-link--has-holiday-icon,
.sugarwish-mobile-menu a.primary-nav-link.primary-nav-link--has-holiday-icon {
  position: relative;
  padding-left: 44px;
  white-space: nowrap;
}

/* The tree and its star. ::after lays the lights over it, and their opacity
   is what twinkles. */
.nav-link--has-holiday-icon::before,
.nav-link--has-holiday-icon::after,
.primary-nav-link--has-holiday-icon::before,
.primary-nav-link--has-holiday-icon::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  pointer-events: none;
}

.nav-link--has-holiday-icon::before,
.primary-nav-link--has-holiday-icon::before {
  background: var(--sw-holiday-tree) center / 26px 26px no-repeat;
}

.nav-link--has-holiday-icon::after,
.primary-nav-link--has-holiday-icon::after {
  background: var(--sw-holiday-tree-lights) center / 26px 26px no-repeat;
  filter: drop-shadow(0 0 1px #ffd580);
}

/* Optical centring against the desktop label's cap height. */
.nav-link--has-holiday-icon::before,
.nav-link--has-holiday-icon::after {
  top: 45%;
}

@media screen and (min-width: 1023.5px) {
  .sw-hw-can-pause .nav-link--has-holiday-icon::after {
    animation: sw-holiday-twinkle 3.15s ease-in-out infinite;
  }
}

/* October carries both seasonal items, and with a long account name the row
   runs out of room below 1366px. The pumpkin and the tree then stand in for
   their words, which stay available to screen readers. */
@media screen and (min-width: 1023.5px) and (max-width: 1365.98px) {
  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) .nav-link__halloween-label,
  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) .nav-link__holiday-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) a.nav-link.nav-link--has-halloween-icon,
  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) a.nav-link.nav-link--has-holiday-icon {
    height: 46px;
    padding-right: 10px;
  }

  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) .nav-link--has-halloween-icon::before,
  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) .nav-link--has-halloween-icon::after,
  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) .nav-link--has-holiday-icon::before,
  .sugarwish-desktop-nav:has(.nav-link--has-halloween-icon) .nav-link--has-holiday-icon::after {
    top: 50%;
  }
}

@keyframes sw-holiday-twinkle {
  0%, 12%, 72%, 100% {
    opacity: 0.64;
    filter: drop-shadow(0 0 0.3px #ffd580);
  }
  35%, 44% {
    opacity: 1;
    filter: drop-shadow(0 0 1.8px #ffd580);
  }
}

/* ---- Sky lanes (desktop only) ---- */

/* The lanes need a positioned ancestor. top: 0 cancels the header's dormant
   top: -100px, which only takes effect once the nav is positioned. No z-index
   here or on the nav rows: that would trap the mega-menu and its overlay. */
.sugarwish-desktop-nav.sugarwish-desktop-nav--has-halloween-sky {
  position: relative;
  top: 0;
}

/* Lifts the logo over the witch lane without creating a stacking context. */
.sugarwish-desktop-nav--has-halloween-sky .sugarwish-primary-menu .logo {
  position: relative;
}

.sw-hw-sky {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}

@media screen and (min-width: 1023.5px) {
  .sw-hw-can-pause .sw-hw-sky {
    display: block;
  }
}

.sw-hw-witch-lane { height: 100%; }
.sw-hw-bat-lane { height: 220px; z-index: 2; }

/* ---- Witch ---- */

/* The track spans the lane so the flight is measured against the header's own
   width, not the viewport: the header stops growing at 1440px. */
.sw-hw-witch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  opacity: 0;
  animation: sw-hw-fly 38s linear 1s infinite both;
}

.sw-hw-bob {
  position: relative;
  display: block;
  width: 32px;
  height: 20px;
  animation: sw-hw-bob 1.2s ease-in-out infinite alternate;
}

.sw-hw-witch svg { display: block; overflow: visible; }

.sw-hw-twinkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #f5b83d;
  opacity: 0;
  animation: sw-hw-twinkle 0.9s ease-in-out infinite;
}

.sw-hw-twinkle-1 { left: -6px; top: 13px; width: 3px; height: 3px; }
.sw-hw-twinkle-2 { left: -13px; top: 16px; animation-delay: 0.3s; }
.sw-hw-twinkle-3 { left: -20px; top: 12px; animation-delay: 0.6s; }

/* 6.4s flight = 16.84% of the cycle, in an arc that peaks mid-header. */
@keyframes sw-hw-fly {
  0% { opacity: 0; transform: translate(-60px, 44px); }
  0.5% { opacity: 1; }
  4.2% { transform: translate(22%, 22px); }
  8.4% { transform: translate(48%, 8px); }
  12.6% { transform: translate(75%, 12px); }
  16.3% { opacity: 1; }
  16.84%, 100% { opacity: 0; transform: translate(calc(100% + 20px), 28px); }
}

@keyframes sw-hw-bob {
  0% { transform: translateY(-2px) rotate(-4deg); }
  100% { transform: translateY(2px) rotate(3deg); }
}

@keyframes sw-hw-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.9; transform: scale(1); }
}

/* ---- Bats ---- */

/* The outer span is the full-width track that carries the crossing,
   .sw-hw-bat-path the swoops, .sw-hw-wobble the tilt, and the wings flap on
   their own. */
.sw-hw-bat {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
}

.sw-hw-bat-path { display: block; }
.sw-hw-wobble { display: block; width: 100%; height: 100%; }
.sw-hw-bat svg { display: block; overflow: visible; }

.sw-hw-bat-a { top: 24px; animation: sw-hw-batx-a 38s linear 17.4s infinite both; }
.sw-hw-bat-b { top: 8px; animation: sw-hw-batx-b 38s linear 18.1s infinite both; }
.sw-hw-bat-c { top: 60px; animation: sw-hw-batx-c 38s linear 18.9s infinite both; }

.sw-hw-bat-a .sw-hw-bat-path { width: 24px; height: 11px; animation: sw-hw-baty-a 38s ease-in-out 17.4s infinite both; }
.sw-hw-bat-b .sw-hw-bat-path { width: 19px; height: 9px; animation: sw-hw-baty-b 38s ease-in-out 18.1s infinite both; }
.sw-hw-bat-c .sw-hw-bat-path { width: 22px; height: 10px; animation: sw-hw-baty-c 38s ease-in-out 18.9s infinite both; }

.sw-hw-wobble { animation: sw-hw-wobble 0.9s ease-in-out infinite alternate; }
.sw-hw-bat-b .sw-hw-wobble { animation-delay: 0.3s; }
.sw-hw-bat-c .sw-hw-wobble { animation-delay: 0.55s; }

.sw-hw-wing-l {
  transform-box: view-box;
  transform-origin: 14.4px 7.2px;
  animation: sw-hw-wing-l 0.18s ease-in-out infinite alternate;
}

.sw-hw-wing-r {
  transform-box: view-box;
  transform-origin: 17.6px 7.2px;
  animation: sw-hw-wing-r 0.18s ease-in-out infinite alternate;
}

.sw-hw-bat-b .sw-hw-wing-l,
.sw-hw-bat-b .sw-hw-wing-r { animation-duration: 0.15s; }
.sw-hw-bat-c .sw-hw-wing-l,
.sw-hw-bat-c .sw-hw-wing-r { animation-duration: 0.21s; }

/* Right to left, about 10s each (26.3% / 28.4% / 24.7% of the cycle). */
@keyframes sw-hw-batx-a {
  0% { opacity: 0; transform: translateX(calc(100% + 40px)); }
  0.8% { opacity: 1; }
  25.8% { opacity: 1; }
  26.3%, 100% { opacity: 0; transform: translateX(-60px); }
}

@keyframes sw-hw-batx-b {
  0% { opacity: 0; transform: translateX(calc(100% + 50px)); }
  0.8% { opacity: 1; }
  27.9% { opacity: 1; }
  28.4%, 100% { opacity: 0; transform: translateX(-60px); }
}

@keyframes sw-hw-batx-c {
  0% { opacity: 0; transform: translateX(calc(100% + 30px)); }
  0.8% { opacity: 1; }
  24.2% { opacity: 1; }
  24.7%, 100% { opacity: 0; transform: translateX(-60px); }
}

@keyframes sw-hw-baty-a {
  0% { transform: translateY(0); }
  6.3% { transform: translateY(24px); }
  13.2% { transform: translateY(-6px); }
  20% { transform: translateY(26px); }
  26.3%, 100% { transform: translateY(4px); }
}

@keyframes sw-hw-baty-b {
  0% { transform: translateY(0); }
  7.4% { transform: translateY(22px); }
  15.3% { transform: translateY(-4px); }
  22.6% { transform: translateY(28px); }
  28.4%, 100% { transform: translateY(8px); }
}

@keyframes sw-hw-baty-c {
  0% { transform: translateY(0); }
  5.8% { transform: translateY(26px); }
  12.6% { transform: translateY(2px); }
  18.9% { transform: translateY(30px); }
  24.7%, 100% { transform: translateY(12px); }
}

@keyframes sw-hw-wobble {
  0% { transform: rotate(-7deg); }
  50% { transform: rotate(5deg); }
  100% { transform: rotate(-3deg); }
}

/* Positive angles lift the left wing tip, negative lift the right. */
@keyframes sw-hw-wing-l {
  0% { transform: rotate(34deg) scaleX(0.8); }
  100% { transform: rotate(-26deg) scaleX(1); }
}

@keyframes sw-hw-wing-r {
  0% { transform: rotate(-34deg) scaleX(0.8); }
  100% { transform: rotate(26deg) scaleX(1); }
}

/* ---- Footer "Pause animations" control (WCAG 2.2.2) ---- */

/* Desktop only: below 1023.5px nothing in the header animates. */
.sw-hw-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

@media screen and (min-width: 1023.5px) {
  .sw-hw-toggle { display: inline; }
}

.sw-hw-toggle:hover { text-decoration: underline; }

.sw-hw-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px #E77477;
}

/* Paused by the visitor: no flights, lantern and tree lit and still. */
.sw-hw-paused .sw-hw-motion,
.sw-hw-paused .nav-link--has-halloween-icon::after,
.sw-hw-paused .nav-link--has-holiday-icon::after {
  animation: none !important;
}

.sw-hw-paused .sw-hw-sky { display: none !important; }

/* ---- Reduced motion: no flights, a lit and steady lantern and tree, no pause control ---- */

@media (prefers-reduced-motion: reduce) {
  .sw-hw-motion,
  .nav-link--has-halloween-icon::after,
  .nav-link--has-holiday-icon::after {
    animation: none !important;
  }

  .sw-hw-sky,
  .sw-hw-toggle { display: none !important; }
}