/* ============================================================
   KHC UNIVERSE THEMES — category / subcategory / product pages
   Wrapper gets classes:  khc-page uni-sw|uni-naruto|uni-wh|uni-lotr
   (set by controllers from the ROOT of category_path / product cat).
   Category pages (#product-category): full theme (bg, rails, fx, accents).
   Product pages (#product-info): ONLY bg + fx + rails (owner spec).
   Effects ported from owner-approved mockups img/_cat-*.html.
   Assets: /image/universes/cat-*-{bg,left,right}.*, fx-*.
   ============================================================ */

/* ---------- shared layer architecture ----------
   .khc-fx       fixed, BEHIND page content (bg, ambience, rails, particles)
   .khc-fx-top   fixed, ABOVE page content (one-shot intros: SW flyby, WH drop)
   real content is lifted to z-index:3 so the fixed bg never veils it      */
.khc-page > *:not(.khc-fx):not(.khc-fx-top){position:relative;z-index:3}
.khc-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.khc-fx-top{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
/* owner: bg image starts below the header, no jerk, no black band.
   --khc-fx-top = the STICKY height of the header (header.offsetHeight,
   measured ONCE at load — NO scroll tracking, the layer never moves):
   at scroll 0 the strip between sticky-height and the expanded header
   bottom hides behind the opaque header itself; once scrolled, the
   shrunken header ends exactly where the image begins — no band. */
.khc-fx-top{top:var(--khc-fx-top,0px)}

/* page background image + dark veil + colour ambience (one element).
   CONSTANT height (100lvh = viewport with the mobile URL bar collapsed):
   if the box were bottom-anchored, the URL-bar show/hide (and the header
   shrinking over the first scrolled pixels) would resize it and `cover`
   would rescale the image jerkily (owner: «рвано меняет размеры»).
   With a fixed height the box only TRANSLATES with the header — the
   image itself never changes size. */
.khc-fx .khc-bg{position:absolute;left:0;right:0;top:var(--khc-fx-top,0px);height:100vh;height:100lvh;
  background:var(--khc-amb1),var(--khc-amb2),var(--khc-veil),var(--khc-bgimg) center/cover no-repeat}

/* header/menu/footer must stay solid above the fixed layers
   (owner: bg image starts BELOW the header, never behind it) */
body:has(.khc-page) header{background:#0a0b10 !important}
body:has(.khc-page) .vit-tagline{position:relative;z-index:5}
body:has(.khc-page) #menu{position:relative;z-index:5}
body:has(.khc-page) footer{position:relative !important;z-index:3}

/* ---------- side character rails (fixed, slide in once) ---------- */
.khc-fx .khc-rail{position:absolute;bottom:0;width:auto;opacity:0;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.khc-fx .khc-rail-l{left:-1%;animation:khcRailL 1s ease .6s forwards}
.khc-fx .khc-rail-r{right:-1%;animation:khcRailR 1s ease .6s forwards}
@keyframes khcRailL{from{opacity:0;transform:translateX(-40px)}to{opacity:var(--khc-rail-l-o,.5);transform:translateX(0)}}
@keyframes khcRailR{from{opacity:0;transform:translateX(40px)}to{opacity:var(--khc-rail-r-o,.45);transform:translateX(0)}}
@media(max-width:1100px){.khc-fx .khc-rail{display:none}}

/* ---------- category-page accents (NOT applied on product pages) ---------- */
#product-category.khc-page h1{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:1px;
  text-shadow:0 4px 30px color-mix(in srgb,var(--c) 40%,transparent)}
#product-category.khc-page h1::after{content:"";display:block;height:2px;margin-top:14px;
  background:linear-gradient(90deg,var(--c),transparent 60%)}
#product-category.khc-page .hw-catcard:hover{border-color:color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:0 14px 34px color-mix(in srgb,var(--c) 18%,transparent)}
#product-category.khc-page .hw-val.is-on .hw-box{background:var(--c);border-color:var(--c);box-shadow:0 0 10px var(--c)}
#product-category.khc-page .hw-chip{border-color:color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 10%,transparent)}

/* ============================================================
   STAR WARS  (.uni-sw)  — Sith red + starfield + TIE flyby intro
   ============================================================ */
.khc-page.uni-sw{--c:#ff2f2f;--c2:#ff5a3c;
  --khc-bgimg:url('../../../image/universes/cat-sw-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(7,5,9,.72),rgba(7,5,9,.94) 80%);
  --khc-amb1:radial-gradient(60% 50% at 80% 0%,rgba(255,40,40,.18),transparent 60%);
  --khc-amb2:radial-gradient(50% 50% at 12% 30%,rgba(180,20,30,.14),transparent 60%);
  --khc-rail-l-o:.5;--khc-rail-r-o:.42}
.uni-sw .khc-rail{height:78vh;max-height:760px}
.uni-sw .khc-rail-l{left:-2%}.uni-sw .khc-rail-r{right:-2%}
/* faint starfield */
.uni-sw .khc-fx::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff7,transparent),
    radial-gradient(1px 1px at 40% 70%,#fff5,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),
    radial-gradient(1px 1px at 55% 45%,#fff6,transparent),radial-gradient(1px 1px at 10% 80%,#fff5,transparent)}
/* TIE squadron: container flies the whole V-formation across once (~2.2s);
   parallax: descends + grows toward the viewer (art faces lower-left) */
.uni-sw .khc-squad{position:absolute;top:7vh;left:0;width:30vw;height:34vh;
  transform:translate(115vw,-2vh) scale(.72);will-change:transform;
  animation:khcSquad 2.2s cubic-bezier(.4,.15,.7,.5) .5s forwards}
@keyframes khcSquad{0%{transform:translate(115vw,-2vh) scale(.72)}100%{transform:translate(-48vw,10vh) scale(1.18)}}
.uni-sw .khc-tie{position:absolute;width:6vw;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,70,70,.35));
  animation:khcTieBob ease-in-out infinite}
@keyframes khcTieBob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
.uni-sw .khc-tie.t1{left:0;top:38%;animation-duration:1.3s}
.uni-sw .khc-tie.t2{left:34%;top:10%;width:5.4vw;animation-duration:1.6s}
.uni-sw .khc-tie.t3{left:36%;top:66%;width:5.6vw;animation-duration:1.45s}
.uni-sw .khc-tie.t4{left:70%;top:-4%;width:5vw;animation-duration:1.7s}
.uni-sw .khc-tie.t5{left:72%;top:82%;width:4.8vw;animation-duration:1.5s}
/* distant Star Destroyer: dim slow drift BEHIND content, approaches slightly */
.uni-sw .khc-destroyer{position:absolute;top:4vh;left:0;width:22vw;opacity:0;will-change:transform,opacity;
  transform:translate(108vw,0) rotate(3deg) scale(.82,.82);
  filter:brightness(.5) saturate(.75) blur(.6px) drop-shadow(0 14px 30px rgba(0,0,0,.6));
  animation:khcDrift 48s cubic-bezier(.45,.15,.75,.55) 2.5s forwards}
@keyframes khcDrift{
  0%{transform:translate(108vw,0) rotate(3deg) scale(.82,.82);opacity:0}
  4%{opacity:.68}50%{opacity:.76}94%{opacity:.85}
  100%{transform:translate(-32vw,8vh) rotate(3deg) scale(1.12,1.12);opacity:0}}
/* ambient lone TIE crossing occasionally after the intro */
.uni-sw .khc-ambtie{position:absolute;top:11vh;width:46px;opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,60,60,.25));animation:khcAmbTie 26s linear 9s infinite}
@keyframes khcAmbTie{0%{transform:translate(102vw,0) scale(.7);opacity:0}4%{opacity:.55}40%{opacity:.55}
  48%{transform:translate(-10vw,8vh) scale(.5);opacity:0}100%{opacity:0}}

/* ============================================================
   NARUTO  (.uni-naruto) — Konoha orange + falling leaves
   ============================================================ */
.khc-page.uni-naruto{--c:#ff8a1e;--c2:#ffb02e;
  --khc-bgimg:url('../../../image/universes/cat-naruto-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(10,7,5,.7),rgba(10,7,5,.94) 78%);
  --khc-amb1:radial-gradient(60% 50% at 82% 4%,rgba(255,150,40,.18),transparent 60%);
  --khc-amb2:radial-gradient(50% 50% at 10% 36%,rgba(255,90,20,.12),transparent 60%);
  --khc-rail-l-o:.55;--khc-rail-r-o:.5}
.uni-naruto .khc-rail-l{left:0;height:50vh;max-height:520px}
.uni-naruto .khc-rail-r{height:84vh;max-height:820px}
/* falling Konoha leaves */
.uni-naruto .khc-leaf{position:absolute;top:-6vh;width:16px;height:16px;border-radius:0 100% 0 100%;
  background:linear-gradient(135deg,#ffb53a,#ff7a1e);opacity:0;filter:blur(.3px) drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation:khcFall linear infinite}
@keyframes khcFall{
  0%{opacity:0;transform:translateY(-6vh) translateX(0) rotate(0deg)}
  8%{opacity:.8}
  50%{transform:translateY(52vh) translateX(40px) rotate(220deg)}
  90%{opacity:.7}
  100%{opacity:0;transform:translateY(108vh) translateX(-30px) rotate(460deg)}}
.uni-naruto .khc-leaf:nth-of-type(1){left:8%;animation-duration:11s}
.uni-naruto .khc-leaf:nth-of-type(2){left:20%;animation-duration:14s;animation-delay:2s;width:12px;height:12px}
.uni-naruto .khc-leaf:nth-of-type(3){left:33%;animation-duration:9s;animation-delay:1s}
.uni-naruto .khc-leaf:nth-of-type(4){left:47%;animation-duration:13s;animation-delay:4s;width:20px;height:20px}
.uni-naruto .khc-leaf:nth-of-type(5){left:61%;animation-duration:10s;animation-delay:.5s;width:13px;height:13px}
.uni-naruto .khc-leaf:nth-of-type(6){left:73%;animation-duration:15s;animation-delay:3s}
.uni-naruto .khc-leaf:nth-of-type(7){left:86%;animation-duration:12s;animation-delay:1.5s;width:18px;height:18px}
.uni-naruto .khc-leaf:nth-of-type(8){left:92%;animation-duration:10s;animation-delay:5s;width:11px;height:11px}
.uni-naruto .khc-leaf:nth-of-type(9){left:54%;animation-duration:16s;animation-delay:6s;width:14px;height:14px}
.uni-naruto .khc-leaf:nth-of-type(10){left:14%;animation-duration:13s;animation-delay:7s}

/* ============================================================
   WARHAMMER  (.uni-wh) — Ultramar blue + orbital drop + sparks
   ============================================================ */
.khc-page.uni-wh{--c:#2f6cff;--c2:#5a9bff;
  --khc-bgimg:url('../../../image/universes/cat-wh-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(5,7,12,.74),rgba(5,7,12,.95) 80%);
  --khc-amb1:radial-gradient(60% 50% at 80% 0%,rgba(50,110,255,.16),transparent 60%);
  --khc-amb2:radial-gradient(50% 50% at 12% 30%,rgba(30,70,200,.12),transparent 60%);
  --khc-rail-l-o:.5;--khc-rail-r-o:.45}
.uni-wh .khc-rail-l{height:52vh;max-height:540px}
.uni-wh .khc-rail-r{right:0;height:82vh;max-height:800px}
/* NOTE: edited an FX image in place once (same filename) → browser+Varnish
   served the stale cached copy; CSS ?v= bump does NOT bust image URLs. When an
   FX asset's PIXELS change, RENAME it (e.g. fx-wh-fire→fire2) to force a refetch. */
/* ORBITAL DROP intro (once): owner's real WH drop-pod art slams straight down
   with the owner's re-entry fire effect at the engine. owner: NOT a starfall,
   NOT CSS "coffins" — use img/Universes/WH droppod + wh droppod effect. */
.uni-wh .khc-fx-top{animation:khcDropFade 7s ease-out forwards}
@keyframes khcDropFade{0%{opacity:1}86%{opacity:1}100%{opacity:0;visibility:hidden}}
/* the falling unit — the element box = the POD's footprint. Layers:
   ::before = owner's fire, LARGER than the pod, painted BEHIND it (re-entry:
             bright dome ahead at the nose/bottom, trail streaming up behind).
   ::after  = owner's pod art, ON TOP of the fire, sitting at the fire's base. */
.uni-wh .khc-pod{position:absolute;top:-42vh;width:48px;aspect-ratio:409/578;opacity:0;will-change:transform;
  animation:khcPodfall 1.25s cubic-bezier(.55,.05,.85,.4) forwards}
.uni-wh .khc-pod::before{content:"";position:absolute;left:50%;bottom:-52%;transform:translateX(-50%);
  width:500%;aspect-ratio:694/651;mix-blend-mode:screen;opacity:.95;
  background:url('../../../image/universes/fx-wh-fire2.webp') center bottom/contain no-repeat;
  animation:khcBurn .1s steps(2) infinite}
.uni-wh .khc-pod::after{content:"";position:absolute;inset:0;
  background:url('../../../image/universes/fx-wh-droppod.webp') center/contain no-repeat;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55))}
@keyframes khcBurn{0%{opacity:.82;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50.5%) scale(1.06)}}
@keyframes khcPodfall{0%{opacity:0;transform:translateY(0)}6%{opacity:1}94%{opacity:1}100%{opacity:1;transform:translateY(152vh)}}
.uni-wh .khc-pod.p1{left:18%;animation-delay:.2s}
.uni-wh .khc-pod.p2{left:64%;width:40px;animation-delay:.9s}
.uni-wh .khc-pod.p3{left:42%;width:62px;animation-delay:1.5s}
.uni-wh .khc-pod.p4{left:83%;width:36px;animation-delay:2.1s}
.uni-wh .khc-pod.p5{left:8%;width:44px;animation-delay:2.6s}
/* PRODUCT pages (Warhammer cats/subcats): the 5-pod barrage spams here — calm it
   to an occasional ambient drop (only 1–2 pods, big gaps, looping; the layer
   never fades out so the drip persists). #product-category keeps the full intro
   barrage above; this override only touches #product-info (owner 2026-06-10). */
#product-info.uni-wh .khc-fx-top{animation:none;opacity:1;visibility:visible}
#product-info.uni-wh .khc-pod{display:none}
#product-info.uni-wh .khc-pod.p1,#product-info.uni-wh .khc-pod.p2{display:block;animation:khcPodLoop var(--pd) linear var(--pdl) infinite}
#product-info.uni-wh .khc-pod.p1{left:24%;--pd:28s;--pdl:4s;width:28px}
#product-info.uni-wh .khc-pod.p2{left:70%;--pd:37s;--pdl:20s;width:24px}
/* long cycle, visible fall only in the first ~5% (~1.5s, fast), then off-screen wait */
@keyframes khcPodLoop{0%{opacity:0;transform:translateY(0)}.8%{opacity:1}5%{opacity:1;transform:translateY(152vh)}5.01%{opacity:0;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
/* ambient rising plasma sparks */
.uni-wh .khc-spark{position:absolute;bottom:-3vh;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#bcd6ff,#3a76ff 70%);opacity:0;filter:blur(.4px);
  box-shadow:0 0 8px rgba(80,140,255,.8);animation:khcRise linear infinite}
@keyframes khcRise{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(1)}
  10%{opacity:.7}
  60%{opacity:.5;transform:translateY(-55vh) translateX(18px) scale(.8)}
  100%{opacity:0;transform:translateY(-105vh) translateX(-12px) scale(.5)}}
.uni-wh .khc-spark:nth-of-type(1){left:12%;animation-duration:13s;animation-delay:1s}
.uni-wh .khc-spark:nth-of-type(2){left:28%;animation-duration:17s;animation-delay:5s;width:3px;height:3px}
.uni-wh .khc-spark:nth-of-type(3){left:46%;animation-duration:14s;animation-delay:3s}
.uni-wh .khc-spark:nth-of-type(4){left:63%;animation-duration:18s;animation-delay:8s;width:3px;height:3px}
.uni-wh .khc-spark:nth-of-type(5){left:78%;animation-duration:15s;animation-delay:2s}
.uni-wh .khc-spark:nth-of-type(6){left:90%;animation-duration:16s;animation-delay:6s;width:5px;height:5px}
.uni-wh .khc-spark:nth-of-type(7){left:36%;animation-duration:19s;animation-delay:10s;width:3px;height:3px}
.uni-wh .khc-spark:nth-of-type(8){left:55%;animation-duration:15s;animation-delay:12s}

/* ============================================================
   LOTR  (.uni-lotr) — gold + ring-inscription aura + Mordor ash
   ============================================================ */
.khc-page.uni-lotr{--c:#c9962e;--c2:#f0c258;
  --khc-bgimg:url('../../../image/universes/cat-lotr-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(10,8,5,.72),rgba(10,8,5,.95) 80%);
  --khc-amb1:radial-gradient(60% 50% at 80% 0%,rgba(201,150,46,.15),transparent 60%);
  --khc-amb2:radial-gradient(50% 50% at 10% 32%,rgba(160,100,20,.11),transparent 60%);
  --khc-rail-l-o:.46;--khc-rail-r-o:.5}
.uni-lotr .khc-rail-l{height:58vh;max-height:600px}
.uni-lotr .khc-rail-r{right:-2%;height:80vh;max-height:790px}
/* ring-inscription aura: fades in, settles dim, keeps slowly turning */
.uni-lotr .khc-ringaura{position:absolute;left:3%;top:6vh;width:22vw;max-width:380px;
  mix-blend-mode:screen;opacity:0;filter:drop-shadow(0 0 14px rgba(255,190,90,.5));
  animation:khcRingIn 2.8s ease-out .3s forwards, khcRingTurn 46s linear infinite}
@keyframes khcRingIn{0%{opacity:0}40%{opacity:.7}100%{opacity:.3}}
@keyframes khcRingTurn{from{rotate:0deg}to{rotate:360deg}}
/* drifting Mordor ash */
.uni-lotr .khc-ash{position:absolute;top:-4vh;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#c9b89a,#6e6353 70%);opacity:0;filter:blur(.6px);
  animation:khcAshDrift linear infinite}
@keyframes khcAshDrift{
  0%{opacity:0;transform:translateY(-4vh) translateX(0) rotate(0)}
  10%{opacity:.55}
  55%{transform:translateY(50vh) translateX(-34px) rotate(160deg)}
  90%{opacity:.4}
  100%{opacity:0;transform:translateY(106vh) translateX(22px) rotate(340deg)}}
.uni-lotr .khc-ash:nth-of-type(1){left:10%;animation-duration:18s}
.uni-lotr .khc-ash:nth-of-type(2){left:24%;animation-duration:23s;animation-delay:4s;width:4px;height:4px}
.uni-lotr .khc-ash:nth-of-type(3){left:38%;animation-duration:16s;animation-delay:2s}
.uni-lotr .khc-ash:nth-of-type(4){left:52%;animation-duration:21s;animation-delay:7s;width:3px;height:3px}
.uni-lotr .khc-ash:nth-of-type(5){left:66%;animation-duration:17s;animation-delay:1s}
.uni-lotr .khc-ash:nth-of-type(6){left:79%;animation-duration:24s;animation-delay:5s;width:6px;height:6px}
.uni-lotr .khc-ash:nth-of-type(7){left:90%;animation-duration:19s;animation-delay:3s;width:4px;height:4px}
.uni-lotr .khc-ash:nth-of-type(8){left:45%;animation-duration:25s;animation-delay:10s}

/* ---------------------------------------------------------------
   POKÉMON  (.uni-poke) — electric yellow + drifting energy sparks
   --------------------------------------------------------------- */
.khc-page.uni-poke{--c:#ffcb05;--c2:#ffe14a;
  --khc-bgimg:url('../../../image/universes/cat-poke-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(8,7,4,.64),rgba(8,7,4,.92) 80%);
  --khc-amb1:radial-gradient(58% 50% at 82% 0%,rgba(255,203,5,.20),transparent 60%);
  --khc-amb2:radial-gradient(52% 50% at 12% 28%,rgba(255,170,0,.14),transparent 60%);
  --khc-rail-l-o:.92;--khc-rail-r-o:.88}
.uni-poke .khc-rail-l{left:0;height:54vh;max-height:560px}
.uni-poke .khc-rail-r{right:0;height:82vh;max-height:800px}
.uni-poke .khc-spark{position:absolute;bottom:-3vh;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff,#ffcb05 55%,transparent 75%);box-shadow:0 0 9px 2px rgba(255,203,5,.55);
  opacity:0;will-change:transform,opacity;animation:khcPokeSpark linear infinite}
@keyframes khcPokeSpark{0%{opacity:0;transform:translateY(0) scale(.7)}10%{opacity:.95}90%{opacity:.7}100%{opacity:0;transform:translateY(-108vh) scale(1.12)}}
.uni-poke .khc-spark:nth-of-type(1){left:12%;animation-duration:13s;animation-delay:1s}
.uni-poke .khc-spark:nth-of-type(2){left:28%;animation-duration:17s;animation-delay:5s;width:3px;height:3px}
.uni-poke .khc-spark:nth-of-type(3){left:46%;animation-duration:14s;animation-delay:3s}
.uni-poke .khc-spark:nth-of-type(4){left:63%;animation-duration:18s;animation-delay:8s;width:3px;height:3px}
.uni-poke .khc-spark:nth-of-type(5){left:78%;animation-duration:15s;animation-delay:2s}
.uni-poke .khc-spark:nth-of-type(6){left:90%;animation-duration:16s;animation-delay:6s;width:6px;height:6px}
.uni-poke .khc-spark:nth-of-type(7){left:36%;animation-duration:19s;animation-delay:10s;width:3px;height:3px}
.uni-poke .khc-spark:nth-of-type(8){left:55%;animation-duration:15s;animation-delay:12s}

/* ============================================================
   DC  (.uni-dc) — Metropolis steel-blue + crimson cape + Bat-Signal sweep
   bg: Man of Steel · rails: Harley (l) / Joker bust (r)
   ============================================================ */
.khc-page.uni-dc{--c:#2f7bff;--c2:#ff3b4e;
  --khc-bgimg:url('../../../image/universes/cat-dc-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(6,9,16,.72),rgba(6,9,16,.95) 82%);
  --khc-amb1:radial-gradient(60% 50% at 84% 2%,rgba(47,123,255,.20),transparent 60%);
  --khc-amb2:radial-gradient(54% 50% at 8% 28%,rgba(255,59,78,.13),transparent 60%);
  --khc-rail-l-o:.42;--khc-rail-r-o:.55}
.uni-dc .khc-rail-l{left:-3%;height:46vh;max-height:480px}   /* Joker (bust, behind filter side) */
.uni-dc .khc-rail-r{right:-2%;height:78vh;max-height:780px}  /* Harley Quinn (full body, clean side) */
/* Bat-Signal: a soft searchlight cone sweeping slowly across the sky */
.uni-dc .khc-beam{position:absolute;left:18vw;right:18vw;top:-10vh;height:122vh;transform-origin:50% 0;
  background:conic-gradient(from 180deg at 50% 0,transparent 47%,rgba(150,190,255,.15) 50%,transparent 53%);
  mix-blend-mode:screen;opacity:0;filter:blur(8px);
  animation:khcBeamIn 2s ease .4s forwards,khcBeamSweep 16s ease-in-out 2.2s infinite}
@keyframes khcBeamIn{to{opacity:.6}}
@keyframes khcBeamSweep{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
/* drifting Metropolis light motes (reuse global khcRise) */
.uni-dc .khc-mote{position:absolute;bottom:-3vh;width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,#cfe0ff,#2f7bff 70%);box-shadow:0 0 8px rgba(80,150,255,.7);
  opacity:0;animation:khcRise linear infinite}
.uni-dc .khc-mote:nth-of-type(1){left:14%;animation-duration:15s;animation-delay:1s}
.uni-dc .khc-mote:nth-of-type(2){left:30%;animation-duration:18s;animation-delay:5s;width:3px;height:3px}
.uni-dc .khc-mote:nth-of-type(3){left:48%;animation-duration:14s;animation-delay:3s}
.uni-dc .khc-mote:nth-of-type(4){left:66%;animation-duration:19s;animation-delay:8s;width:3px;height:3px}
.uni-dc .khc-mote:nth-of-type(5){left:82%;animation-duration:16s;animation-delay:2s}
.uni-dc .khc-mote:nth-of-type(6){left:92%;animation-duration:17s;animation-delay:6s;width:5px;height:5px}

/* ============================================================
   MARVEL  (.uni-marvel) — cosmic purple/blue + Marvel-red + Thor lightning
   bg: Endgame · rails: Thor (l) / Spider-Man swing (r) · infinity-stone sparks
   ============================================================ */
.khc-page.uni-marvel{--c:#ed2230;--c2:#7b5cff;
  --khc-bgimg:url('../../../image/universes/cat-marvel-bg.webp');
  --khc-veil:linear-gradient(180deg,rgba(8,6,16,.70),rgba(8,6,16,.94) 82%);
  --khc-amb1:radial-gradient(60% 50% at 84% 0%,rgba(237,34,48,.16),transparent 60%);
  --khc-amb2:radial-gradient(56% 52% at 8% 30%,rgba(123,92,255,.18),transparent 62%);
  --khc-rail-l-o:.45;--khc-rail-r-o:.55}
.uni-marvel .khc-rail-l{left:-2%;height:52vh;max-height:540px}  /* Spider-Man (swing, behind filter side) */
.uni-marvel .khc-rail-r{right:-1%;height:82vh;max-height:820px} /* Thor (full body, clean side) */
/* Thor lightning: a periodic blue flash blooming from the right (over the hammer) */
.uni-marvel .khc-flash{position:absolute;inset:0;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(58% 46% at 84% 30%,rgba(170,200,255,.55),transparent 62%);
  animation:khcThorFlash 11s ease-out 3.5s infinite}
@keyframes khcThorFlash{0%,100%{opacity:0}1.5%{opacity:.9}3%{opacity:.12}4.2%{opacity:.75}7%{opacity:0}}
/* infinity-stone sparks — the six stone colours rising (reuse global khcRise) */
.uni-marvel .khc-istone{position:absolute;bottom:-3vh;width:6px;height:6px;border-radius:50%;opacity:0;
  filter:blur(.3px);animation:khcRise linear infinite}
.uni-marvel .khc-istone:nth-of-type(1){left:12%;background:radial-gradient(circle,#fff,#7b5cff 60%);box-shadow:0 0 9px #7b5cff;animation-duration:14s;animation-delay:1s}
.uni-marvel .khc-istone:nth-of-type(2){left:26%;background:radial-gradient(circle,#fff,#3aa0ff 60%);box-shadow:0 0 9px #3aa0ff;animation-duration:17s;animation-delay:4s}
.uni-marvel .khc-istone:nth-of-type(3){left:42%;background:radial-gradient(circle,#fff,#ff3b4e 60%);box-shadow:0 0 9px #ff3b4e;animation-duration:13s;animation-delay:2s}
.uni-marvel .khc-istone:nth-of-type(4){left:58%;background:radial-gradient(circle,#fff,#ff9d2e 60%);box-shadow:0 0 9px #ff9d2e;animation-duration:18s;animation-delay:7s}
.uni-marvel .khc-istone:nth-of-type(5){left:74%;background:radial-gradient(circle,#fff,#ffe14a 60%);box-shadow:0 0 9px #ffe14a;animation-duration:15s;animation-delay:3s}
.uni-marvel .khc-istone:nth-of-type(6){left:88%;background:radial-gradient(circle,#fff,#36e07a 60%);box-shadow:0 0 9px #36e07a;animation-duration:16s;animation-delay:6s}
.uni-marvel .khc-istone:nth-of-type(7){left:34%;background:radial-gradient(circle,#fff,#7b5cff 60%);animation-duration:19s;animation-delay:10s;width:5px;height:5px}
.uni-marvel .khc-istone:nth-of-type(8){left:66%;background:radial-gradient(circle,#fff,#3aa0ff 60%);animation-duration:15s;animation-delay:12s;width:5px;height:5px}

/* ---------- reduced motion: keep theme, kill all movement ---------- */
@media(prefers-reduced-motion:reduce){
  .khc-fx-top{display:none}
  .khc-fx .khc-rail{animation:none;opacity:var(--khc-rail-l-o,.5);transform:none}
  .khc-fx .khc-rail-r{opacity:var(--khc-rail-r-o,.45)}
  .uni-sw .khc-destroyer,.uni-sw .khc-ambtie,.uni-naruto .khc-leaf,
  .uni-wh .khc-spark,.uni-poke .khc-spark,.uni-lotr .khc-ash{display:none}
  .uni-lotr .khc-ringaura{animation:none;opacity:.26}
  .uni-anime .khc-petal{display:none}
  .uni-dc .khc-beam,.uni-dc .khc-mote,.uni-marvel .khc-flash,.uni-marvel .khc-istone,
  .uni-games .khc-pixel,.uni-movies .khc-dust{display:none}
  .uni-movies .khc-fx::after{animation:none}
}

/* ============================================================
   HOBBYWRLD type-category themes (movies / games / anime) — 2026-06-15.
   IMAGE-OPTIONAL: the gradient ambience themes the page right now. To add
   real art later, drop image/universes/cat-{movies,games,anime}-{left,right}.webp
   (rails) and optionally cat-{...}-bg.jpg, then point --khc-bgimg at the file.
   ============================================================ */
.uni-movies{--c:#e8b34a;
  --khc-amb1:radial-gradient(1200px 620px at 82% -12%,rgba(232,179,74,.18),transparent 60%);
  --khc-amb2:radial-gradient(900px 520px at 8% 112%,rgba(64,96,168,.22),transparent 62%);
  --khc-veil:linear-gradient(180deg,rgba(8,10,16,.42),rgba(8,10,16,.70));
  --khc-bgimg:url('../../../image/universes/cat-movies-bg.webp?v=2')}
.uni-games{--c:#37d0ff;
  --khc-amb1:radial-gradient(1040px 580px at 86% -8%,rgba(55,208,255,.20),transparent 60%);
  --khc-amb2:radial-gradient(920px 540px at 4% 116%,rgba(214,73,255,.20),transparent 62%);
  --khc-veil:linear-gradient(180deg,rgba(7,9,16,.44),rgba(7,9,16,.71));
  --khc-bgimg:url('../../../image/universes/cat-games-bg.webp?v=2')}
.uni-anime{--c:#ff5fa2;
  --khc-amb1:radial-gradient(1120px 620px at 78% -10%,rgba(255,95,162,.20),transparent 60%);
  --khc-amb2:radial-gradient(860px 540px at 8% 114%,rgba(150,90,255,.20),transparent 62%);
  --khc-veil:linear-gradient(180deg,rgba(11,8,15,.40),rgba(11,8,15,.69));
  --khc-bgimg:url('../../../image/universes/cat-anime-bg.webp?v=2')}

/* sakura petals for the anime theme (CSS-only ambience) */
.uni-anime .khc-petal{position:absolute;top:-6vh;width:13px;height:13px;border-radius:60% 0 60% 0;
  background:linear-gradient(135deg,#ff9cc4,#ff5fa2);opacity:0;
  filter:drop-shadow(0 2px 5px rgba(255,95,162,.35));animation:khcPetal linear infinite}
@keyframes khcPetal{0%{transform:translateY(-6vh) rotate(0);opacity:0}10%{opacity:.85}90%{opacity:.65}100%{transform:translateY(110vh) rotate(380deg);opacity:0}}
.uni-anime .khc-petal:nth-child(1){left:6%;animation-duration:13s}
.uni-anime .khc-petal:nth-child(2){left:18%;animation-duration:16s;animation-delay:2s;width:10px;height:10px}
.uni-anime .khc-petal:nth-child(3){left:31%;animation-duration:11s;animation-delay:4s}
.uni-anime .khc-petal:nth-child(4){left:44%;animation-duration:18s;animation-delay:1s;width:9px;height:9px}
.uni-anime .khc-petal:nth-child(5){left:57%;animation-duration:14s;animation-delay:5s}
.uni-anime .khc-petal:nth-child(6){left:67%;animation-duration:17s;animation-delay:3s;width:11px;height:11px}
.uni-anime .khc-petal:nth-child(7){left:78%;animation-duration:12s;animation-delay:6s}
.uni-anime .khc-petal:nth-child(8){left:88%;animation-duration:15s;animation-delay:1.5s;width:10px;height:10px}
.uni-anime .khc-petal:nth-child(9){left:95%;animation-duration:19s;animation-delay:4.5s}
.uni-anime .khc-petal:nth-child(10){left:12%;animation-duration:20s;animation-delay:7s;width:8px;height:8px}

/* games: faint CRT scanlines over the whole fx + rising neon arcade pixels */
.uni-games .khc-fx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.16) 2px 3px)}
.uni-games .khc-pixel{position:absolute;bottom:-3vh;width:8px;height:8px;opacity:0;
  background:#37d0ff;box-shadow:0 0 8px rgba(55,208,255,.85);animation:khcPixel linear infinite}
.uni-games .khc-pixel:nth-of-type(even){background:#d649ff;box-shadow:0 0 8px rgba(214,73,255,.85)}
@keyframes khcPixel{0%{opacity:0;transform:translateY(0)}10%{opacity:.85}90%{opacity:.55}100%{opacity:0;transform:translateY(-106vh)}}
.uni-games .khc-pixel:nth-of-type(1){left:10%;animation-duration:12s;animation-delay:0s}
.uni-games .khc-pixel:nth-of-type(2){left:23%;animation-duration:15s;animation-delay:3s;width:6px;height:6px}
.uni-games .khc-pixel:nth-of-type(3){left:37%;animation-duration:11s;animation-delay:1.5s}
.uni-games .khc-pixel:nth-of-type(4){left:50%;animation-duration:16s;animation-delay:6s;width:6px;height:6px}
.uni-games .khc-pixel:nth-of-type(5){left:63%;animation-duration:13s;animation-delay:2s}
.uni-games .khc-pixel:nth-of-type(6){left:76%;animation-duration:17s;animation-delay:8s;width:10px;height:10px}
.uni-games .khc-pixel:nth-of-type(7){left:88%;animation-duration:14s;animation-delay:4s;width:6px;height:6px}
.uni-games .khc-pixel:nth-of-type(8){left:44%;animation-duration:18s;animation-delay:10s}

/* movies: warm projector glow with a subtle reel flicker + drifting dust in the beam */
.uni-movies .khc-fx::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 60% at 50% -12%,rgba(232,179,74,.12),transparent 60%);
  animation:khcReel 4.5s steps(14) infinite}
@keyframes khcReel{0%,100%{opacity:.92}7%{opacity:.8}50%{opacity:1}}
.uni-movies .khc-dust{position:absolute;bottom:-2vh;width:3px;height:3px;border-radius:50%;
  background:rgba(255,225,170,.85);box-shadow:0 0 6px rgba(255,210,140,.6);opacity:0;animation:khcDust linear infinite}
@keyframes khcDust{0%{opacity:0;transform:translate(0,0)}12%{opacity:.6}88%{opacity:.45}100%{opacity:0;transform:translate(34px,-92vh)}}
.uni-movies .khc-dust:nth-of-type(1){left:16%;animation-duration:17s;animation-delay:1s}
.uni-movies .khc-dust:nth-of-type(2){left:29%;animation-duration:21s;animation-delay:5s;width:2px;height:2px}
.uni-movies .khc-dust:nth-of-type(3){left:43%;animation-duration:15s;animation-delay:3s}
.uni-movies .khc-dust:nth-of-type(4){left:57%;animation-duration:23s;animation-delay:8s;width:2px;height:2px}
.uni-movies .khc-dust:nth-of-type(5){left:68%;animation-duration:18s;animation-delay:2s}
.uni-movies .khc-dust:nth-of-type(6){left:80%;animation-duration:20s;animation-delay:6s;width:4px;height:4px}
.uni-movies .khc-dust:nth-of-type(7){left:90%;animation-duration:16s;animation-delay:4s}
.uni-movies .khc-dust:nth-of-type(8){left:36%;animation-duration:24s;animation-delay:11s}