/* View All — Figma component set 940:4021 («Показати усі вистави»
   3312:11412 on the afisha, «Переглянути весь репертуар» on the
   repertoire). Variants: mob=on 4146:17118 (56 tall, pad 18, Menu/button
   16/20), Default 940:4020 (64, pad 20, 20/24), Full HD=on 4190:20982
   (84, pad 28, 24/28). The height is the padding plus the Menu/button
   line height (auto-layout hug in every variant), so the label can grow
   with the a11y text-size setting. 1px #272B30 inside stroke = inset
   box-shadow (global-constraints.md). The row hugs no width: every
   placement is FILL/fixed to the list width. */
.c-view-all {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 10px;
	padding: 18px 0;
	box-shadow: inset 0 0 0 1px var(--color-neutral-800);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.c-view-all {
		padding-block: 20px;
	}
}

@media (min-width: 1920px) {

	.c-view-all {
		padding-block: 28px;
	}
}

/* Lines — Figma, read from the .fig (fig-canvas.js interactions + a
   per-layer diff of the variants; animations.md row «Переглянути всю
   афішу» / «Показати ще»). Four 3px #12AD99 lines, stroke CENTER (each
   band sits ±1.5px around its path):

   Default 940:4020 / 4190:20982 / 4146:17118:
   · «Vector 12» bottom, y = h−1: x 0..2, opacity 1 — a 2×3 teal stub
     in the bottom-left corner is part of the resting state (every
     variant, mob=on included);
   · «Vector 11» top, y=1: x (w−2)..w, opacity 0.
   —ON_HOVER, SMART_ANIMATE, spring(mass 1, stiffness 80, damping 20),
   1250ms→ Hover 1 940:4040 / 4309:30001:
   · bottom grows left → right to the full width;
   · top grows right → left to the full width, opacity 0 → 1;
   · «Vector 13» left (x=1, y 0..2) and «Vector 14» right (x=w−1,
     y (h−2)..h) appear (new layers: opacity 0 → 1).
   —AFTER_TIMEOUT 1ms, SMART_ANIMATE, linear, 300ms→ Hover 2 940:4049 /
   4309:30007:
   · left grows top → bottom, right grows bottom → top, to the full
     height (64 / 84).
   —MOUSE_LEAVE, SMART_ANIMATE, linear, 300ms→ Default: everything back
   at once, top and sides fade out.

   mob=on (4146:17118) has no interaction, so the hover starts at 768.
   The label does not change. ::before = bottom, ::after = top (each
   runs phase 1 only); the sides are the `c-view-all__sides` span's
   pseudo-elements, whose growth runs on the phase-2 timing (1251ms delay
   = the 1250ms transition + the 1ms AFTER_TIMEOUT). The spring has no
   CSS keyword: --ease-spring-80-20 (ticket-button.css, loaded on every
   page with the header's «Квитки») samples its exact solution. */
.c-view-all::before,
.c-view-all::after,
.c-view-all__sides::before,
.c-view-all__sides::after {
	content: "";
	position: absolute;
	background: var(--color-primary-500);
	pointer-events: none;
}

.c-view-all::before {
	bottom: -0.5px;
	left: 0;
	width: 2px;
	height: 3px;
	transition: width 300ms linear;
}

.c-view-all::after {
	top: -0.5px;
	right: 0;
	width: 2px;
	height: 3px;
	opacity: 0;
	transition:
		width 300ms linear,
		opacity 300ms linear;
}

.c-view-all__sides {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.c-view-all__sides::before,
.c-view-all__sides::after {
	width: 3px;
	height: 2px;
	opacity: 0;
	transition:
		height 300ms linear,
		opacity 300ms linear;
}

.c-view-all__sides::before {
	top: 0;
	left: -0.5px;
}

.c-view-all__sides::after {
	right: -0.5px;
	bottom: 0;
}

@media (min-width: 768px) {

	.c-view-all:focus-visible::before,
	.c-view-all:focus-visible::after {
		width: 100%;
		opacity: 1;
		transition:
			width 1250ms var(--ease-spring-80-20),
			opacity 1250ms var(--ease-spring-80-20);
	}

	.c-view-all:focus-visible .c-view-all__sides::before,
	.c-view-all:focus-visible .c-view-all__sides::after {
		height: 100%;
		opacity: 1;
		transition:
			height 300ms linear 1251ms,
			opacity 1250ms var(--ease-spring-80-20);
	}
}

/* :hover only where the pointer can hover — on touch a tap would leave
   :hover stuck and the lines drawing after the tap. */
@media (min-width: 768px) and (hover: hover) {

	.c-view-all:hover::before,
	.c-view-all:hover::after {
		width: 100%;
		opacity: 1;
		transition:
			width 1250ms var(--ease-spring-80-20),
			opacity 1250ms var(--ease-spring-80-20);
	}

	.c-view-all:hover .c-view-all__sides::before,
	.c-view-all:hover .c-view-all__sides::after {
		height: 100%;
		opacity: 1;
		transition:
			height 300ms linear 1251ms,
			opacity 1250ms var(--ease-spring-80-20);
	}
}

/* Reduced motion: the global rules (base.css / a11y-themes.css) zero
   durations only; the phase-2 delay has to go too. `!important` is the
   documented reduced-motion exception (global-constraints.md): the hover
   rule above is more specific. */
html[data-motion="reduced"] .c-view-all__sides::before,
html[data-motion="reduced"] .c-view-all__sides::after {
	/* stylelint-disable-next-line declaration-no-important -- reduced motion */
	transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {

	.c-view-all__sides::before,
	.c-view-all__sides::after {
		/* stylelint-disable-next-line declaration-no-important -- reduced motion */
		transition-delay: 0s !important;
	}
}

/* Windows High Contrast: box-shadow is dropped — an inside outline keeps
   the edge (base.css's forced-colors convention: outline never changes
   the box). `:not(:focus-visible)` leaves the focus ring alone. */
@media (forced-colors: active) {

	.c-view-all:not(:focus-visible) {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}