/*
 * kz-category-icons.css — styling + motion for the Kezir category icon set (assets/svg/category-icons/*.svg).
 *
 * Each icon is a soft-3D, flat-colour illustration on a 48×48 grid. Its palette lives on the <svg> itself
 * (--m main, --d dark, --l light, --a accent, --c1…c3 extras). Depth comes from layered shapes: a rim light
 * (.hi .hi2), a shade (.sh .sh2), a specular dot (.gl) and a ground shadow (.gs). No gradients, ids or filters,
 * so an icon can appear any number of times on a page, in hidden containers too.
 *
 * Usage (any page):
 *   <span class="kz-cicon-host"><span data-kz-icon="trophy"></span> Desporto</span>   + KzCategoryIcons.hydrate()
 *   or server-side:  <?= kz_category_icon('trophy') ?>
 *
 * Motion (two layers):
 *   • hover / focus of the host (.kz-cicon-host): the icon lifts on a spring (.hv parts) and plays its own
 *     hover action (.h… parts), together with the ambient loop below;
 *   • ambient loop (the .bob .swing … parts): while the host is .selected / .is-active / [aria-checked=true],
 *     or always when the <svg> has data-anim="loop".
 * Nothing moves for users who prefer reduced motion.  Size: --kz-cicon-size on the icon or any ancestor.
 */

.kz-cicon {
    width: var(--kz-cicon-size, 1.5rem);
    height: var(--kz-cicon-size, 1.5rem);
    flex: none;
    display: inline-block;
    overflow: visible;
    vertical-align: middle;
    --c1: #F5B83D; --c2: #4C8DF6; --c3: #9B6BDF;     /* extras, overridable per icon */
}
.kz-cicon * { transform-box: view-box; }
[data-kz-icon] { display: inline-flex; line-height: 0; }

/* ── colour classes ─────────────────────────────────────────────────────── */
.kz-cicon .m  { fill: var(--m); }
.kz-cicon .d  { fill: var(--d); }
.kz-cicon .l  { fill: var(--l); }
.kz-cicon .a  { fill: var(--a); }
.kz-cicon .w  { fill: #fff; }
.kz-cicon .g  { fill: #AEBBC6; }
.kz-cicon .c1 { fill: var(--c1); }
.kz-cicon .c2 { fill: var(--c2); }
.kz-cicon .c3 { fill: var(--c3); }
.kz-cicon .sm  { stroke: var(--m);  fill: none; }
.kz-cicon .sd  { stroke: var(--d);  fill: none; }
.kz-cicon .sl  { stroke: var(--l);  fill: none; }
.kz-cicon .sa  { stroke: var(--a);  fill: none; }
.kz-cicon .sw  { stroke: #fff;      fill: none; }
.kz-cicon .sg  { stroke: #AEBBC6;   fill: none; }
.kz-cicon .sc1 { stroke: var(--c1); fill: none; }

/* ── depth: light, shade, specular, ground ──────────────────────────────── */
.kz-cicon .hi  { fill: #fff; opacity: .4; }
.kz-cicon .hi2 { fill: #fff; opacity: .22; }
.kz-cicon .sh  { fill: #000; opacity: .17; }
.kz-cicon .sh2 { fill: #000; opacity: .09; }
.kz-cicon .gl  { fill: #fff; opacity: .9; }
.kz-cicon .gs ellipse { fill: #000; opacity: .07; }
.kz-cicon .gs ellipse.in { opacity: .12; }

/* ── spring pose on hover (.hv parts; values come from --hx --hy --hr --hs --hsx --hsy, delay from --td) ── */
.kz-cicon .hv  { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--td, 0s); }
.kz-cicon .hvs { transform-origin: 24px 44.8px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; }

/* ── motion presets ─────────────────────────────────────────────────────── */
@keyframes kz-swing  { 0%, 100% { transform: rotate(calc(var(--amp, 8deg) * -1)); } 50% { transform: rotate(var(--amp, 8deg)); } }
@keyframes kz-bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--amp, 2px) * -1)); } }
@keyframes kz-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--amp, 1.12)); } }
@keyframes kz-beat   { 0%, 60%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 28% { transform: scale(1.02); } 42% { transform: scale(1.1); } }
@keyframes kz-spin   { to { transform: rotate(360deg); } }
@keyframes kz-wiggle { 0%, 40%, 100% { transform: rotate(0); } 8% { transform: rotate(var(--amp, 6deg)); } 16% { transform: rotate(calc(var(--amp, 6deg) * -1)); } 24% { transform: rotate(calc(var(--amp, 6deg) * .6)); } 32% { transform: rotate(calc(var(--amp, 6deg) * -.6)); } }
@keyframes kz-rise   { 0% { transform: translateY(3px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-7px); opacity: 0; } }
@keyframes kz-twinkle{ 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes kz-pop    { 0% { transform: translate(0, 0) scale(.3); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(var(--tx, 6px), var(--ty, -6px)) scale(1); opacity: 1; } 100% { transform: translate(calc(var(--tx, 6px) * 1.15), calc(var(--ty, -6px) * 1.15 + 4px)) scale(1); opacity: 0; } }
@keyframes kz-blink  { 0%, 40%, 100% { opacity: 1; } 50%, 90% { opacity: .22; } }
@keyframes kz-wave   { 0%, 100% { transform: skewY(-9deg); } 50% { transform: skewY(9deg); } }
@keyframes kz-draw   { 0% { stroke-dashoffset: 80; } 55%, 100% { stroke-dashoffset: 0; } }
/* hover-only extras */
@keyframes kz-jump   { 0%, 100% { transform: translateY(0) scale(1, 1); } 28% { transform: translateY(calc(var(--amp, 4px) * -1)) scale(.95, 1.07); } 52% { transform: translateY(0) scale(1.07, .93); } 68% { transform: translateY(calc(var(--amp, 4px) * -.3)) scale(1, 1); } }
@keyframes kz-scan   { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(-1px, -4px); } 75% { transform: translate(-3px, -1px); } }
@keyframes kz-flip   { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes kz-burst  { 0% { transform: scale(.2); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(var(--tx, 0px), var(--ty, -8px)) scale(1); opacity: 0; } }

/* the shorthand lives on each part; the animation name only exists while the "live" state below is on */
.kz-cicon .swing   { animation: var(--n-swing, none)   var(--dur, 2.2s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .bob     { animation: var(--n-bob, none)     var(--dur, 1.5s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .pulse   { animation: var(--n-pulse, none)   var(--dur, 1.4s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .beat    { animation: var(--n-beat, none)    var(--dur, 1.3s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .spin    { animation: var(--n-spin, none)    var(--dur, 4s) linear var(--delay, 0s) infinite; }
.kz-cicon .wiggle  { animation: var(--n-wiggle, none)  var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .rise    { animation: var(--n-rise, none)    var(--dur, 2s) ease-out var(--delay, 0s) infinite; }
.kz-cicon .twinkle { animation: var(--n-twinkle, none) var(--dur, 1.8s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .pop     { animation: var(--n-pop, none)     var(--dur, 2s) ease-out var(--delay, 0s) infinite; }
.kz-cicon .blink   { animation: var(--n-blink, none)   var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .wave    { animation: var(--n-wave, none)    var(--dur, 1.2s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .draw    { animation: var(--n-draw, none)    var(--dur, 1.3s) ease-out var(--delay, 0s) infinite; }
/* hover-only parts */
.kz-cicon .hjump   { animation: var(--nh-jump, none)   var(--dur, 1s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .hscan   { animation: var(--nh-scan, none)   var(--dur, 1.6s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .hflip   { animation: var(--nh-flip, none)   var(--dur, 1s) cubic-bezier(.3, 1.2, .5, 1) var(--delay, 0s) 1; }
.kz-cicon .hburst  { animation: var(--nh-burst, none)  var(--dur, 1.1s) ease-out var(--delay, 0s) infinite; animation-fill-mode: backwards; }
.kz-cicon .hswing  { animation: var(--nh-swing, var(--n-swing, none))  var(--dur, .9s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .hwiggle { animation: var(--nh-wiggle, var(--n-wiggle, none)) var(--dur, 1.2s) ease-in-out var(--delay, 0s) infinite; }
.kz-cicon .hrise   { animation: var(--nh-rise, var(--n-rise, none))   var(--dur, 1.5s) ease-out var(--delay, 0s) infinite; animation-fill-mode: backwards; }
.kz-cicon .hblink  { animation: var(--nh-blink, var(--n-blink, none))  var(--dur, 1s) ease-in-out var(--delay, 0s) infinite; }

/* things that only exist while moving rest invisible / calm */
.kz-cicon .rise  { opacity: .85; }
.kz-cicon .hrise, .kz-cicon .hburst { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    /* ambient loop: selected / active / always */
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible, .kz-cicon-host.selected, .kz-cicon-host.is-active, .kz-cicon-host[aria-checked="true"]) .kz-cicon,
    .kz-cicon[data-anim="loop"] {
        --n-swing: kz-swing; --n-bob: kz-bob; --n-pulse: kz-pulse; --n-beat: kz-beat; --n-spin: kz-spin;
        --n-wiggle: kz-wiggle; --n-rise: kz-rise; --n-twinkle: kz-twinkle; --n-pop: kz-pop; --n-blink: kz-blink;
        --n-wave: kz-wave; --n-draw: kz-draw;
    }
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible, .kz-cicon-host.selected, .kz-cicon-host.is-active, .kz-cicon-host[aria-checked="true"]) .kz-cicon .rise,
    .kz-cicon[data-anim="loop"] .rise { opacity: 0; }

    /* hover: spring pose + the icon's own hover action */
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible) .kz-cicon {
        --nh-jump: kz-jump; --nh-scan: kz-scan; --nh-flip: kz-flip; --nh-burst: kz-burst; --nh-swing: kz-swing;
        --nh-wiggle: kz-wiggle; --nh-rise: kz-rise; --nh-blink: kz-blink;
    }
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible) .kz-cicon .hv {
        transform: translate(var(--hx, 0px), var(--hy, 0px)) rotate(var(--hr, 0deg)) scale(var(--hsx, var(--hs, 1)), var(--hsy, var(--hs, 1)));
    }
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible) .kz-cicon .hvs { transform: scale(.72, .8); }
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible) .kz-cicon .hrise,
    :is(.kz-cicon-host:hover, .kz-cicon-host:focus-visible) .kz-cicon .hburst { opacity: 1; }
}

/* steam / smoke that also has a hover variant keeps its calm resting wisp */
.kz-cicon .rise.hrise { opacity: .85; }

/* card cover for posts without a photo: a soft gradient from the category, with its icon */
.kz-card-cover { --cv-a: hsl(var(--cv-h) 62% 88%); --cv-b: hsl(calc(var(--cv-h) + 38) 66% 76%); width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(120% 90% at 20% 0%, var(--cv-a), transparent 60%), linear-gradient(160deg, var(--cv-a), var(--cv-b)); }
html.dark .kz-card-cover { --cv-a: hsl(var(--cv-h) 38% 27%); --cv-b: hsl(calc(var(--cv-h) + 38) 42% 18%); }
.kz-card-cover .kz-cicon { filter: drop-shadow(0 10px 12px hsl(var(--cv-h) 50% 20% / .28)); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.kz-cicon-host:hover .kz-card-cover .kz-cicon { transform: scale(1.08) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .kz-card-cover .kz-cicon { transition: none; } }