/* =============================================================
   CATEGORY HERO LINE EFFECTS — css/hero-fx.css
   -------------------------------------------------------------
   Six category heroes animate the line under their H1, one
   effect each, keyed by data-fx on .cat-hero. inc/archive.php
   sets the attribute from the hero entry's 'fx' and wraps the
   line (.fx-a, plus .w per word for counter/handwrite);
   inc/enqueue.php loads this file only when the hero has one.
   Eddy's request, 25 Oct 2026: "nice to have … below the title",
   not on every category, a different font for each.

   CSS ONLY, ON PURPOSE. The resting style of every element is
   its final, visible state and each keyframe animates FROM
   hidden with fill-mode both. So no JS can fail and leave the
   line hidden (CLAUDE.md §JS-1), the text is server-rendered
   (no layout jump, readable without CSS animation), and
   reduced motion simply shows the line.

   FONTS are system stacks, not web fonts: INSTRUCTIONS §4 caps
   the theme at two loaded families. They differ by device —
   the handwriting face most — which is acceptable decoration.

   Raw colours: the #000 in the masks is mask alpha, not colour;
   the white gloss and the tape shadow follow the rgba exception
   css/category-heroes.css takes for its ramp.
   ============================================================= */

.cat-hero[data-fx] .cat-hero-inner p {
	position: relative;
}

.cat-hero[data-fx] .fx-a {
	display: block;
}

/* ---------- 1. counter — Note Counters ----------------------
   A rolling-digit display (wows_hero_fx_odometer()): each column
   is a 1ch-wide strip, one digit per line, rolled up by transform.
   Not a counter() on an animated @property — Safari never redraws
   that generated content, so it sat on 0 and jumped to 1000.
   Fixed columns, so the badge never changes width. */
.cat-hero[data-fx="counter"] .cat-hero-inner p {
	font-family: ui-rounded, 'SF Pro Rounded', 'Arial Rounded MT Bold', 'Nunito', system-ui, sans-serif;
	font-weight: 600;
	color: var(--wows-ink);
}

.cat-hero[data-fx="counter"] .fx-lcd {
	display: flex;
	gap: .16em;
	width: fit-content;
	margin-bottom: 10px;
	padding: 3px 12px;
	border-radius: 6px;
	background: var(--wows-ink);
	color: var(--wows-success-on-dark);
	font-family: var(--wows-font-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.cat-hero[data-fx="counter"] .fx-dg {
	display: block;
	width: 1ch;
	height: 1.4em;
	overflow: hidden;
}

.cat-hero[data-fx="counter"] .fx-dg-strip {
	display: block;
	width: 1ch;
	word-break: break-all;
	transform: translateY(calc(var(--rows) * -1.4em));
	animation: wows-fx-roll 1.6s cubic-bezier(.3, 0, .2, 1) .5s both;
}

@keyframes wows-fx-roll {
	from { transform: translateY(0); }
}

.cat-hero[data-fx="counter"] .fx-a {
	display: inline;
}

.cat-hero[data-fx="counter"] .w {
	display: inline-block;
	animation: wows-fx-rise .4s ease-out calc(1.9s + var(--i) * 55ms) both;
}

@keyframes wows-fx-rise {
	from { opacity: 0; transform: translateY(8px) rotate(-3deg); }
}

/* ---------- 2. shred — Paper Shredders ---------------------- */
.cat-hero[data-fx="shred"] .cat-hero-inner p {
	font-family: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
	font-stretch: condensed;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wows-ink);
}

.cat-hero[data-fx="shred"] .fx-a {
	animation: wows-fx-shred-a 1.3s cubic-bezier(.2, .8, .2, 1) .6s both;
}

/* The second strip set is a drawn copy of the line. The "/ ''" alt text keeps
   screen readers from reading it twice; engines without that syntax drop the
   second declaration and keep the first. */
.cat-hero[data-fx="shred"] .cat-hero-inner p::after {
	content: attr(data-text);
	content: attr(data-text) / '';
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	animation: wows-fx-shred-b 1.3s cubic-bezier(.2, .8, .2, 1) .6s both;
}

/* the feed slot the strips come out of */
.cat-hero[data-fx="shred"] .cat-hero-inner p::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 3px;
	border-radius: 2px;
	background: var(--wows-ink);
	opacity: 0;
	animation: wows-fx-slot 1.6s ease .4s both;
}

@keyframes wows-fx-shred-a {
	0% {
		opacity: 0;
		transform: translateY(-22px);
		-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
		mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
	}
	85% {
		opacity: 1;
		transform: none;
		-webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
		mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 12px);
	}
	100% {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@keyframes wows-fx-shred-b {
	0% {
		opacity: 0;
		transform: translateY(-34px);
		-webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 6px, #000 6px 12px);
		mask-image: repeating-linear-gradient(90deg, transparent 0 6px, #000 6px 12px);
	}
	85% {
		opacity: 1;
		transform: none;
		-webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 6px, #000 6px 12px);
		mask-image: repeating-linear-gradient(90deg, transparent 0 6px, #000 6px 12px);
	}
	100% { opacity: 0; }
}

@keyframes wows-fx-slot {
	0% { opacity: 0; transform: scaleX(0); transform-origin: left; }
	20% { opacity: 1; transform: scaleX(1); transform-origin: left; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

/* ---------- 3. laminate — Laminators ------------------------ */
.cat-hero[data-fx="laminate"] .cat-hero-inner p {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 1.15em;
	color: var(--wows-ink);
	overflow: hidden;
}

.cat-hero[data-fx="laminate"] .fx-a {
	animation: wows-fx-lam 1.5s cubic-bezier(.45, 0, .3, 1) .6s both;
}

/* the roller */
.cat-hero[data-fx="laminate"] .cat-hero-inner p::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 7px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--wows-text-muted), var(--wows-white) 45%, var(--wows-text-muted));
	opacity: 0;
	animation: wows-fx-roller 1.5s cubic-bezier(.45, 0, .3, 1) .6s both;
}

/* the gloss that passes once the sheet is sealed */
.cat-hero[data-fx="laminate"] .cat-hero-inner p::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 48%, transparent 60%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: -100% 0;
	pointer-events: none;
	animation: wows-fx-gloss 1.1s ease-in-out 2.2s both;
}

@keyframes wows-fx-lam {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

@keyframes wows-fx-roller {
	0% { left: 0; opacity: 1; }
	90% { opacity: 1; }
	100% { left: calc(100% - 7px); opacity: 0; }
}

@keyframes wows-fx-gloss {
	from { background-position: 150% 0; }
	to { background-position: -100% 0; }
}

/* ---------- 4. unlock — Safe Boxes -------------------------- */
.cat-hero[data-fx="unlock"] .cat-hero-inner p {
	padding-top: 30px;
	font-family: var(--wows-font-mono);
	font-weight: 600;
	color: var(--wows-ink);
	perspective: 700px;
}

/* keypad: four empty code dots … */
.cat-hero[data-fx="unlock"] .cat-hero-inner p::before,
.cat-hero[data-fx="unlock"] .cat-hero-inner p::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 0;
	height: 16px;
	background-size: 22px 16px;
	background-repeat: repeat-x;
}

.cat-hero[data-fx="unlock"] .cat-hero-inner p::before {
	width: 88px;
	background-image: radial-gradient(circle at 8px 8px, transparent 5px, var(--wows-text-faint) 5.5px 7px, transparent 7.5px);
}

/* … filling one by one, then turning green */
.cat-hero[data-fx="unlock"] .cat-hero-inner p::after {
	width: 88px;
	background-image: radial-gradient(circle at 8px 8px, var(--wows-success) 7px, transparent 7.5px);
	animation:
		wows-fx-code 1s steps(4, end) .5s both,
		wows-fx-code-ok .01s linear 1.6s both;
}

@keyframes wows-fx-code {
	from { width: 0; }
}

@keyframes wows-fx-code-ok {
	from { background-image: radial-gradient(circle at 8px 8px, var(--wows-ink) 7px, transparent 7.5px); }
}

.cat-hero[data-fx="unlock"] .fx-a {
	transform-origin: left center;
	animation: wows-fx-door 1s cubic-bezier(.2, 1.25, .4, 1) 1.7s both;
}

@keyframes wows-fx-door {
	from { opacity: 0; transform: rotateY(-80deg); }
}

/* ---------- 5. handwrite — Writing Board -------------------- */
.cat-hero[data-fx="handwrite"] .cat-hero-inner p {
	font-family: 'Bradley Hand', 'Segoe Print', 'Chalkboard SE', 'Marker Felt', cursive;
	font-size: 1.55em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wows-accent);
}

.cat-hero[data-fx="handwrite"] .fx-a {
	display: inline;
}

.cat-hero[data-fx="handwrite"] .w {
	display: inline-block;
	animation: wows-fx-ink .32s linear calc(.6s + var(--i) * 260ms) both;
}

@keyframes wows-fx-ink {
	from { clip-path: inset(-20% 100% -20% -8%); }
	to { clip-path: inset(-20% -8% -20% -8%); }
}

/* ---------- 6. label — Labeller ----------------------------- */
.cat-hero[data-fx="label"] .fx-a {
	display: inline-block;
	max-width: 100%;
	padding: 7px 16px;
	border: 1px solid var(--wows-border-strong);
	border-radius: 3px;
	background: var(--wows-white);
	box-shadow: var(--wows-shadow-float);
	font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .07em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--wows-ink);
	transform-origin: left center;
	animation:
		wows-fx-feed 1.6s steps(16, end) .6s both,
		wows-fx-tear .5s cubic-bezier(.3, 1.6, .5, 1) 2.25s;
}

@keyframes wows-fx-feed {
	from { clip-path: inset(-10px 100% -10px -10px); }
	to { clip-path: inset(-10px -10px -10px -10px); }
}

@keyframes wows-fx-tear {
	from { transform: rotate(-2.5deg); }
}

/* ---------- motion off: show the final line, no movement ---- */
@media (prefers-reduced-motion: reduce) {
	.cat-hero[data-fx] .cat-hero-inner p,
	.cat-hero[data-fx] .cat-hero-inner p::before,
	.cat-hero[data-fx] .cat-hero-inner p::after,
	.cat-hero[data-fx] .fx-a,
	.cat-hero[data-fx] .fx-dg-strip,
	.cat-hero[data-fx] .w {
		animation: none !important;
	}
}