/* Ticket Button — Figma 3110:3507. Inside stroke = inset box-shadow
   (a border would change the box). 390-1919: the Figma frame is fixed
   (128x34 / 128x40) and smaller than its own nominal padding + text;
   Figma centres the label inside the frame regardless. `padding: 0 16px`
   is a safety gutter, only load-bearing once --font-scale grows the
   label past the frame's min box — see REPORT.md. */
.c-ticket {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	min-width: 128px;
	min-height: 34px;
	padding: 0 16px;
	box-shadow: inset 0 0 0 2px var(--color-primary-500);
	background: transparent;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.c-ticket--disabled {
	box-shadow: inset 0 0 0 2px var(--color-neutral-300);
	color: var(--color-neutral-500);
	cursor: not-allowed;
}

/* «Квитків немає в продажу» — the sold-out explanation next to a
   disabled «Аншлаг» button (datamapping §5.2, global-constraints.md). No
   dedicated Figma node: reuses the same small-text scale as
   .subscribe__disclaimer rather than inventing a size. */
.c-ticket__note {
	color: var(--color-neutral-500);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

@media (min-width: 768px) {

	/* The component's own "Default" height, 40, which is what the 768 card
	   frame draws («Ticket Button» 4184:18366 inside the 768 event card
	   4184:18352) and what 1440 keeps (3015:2459). The one 44px instance at
	   this width is the header's own («Buy Tickets Button» 4182:18203 inside
	   «Navigation Bar» 4182:18183), resized there and nowhere else — it lives
	   in site-header.css now. Reading that instance as the component's tablet
	   height made every 768 card 4px too tall (task-10-report.md's 4.4px
	   delta; plan-end batch item 11). */
	.c-ticket {
		min-height: 40px;
	}
}

@media (min-width: 1920px) {

	/* Figma 4190:19733 is 163×56 (hug of 83 + 2×40); the substitute font's
	   label is ~3px narrower, which also shortened the hover lines below
	   Figma's 162px. The min-width keeps the frame (and the lines) at the
	   design size; a longer label still grows it. */
	.c-ticket {
		min-width: 163px;
		min-height: auto;
		padding: 16px 40px;
	}
}

/* Hover — Figma «Ticket Button» set 3110:3507, read from the .fig
   (fig-canvas.js interactions + a per-layer diff of the variants; full
   table in ~/kryla/clients/podil/design/figma/animations.md):

   Default (3009:39 / 4190:19733) —ON_HOVER, SMART_ANIMATE, spring
   (mass 1, stiffness 80, damping 20), 1250ms→ Hover 1 (4309:30126 /
   4316:25163) —ON_HOVER, same spring, 1250ms→ Hover 2 (4309:31638 /
   4316:25169) —MOUSE_LEAVE, SMART_ANIMATE, linear, 600ms→ Default.

   Four 3px #272B30 lines (stroke CENTER, so each band sits ±1.5px around
   its path), opacity 0 → 1 while they grow:
   · «Vector 11» top, y=1: x 0..2 → 0..128 (grows left → right);
   · «Vector 12» bottom, y=40: x 126..128 → 0..128 (grows right → left);
   · «Vector 13» left, x=1: y 0..2 → 0..40 (grows top → bottom), phase 2;
   · «Vector 14» right, x=127: y 38..40 → 1..40 (grows bottom → top), phase 2.
   Phase 1 moves only the top/bottom lines, phase 2 only the sides; phase 2
   starts when phase 1's transition has finished (Figma fires Hover 1's own
   ON_HOVER after the swap), hence the 1250ms delay. The label text and
   the teal inside stroke do not change (the raw `fontSize` 20 on the
   Hover labels is a stale field — rendered glyphs are 16px in every
   variant). The mob=on variant (4128:16158, header at 390) has no
   interaction, but the theme hides the header button below 768 and the
   buttons it does show there (footer / mobile-menu partner) are drawn
   with the mob=off variant (4157:12057), so the hover is width-agnostic.

   Lines are background layers on the two pseudo-elements so no markup
   changes: ::before = top + bottom, ::after = left + right. The spring
   has no CSS keyword; `linear()` below samples its exact overdamped
   solution (ζ ≈ 1.12, no overshoot) at 1/64 steps of 1250ms (max
   deviation from the analytic curve 0.3% — under 0.5px on a 163px line). */
.c-ticket {
	position: relative;
}

.c-ticket:not(.c-ticket--disabled)::before,
.c-ticket:not(.c-ticket--disabled)::after {
	content: "";
	position: absolute;
	background-image:
		linear-gradient(var(--color-neutral-800), var(--color-neutral-800)),
		linear-gradient(var(--color-neutral-800), var(--color-neutral-800));
	background-repeat: no-repeat;
	opacity: 0;
	pointer-events: none;
	transition:
		background-size 600ms linear,
		opacity 600ms linear;
}

/* Top band y -0.5..2.5, bottom band y 38..41 (40px button). Figma's
   bottom band is 38.5..41.5; Chromium snaps the half pixel down to 39..42,
   which bares a 1px teal row of the inside stroke under the line (Figma:
   0.5px). −1px keeps the band within 0.5px of the design and covers it. */
.c-ticket:not(.c-ticket--disabled)::before {
	inset: -0.5px 0 -1px;
	background-position: left top, right bottom;
	background-size: 2px 3px, 2px 3px;
}

/* Left band x -0.5..2.5, right band x 125.5..128.5 (128px button). */
.c-ticket:not(.c-ticket--disabled)::after {
	inset: 0 -0.5px;
	background-position: left top, right bottom;
	background-size: 3px 2px, 3px 2px;
}

.c-ticket:not(.c-ticket--disabled):focus-visible::before,
.c-ticket:not(.c-ticket--disabled):focus-visible::after {
	opacity: 1;
	transition:
		background-size 1250ms var(--ease-spring-80-20),
		opacity 1250ms var(--ease-spring-80-20);
}

.c-ticket:not(.c-ticket--disabled):focus-visible::before {
	background-size: 100% 3px, 100% 3px;
}

.c-ticket:not(.c-ticket--disabled):focus-visible::after {
	background-size: 3px 100%, 3px calc(100% - 1px);
	transition-delay: 1250ms;
}

/* :hover only where the pointer can hover — on touch a tap would leave
   :hover stuck and the 2.5s draw playing after the tap. */
@media (hover: hover) {

	.c-ticket:not(.c-ticket--disabled):hover::before,
	.c-ticket:not(.c-ticket--disabled):hover::after {
		opacity: 1;
		transition:
			background-size 1250ms var(--ease-spring-80-20),
			opacity 1250ms var(--ease-spring-80-20);
	}

	.c-ticket:not(.c-ticket--disabled):hover::before {
		background-size: 100% 3px, 100% 3px;
	}

	.c-ticket:not(.c-ticket--disabled):hover::after {
		background-size: 3px 100%, 3px calc(100% - 1px);
		transition-delay: 1250ms;
	}
}

:root {

	/* Figma spring(mass 1, stiffness 80, damping 20) over 1250ms. */
	--ease-spring-80-20: linear(0, 0.0134, 0.0474, 0.0943, 0.1489, 0.2073, 0.2668, 0.3255, 0.3823, 0.4362, 0.4869, 0.5342, 0.5779, 0.6181, 0.6549, 0.6885, 0.7191, 0.7469, 0.7721, 0.7949, 0.8154, 0.834, 0.8508, 0.8659, 0.8795, 0.8917, 0.9027, 0.9126, 0.9215, 0.9295, 0.9367, 0.9432, 0.949, 0.9542, 0.9589, 0.9631, 0.9668, 0.9702, 0.9733, 0.976, 0.9785, 0.9807, 0.9826, 0.9844, 0.986, 0.9874, 0.9887, 0.9899, 0.9909, 0.9918, 0.9927, 0.9934, 0.9941, 0.9947, 0.9952, 0.9957, 0.9962, 0.9966, 0.9969, 0.9972, 0.9975, 0.9978, 0.998, 0.9982, 1);
}

/* 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-ticket::after {
	/* stylelint-disable-next-line declaration-no-important -- reduced motion */
	transition-delay: 0s !important;
}

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

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