
.category-themed{--cat-dark:#102638;--cat-mid:#38586b;--cat-light:#d4e3eb;--cat-accent:#a9c5d7}
.category-themed.cat-vaccine{--cat-dark:#092638;--cat-mid:#246c86;--cat-light:#edf9fc;--cat-accent:#a8e2f1}
.category-themed.cat-water{--cat-dark:#082b38;--cat-mid:#176775;--cat-light:#eaf5f6;--cat-accent:#9ed7dd}
.category-themed.cat-armour{--cat-dark:#141d37;--cat-mid:#3a4c7a;--cat-light:#f0f2f9;--cat-accent:#bdc9ec}
.category-themed .p-hero{background:radial-gradient(ellipse at 82% 38%,color-mix(in srgb,var(--cat-mid),transparent 12%),transparent 66%),linear-gradient(115deg,var(--cat-dark),var(--cat-mid))!important;position:relative}
.category-themed .p-hero h1,.category-themed .p-hero h2{color:#f1f7fc}
.category-themed .p-hero em,.category-themed .p-hero .eyebrow,.category-themed .p-visual-label{color:var(--cat-accent)}
.category-themed .p-nav,.category-themed .p-applications,.category-themed .p-resources,.category-themed .water-range,.category-themed .tri-new{background:var(--cat-dark)!important}
.category-themed .p-overview,.category-themed .p-details,.category-themed .water-project{background:var(--cat-light)!important}
.category-themed .p-related,.category-themed .p-contact{background:linear-gradient(115deg,var(--cat-dark),var(--cat-mid))!important}
.category-themed .p-visual{border:0!important;border-radius:0!important;background:none!important;isolation:isolate}
.category-themed .p-visual:before{display:none!important}
.category-themed .p-visual>.pack,.category-themed .vaxguard-front,.category-themed .p-visual>.photo{position:relative;z-index:1}
.category-themed .category-art{position:absolute;inset:5% 0 2%;pointer-events:none;z-index:0;overflow:hidden}
.category-art svg{width:100%;height:100%;fill:none;stroke:var(--cat-accent);stroke-width:1;opacity:.3}
.cat-speciality .category-art svg{animation:crystal-breathe 12s ease-in-out infinite}
.cat-vaccine .category-art svg{animation:crystal-breathe 9s ease-in-out infinite}
.cat-armour .category-art svg{animation:crystal-breathe 14s ease-in-out infinite}
.cat-water .water-hero-art{position:relative}
.cat-water .category-art{inset:0;z-index:0;opacity:.6}
.cat-water .category-art svg{stroke-dasharray:10 13;animation:water-flow 24s linear infinite}
@keyframes crystal-breathe{50%{opacity:.48;transform:scale(1.035)}}
@keyframes water-flow{to{stroke-dashoffset:-230}}
@media(prefers-reduced-motion:reduce){.category-art svg{animation:none!important}}

.cat-armour .p-visual>.photo{width:64%;height:auto;max-height:320px;object-fit:contain;border-radius:0}
.category-themed.motion-off .category-art svg{animation:none!important}

/* Slow movement of the speciality geometry; packaging remains stationary. */
.cat-speciality .category-art svg{transform-origin:50% 50%;animation:crystal-turn 24s ease-in-out infinite}
.cat-speciality .category-art svg>path:nth-child(2){stroke-dasharray:160 28;animation:crystal-trace 16s linear infinite}
@keyframes crystal-turn{0%,100%{transform:rotate(-7deg) scale(.98);opacity:.30}50%{transform:rotate(7deg) scale(1.04);opacity:.48}}
@keyframes crystal-trace{to{stroke-dashoffset:-376}}
.category-themed.motion-off .category-art svg>path{animation:none!important}
@media(prefers-reduced-motion:reduce){.cat-speciality .category-art svg,.cat-speciality .category-art svg>path{animation:none!important}}

.cat-speciality:not(.motion-off) .category-art svg{animation:crystal-turn 24s ease-in-out infinite!important}
.cat-speciality:not(.motion-off) .category-art svg>path:nth-child(2){animation:crystal-trace 16s linear infinite!important}

/* Category previews use the approved automatic-motion default and shared pause control. */
.cat-vaccine:not(.motion-off) .category-art svg{animation:crystal-breathe 9s ease-in-out infinite!important}
.cat-water:not(.motion-off) .category-art svg{animation:water-flow 24s linear infinite!important}
.cat-armour:not(.motion-off) .category-art svg{animation:crystal-breathe 14s ease-in-out infinite!important}
.cat-water .focus-scene{background:radial-gradient(ellipse at 80% 38%,#176775cc,transparent 66%),linear-gradient(115deg,#082b38,#176775)!important}
.cat-water .focus-plant{position:relative;isolation:isolate}
.cat-water .focus-image{position:relative;z-index:1}
