/* ============================================================
 * ZINERGE — polish.css
 * v1.3 — Premium UX layer. Loaded after main.css.
 * Motion, micro-interactions, navigation feel.
 * ============================================================ */

/* ---------- Lenis-style smoothness (CSS only) ---------- */
html { scroll-behavior: smooth; }
html.is-scrolling-fast { scroll-behavior: auto; } /* during keyboard nav */

/* Native cross-document fades (Chromium evergreen) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: zVtOut 220ms var(--ease-out) both; }
::view-transition-new(root) { animation: zVtIn  360ms var(--ease-out) both; }
@keyframes zVtOut { to { opacity: 0; transform: translateY(-6px) } }
@keyframes zVtIn  { from { opacity: 0; transform: translateY(8px) } }

/* ---------- Reading progress (top of viewport on articles) ---------- */
.z-read-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 2px;
	background: transparent; z-index: 9998; pointer-events: none;
}
.z-read-progress__bar {
	height: 100%; width: 0%;
	background: linear-gradient(90deg, var(--signal), color-mix(in srgb, var(--signal) 60%, var(--cryo)));
	box-shadow: 0 0 12px var(--signal-glow);
	transition: width 80ms linear;
	transform-origin: left;
}

/* ---------- Premium focus ring ---------- */
:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 4px;
	border-radius: 6px;
	box-shadow: 0 0 0 4px var(--signal-glow-soft);
	transition: box-shadow 160ms var(--ease-out), outline-offset 160ms var(--ease-out);
}

/* ---------- Cursor halo (marketing only) ---------- */
.z-cursor-halo {
	position: fixed; pointer-events: none; z-index: 9999;
	width: 360px; height: 360px; left: 0; top: 0;
	background: radial-gradient(circle, var(--signal-glow-soft) 0%, transparent 60%);
	mix-blend-mode: screen;
	transform: translate(-50%, -50%) translate3d(var(--mx, -1000px), var(--my, -1000px), 0);
	transition: transform 220ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
	opacity: 0; transition: opacity 320ms var(--ease-out);
}
.z-cursor-halo.is-active { opacity: 0.7; }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.z-cursor-halo { display: none !important; }
}
:root[data-theme="light"] .z-cursor-halo { mix-blend-mode: multiply; opacity: 0; }
:root[data-theme="light"] .z-cursor-halo.is-active { opacity: 0.3; }

/* ---------- Magnetic hover on buttons (subtle pull) ---------- */
.z-btn { transition: transform 240ms var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); will-change: transform; }
.z-btn:hover { transform: translateY(-2px); }
.z-btn--signal:hover { box-shadow: 0 0 0 1px var(--signal), 0 8px 32px var(--signal-glow), 0 16px 48px rgba(220,255,30,0.08); }

/* ---------- Card lift with light bloom ---------- */
.z-card { position: relative; isolation: isolate; overflow: hidden; transition: transform 360ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 360ms var(--ease-out); }
.z-card::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(600px circle at var(--mx, 50%) var(--my, -100%), var(--signal-glow-soft), transparent 40%);
	opacity: 0; transition: opacity 320ms var(--ease-out); z-index: 0;
}
.z-card > * { position: relative; z-index: 1; }
.z-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.z-card:hover::after { opacity: 1; }

:root[data-theme="light"] .z-card:hover { box-shadow: 0 12px 32px rgba(19,19,16,0.08); }

/* ---------- Same magnetic light on packages/industries/bento ---------- */
.zb-package, .zb-industry, .zb-bento__item, .zb-pillar, .zb-insight, .zb-case {
	position: relative; isolation: isolate; overflow: hidden;
	transition: transform 360ms var(--ease-out), border-color 280ms var(--ease-out), background var(--dur-fast);
}
.zb-package::after, .zb-industry::after, .zb-bento__item::after,
.zb-pillar::after, .zb-insight::after, .zb-case::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -100%), var(--signal-glow-soft), transparent 50%);
	opacity: 0; transition: opacity 320ms var(--ease-out); z-index: 0;
}
.zb-package > *, .zb-industry > *, .zb-bento__item > *,
.zb-pillar > *, .zb-insight > *, .zb-case > * { position: relative; z-index: 1; }
.zb-package:hover::after, .zb-industry:hover::after, .zb-bento__item:hover::after,
.zb-pillar:hover::after, .zb-insight:hover::after, .zb-case:hover::after { opacity: 1; }

/* ---------- Smoother nav link underline ---------- */
.z-nav__link { position: relative; }
.z-nav__link::after {
	transition: transform 360ms var(--ease-spring), background 240ms;
}

/* ---------- Header glass on scroll, refined ---------- */
.z-header { transition: background 360ms var(--ease-out), backdrop-filter 360ms, border-color 360ms, transform 480ms var(--ease-out), box-shadow 360ms; }
.z-header.is-scrolled {
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	background: color-mix(in srgb, var(--surface) 78%, transparent);
	box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(0,0,0,0.35);
}
:root[data-theme="light"] .z-header.is-scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(19,19,16,0.06); }

/* ---------- Hero gentle parallax / reveal refinement ---------- */
.zb-hero { will-change: transform; }
.zb-hero__inner { transform: translateZ(0); }
.zb-hero__headline { animation: zHeroLine 900ms var(--ease-out) both 120ms; }
@keyframes zHeroLine {
	from { opacity: 0; transform: translateY(24px); letter-spacing: -0.02em; filter: blur(4px); }
	60%  { opacity: 1; transform: translateY(0); filter: blur(0); }
	to   { letter-spacing: -0.04em; }
}
.zb-hero .signal-word {
	display: inline-block;
	animation: zSignalPop 800ms var(--ease-spring) both 600ms;
}
@keyframes zSignalPop {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}

/* ---------- Marquee — pause on hover already; add fade edges ---------- */
.zb-marquee { mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.zb-marquee__item { transition: color 240ms, opacity 240ms, transform 240ms var(--ease-spring); }
.zb-marquee__item:hover { transform: translateY(-2px); }

/* ---------- Slider — snap + nicer scroll ---------- */
.zb-slider__viewport { scroll-snap-type: x mandatory; scrollbar-width: none; }
.zb-slider__viewport::-webkit-scrollbar { display: none; }
.zb-slider__slide { scroll-snap-align: start; }
.zb-slider__btn { transition: all 240ms var(--ease-spring); }
.zb-slider__btn:hover { transform: scale(1.08); }
.zb-slider__btn:active { transform: scale(0.94); }

/* ---------- Mobile drawer — smoother + backdrop ---------- */
.z-mobile-drawer { transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.z-mobile-drawer::before {
	content: ""; position: fixed; inset: 0;
	background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	opacity: 0; pointer-events: none; transition: opacity 320ms; z-index: -1;
}
.z-mobile-drawer.is-open::before { opacity: 1; }
.z-mobile-drawer.is-open .menu-item { animation: zMenuIn 480ms var(--ease-out) both; }
.z-mobile-drawer.is-open .menu-item:nth-child(1) { animation-delay: 80ms; }
.z-mobile-drawer.is-open .menu-item:nth-child(2) { animation-delay: 130ms; }
.z-mobile-drawer.is-open .menu-item:nth-child(3) { animation-delay: 180ms; }
.z-mobile-drawer.is-open .menu-item:nth-child(4) { animation-delay: 230ms; }
.z-mobile-drawer.is-open .menu-item:nth-child(5) { animation-delay: 280ms; }
.z-mobile-drawer.is-open .menu-item:nth-child(6) { animation-delay: 330ms; }
.z-mobile-drawer.is-open .menu-item:nth-child(7) { animation-delay: 380ms; }
@keyframes zMenuIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Theme toggle: rotate ring on toggle ---------- */
.z-theme-toggle { transition: all 240ms var(--ease-out); position: relative; }
.z-theme-toggle::after {
	content: ""; position: absolute; inset: -2px; border-radius: var(--r-md);
	background: conic-gradient(from 0deg, transparent, var(--signal), transparent);
	opacity: 0; transition: opacity 320ms;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; padding: 1px;
}
.z-theme-toggle:hover::after { opacity: 0.4; animation: zRingSpin 2.4s linear infinite; }
@keyframes zRingSpin { to { transform: rotate(360deg); } }

/* ---------- CTA band — radial glow shimmer ---------- */
.zb-cta__inner { position: relative; isolation: isolate; }
.zb-cta__inner::before {
	background: radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%), var(--signal-glow-soft) 0%, transparent 55%);
	transition: background 480ms var(--ease-out);
}

/* ---------- Stat counter — glow tick on settle ---------- */
.zb-stats__value { transition: text-shadow 480ms var(--ease-out); }
.zb-stats__value.is-settled { text-shadow: 0 0 24px var(--signal-glow); }

/* ---------- Smooth section reveals — refined timing ---------- */
.fade-up { transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out); transform: translateY(20px); }
.fade-up.is-visible { transform: translateY(0); }

/* ---------- Page entrance ---------- */
body { animation: zPageIn 480ms var(--ease-out) both; }
@keyframes zPageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Selection ---------- */
::selection { background: var(--signal); color: var(--signal-ink); text-shadow: none; }

/* ---------- Scrollbar — themed thin ---------- */
:root[data-theme="dark"] {
	scrollbar-color: var(--surface-3) var(--bg);
	scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }

/* ---------- Image transitions on hover (cards w/ media) ---------- */
.zb-case__media img, .zb-insight__media img { transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 720ms; }
.zb-case:hover .zb-case__media img, .zb-insight:hover .zb-insight__media img { transform: scale(1.06); filter: saturate(1.08); }

/* ---------- Better quote planner option transitions ---------- */
.z-quote-opt { transition: all 240ms var(--ease-spring); position: relative; overflow: hidden; }
.z-quote-opt::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), var(--signal-glow-soft), transparent 50%);
	opacity: 0; transition: opacity 240ms;
}
.z-quote-opt:hover::after { opacity: 1; }
.z-quote-opt.is-selected { transform: translateY(-2px); }

/* ---------- Anchor link offset (sticky header friendly) ---------- */
:target { scroll-margin-top: 120px; }
[id] { scroll-margin-top: 120px; }

/* ---------- Smooth list hover (footer links) ---------- */
.z-footer__col a { display: inline-block; transition: transform 240ms var(--ease-spring), color 240ms; }
.z-footer__col a:hover { transform: translateX(4px); color: var(--signal); }

/* ---------- Inline link hover (in prose) ---------- */
article a:not(.z-btn):not(.z-card__link) {
	background-image: linear-gradient(180deg, transparent 80%, var(--signal-glow-soft) 80%);
	background-size: 100% 200%; background-position: 0 0;
	transition: background-position 320ms var(--ease-out), color 240ms;
}
article a:not(.z-btn):not(.z-card__link):hover { background-position: 0 100%; color: var(--signal); }

/* ---------- Reduced motion respects ---------- */
@media (prefers-reduced-motion: reduce) {
	.z-cursor-halo, .zb-hero__headline { animation: none !important; }
	html { scroll-behavior: auto; }
	.z-card, .zb-package, .zb-industry, .zb-bento__item, .zb-pillar { transition: none !important; }
}