/* ==========================================================================
   Charlton Live Theme V2 - Halloween & Bonfire Night (24 October to 5 November)
   Loaded after seasons.css, only while this is the season.

   Charlton on a dark autumn night: brand red, logo and type untouched. The
   supporting palette goes to purple-black and parchment, and the season has
   two halves (cl_v2_halloween_phase()):

     cl-h-spooky   to 31 October - bats, a graveyard and a vampire, a spider
                   and cobwebs, pumpkin lanterns, bats on the headings.
     cl-h-bonfire-night  1 to 5 November - a bonfire (its switch is
                   cl-h-bonfire), and the fireworks get busier.

   All season: the pumpkin on the logo, the full moon, fireworks, the badge.
   Every decoration is scoped to its half and to its own switch.
   ========================================================================== */

/* ==========================================================================
   Palette
   ========================================================================== */

/* Same rule as Christmas: every pair tokens.css documents keeps AA, checked by
   tests/contrast.py rather than by eye. Ratios in the comments. */
body.cl-halloween {
	--cl-ink: #120d17;          /* white on it 19.17:1 · --cl-red-on-ink 4.83:1 */
	--cl-off: #f7f1e9;          /* --cl-body 11.45:1 · --cl-mut 5.37:1 */
	--cl-canvas: #e9dfd2;
	--cl-line: #e8dfd2;
	--cl-body: #3a3029;         /* on white 12.85:1 */
	--cl-mut: #6c6157;          /* on white 6.03:1 */

	--cl-dark-body: #bfb3a8;    /* on ink 9.34:1 */
	--cl-dark-meta: #91867b;    /* on ink 5.38:1 */
	--cl-nav: #ece3d9;          /* on ink 15.11:1 */
	--cl-footer-body: #d4c9be;  /* on ink 11.77:1 */
	--cl-draw: #c8beb3;         /* --cl-ink on it 10.47:1 */

	/* Pumpkin orange for the Halloween / Bonfire Night badge. Not --cl-amber,
	   which belongs to the Etsy button directly above in the header. */
	--cl-pumpkin: #ff8c26;      /* --cl-ink on it 8.24:1 */
	--cl-badge-bg: var(--cl-pumpkin);
}

/* ==========================================================================
   The pumpkin on the logo
   ========================================================================== */

/* Sitting on top of the logo the way the santa hat does, slightly off centre.
   Positioning is shared, in seasons.css; this is the artwork and its place. */
body.cl-halloween {
	--cl-topper-w: 34px;
	--cl-topper-h: 30px;
	--cl-topper-left: 9px;
	--cl-topper-top: -20px;
	--cl-topper-room: 14px;
}

body.cl-halloween.cl-topper-header .cl-brand::before,
body.cl-halloween.cl-topper-footer .cl-footer__lockup::before {
	background-image: url("../img/pumpkin.svg");
}

/* ==========================================================================
   The header: fireworks, lanterns, cobwebs, spider
   ========================================================================== */

/* A stacking context, so the lanterns and the spider paint over the section
   below the header rather than under it - as the Christmas lights do. */
body.cl-halloween .cl-header {
	position: relative;
	z-index: 3;
}

/* The fireworks canvas (assets/js/halloween.js) fills the header behind its
   content: the header's own dark band is the night sky. */
.cl-fireworks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

body.cl-halloween .cl-header__inner {
	position: relative;
	z-index: 1;
}

/* Pumpkin lanterns strung under the header - the fairy lights' slot. One
   layer: the glow is a drop-shadow on the lanterns themselves, flickering
   like candles rather than twinkling like bulbs. */
body.cl-halloween.cl-h-spooky.cl-h-lanterns .cl-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px;
	height: 30px;
	background: url("../img/lantern-string.svg") repeat-x left top / 120px 30px;
	pointer-events: none;
	animation: cl-candle 2.2s ease-in-out infinite alternate;
}

@keyframes cl-candle {
	0%   { filter: drop-shadow(0 0 2px rgba(255, 140, 38, .45)); }
	40%  { filter: drop-shadow(0 0 6px rgba(255, 160, 60, .85)); }
	70%  { filter: drop-shadow(0 0 3px rgba(255, 140, 38, .55)); }
	100% { filter: drop-shadow(0 0 7px rgba(255, 170, 70, .9)); }
}

/* Cobwebs in the header's two top corners - the page corners, not the
   content row's, so they never sit on the logo. Both on one pseudo-element. */
body.cl-halloween.cl-h-spooky.cl-h-webs .cl-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 64px;
	background:
		url("../img/web-left.svg") no-repeat left top / 64px 64px,
		url("../img/web-right.svg") no-repeat right top / 64px 64px;
	pointer-events: none;
	z-index: 0;
}

/* A spider on its thread below the header, bobbing - the baubles' slot. On
   the right, clear of the Etsy button and the burger, and gone on phones,
   where the header is mostly logo and burger. */
body.cl-halloween.cl-h-spooky.cl-h-spider .cl-header__inner::before {
	content: "";
	position: absolute;
	top: calc(100% - 26px);
	right: 22%;
	width: 24px;
	height: 64px;
	background: url("../img/spider.svg") no-repeat center top / contain;
	pointer-events: none;
	transform-origin: 50% 0;
	animation: cl-dangle 3.6s ease-in-out infinite alternate;
	z-index: 2;
}

@keyframes cl-dangle {
	from { translate: 0 -10px; rotate: -3deg; }
	to   { translate: 0 6px; rotate: 3deg; }
}

@media (max-width: 700px) {
	body.cl-halloween.cl-h-spooky.cl-h-spider .cl-header__inner::before { display: none; }
	body.cl-halloween.cl-h-spooky.cl-h-webs .cl-header::before { height: 44px; background-size: 44px 44px, 44px 44px; }
}

/* ==========================================================================
   The home page's banner: moon, mist, graveyard, vampire, bonfire
   ========================================================================== */

/* The moon and, with the graveyard, the mist are background layers on the
   banner itself. Longhands only, so the parent's background colour stands:
   home.css:108 sets it with the background shorthand. The watermark
   (::before) paints over them, which keeps the moon behind the type.

   Placed at 57% across, in the dark gap between the episode title and its
   artwork. In the top right corner it sat behind the artwork, which fills the
   right of the banner. Its halo is part of moon.svg: as a separate gradient
   layer it showed a faint rectangular edge. On phones, where the title runs
   the full width, it moves up into the top right corner, smaller. */
body.cl-halloween.cl-h-moon .cl-lead {
	background-image: url("../img/moon.svg");
	background-repeat: no-repeat;
	background-position: left 57% top 0;
	background-size: 200px 150px;
}

/* Mist creeping along the ground behind the stones. Two soft bands drifting
   at different speeds, so it never visibly repeats. */
body.cl-halloween.cl-h-spooky.cl-h-graveyard .cl-lead,
body.cl-halloween.cl-h-spooky.cl-h-graveyard.cl-h-moon .cl-lead {
	background-repeat: no-repeat, repeat-x, repeat-x;
	background-size: 200px 150px, 900px 70px, 700px 50px;
	background-image:
		url("../img/moon.svg"),
		radial-gradient(ellipse 50% 50% at 50% 100%, rgba(200, 190, 220, .14), transparent 70%),
		radial-gradient(ellipse 45% 50% at 50% 100%, rgba(200, 190, 220, .10), transparent 70%);
	background-position: left 57% top 0, 0 100%, 0 100%;
	animation: cl-mist 38s linear infinite;
}

/* No moon: the moon layer is hidden by sizing it to nothing, so the layer
   count - and the mist animation - stay the same. */
body.cl-halloween.cl-h-spooky.cl-h-graveyard:not(.cl-h-moon) .cl-lead {
	background-size: 0 0, 900px 70px, 700px 50px;
}

@media (max-width: 700px) {
	body.cl-halloween.cl-h-moon .cl-lead { background-position: right -14px top -8px; background-size: 120px 90px; }
	body.cl-halloween.cl-h-spooky.cl-h-graveyard .cl-lead,
	body.cl-halloween.cl-h-spooky.cl-h-graveyard.cl-h-moon .cl-lead { background-position: right -14px top -8px, 0 100%, 0 100%; background-size: 120px 90px, 900px 70px, 700px 50px; animation: none; }
	body.cl-halloween.cl-h-spooky.cl-h-graveyard:not(.cl-h-moon) .cl-lead { background-size: 0 0, 900px 70px, 700px 50px; }
}

@keyframes cl-mist {
	from { background-position: left 57% top 0, 0 100%, 0 100%; }
	to   { background-position: left 57% top 0, 900px 100%, -700px 100%; }
}

/* The graveyard along the bottom edge of every dark banner - the drifts'
   slot. ::after, because ::before is the parent's watermark. */
body.cl-halloween.cl-h-spooky.cl-h-graveyard .cl-lead::after,
body.cl-halloween.cl-h-spooky.cl-h-graveyard .cl-hero--ink::after,
body.cl-halloween.cl-h-spooky.cl-h-graveyard .cl-app-hero::after,
body.cl-halloween.cl-h-spooky.cl-h-graveyard .cl-about-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 44px;
	background: url("../img/gravestones.svg") repeat-x left bottom / 320px 44px;
	pointer-events: none;
}

/* The vampire in the corner of the home page's banner - the Christmas tree's
   spot - on its own or over the graveyard. Height from the Customizer. */
body.cl-halloween.cl-h-spooky.cl-h-vampire .cl-lead::after,
body.cl-halloween.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--cl-corner-h, 150px);
	pointer-events: none;
}

body.cl-halloween.cl-h-spooky.cl-h-vampire .cl-lead::after {
	background: url("../img/vampire.svg") no-repeat right 3% bottom 0 / auto calc(var(--cl-corner-h, 150px) - 4px);
}

body.cl-halloween.cl-h-spooky.cl-h-vampire.cl-h-graveyard .cl-lead::after {
	background:
		url("../img/vampire.svg") no-repeat right 3% bottom 0 / auto calc(var(--cl-corner-h, 150px) - 4px),
		url("../img/gravestones.svg") repeat-x left bottom / 320px 44px;
}

/* Bonfire Night: the bonfire takes the vampire's corner, with a warm glow
   rising behind it that flickers with the flames. */
body.cl-halloween.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after {
	background:
		url("../img/bonfire.svg") no-repeat right 3% bottom 0 / auto calc(var(--cl-corner-h, 150px) - 4px),
		radial-gradient(ellipse 30% 90% at calc(100% - 3% - var(--cl-corner-h, 150px) * .4) 100%, rgba(255, 140, 38, .32), transparent 70%);
	animation: cl-flicker 1.4s ease-in-out infinite alternate;
}

@keyframes cl-flicker {
	from { opacity: .86; }
	to   { opacity: 1; }
}

/* Corner on the left instead. */
body.cl-halloween.cl-h-corner-left.cl-h-spooky.cl-h-vampire .cl-lead::after { background-position: left 3% bottom 0, left bottom; }
body.cl-halloween.cl-h-corner-left.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after {
	background-position: left 3% bottom 0, 0 0;
	background-image:
		url("../img/bonfire.svg"),
		radial-gradient(ellipse 30% 90% at calc(3% + var(--cl-corner-h, 150px) * .4) 100%, rgba(255, 140, 38, .32), transparent 70%);
}

/* Below about 1440px the episode art reaches the banner's corner, so the
   vampire or bonfire shrinks into the strip under the art rather than standing
   in front of it - as the Christmas tree does, though the vampire is wider, so
   it needs the room sooner. */
@media (max-width: 1439px) {
	body.cl-halloween.cl-h-spooky.cl-h-vampire .cl-lead::after,
	body.cl-halloween.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after { height: min(var(--cl-corner-h, 150px), 58px); }
	body.cl-halloween.cl-h-spooky.cl-h-vampire .cl-lead::after,
	body.cl-halloween.cl-h-spooky.cl-h-vampire.cl-h-graveyard .cl-lead::after { background-size: auto calc(min(var(--cl-corner-h, 150px), 58px) - 4px), 320px 44px; }
	body.cl-halloween.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after { background-size: auto calc(min(var(--cl-corner-h, 150px), 58px) - 4px), auto; }
}
@media (max-width: 700px) {
	body.cl-halloween.cl-h-spooky.cl-h-vampire .cl-lead::after,
	body.cl-halloween.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after { height: min(var(--cl-corner-h, 150px), 50px); }
	body.cl-halloween.cl-h-spooky.cl-h-vampire .cl-lead::after,
	body.cl-halloween.cl-h-spooky.cl-h-vampire.cl-h-graveyard .cl-lead::after { background-size: auto calc(min(var(--cl-corner-h, 150px), 50px) - 4px), 320px 44px; }
	body.cl-halloween.cl-h-bonfire-night.cl-h-bonfire .cl-lead::after { background-size: auto calc(min(var(--cl-corner-h, 150px), 50px) - 4px), auto; }
}

/* ==========================================================================
   Bats on the headings
   ========================================================================== */

/* Before the home page's section headings - the holly's slot. */
body.cl-halloween.cl-h-spooky.cl-h-bat-headings .cl-watch__title::before {
	content: "";
	display: inline-block;
	width: 1.5em;
	height: .9em;
	margin-inline-end: .3em;
	vertical-align: .02em;
	background: url("../img/bat.svg") no-repeat center / contain;
}