/* Seasonal skins: the layout every event shares. An event fills the --skin-* tokens (and the house tokens) from its own
   definition (src/lib/seasonal/events/<id>/<id>-event.ts, written out by skin-css.ts); this file says where each one
   goes. Every rule waits for an attribute on <html>: data-season-event (an event is on offer: its ornament and card)
   and data-season (a skin is on: an event's, or the everyday base skin when none is). The base skin only dresses the
   scenery, the rail, the slots and the costumes; the app-wide rules below (scrollbars, selection, headings, loading)
   belong to events, so they skip it. */

/* Whole app while the skin is on: scrollbars, selection, page headings, the rail. Chromium and Safari paint the
   --skin-scroll thumb through the global ::-webkit-scrollbar pill (src/app/globals.css); the standard property is for
   Firefox only, because in Chromium it replaces the pill with the arrowed native bar. */
@supports not selector(::-webkit-scrollbar) {
	:root[data-season]:not([data-season='base']),
	:root[data-season]:not([data-season='base']) .ms {
		scrollbar-color: var(--skin-scroll, auto) transparent;
	}
}

:root[data-season]:not([data-season='base']) ::selection {
	background: var(--skin-selection, highlight);
}

:root[data-season]:not([data-season='base']) .ms :is(h1, h2) {
	color: var(--skin-heading, inherit);
}

:root[data-season] [data-testid='messenger-rail'] {
	--ms-rail-bg: var(--skin-rail-bg, var(--ab-paper));
	--ms-rail-ink: var(--skin-rail-ink, var(--ab-ink-2));
	--ms-ink: var(--skin-rail-ink-strong, var(--ab-ink));
	--ms-rail-active: var(--skin-rail-active, color-mix(in srgb, var(--ab-ink) 7%, var(--ab-bg)));
	--ms-row-hover: var(--skin-rail-hover, color-mix(in srgb, var(--ab-ink) 4%, transparent));
	--ms-focus: var(--skin-rail-focus, var(--ab-focus));
	border-color: var(--skin-rail-stroke, color-mix(in srgb, var(--ab-ink) 10%, transparent));
	background-image: var(--skin-rail-pattern, none);
	background-size: 64px 96px;
}

/* The scenery behind every page, conversation and the sign-in: a corner piece, a sky piece, the ground along the bottom
   and a mist. Background only, under every word; an event keeps its tones legible (see its definition). */
:root[data-season]
	:is(
		.bg-\[var\(--ms-bg\)\],
		.bg-\[var\(--ms-wallpaper\)\],
		[data-season-scene],
		[data-season-surface='page'],
		[data-season-surface='wallpaper']
	) {
	background-image:
		var(--skin-corner, none), var(--skin-sky, none), var(--skin-ground, none),
		linear-gradient(to top, var(--skin-mist, transparent), transparent 45%);
	background-repeat: no-repeat;
	background-position:
		top right,
		top 34px right 24%,
		center bottom,
		bottom;
	background-size:
		220px 220px,
		104px 104px,
		max(100%, 1000px) auto,
		100% 100%;
}

@media (max-width: 639.98px) {
	:root[data-season]
		:is(
			.bg-\[var\(--ms-bg\)\],
			.bg-\[var\(--ms-wallpaper\)\],
			[data-season-scene],
			[data-season-surface='page'],
			[data-season-surface='wallpaper']
		) {
		background-position:
			top right,
			top 64px right 30%,
			center bottom,
			bottom;
		background-size:
			168px 168px,
			80px 80px,
			1000px auto,
			100% 100%;
	}
}

/* Modal background: a small scene in the bottom-right corner of every house sheet (.wn-sheet), above its footer,
   behind its content. Inner cards and controls are opaque and sit over it; the art's tones keep text AA. */
:root[data-season] .wn-sheet {
	background-image: var(--skin-modal-art, none);
	background-repeat: no-repeat;
	background-position: right 14px bottom 86px;
	background-size: 140px auto;
}

/* A phone sheet is full of content: no corner there. */
@media (max-width: 639.98px) {
	:root[data-season] .wn-sheet {
		background-image: none;
	}
}

/* Header rows that carry data-season-header (the Jornal's): a small charm in the gap after the title. */
:root[data-season] [data-season-header] {
	background-image: var(--skin-header-art, none);
	background-repeat: no-repeat;
	background-position: left 112px center;
	background-size: auto 80%;
}

@media (max-width: 639.98px) {
	:root[data-season] [data-season-header] {
		background-position: left 100px center;
	}
}

/* Costumes on every mascot portrait (data-season-costume): Haku's and the yokais'. People and companies never carry
   the attribute. Decoration only. */
:root[data-season] [data-season-costume]::before {
	content: '';
	position: absolute;
	z-index: 3;
	left: -18%;
	top: -36%;
	width: 72%;
	height: 72%;
	pointer-events: none;
	background: var(--skin-costume-yokai, none) center / contain no-repeat;
	transform: rotate(-18deg);
	filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.18));
}

:root[data-season] [data-season-costume='haku']::before {
	left: -6%;
	top: -30%;
	width: 62%;
	height: 62%;
	background-image: var(--skin-costume-haku, none);
	transform: rotate(-12deg);
}

/* Loading: the working dots take the event's colour, the working state dot glows in it. */
:root[data-season]:not([data-season='base']) .pk-dots > span {
	width: 5px;
	height: 5px;
	background: var(--skin-loading-dot, currentColor);
	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
}

:root[data-season]:not([data-season='base']) .ms-pulse {
	box-shadow: 0 0 6px 1px color-mix(in srgb, var(--skin-loading-dot, currentColor) 60%, transparent);
}

/* The ornament, the event's way in and out: by the rail, the wordmark and the sign-in header. Its hit area is at least
   44x44 px; the art hangs inside it, unlit while only offered and lit (--skin-ornament-filter) while the skin is on. */
:root[data-season-event] .season-ornament {
	position: relative;
	display: grid;
	min-width: 44px;
	min-height: 44px;
	flex-shrink: 0;
	place-items: start center;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: none;
	cursor: pointer;
	outline: none;
}

:root[data-season-event] .season-ornament:focus-visible {
	outline: 2px solid var(--ab-focus);
	outline-offset: 2px;
}

:root[data-season-event] .season-ornament-art {
	display: block;
	transform-origin: 50% 0;
	filter: var(--skin-ornament-filter, none);
	transition: filter 0.4s ease;
}

:root[data-season-event] .season-ornament[data-variant='rail'] {
	position: absolute;
	top: 0;
	width: 44px;
	height: 60px;
}

:root[data-season-event] .season-ornament[data-variant='rail'] .season-ornament-art {
	width: 34px;
	height: 56px;
}

:root[data-season-event] .season-ornament[data-variant='wordmark'] {
	width: 44px;
	height: 44px;
	margin-block: -12px;
}

:root[data-season-event] .season-ornament[data-variant='wordmark'] .season-ornament-art {
	width: 16px;
	height: 27px;
	margin-top: 4px;
}

/* The base skin's rail spacer: a sakura sprig hangs from its top, a maneki-neko sits on its floor. Decoration only. */
:root[data-season] .season-base-rail {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

:root[data-season] .season-base-rail-top {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 44px;
	transform: translateX(-50%);
}

:root[data-season] .season-base-rail-foot {
	position: absolute;
	bottom: 6px;
	left: 50%;
	width: 34px;
	height: 38px;
	transform: translateX(-50%);
}

:root[data-season] :is(.season-base-rail-top, .season-base-rail-foot) > svg {
	display: block;
}

@media (max-height: 640px) {
	:root[data-season] .season-base-rail {
		display: none;
	}
}

/* Empty states: the ornament's art hangs beside the mascot while the skin is on. */
:root[data-season] .season-empty-art {
	position: absolute;
	left: 2px;
	top: -4px;
	width: 22px;
	height: 37px;
	transform-origin: 50% 0;
	filter: var(--skin-ornament-filter, none);
}

:root[data-season] [data-testid='ask-haku-empty-icon'] .season-empty-art {
	left: 5px;
	top: -3px;
	width: 15px;
	height: 26px;
}

:root[data-season] .season-empty-art > * {
	display: block;
	width: 100%;
	height: 100%;
}

/* Para voce's invitation, shown only to a member who put the skin away: a stage with the event's art and Haku, a speech
   bubble, one button. It sits in the everyday palette, so it reads the house tokens. */
:root[data-season-event] .season-card {
	position: relative;
	display: grid;
	flex-shrink: 0;
	grid-template-columns: 180px minmax(0, 1fr);
	overflow: hidden;
	border-radius: 22px;
	background: var(--ab-surface);
	color: var(--ab-ink);
	box-shadow:
		inset 0 0 0 2px var(--ab-stroke),
		0 4px 0 var(--pk-edge);
}

:root[data-season-event] .season-card-stage {
	position: relative;
	min-height: 140px;
	background: var(--skin-card-stage, var(--ab-tint));
}

:root[data-season-event] .season-card-art {
	position: absolute;
	inset: 0;
	filter: var(--skin-card-glow, none);
}

:root[data-season-event] .season-card-face {
	position: absolute;
	left: 50%;
	bottom: 16px;
	display: grid;
	width: 80px;
	height: 80px;
	margin-left: -40px;
	place-items: center;
	overflow: hidden;
	border-radius: 9999px;
	background: #f0ece4;
	box-shadow:
		0 0 0 3px #f4eff7,
		0 4px 0 3px rgb(0 0 0 / 0.28);
}

:root[data-season-event] .season-card-body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 56px 16px 18px;
}

:root[data-season-event] .season-card-speaker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ab-accent-ink);
}

:root[data-season-event] .season-card-bubble {
	max-width: 52ch;
	border-radius: 18px;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.4;
	background: var(--wn-feed-bubble);
	color: var(--wn-feed-ink);
	box-shadow: 0 3px 0 var(--pk-edge);
}

:root[data-season-event] .season-card-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

@media (max-width: 639.98px) {
	:root[data-season-event] .season-card {
		grid-template-columns: minmax(0, 1fr);
	}

	:root[data-season-event] .season-card-stage {
		min-height: 120px;
	}

	:root[data-season-event] .season-card-face {
		width: 70px;
		height: 70px;
		margin-left: -35px;
		bottom: 12px;
	}

	:root[data-season-event] .season-card-body {
		padding: 14px 16px 16px;
	}
}

/* The edition badge (sign-in, Cérebro): the event's name and a live countdown to its last minute. */
:root[data-season] .season-edition {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	row-gap: 2px;
	border-radius: 14px;
	padding: 5px 12px;
	font-size: 12.5px;
	line-height: 1.3;
	background: var(--ab-orange-soft);
	color: var(--ab-ink);
	box-shadow: inset 0 0 0 1px var(--ab-stroke);
}

:root[data-season] .season-edition-name {
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ab-accent-ink);
}

:root[data-season] .season-edition-clock {
	font-variant-numeric: tabular-nums;
	color: var(--ab-ink-2);
}

/* Turning the skin on or off cross-fades the whole page (View Transitions); a member who asked for less motion gets
   the swap at once (SeasonalProvider skips the transition). */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.7s;
	animation-timing-function: ease-in-out;
}

/* Motion only for members who did not ask for less: the ornament sways slowly while the skin is on. No flashing
   anywhere (WCAG 2.3.1); the member's switch stops all of it (2.2.2). */
@media (prefers-reduced-motion: no-preference) {
	:root[data-season] :is(.season-ornament[data-variant='rail'] .season-ornament-art, .season-empty-art) {
		animation: season-sway 5.5s ease-in-out infinite;
	}
}

@keyframes season-sway {
	0%,
	100% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(4deg);
	}
}