/* Hero ticker — ZachWheat.com — @version 1.8.0
   Settings: Appearance → Customize → Hero Ticker.
   Colors come from CSS variables: the look sets --zwt-*-look, and anything
   you pick in the Customizer (--zwt-bg / --zwt-fg / --zwt-link) wins. */

@font-face {
	font-family: "ZWT Seg14";
	src: url("../fonts/DSEG14Classic-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "ZWT Seg7";
	src: url("../fonts/DSEG7Classic-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* ── The strip ───────────────────────────────────────────── */
.zwt {
	--zwt-h: 32px;
	position: relative;
	display: flex;
	align-items: stretch;
	height: var(--zwt-h);
	padding: 0 !important;          /* old .ticker-strip padding */
	overflow: hidden;
	white-space: nowrap;
	background: var(--zwt-bg, var(--zwt-bg-look));
	color: var(--zwt-fg, var(--zwt-fg-look));
}
.zwt a { color: var(--zwt-link, var(--zwt-link-look)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.zwt a:hover { text-decoration-style: dotted; }

/* Looks */
.zwt--amber { --zwt-bg-look: var(--amber, #f59e0b); --zwt-fg-look: var(--navy, #0d1b2e); --zwt-link-look: var(--navy, #0d1b2e); --zwt-shade: rgba(120, 60, 0, 0.45); }
.zwt--navy  { --zwt-bg-look: var(--navy, #0d1b2e);  --zwt-fg-look: var(--amber, #f59e0b); --zwt-link-look: #fff; --zwt-shade: rgba(0, 0, 0, 0.75);
	border-top: 1px solid rgba(245, 158, 11, 0.2); border-bottom: 1px solid rgba(245, 158, 11, 0.2); }
.zwt--digital {
	--zwt-h: 40px;
	--zwt-bg-look: #04070c;
	--zwt-fg-look: #f59e0b;
	--zwt-link-look: #fbbf24;
	--zwt-shade: #000;
	border-top: 1px solid rgba(245, 158, 11, 0.18);
	border-bottom: 1px solid rgba(245, 158, 11, 0.18);
	box-shadow: inset 0 6px 10px -6px #000, inset 0 -6px 10px -6px #000; /* the panel sits recessed */
}
/* faint scan lines across the digital panel */
.zwt--digital::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
	pointer-events: none;
	z-index: 4;
}

/* ── Items ───────────────────────────────────────────────── */
.zwt-window { position: relative; flex: 1 1 auto; min-width: 0; }
.zwt-viewport { height: 100%; overflow: hidden; }
.zwt-track { height: 100%; }
.zwt-item {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	height: 100%;
	padding: 0 2.5rem;
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.zwt--scroll .zwt-item::after { content: "◆"; font-size: 0.5rem; opacity: 0.8; }

.zwt--digital .zwt-item {
	font-family: "ZWT Seg14", var(--font-mono, monospace);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-shadow: 0 0 6px color-mix(in srgb, currentColor 65%, transparent);
}
.zwt--digital.zwt--scroll .zwt-item::after { content: "-"; font-size: 0.78rem; }

/* ── Edges: items slide out from behind a shadow at each end ── */
.zwt--edges .zwt-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.zwt--edges .zwt-window::before,
.zwt--edges .zwt-window::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 70px;
	z-index: 2;
	pointer-events: none;
}
.zwt--edges .zwt-window::before { left: 0;  background: linear-gradient(90deg, var(--zwt-shade), transparent); }
.zwt--edges .zwt-window::after  { right: 0; background: linear-gradient(270deg, var(--zwt-shade), transparent); }

/* ── Motion: scroll ─────────────────────────────────────── */
.zwt--scroll .zwt-track { display: inline-flex; animation: zwt-scroll var(--zwt-scroll, 30s) linear infinite; }
.zwt--scroll .zwt-copy { display: inline-flex; }
.zwt--rtl .zwt-track { animation-direction: reverse; }
.zwt--pause:hover .zwt-track { animation-play-state: paused; }
@keyframes zwt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Motion: roll and fade (one item at a time; hero-ticker.js) ── */
.zwt--roll .zwt-track,
.zwt--fade .zwt-track { position: relative; }
.zwt--roll .zwt-item,
.zwt--fade .zwt-item {
	position: absolute;
	inset: 0;
	justify-content: center;
	padding: 0 1.5rem;
	opacity: 0;
}
.zwt--roll { --zwt-in: 100%; --zwt-out: -100%; }   /* up: in from below, out the top */
.zwt--roll[data-roll="down"] { --zwt-in: -100%; --zwt-out: 100%; }
.zwt--roll .zwt-item { transform: translateY(var(--zwt-in)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s; }
.zwt--roll .zwt-item.is-out { transform: translateY(var(--zwt-out)); opacity: 0; }
.zwt--fade .zwt-item { transition: opacity 0.7s ease; }
.zwt .zwt-item.is-on { transform: none; opacity: 1; }
.zwt .zwt-item.is-reset { transition: none; }
/* Before the script runs (or without it), just show the first item. */
.zwt--roll:not(.is-ready) .zwt-item:first-child,
.zwt--fade:not(.is-ready) .zwt-item:first-child { opacity: 1; transform: none; }

/* ── Giveaway panel ─────────────────────────────────────── */
.zwt-gw {
	position: relative;
	z-index: 3;                       /* the ticker slides out from behind it */
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0 1rem 0 max(1rem, calc((100vw - var(--wide-max, 1200px)) / 2 + var(--gutter, 2rem) - 0.5rem));
	background: #060b14;
	color: #fff;
	text-decoration: none !important;
	box-shadow: 10px 0 16px -6px rgba(0, 0, 0, 0.7);
	border-right: 1px solid rgba(245, 158, 11, 0.35);
}
.zwt-gw-label {
	font-family: var(--font-mono, monospace);
	font-size: 0.6rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--amber, #f59e0b);
	color: var(--navy, #0d1b2e);
	padding: 3px 7px 2px;
	border-radius: 3px;
}
.zwt-gw-title {
	max-width: 230px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--font-mono, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}
.zwt-gw:hover .zwt-gw-title { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.zwt-gw-clock { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--amber, #f59e0b); }
.zwt-gw-days,
.zwt-gw-hms { position: relative; font-family: "ZWT Seg7", monospace; font-weight: 700; font-size: 0.85rem; line-height: 1; }
.zwt-ghost { position: absolute; inset: 0; opacity: 0.12; }  /* unlit segments, like the logo clock */
.zwt-digits { position: relative; text-shadow: 0 0 6px rgba(245, 158, 11, 0.7); }
.zwt-gw-unit { font-family: var(--font-mono, monospace); font-size: 0.55rem; letter-spacing: 0.1em; margin-right: 0.3rem; opacity: 0.8; }
.zwt-gw-ended { font-family: var(--font-mono, monospace); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; }
.zwt-gw.is-ended .zwt-gw-days,
.zwt-gw.is-ended .zwt-gw-unit,
.zwt-gw.is-ended .zwt-gw-hms { display: none; }

@media (max-width: 768px) {
	.zwt-gw { padding: 0 0.75rem; gap: 0.5rem; }
	.zwt-gw-title { display: none; }   /* phones: label + countdown only */
	.zwt-item { padding: 0 1.5rem; }
	.zwt--digital .zwt-item { font-size: 0.66rem; letter-spacing: 0.04em; }
	.zwt--roll .zwt-item, .zwt--fade .zwt-item { padding: 0 0.75rem; }
	.zwt--edges .zwt-window::before,
	.zwt--edges .zwt-window::after { width: 36px; }
}

/* People who've asked their device for less motion get a still strip. */
@media (prefers-reduced-motion: reduce) {
	.zwt--scroll .zwt-track { animation: none; }
	.zwt .zwt-item { transition: none !important; }
}