/* ==========================================================
   TYLOS — products-modern.css
   Load AFTER the inline <style> block in products.php.
   ========================================================== */

/* ── Global ── */
[hidden] { display: none !important; }
html { scroll-padding-top: 84px; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .25s ease both vt-out; }
::view-transition-new(root) { animation: .35s ease both vt-in; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000;
    background: linear-gradient(90deg, var(--signal), var(--amber));
    transform-origin: left; transform: scaleX(var(--p, 0));
    pointer-events: none;
}
.site-header { backdrop-filter: saturate(160%) blur(12px); background: rgba(255,255,255,.88); }
.site-header .header__inner { transition: padding .25s ease; }
.site-header.is-scrolled .header__inner { padding: 10px 0; }

/* ── Reveal (JS adds .rv, then .in when visible; no JS = everything stays visible) ── */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }

/* ══════════ PAGE HERO ══════════ */
.page-hero__inner > div > * { opacity: 0; animation: phIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.page-hero__inner > div:first-child > :nth-child(1) { animation-delay: .08s; }
.page-hero__inner > div:first-child > :nth-child(2) { animation-delay: .20s; }
.page-hero__side { opacity: 0; animation: phIn .9s .4s cubic-bezier(.2,.7,.2,1) forwards; }
.page-hero__side > * { opacity: 1; animation: none; }
@keyframes phIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* slow-drifting glow behind the title */
.page-hero::before { animation: orbDrift 14s ease-in-out infinite alternate; }
@keyframes orbDrift { from { transform: translate(0,0); } to { transform: translate(-60px, 50px); } }

.chip { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.chip:hover { background: var(--signal); border-color: var(--signal); color: #fff; transform: translateY(-2px); }

/* ══════════ CATALOG CARDS ══════════ */
/* separate cards instead of one fused block; hover lifts instead of flat navy invert */
.catalog-grid { background: none; border-radius: 0; overflow: visible; gap: 18px; }
.prod-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: opacity .6s ease, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.prod-card:hover { background: var(--white); color: inherit; border-color: transparent; }
.prod-card:hover h3 { color: var(--ink); }
.prod-card:hover .prod-card__desc { color: var(--steel); }
.prod-card:hover .prod-card__link { color: var(--signal); }

.prod-card::before {                         /* top accent bar sweeps in */
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--signal), var(--amber));
    transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.prod-card:hover::before { transform: scaleX(1); }
.prod-card::after {                          /* cursor-follow glow */
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,31,.12), transparent 60%);
    transition: opacity .3s ease;
}
.prod-card:hover::after { opacity: 1; }
.prod-card .code { color: var(--signal); }
.prod-card .icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: left center; }
.prod-card:hover .icon { transform: scale(1.15) rotate(-4deg); }
.prod-card__link { position: relative; align-self: flex-start; }

/* ══════════ TAG CLOUD + SEARCH ══════════ */
.tag-search { position: relative; max-width: 420px; margin: 22px 0 26px; }
.tag-search input {
    width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--ink);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 13px 16px 13px 42px; outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tag-search input:focus { background: #fff; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.tag-search::before {
    content: ''; position: absolute; left: 15px; top: 50%; width: 13px; height: 13px; margin-top: -8px;
    border: 2px solid var(--steel); border-radius: 50%; pointer-events: none;
}
.tag-search::after {
    content: ''; position: absolute; left: 27px; top: 50%; width: 6px; height: 2px; margin-top: 5px;
    background: var(--steel); transform: rotate(45deg); pointer-events: none;
}
.tag-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--steel); margin-top: 8px; letter-spacing: .04em; }
.tag-empty { font-size: 14px; color: var(--steel); padding: 12px 0; }

.tag-wrap a {
    color: var(--steel); border-color: var(--line-strong);
    transition: opacity .5s ease, transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tag-wrap a:hover {
    background: var(--signal); border-color: var(--signal); color: #fff;
    transform: translateY(-3px); box-shadow: 0 8px 18px rgba(255,90,31,.25);
}
.tag-wrap a.rv { transform: translateY(10px); }
.tag-wrap a.rv.in { transform: none; }
.tag-wrap a.rv.in:hover { transform: translateY(-3px); }
.tag-wrap a.pop { animation: tagPop .3s ease both; }
@keyframes tagPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ══════════ SPLIT SECTION ══════════ */
.industry-list li { transition: transform .25s ease, color .25s ease, padding-left .25s ease; }
.industry-list li::before { transition: transform .25s ease, background .25s ease; }
.industry-list li:hover { transform: translateX(6px); color: var(--ink); }
.industry-list li:hover::before { transform: rotate(45deg) scale(1.2); }
.reason { transition: border-color .25s ease, transform .25s ease; }
.reason:hover { border-top-color: var(--signal); transform: translateY(-3px); }
.reason .value { font-variant-numeric: tabular-nums; }

/* ══════════ CTA ══════════ */
.cta-card { transition: transform .3s ease, box-shadow .3s ease; }
.cta-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cta-card::after {                           /* hazard stripe slides only on hover */
    background-size: 33.94px 6px;
    animation: stripeSlide 1.2s linear infinite; animation-play-state: paused;
}
.cta-card:hover::after { animation-play-state: running; }
@keyframes stripeSlide { to { background-position-x: 33.94px; } }

/* ══════════ Responsive ══════════ */
@media (max-width: 768px) {
    .page-hero::before { animation: none; }
}

/* ══════════ Reduced motion ══════════ */
@media (prefers-reduced-motion: reduce) {
    .page-hero__inner > div > *, .page-hero__side { opacity: 1 !important; animation: none !important; }
    .rv { opacity: 1; transform: none; }
    .page-hero::before, .cta-card::after { animation: none; }
}