/*
Theme Name: eZpassClip Velocity
Theme URI: https://ezpassclip.com
Author: eZpassClip
Description: A second look for ezpassclip.com: dark and kinetic, built around a speed-stripe motif (solid type that breaks into fading stripes). Child theme of "eZpassClip": it shares that theme's store locator, settings and tab icon, so the eZpassClip theme must stay installed.
Template: ezpassclip
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ezpassclip-velocity
*/

/* The point where solid type starts breaking into stripes. Registered so it can animate. */
@property --split {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 16%;
}

/* ---------- Tokens ---------- */
:root {
	--v-bg: #070919;
	--v-bg-2: #0c0f2c;
	--v-panel: #12153a;
	--v-line: rgba(255, 255, 255, .11);
	--v-text: #f2f3ff;
	--v-dim: rgba(242, 243, 255, .70);
	--indigo: #7a6bff;
	--violet: #8b6bff;
	--pink: #ff3d9a;
	--grad: linear-gradient(100deg, #8b6bff 0%, #c44fdc 52%, #ff3d9a 100%);
	--font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--stripe: .078em;
	--lean: -7deg;
}

/* ---------- Base ---------- */
body { background: var(--v-bg); color: var(--v-text); }
h1, h2, h3 { color: inherit; }
a { color: #b9a9ff; }
a:hover { color: var(--pink); }
.lead, .locator-status { color: var(--v-dim); }
.hero-glow { display: none; }

/* Light surfaces keep dark text. */
.card, .store, .entry-content, .locator-empty, .swatches { color: var(--ink); }
.card a:not(.btn), .store a:not(.store-dir), .entry-content a:not(.btn) { color: #4a3fc4; }
.locator-search input { color: var(--ink); }

/* ---------- Gradient text, and the speed-stripe treatment ----------
   Stripes are used sparingly on purpose: only the "pass" in the wordmark (header and the big
   sliding band) and the hero word. Everything else that needs emphasis gets plain gradient text. */
.streak, .wm-b, .accent, .v-feat-num {
	display: inline-block;
	padding: 0 .14em .08em 0;
	margin-right: -.14em;
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
.streak, .wm-b {
	-webkit-mask-image:
		linear-gradient(90deg, #000 var(--split), rgba(0, 0, 0, 0) calc(var(--split) + 62%)),
		repeating-linear-gradient(180deg, #000 0, #000 var(--stripe), rgba(0, 0, 0, 0) var(--stripe), rgba(0, 0, 0, 0) calc(var(--stripe) * 1.9));
	mask-image:
		linear-gradient(90deg, #000 var(--split), rgba(0, 0, 0, 0) calc(var(--split) + 62%)),
		repeating-linear-gradient(180deg, #000 0, #000 var(--stripe), rgba(0, 0, 0, 0) var(--stripe), rgba(0, 0, 0, 0) calc(var(--stripe) * 1.9));
}
@keyframes ezv-sweep {
	0%, 100% { --split: -34%; }
	50% { --split: 58%; }
}
/* Hero word: sweeps on its own until the pointer takes over (see velocity.js). */
.streak-live { animation: ezv-sweep 6s ease-in-out infinite; }
.streak-live.is-tracking { animation: none; transition: --split .25s ease-out; }

/* ---------- Wordmark ---------- */
.wordmark {
	display: inline-flex; align-items: baseline;
	font-style: italic; font-weight: 900; letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; color: #fff;
}
/* Room on the left: the slanted foot of the "p" reaches left of the box, and the stripe mask
   cuts off whatever is outside the box. The negative margin keeps the letters where they were. */
.wm-b { --split: 6%; padding-left: .1em; margin-left: -.1em; }
.brand-word { font-size: 1.85rem; text-decoration: none; }
.brand-word:hover .wm-b, .brand-word:focus-visible .wm-b { animation: ezv-sweep 1.8s ease-in-out infinite; }
.wordmark-outline {
	padding-right: .45em;
	font-size: clamp(4.5rem, 15vw, 13rem); line-height: 1;
	color: rgba(255, 255, 255, .07); -webkit-text-stroke: 2px rgba(255, 255, 255, .55);
}
/* No glow (filter) on this one: the stripe mask cuts a glow off at the edges of the word,
   which showed as a pink box around "pass". */
.wordmark-outline .wm-b { -webkit-text-stroke: 0; --split: -6%; }

/* ---------- Buttons ---------- */
.btn { border-radius: 13px; font-style: italic; font-weight: 800; letter-spacing: .01em; }
.btn-primary { box-shadow: 0 10px 30px rgba(196, 79, 220, .38); }
.btn-primary:hover { box-shadow: 0 14px 38px rgba(255, 61, 154, .45); }
.btn-ghost { background: rgba(255, 255, 255, .05); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; box-shadow: none; }

/* ---------- Header ---------- */
.site-header { background: rgba(7, 9, 25, .74); }
.site-header.is-stuck { border-color: transparent; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.nav-list a { color: var(--v-text); }
.nav-list a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-list .current-menu-item > a, .nav-list .current_page_item > a { background: rgba(139, 107, 255, .24); color: #fff; }
.nav-toggle { background: rgba(255, 255, 255, .06); border-color: var(--v-line); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { background: #fff; }
.nav-open .nav-toggle-bars { background: transparent; }
.header-stripes { height: 1px; background: var(--v-line); }

/* ---------- Hero ---------- */
.v-hero {
	position: relative; overflow: hidden; padding: clamp(44px, 6.5vw, 88px) 0 0;
	background:
		radial-gradient(58% 70% at 88% 18%, rgba(139, 107, 255, .30), transparent 62%),
		radial-gradient(44% 58% at 6% 92%, rgba(255, 61, 154, .17), transparent 66%),
		var(--v-bg);
}
.v-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.v-lines span {
	position: absolute; left: 100%; height: 2px; border-radius: 2px; opacity: var(--o, .6);
	background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(139, 107, 255, .75) 22%, rgba(255, 61, 154, 0));
	animation: ezv-line var(--d, 4s) linear var(--delay, 0s) infinite;
}
@keyframes ezv-line { to { transform: translateX(calc(-100vw - 100%)); } }

.v-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.v-pill {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 6px 16px 6px 6px;
	background: rgba(255, 255, 255, .06); border: 1px solid var(--v-line); border-radius: 12px;
	font-weight: 600; font-size: .92rem; color: var(--v-text);
}
.v-pill-tag { padding: 3px 10px; border-radius: 8px; background: var(--grad); color: #fff; font-size: .74rem; font-weight: 800; font-style: italic; letter-spacing: .08em; text-transform: uppercase; }
.v-title {
	margin: 0; font-size: clamp(2.2rem, 5.4vw, 4.7rem); font-style: italic; font-weight: 900;
	line-height: .96; letter-spacing: -.04em; text-transform: uppercase;
}
.v-title-line { display: block; white-space: nowrap; }
.v-title-line:nth-child(2) { margin-left: .32em; }
.v-title-line:nth-child(3) { margin-left: .64em; }
.v-lead { margin: 28px 0 0; max-width: 33em; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--v-dim); }
.v-stats { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 40px 0 0; }
.v-stats dt { font-size: 2.7rem; font-weight: 900; font-style: italic; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .1em; }
.v-stats dd { margin: 6px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--v-dim); }

.v-hero-art { position: relative; }
.v-photo {
	position: relative; z-index: 1; margin: 0; overflow: hidden; border-radius: 26px; transform: skewX(var(--lean));
	box-shadow: 0 40px 90px rgba(139, 107, 255, .36), 0 0 0 1px rgba(255, 255, 255, .14);
}
.v-photo img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; transform: skewX(7deg) scale(1.22); }
.v-trail {
	position: absolute; z-index: 0; top: 13%; bottom: 13%; right: 58%; width: 62%;
	background: repeating-linear-gradient(180deg, rgba(139, 107, 255, .75) 0, rgba(255, 61, 154, .75) 9px, rgba(0, 0, 0, 0) 9px, rgba(0, 0, 0, 0) 21px);
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 88%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 88%);
	transform: skewX(var(--lean)); animation: ezv-trail 3.4s ease-in-out infinite;
}
@keyframes ezv-trail {
	0%, 100% { opacity: .5; transform: skewX(var(--lean)) translateX(0); }
	50% { opacity: .95; transform: skewX(var(--lean)) translateX(-22px); }
}
.v-badge {
	position: absolute; z-index: 2; right: 5%; bottom: -16px; margin: 0; padding: 9px 18px; border-radius: 10px;
	background: #fff; color: var(--ink); font-weight: 900; font-style: italic; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase;
	transform: skewX(var(--lean)); box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}

.v-wordband { position: relative; z-index: 1; margin-top: clamp(44px, 6vw, 84px); padding: 22px 0 12px; overflow: hidden; border-block: 1px solid var(--v-line); background: rgba(255, 255, 255, .025); }
.v-wordband-track { display: flex; width: max-content; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; }
/* The band always rolls left to right: slowly on a still page, faster while the page is scrolled.
   velocity.js drives it (it adds "is-driven"); this CSS animation is the slow roll for when the
   script has not run. One step is one wordmark, a sixth of the track (front-page.php prints six),
   so the loop has no seam. This is the one animation that also runs when the device asks for
   reduced motion (Michael's request; his own PC has Windows animation effects off), hence the
   selector weight and !important. */
@keyframes ezv-roll {
	from { transform: translate3d(calc(-100% / 6), 0, 0); }
	to { transform: translate3d(0, 0, 0); }
}
.v-wordband .v-wordband-track { animation: ezv-roll 40s linear infinite !important; }
.v-wordband .v-wordband-track.is-driven { animation: none !important; }

/* ---------- Sections ---------- */
.v-h2 {
	max-width: 15em; margin: 0 0 1em; font-size: clamp(2rem, 4.5vw, 3.6rem); font-style: italic; font-weight: 900;
	line-height: 1; letter-spacing: -.035em; text-transform: uppercase;
}

/* Benefits: numbered, no decorative icons, nothing that looks clickable */
.v-feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--v-line); }
.v-feat { padding: 32px 28px 8px 0; }
.v-feat + .v-feat { padding-left: 28px; border-left: 1px solid var(--v-line); }
.v-feat-num { --split: -18%; display: block; width: max-content; margin-bottom: 18px; font-size: 3.6rem; font-weight: 900; font-style: italic; line-height: 1; }
.v-feat h3 { margin-bottom: .5em; font-size: 1.22rem; font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.v-feat p { margin: 0; color: var(--v-dim); font-size: .98rem; }

/* Colors */
.v-colors { background: var(--v-bg-2); border-block: 1px solid var(--v-line); }
.v-colors .colors-copy p { color: var(--v-dim); }
.v-colors .colors-stage { box-shadow: 0 40px 90px rgba(139, 107, 255, .28), 0 0 0 1px rgba(255, 255, 255, .12); }
.swatches { border-radius: 14px; }
.swatch { border-radius: 10px; }

/* How it works: a toll lane that fills as you scroll */
.v-lane { position: relative; --p: 0; }
.v-lane-track {
	position: absolute; left: 0; right: 0; top: 27px; height: 4px; border-radius: 4px;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .24) 18px, rgba(0, 0, 0, 0) 18px, rgba(0, 0, 0, 0) 32px);
}
.v-lane-fill { display: block; width: calc(var(--p) * 100%); height: 100%; border-radius: 4px; background: var(--grad); box-shadow: 0 0 18px rgba(255, 61, 154, .75); }
.v-lane-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.v-step-num {
	display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 24px; border-radius: 16px;
	background: var(--v-panel); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 0 8px var(--v-bg);
	font-size: 1.45rem; font-weight: 900; font-style: italic; transform: skewX(var(--lean));
	transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.v-step.is-passed .v-step-num { background: #c44fdc; border-color: transparent; box-shadow: 0 0 0 8px var(--v-bg), 0 0 26px rgba(255, 61, 154, .7); }
.v-step h3 { margin-bottom: .45em; font-size: 1.25rem; font-style: italic; font-weight: 800; text-transform: uppercase; }
.v-step p { margin: 0; max-width: 24em; color: var(--v-dim); }

/* States: a slow ticker. Plain text, not buttons. */
.v-states { padding-bottom: clamp(40px, 6vw, 72px); }
.v-marquee {
	display: flex; overflow: hidden; padding: 24px 0; border-block: 1px solid var(--v-line);
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 10%, #000 90%, rgba(0, 0, 0, 0));
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), #000 10%, #000 90%, rgba(0, 0, 0, 0));
}
.v-marquee-row { display: flex; flex: none; animation: ezv-marquee 44s linear infinite; }
.v-marquee-row li {
	display: flex; align-items: center; padding-left: .7em; white-space: nowrap;
	font-size: clamp(1.4rem, 3vw, 2.5rem); font-weight: 900; font-style: italic; letter-spacing: -.02em; text-transform: uppercase;
}
.v-marquee-row li:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .6); }
.v-marquee-row li::after { content: ""; width: .7em; height: .14em; margin-left: .7em; border-radius: 2px; background: var(--grad); transform: skewX(-24deg); }
@keyframes ezv-marquee { to { transform: translateX(-100%); } }

/* Quotes */
.v-quotes { padding-top: clamp(40px, 6vw, 72px); }
.v-quote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.v-quote { position: relative; margin: 0; padding: 28px 24px 28px 30px; overflow: hidden; border-radius: 18px; background: var(--v-panel); border: 1px solid var(--v-line); }
.v-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--grad); }
.v-quote p { margin: 0; font-size: 1.15rem; font-weight: 700; font-style: italic; line-height: 1.4; }
.quote-mark { color: var(--pink); }

/* Find-a-store band */
.band h2 { font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.band-inner { background: radial-gradient(80% 140% at 100% 0%, rgba(255, 61, 154, .6), transparent 60%), linear-gradient(120deg, #2a2496, #5a3fd0 60%, #8b4fd8); box-shadow: 0 30px 80px rgba(139, 107, 255, .3); }

/* ---------- Inner pages (About, Contact, Store Locator, 404) ---------- */
.page-hero {
	border-bottom: 1px solid var(--v-line);
	background: radial-gradient(50% 120% at 90% 0%, rgba(139, 107, 255, .26), transparent 62%), var(--v-bg);
}
.page-hero h1 { font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; }
.page-hero-tight { padding-bottom: clamp(24px, 3vw, 36px); }
.locator { padding-top: clamp(24px, 3vw, 36px); }
.locator-map { border-color: var(--v-line); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.photo-pair figure { border-color: rgba(255, 255, 255, .16); }
.contact-card-alt { background: linear-gradient(145deg, #eef0fb, #f7e6f1); }

/* ---------- Footer ---------- */
.site-footer { background: #05061a; border-top: 1px solid var(--v-line); }
.footer-name { font-style: italic; font-weight: 900; letter-spacing: -.04em; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
	.v-feat-grid { grid-template-columns: repeat(2, 1fr); }
	.v-feat { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--v-line); }
	.v-feat + .v-feat { padding-left: 24px; }
	.v-feat:nth-child(odd) { padding-left: 0; border-left: 0; }
	.v-quote-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.v-hero-grid { grid-template-columns: 1fr; }
	.v-hero-art { width: min(520px, 92%); margin: 10px auto 0; }
	.site-nav { background: #0c0f2c; border-bottom-color: var(--v-line); }

	.v-lane-track { left: 27px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .24) 18px, rgba(0, 0, 0, 0) 18px, rgba(0, 0, 0, 0) 32px); }
	.v-lane-fill { width: 100%; height: calc(var(--p) * 100%); }
	.v-lane-steps { grid-template-columns: 1fr; gap: 34px; }
	.v-step { position: relative; padding-left: 86px; min-height: 58px; }
	.v-step-num { position: absolute; left: 0; top: 0; margin: 0; }
	.page-hero::after { opacity: .5; }
}
@media (max-width: 600px) {
	.v-title-line:nth-child(2) { margin-left: .16em; }
	.v-title-line:nth-child(3) { margin-left: .32em; }
	.v-stats { gap: 14px 26px; }
	.v-stats dt { font-size: 2.2rem; }
	.v-feat-grid, .v-quote-grid { grid-template-columns: 1fr; }
	.v-feat, .v-feat + .v-feat { padding: 24px 0; border-left: 0; }
	.brand-word { font-size: 1.6rem; }
}

/* Reduced motion: no self-running animation. Effects the visitor drives (pointer, scroll) stay.
   ?motion=full overrides this for previewing; see the parent theme. */
@media (prefers-reduced-motion: reduce) {
	html:not(.motion-full) .v-lines { display: none; }
	html.js:not(.motion-full) .reveal .streak { --split: 18%; }
	html:not(.motion-full) .streak-live { --split: 22%; }
	html:not(.motion-full) .streak-live.is-tracking { transition: --split .25s ease-out !important; }
	html:not(.motion-full) .v-marquee { justify-content: center; -webkit-mask-image: none; mask-image: none; }
	html:not(.motion-full) .v-marquee-row { flex-wrap: wrap; flex: 0 1 1160px; justify-content: flex-start; row-gap: 10px; padding: 0 20px; }
	html:not(.motion-full) .v-marquee-row[aria-hidden="true"] { display: none; }
}