/*
 * Seasonal Halloween header (October only). Linked from
 * resources/views/partials/new_nav_desktop2.blade.php, so it reaches every
 * Laravel and CMS page that renders the shared header.
 * Ported from WishDesk: SWAC client/src/components/layout/halloween-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 (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");
}

/* ---- 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; }
}

/* ---- 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 lit and still. */
.sw-hw-paused .sw-hw-motion,
.sw-hw-paused .nav-link--has-halloween-icon::after {
  animation: none !important;
}

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

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

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

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