/* Seasonal wordmark art (realistic raster, aria-hidden) and a thin bottom strip. No motion when reduced-motion is set.
   Layers inside the wordmark, back to front: turkey tail (0), MOTORPOOL text (1), santa hat / turkey face (2), THE (3), pilgrim hat (4). */
.has-season-art{position:relative;overflow:visible;isolation:isolate}
header a.wm.has-season-art,html[data-season]:not([data-season="none"]) header .wm,html[data-season]:not([data-season="none"]) header a.wm{overflow:visible;text-overflow:clip}
.has-season-art .mark-mp{position:relative;z-index:1}
.has-season-art .season-the{position:relative;z-index:3}
.season-art{position:absolute;left:0;top:0;width:1em;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;display:block;margin:0}
.season-tail{z-index:0}
.season-santa,.season-face,.season-eye,.season-beak{z-index:2}
.season-beak{z-index:3}
.season-eye{border-radius:0;max-height:none}
.season-pilgrim{z-index:4}
.season-santa,.season-pilgrim{filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
header.top,header.lg-top,header.top .mark,header.lg-top .lg-mark,header,header .wrap{overflow:visible}

.season-ground{position:fixed;left:0;right:0;height:88px;pointer-events:none;overflow:hidden;z-index:4}
body.has-tabbar .season-ground{bottom:calc(64px + env(safe-area-inset-bottom, 0px));z-index:4}
body:not(.has-tabbar) .season-ground{bottom:0;z-index:15}
.season-bank{position:absolute;left:0;right:0;bottom:0;height:22px;line-height:0}
.season-bank svg{display:block;width:100%;height:100%}
html[data-season="thanksgiving"] .season-ground{height:34px}
html[data-season="thanksgiving"] .season-bank{height:30px}
.season-leaves{display:block;width:100%;height:100%;background:url(/season-art/tg-leaves.webp) center bottom/auto 100% repeat-x}
@media (min-width:961px){html[data-season="thanksgiving"] .season-ground{height:42px}html[data-season="thanksgiving"] .season-bank{height:38px}}
html[data-season="memorial"] .season-ground{height:12px}
html[data-season="memorial"] .season-bank{height:5px}
html[data-season="veterans"] .season-ground{height:16px}
html[data-season="veterans"] .season-bank{height:10px}

.season-flake,.season-spark{position:absolute;bottom:22px;pointer-events:none}
.season-flake{border-radius:50%;background:#F4ECD8;opacity:.4;animation:season-fall linear infinite}
.season-spark{background:#C29A4A;opacity:.55;transform:rotate(45deg);animation:season-twinkle ease-in-out infinite}
html[data-season="july4"] .season-spark:nth-child(3n){background:#F4ECD8}
html[data-season="july4"] .season-spark:nth-child(3n+1){background:#B93A23}
html[data-season="july4"] .season-spark:nth-child(3n+2){background:#166F95}

@keyframes season-fall{
  0%{transform:translateY(-72px) translateX(0);opacity:0}
  12%{opacity:.4}
  100%{transform:translateY(64px) translateX(10px);opacity:0}
}
@keyframes season-twinkle{
  0%,100%{opacity:.15;transform:rotate(45deg) scale(.8)}
  50%{opacity:.6;transform:rotate(45deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .season-float,.season-flake,.season-spark{display:none;animation:none}
}

html[data-season]:not([data-season="none"]) body.has-tabbar #main{
  padding-bottom:calc(var(--space-8, 32px) + 24px + env(safe-area-inset-bottom, 0px));
}
html[data-season]:not([data-season="none"]) body:not(.has-tabbar){
  padding-bottom:28px;
}

/* Christmas hat: bigger, tilted, tail and pom hang into a wider THE/M gap behind THE */
.season-santa{transform:rotate(-8deg);transform-origin:26% 78%}
.season-santa[src*="joined"]{transform-origin:26% 67.2%}
/* THE sits in front of the pom; a halo in the header color keeps the E's edges crisp over it */
header .wm.has-season-art{--season-halo:var(--olive,#2E3418)}
header.top .mark.has-season-art{--season-halo:var(--ground,#1B1E21)}
/* outline only on the E (over the tail and pom), and never on its right side, so no seam at the E/M join */
html[data-season="holiday"] .has-season-art .season-the-e{text-shadow:-1px 0 0 var(--season-halo,#1B1E21),0 1px 0 var(--season-halo,#1B1E21),-1px 1px 0 var(--season-halo,#1B1E21),0 -1px 0 var(--season-halo,#1B1E21),-1px -1px 0 var(--season-halo,#1B1E21)}
header img.season-art,.top img.season-art{display:block!important;border-radius:0!important}
html .has-season-art .season-the{margin-right:0}
/* app header: room above the cap for the hats so nothing is cut at the top edge */
html[data-season="holiday"] header.top,html[data-season="thanksgiving"] header.top{padding-top:calc(16px + env(safe-area-inset-top))}