/* Seasonal decorations. season.js sets the class on <html>.
   Overlays are pointer-events: none and absolutely positioned so they
   do not cover clicks or change layout. */

html.season-halloween,
html.season-thanksgiving,
html.season-christmas,
html.season-newyear,
html.season-july4 {
  --season-ink: #fff6ea;
}

html.season-halloween body {
  background-color: #120c16;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(255, 122, 24, .16), transparent 46%),
    radial-gradient(ellipse at 100% 0%, rgba(130, 60, 200, .18), transparent 44%);
}
html.season-thanksgiving body {
  background-color: #140e09;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(224, 140, 40, .16), transparent 48%),
    radial-gradient(ellipse at 100% 100%, rgba(140, 60, 20, .12), transparent 42%);
}
html.season-christmas body {
  background-color: #0e1412;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(40, 110, 70, .16), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(150, 36, 36, .1), transparent 42%);
}
html.season-newyear body {
  background-color: #101218;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(228, 197, 106, .14), transparent 46%),
    radial-gradient(ellipse at 0% 100%, rgba(180, 190, 210, .08), transparent 40%);
}
html.season-july4 body {
  background-color: #0c1020;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(200, 32, 46, .12), transparent 42%),
    radial-gradient(ellipse at 100% 0%, rgba(40, 70, 180, .16), transparent 46%);
}

html.season-halloween .parlor::after,
html.season-thanksgiving .parlor::after,
html.season-christmas .parlor::after,
html.season-newyear .parlor::after,
html.season-july4 .parlor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
html.season-halloween .parlor::after {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(255, 122, 24, .2), transparent 46%),
    radial-gradient(ellipse at 100% 80%, rgba(120, 50, 190, .16), transparent 48%);
}
html.season-thanksgiving .parlor::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(210, 130, 40, .18), transparent 52%);
}
html.season-christmas .parlor::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(30, 90, 60, .18), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(140, 30, 30, .1), transparent 42%);
}
html.season-newyear .parlor::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(228, 197, 106, .14), transparent 48%);
}
html.season-july4 .parlor::after {
  background:
    radial-gradient(ellipse at 0% 10%, rgba(200, 32, 46, .12), transparent 40%),
    radial-gradient(ellipse at 100% 0%, rgba(30, 60, 160, .18), transparent 46%);
}

html.season-halloween .glass { background-color: #16111c; }
html.season-thanksgiving .glass { background-color: #16110c; }
html.season-christmas .glass { background-color: #101614; }
html.season-newyear .glass { background-color: #12141a; }
html.season-july4 .glass { background-color: #10141e; }

/* Logo accent sits beside J·C and does not grow the link box. */
html.season-halloween .brand,
html.season-thanksgiving .brand,
html.season-christmas .brand,
html.season-newyear .brand,
html.season-july4 .brand,
html.season-halloween .plaque-mark,
html.season-thanksgiving .plaque-mark,
html.season-christmas .plaque-mark,
html.season-newyear .plaque-mark,
html.season-july4 .plaque-mark {
  position: relative;
}
html.season-halloween .brand::after,
html.season-thanksgiving .brand::after,
html.season-christmas .brand::after,
html.season-newyear .brand::after,
html.season-july4 .brand::after,
html.season-halloween .plaque-mark::after,
html.season-thanksgiving .plaque-mark::after,
html.season-christmas .plaque-mark::after,
html.season-newyear .plaque-mark::after,
html.season-july4 .plaque-mark::after {
  content: "";
  position: absolute;
  left: calc(100% + .28rem);
  top: 50%;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: -.85rem;
  pointer-events: none;
  background: var(--season-logo) center / contain no-repeat;
}
html.season-halloween .brand::after,
html.season-halloween .plaque-mark::after {
  filter: drop-shadow(0 0 4px rgba(255, 140, 40, .75));
}
html.season-christmas .brand::after { width: 1.85rem; height: 1.95rem; margin-top: -1.05rem; }

.season-nav-deco,
.season-nav-trim,
.season-nav-trim i,
.season-spider,
.season-web,
.season-accent,
.season-cutout,
.season-ledge,
.season-ribbon,
.season-rule,
.season-corners,
.season-foot,
.season-foot-trim,
.season-drift,
.season-fog,
.season-sky {
  pointer-events: none;
}

.season-nav-deco {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
}
.season-nav-trim,
.season-nav-trim i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 16px;
  background-image: var(--season-trim);
  background-repeat: repeat-x;
  background-size: var(--season-trim-size, 18px 16px);
  background-position: left bottom;
}
.season-nav-trim i { background-position: 12px bottom; }

html.season-christmas .season-nav-trim { animation: season-twinkle 1.7s ease-in-out infinite; }
html.season-christmas .season-nav-trim i { animation: season-twinkle 1.7s ease-in-out infinite reverse; }
html.season-newyear .season-nav-trim i { opacity: .85; }

@keyframes season-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

.season-spider {
  position: absolute;
  top: calc(100% - 1px);
  width: 18px;
  height: 34px;
  z-index: 5;
  transform-origin: 50% 0;
  animation: season-swing 3.4s ease-in-out infinite;
}
.season-spider svg { width: 18px; height: 34px; display: block; overflow: visible; }
.season-spider.b { animation-duration: 4.2s; animation-delay: -1.5s; }
@keyframes season-swing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(8deg); }
}

.season-web {
  position: absolute;
  top: calc(100% - 8px);
  width: 2.5rem;
  height: 2.5rem;
  z-index: 5;
  background: var(--season-corner) center / contain no-repeat;
}
.season-web.l { left: 0; }
.season-web.r { right: 0; transform: scaleX(-1); }

.season-rel { position: relative; }

.season-accent {
  position: absolute;
  top: .15rem;
  right: .3rem;
  width: 4.7rem;
  height: 4.7rem;
  z-index: 0;
}
.season-accent svg { width: 100%; height: 100%; display: block; overflow: visible; }
html.season-halloween .season-accent,
html.season-christmas .season-accent {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}

.season-cutout {
  position: absolute;
  z-index: 0;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}
.season-cutout svg { width: 100%; height: 100%; display: block; overflow: visible; }
.season-cutout.ghost { left: .35rem; top: .4rem; width: 1.7rem; height: 1.85rem; transform: rotate(-6deg); }
.season-cutout.cat { left: .2rem; top: 2.35rem; width: 1.85rem; height: 1.85rem; transform: rotate(4deg); }
.season-cutout.tree { left: .4rem; top: .45rem; width: 1.85rem; height: 2.1rem; }

.season-ledge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: 1.05rem;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  padding: 0 .4rem;
}
.season-ledge svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  overflow: visible;
}
html.season-halloween .season-ledge {
  animation: season-glow 2.8s ease-in-out infinite;
}
@keyframes season-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 140, 40, .75)); }
  50% { filter: drop-shadow(0 0 6px rgba(255, 196, 80, .95)); }
}

.season-ribbon {
  position: absolute;
  z-index: 5;
  left: 50%;
  user-select: none;
}
.season-ribbon.in-hero { top: 1.15rem; transform: translateX(-50%); }
html.season-halloween .season-ribbon.in-hero { transform: translateX(-50%) rotate(-1.5deg); }
.season-ribbon.in-page { transform: translateX(-50%); }
.nav.open .season-nav-deco { visibility: hidden; }

.season-ribbon span {
  display: inline-block;
  max-width: 92vw;
  padding: .42rem 1.05rem .46rem;
  font-family: "Josefin Sans", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.15;
  white-space: nowrap;
  color: #fff6ea;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
html.season-halloween .season-ribbon span {
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffe7a8;
  background: #1a0c16;
  text-shadow: 1.5px 0 #ff4d2e, -1.5px 0 #7a3cff;
  box-shadow: 3px 3px 0 #000;
  border: 2px solid #ff7a18;
  clip-path: none;
  border-radius: 2px;
}
html.season-thanksgiving .season-ribbon span {
  background: #8f3d12;
  color: #fff4df;
  border: 2px solid #e7c27a;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
html.season-christmas .season-ribbon span {
  font-family: "Pinyon Script", "Segoe Script", cursive;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: .2rem 1.15rem .55rem;
  background: #8f1d1d;
  color: #fff6e4;
  border: 2px solid #e4c56a;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
html.season-newyear .season-ribbon span {
  background: #141820;
  color: #f6e2a4;
  border: 2px solid #e4c56a;
  box-shadow: 0 0 12px rgba(228, 197, 106, .35);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
}
html.season-july4 .season-ribbon span {
  background: #1d2f6b;
  color: #fff;
  border: 2px solid #f4f1ea;
  box-shadow: 0 3px 0 #c8102e;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
}

.season-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  transform: translateY(-55%);
  z-index: 3;
  background-image: var(--season-rule);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 14px;
}

.season-card,
.season-edge { position: relative; }

html.season-halloween :is(.season-card, .season-edge) {
  border-color: #ff7a18;
  box-shadow: inset 0 0 0 1px rgba(168, 90, 255, .55), 0 0 14px rgba(255, 110, 30, .32), 0 0 16px rgba(120, 50, 200, .2);
}
html.season-halloween :is(.season-card, .season-edge):is(:hover, :focus-visible) {
  border-color: #ffc15e;
  box-shadow: inset 0 0 0 1px rgba(190, 120, 255, .65), 0 0 16px rgba(255, 140, 40, .4);
}
html.season-thanksgiving :is(.season-card, .season-edge) {
  border-color: #e0a04a;
  box-shadow: inset 0 0 0 1px rgba(224, 170, 80, .5), 0 0 14px rgba(196, 120, 36, .32);
}
html.season-thanksgiving :is(.season-card, .season-edge):is(:hover, :focus-visible) {
  border-color: #f0c27a;
  box-shadow: inset 0 0 0 1px rgba(240, 190, 100, .6), 0 0 16px rgba(210, 140, 40, .4);
}
html.season-christmas :is(.season-card, .season-edge) {
  border-color: rgba(198, 40, 40, .8);
  box-shadow: inset 0 0 0 1px rgba(46, 150, 80, .5), 0 0 12px rgba(180, 40, 40, .25);
}
html.season-christmas :is(.season-card, .season-edge):is(:hover, :focus-visible) {
  border-color: #e4c56a;
  box-shadow: inset 0 0 0 1px rgba(70, 170, 90, .6), 0 0 14px rgba(200, 50, 50, .32);
}
html.season-newyear :is(.season-card, .season-edge) {
  border-color: rgba(224, 190, 90, .85);
  box-shadow: inset 0 0 0 1px rgba(240, 220, 150, .45), 0 0 14px rgba(212, 175, 80, .35);
}
html.season-newyear :is(.season-card, .season-edge):is(:hover, :focus-visible) {
  border-color: #f6e2a4;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, .6), 0 0 16px rgba(228, 197, 106, .45);
}
html.season-july4 :is(.season-card, .season-edge) {
  border-color: rgba(200, 32, 46, .8);
  box-shadow: inset 0 0 0 1px rgba(60, 90, 190, .5), 0 0 12px rgba(200, 32, 46, .22);
}
html.season-july4 :is(.season-card, .season-edge):is(:hover, :focus-visible) {
  border-color: #f4f1ea;
  box-shadow: inset 0 0 0 1px rgba(80, 110, 210, .6), 0 0 14px rgba(200, 32, 46, .3);
}

.season-corners {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: var(--season-corner), var(--season-corner), var(--season-corner), var(--season-corner);
  background-repeat: no-repeat;
  background-size: 18px 18px, 18px 18px, 12px 12px, 12px 12px;
  background-position: 4px 4px, calc(100% - 4px) 4px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
}
html.season-july4 .season-corners {
  background-position: 4px 4px, calc(100% - 4px) 4px, 3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
}
html.season-july4 .season-corners,
html.season-newyear .season-corners {
  filter: drop-shadow(0 0 2px rgba(240, 208, 96, .35));
}

.season-foot,
.season-foot-trim,
.season-drift { position: absolute; left: 0; right: 0; pointer-events: none; }
.season-foot {
  top: 0;
  height: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  z-index: 2;
  padding: 0 .35rem;
}
.season-foot svg {
  width: 1.25rem;
  height: 1.4rem;
  display: block;
  overflow: visible;
  transform: translateY(3px);
}
html.season-halloween .season-foot svg { filter: drop-shadow(0 0 3px rgba(255, 140, 40, .55)); }
html.season-christmas .season-foot svg:first-child { width: 1.45rem; height: 1.65rem; }

.season-foot-trim {
  top: 0;
  height: 16px;
  transform: translateY(-100%);
  z-index: 2;
  background-image: var(--season-trim);
  background-repeat: repeat-x;
  background-size: var(--season-trim-size, 24px 16px);
}

.season-drift {
  top: 0;
  height: 8px;
  z-index: 2;
  background:
    radial-gradient(ellipse 16% 120% at 6% 120%, rgba(255, 252, 248, .95), transparent 72%),
    radial-gradient(ellipse 22% 130% at 24% 140%, rgba(255, 252, 248, .9), transparent 70%),
    radial-gradient(ellipse 18% 120% at 48% 130%, rgba(248, 252, 255, .92), transparent 72%),
    radial-gradient(ellipse 24% 140% at 72% 145%, rgba(255, 252, 248, .88), transparent 70%),
    radial-gradient(ellipse 16% 120% at 92% 120%, rgba(255, 252, 248, .92), transparent 72%);
}
.testcard > .season-drift { top: auto; bottom: 0; height: 9px; z-index: 4; }

.season-fog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.2rem;
  z-index: 4;
  background: linear-gradient(180deg, transparent 0%, rgba(180, 170, 200, .05) 42%, rgba(70, 40, 110, .2) 100%);
  overflow: hidden;
}
.season-fog::before {
  content: "";
  position: absolute;
  left: -20%;
  width: 160%;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 12%, rgba(230, 220, 245, .16) 18%, transparent 28% 46%);
  animation: season-fog 18s linear infinite;
}
@keyframes season-fog { to { transform: translateX(-16%); } }

.season-sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

@media (max-width: 480px) {
  .season-foot svg:nth-child(n+6) { display: none; }
  html.season-christmas .season-ribbon span { font-size: 23px; }
  .season-accent { width: 4.15rem; height: 4.15rem; }
  html.season-halloween .season-ribbon span {
    font-size: 13px;
    letter-spacing: .08em;
    padding: .34rem .7rem .38rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .season-nav-trim,
  .season-nav-trim i,
  .season-spider,
  .season-ledge,
  .season-fog::before { animation: none; }
  html.season-christmas .season-nav-trim,
  html.season-christmas .season-nav-trim i { opacity: 1; }
  html.season-halloween .season-ledge { filter: drop-shadow(0 0 4px rgba(255, 150, 40, .8)); }
}

html.reduce-motion .season-nav-trim,
html.reduce-motion .season-nav-trim i,
html.reduce-motion .season-spider,
html.reduce-motion .season-ledge,
html.reduce-motion .season-fog::before { animation: none; }
html.reduce-motion.season-christmas .season-nav-trim,
html.reduce-motion.season-christmas .season-nav-trim i { opacity: 1; }
html.reduce-motion.season-halloween .season-ledge { filter: drop-shadow(0 0 4px rgba(255, 150, 40, .8)); }