/* ===========================================================================
   KLOUDIVT — "Rainbow Shark VTuber ♥ Chaotic Gremlin ♥ Come Vibe Out!"

   Her own words are the brief, and they have two halves, so the page does
   too. The top is her bubbly side: lilac gingham, rounded type, her chibi
   emotes everywhere. The bottom is the other one: Dead by Daylight, horror
   nights, a maze with something in it. It does not cut between them — one
   number, --kv-night, runs 0 to 1 as you scroll (creators/kloudivt.js) and
   everything here is mixed against it, so the page goes dark under you
   without a seam to point at.

   Fonts: Fredoka for the sweet half, Creepster for the half that bites,
   Rubik Glitch for the moment it turns.
   =========================================================================== */

@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kloudi-fredoka-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/kloudi-fredoka-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Creepster';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kloudi-creepster-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik Glitch';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kloudi-rubikglitch-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.kv{
  /* her art's colours: the violet of her hair, the rainbow in it */
  --kv-violet:#7C4DFF; --kv-grape:#2B0F45; --kv-ink:#0B0510;
  --kv-pink:#FF7AC6; --kv-mint:#8DE8C0; --kv-sky:#7FD6FF; --kv-sun:#FFC861;
  --kv-cream:#FFF6FE; --kv-lilac:#E9DDFF; --kv-blood:#C4143C; --kv-ghost:#E6D9FF;
  /* what the bright half actually sits on */
  --kv-dusk:#E2D5F6; --kv-mauve:#B6A2DC;

  --kv-cute:'Fredoka',system-ui,sans-serif;
  --kv-scare:'Creepster',Impact,fantasy;
  --kv-glitch:'Rubik Glitch','Creepster',fantasy;

  --kv-night:0;   /* the whole page turns on this one number */

  position:relative; z-index:1; background:transparent;
  font-family:var(--kv-cute);
  color:color-mix(in srgb, #2A1440 calc((1 - var(--kv-night)) * 100%), var(--kv-ghost));
}

/* The field everything sits on: cream, then grape, then ink. */
/* The bright half is dusk rather than daylight — her art and her logo are
   both pale, and a white page left them floating. It starts at a soft violet
   and is already deepening by the maze; by the streams it is nearly black. */
.kv-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--kv-dusk) calc((1 - var(--kv-night)) * 100%), #120823) 0%,
      color-mix(in srgb, var(--kv-mauve) calc((1 - var(--kv-night)) * 100%), #030108) 100%);
}
/* Her gingham, fading out as the lights go. */
.kv-bg::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(90deg,rgba(124,77,255,.10) 50%,transparent 50%),linear-gradient(0deg,rgba(124,77,255,.10) 50%,transparent 50%);
  background-size:54px 54px,54px 54px;
  opacity:calc((1 - var(--kv-night)) * .72);
}
/* and what is underneath it. */
.kv-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(196,20,60,.30),transparent 62%);
  opacity:var(--kv-night);
}

.kv-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.kv-sec{position:relative;padding:clamp(64px,9vw,96px) 0}
.kv-sec--tight{padding-top:24px}

/* ------------------------------------------------------------------ type */
.kv h1,.kv h2,.kv h3{font-family:var(--kv-cute);font-weight:600;letter-spacing:-.01em;line-height:1.02;margin:0}
.kv-kick{font-family:var(--kv-cute);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--kv-violet) calc((1 - var(--kv-night)) * 100%), var(--kv-blood));margin:0 0 8px}
.kv-h{font-size:clamp(34px,6vw,70px);margin-bottom:4px}
.kv-h em{font-style:normal;color:var(--kv-violet)}
/* Headings past the turn take the other typeface entirely. Scoped under .kv
   because ".kv h2" above would otherwise out-specify a bare class and the
   horror face would quietly never appear. */
/* Her violet, not a horror-film red: the fright comes from the letterforms
   and the glow around them. Three shadows — tight, wide, and a red bloom
   further out — is what reads as neon rather than as a drop shadow. */
.kv .kv-h--scare{font-family:var(--kv-scare);font-weight:400;letter-spacing:.03em;line-height:1.05;
  color:#D9C2FF;
  text-shadow:0 0 8px rgba(124,77,255,.95),0 0 26px rgba(124,77,255,.65),0 0 64px rgba(196,20,60,.35);
  animation:kvglow 5.5s ease-in-out infinite}
.kv .kv-h--scare em{font-style:normal;color:#F0A6FF;
  text-shadow:0 0 10px rgba(255,122,198,.9),0 0 30px rgba(196,20,60,.6),0 0 70px rgba(124,77,255,.4)}
/* A slow breath in the glow — a flicker would be a gimmick, this is a room
   with a bulb in it. */
@keyframes kvglow{0%,100%{opacity:1}52%{opacity:.86}}
@media (prefers-reduced-motion:reduce){.kv .kv-h--scare{animation:none}}
.perf-lite .kv .kv-h--scare{animation:none}
.kv-lede{font-size:17px;line-height:1.8;max-width:62ch;margin:20px 0 0;
  color:color-mix(in srgb, #4A2E63 calc((1 - var(--kv-night)) * 100%), #C9BBDE)}

/* ------------------------------------------------------------------ hero */
/* Her art is the room and the logo is the thing in it. The art is beautiful
   and busy — checkered flags, confetti, rainbow — so it goes behind a veil
   rather than beside the words, and the veil is heaviest exactly where the
   type sits. Nothing here competes: one image, one logo, one line. */
.kv-hero{position:relative;display:grid;place-items:center;isolation:isolate;
  min-height:min(92vh,860px);padding:clamp(104px,15vh,170px) 0 clamp(70px,12vh,140px);overflow:hidden}

/* The image fades out at its own bottom edge rather than being covered by a
   band of flat colour — a band would sit on top of the gingham underneath and
   read as a seam across the page. */
.kv-hero-bg{position:absolute;inset:-8% 0 -8% 0;z-index:-2;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.45) 82%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.45) 82%,transparent 97%)}
/* Her face was landing under the floating nav. A lower object-position shows
   more of what is above her, which drops her down the frame and out from
   behind it — she is the point of the picture, so she gets the clear air. */
.kv-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 8%}
/* A tall narrow frame crops to the right of the picture, where she is not.
   Her face sits about a third across, so a phone takes a different slice. */
@media (max-width:760px){.kv-hero-bg img{object-position:34% 6%}}

/* The veil: bright at the edges so her art still reads, deep in the middle
   so the logo has something to sit on. */
.kv-hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 66% 58% at 50% 46%, rgba(30,8,52,.72), rgba(30,8,52,.34) 58%, transparent 78%),
    linear-gradient(180deg, rgba(255,246,254,.34), rgba(255,246,254,0) 26%)}

.kv-hero-mid{position:relative;text-align:center;display:grid;justify-items:center;gap:0}

.kv-hero-name{margin:0;line-height:0}
.kv-hero-logo{display:block;width:min(86vw,640px);height:auto;
  filter:drop-shadow(0 18px 40px rgba(20,4,40,.55)) drop-shadow(0 0 26px rgba(124,77,255,.35));
  animation:kvbob 7s ease-in-out infinite}
/* A hand's width of movement, once every seven seconds: enough to feel alive,
   not enough to notice while reading. */
@keyframes kvbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.kv-hero-tag{margin:18px 0 0;font-size:clamp(16px,2.2vw,21px);font-weight:600;color:#fff;
  text-shadow:0 2px 18px rgba(20,4,40,.85),0 1px 3px rgba(20,4,40,.9)}

.kv-hero .kv-chips{justify-content:center;margin-top:20px}
.kv-hero .kv-chips li{background:rgba(20,6,38,.52);border-color:rgba(233,221,255,.35);color:#F3ECFF;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kv-hero .kv-do{justify-content:center;margin-top:26px}
.kv-hero .kv-btn--ghost{color:#fff !important;border-color:rgba(255,255,255,.7)}
.kv-hero .kv-btn--ghost:hover{background:rgba(255,255,255,.14)}

/* The hem hands the hero over to the page underneath it. */
.kv-hero-hem{display:none}

/* The chips and buttons the whole page uses. They live here rather than in
   the hero block because the maze, the shop and the join band all borrow
   them — deleting them with a hero rewrite is a lesson already learned. */
.kv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.kv-chips li{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;
  background:rgba(124,77,255,.10);border:1.5px solid rgba(124,77,255,.30);color:#5B2FBF}
.kv-do{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.kv-btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;
  border:2.5px solid var(--kv-violet);background:var(--kv-violet);color:#fff !important;text-decoration:none;
  transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;box-shadow:0 12px 26px -14px var(--kv-violet)}
.kv-btn:hover{transform:translateY(-2px);background:#6A3BF0}
.kv-btn--ghost{background:transparent;color:var(--kv-violet) !important;box-shadow:none}
.kv-btn--ghost:hover{background:rgba(124,77,255,.10)}
.kv-btn svg{width:18px;height:18px;fill:currentColor}

/* Her gingham banner, now a band over the About section rather than the
   first thing that happens. */
/* The banner keeps its rounded corners by clipping the art itself rather than
   the box — the emotes have to be able to leave. */
/* The emotes are thrown up out of this, so the gap above it is not empty
   space — it is the airspace they need. Without it they land on whatever is
   sitting above the banner, which is exactly what happened. */
.kv-band{position:relative;margin:clamp(96px,12vw,160px) 0 clamp(20px,3vw,40px);overflow:visible}
.kv-band-art{display:block;width:100%;height:clamp(130px,18vw,220px);object-fit:cover;object-position:50% 40%;
  border-radius:24px;border:3px solid #fff;box-shadow:0 22px 50px -28px rgba(80,30,140,.5)}

/* Her emotes, parked around the page. */
.kv-float{position:absolute;pointer-events:none;z-index:2;filter:drop-shadow(0 10px 18px rgba(60,20,110,.28))}
.kv-float img{display:block;width:100%;height:auto}
.kv-float--a{width:clamp(66px,9vw,118px);left:-14px;top:-6px;transform:rotate(-12deg)}
.kv-float--b{width:clamp(58px,8vw,104px);right:-14px;bottom:-16px;transform:rotate(10deg)}

@media (prefers-reduced-motion:reduce){.kv-hero-logo{animation:none}}
.perf-lite .kv-hero-logo{animation:none}
.perf-lite .kv-hero .kv-chips li{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,6,38,.72)}

/* ------------------------------------------------------------------ maze */
.kv-maze{position:relative;border-radius:24px;padding:18px;
  background:linear-gradient(160deg,#200B36,#0C0418);
  border:3px solid rgba(124,77,255,.45);box-shadow:0 30px 70px -36px rgba(0,0,0,.9)}
.kv-maze-head{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-bottom:14px}
.kv-maze-head h3{font-family:var(--kv-scare);font-size:clamp(24px,3.6vw,38px);letter-spacing:.04em;
  color:#D9C2FF;text-shadow:0 0 8px rgba(124,77,255,.9),0 0 26px rgba(124,77,255,.6)}
.kv-maze-head h3 em{font-style:normal;color:#F0A6FF;text-shadow:0 0 10px rgba(255,122,198,.9),0 0 30px rgba(196,20,60,.55)}
/* The way out. It only appears once there is something to run from. */
.kv-bail{margin-left:auto;font-family:var(--kv-cute);font-weight:600;font-size:13px;cursor:pointer;
  padding:7px 14px;border-radius:999px;background:rgba(196,20,60,.16);color:#FFC2D1;
  border:1.5px solid rgba(196,20,60,.5);transition:background .15s ease,transform .15s ease}
.kv-bail:hover{background:rgba(196,20,60,.34);transform:translateY(-1px)}
.kv-bail[hidden]{display:none}
.kv-bail + .kv-maze-score{margin-left:10px}

.kv-maze-score{margin-left:auto;font-weight:600;font-size:14px;color:var(--kv-mint);
  background:rgba(141,232,192,.10);border:1.5px solid rgba(141,232,192,.32);padding:6px 13px;border-radius:999px}
.kv-board{position:relative;display:grid;place-items:center;border-radius:14px;overflow:hidden;background:#0B0510}
.kv-board canvas{display:block;max-width:100%;image-rendering:auto}
.kv-maze-over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,5,16,.72);z-index:2}
.kv-maze.is-playing .kv-maze-over{display:none}
.kv-start{font-family:var(--kv-cute);font-weight:600;font-size:16px;padding:14px 30px;border-radius:999px;cursor:pointer;
  border:2.5px solid var(--kv-mint);background:var(--kv-mint);color:#08210F;
  transition:transform .18s ease,box-shadow .18s ease}
.kv-start:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--kv-mint)}
.kv-maze-say{margin:12px 2px 0;font-size:14px;line-height:1.6;color:#C9BBDE;min-height:2.6em}
.kv-maze.is-over .kv-maze-say{color:var(--kv-blood)}
.kv-maze.is-won .kv-maze-say{color:var(--kv-mint)}
.kv-pad{display:none;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:8px;justify-content:center;margin-top:14px}
.kv-pad button{border-radius:14px;border:2px solid rgba(233,221,255,.3);background:rgba(124,77,255,.16);color:#E9DDFF;
  font-size:20px;cursor:pointer;font-family:var(--kv-cute)}
.kv-pad button:active{background:rgba(124,77,255,.4)}
.kv-pad .kv-pad-up{grid-column:2}
.kv-pad .kv-pad-left{grid-column:1;grid-row:2}
.kv-pad .kv-pad-down{grid-column:2;grid-row:2}
.kv-pad .kv-pad-right{grid-column:3;grid-row:2}

/* ---------------------------------------------------------------- emotes */
/* THE LOB. Six of her faces thrown up out of the banner, one after another,
   left to right: they start behind its bottom edge, arc up over it, hang for a
   beat and drop back out of sight. The whole run takes nine seconds and each
   one is a second and a half behind the last, so there is always one in the
   air and never all six at once.

   They sit BEHIND the banner art (z-index -1) so they look like they are
   coming from behind it rather than sliding over it. */
.kv-lobbed{position:absolute;inset:0;pointer-events:none}
.kv-lob{position:absolute;bottom:14%;width:clamp(54px,7vw,92px);z-index:-1;opacity:0;
  filter:drop-shadow(0 10px 16px rgba(60,20,110,.35));
  animation:kvlob 9s cubic-bezier(.25,.9,.35,1) infinite;
  animation-delay:calc(var(--i, 0) * 1.5s)}
.kv-lob img{display:block;width:100%;height:auto}
.kv-lob:nth-child(1){left:6%}
.kv-lob:nth-child(2){left:23%}
.kv-lob:nth-child(3){left:40%}
.kv-lob:nth-child(4){left:57%}
.kv-lob:nth-child(5){left:74%}
.kv-lob:nth-child(6){left:88%}
/* On a phone 88% put the last emote's edge past the screen (it widened the
   page in Chrome and dragged sideways in Safari); it rises a little further in. */
@media (max-width:640px){.kv-lob:nth-child(6){left:auto;right:3%}}
@keyframes kvlob{
  0%    {opacity:0;transform:translate3d(0,10%,0) scale(.55) rotate(-14deg)}
  6%    {opacity:1}
  46%   {opacity:1;transform:translate3d(0,-250%,0) scale(1.05) rotate(9deg)}
  62%   {opacity:1;transform:translate3d(0,-225%,0) scale(1) rotate(4deg)}
  86%   {opacity:0;transform:translate3d(0,10%,0) scale(.6) rotate(-8deg)}
  100%  {opacity:0;transform:translate3d(0,10%,0) scale(.55) rotate(-14deg)}}

/* THE GHOSTS. The same six trick at the other end of the page: her late
   emotes, the ones holding something, drifting at half opacity with a violet
   haze on them. They are decoration, so they are hidden from screen readers
   and they stop dead for anyone who asked for less movement. */
.kv-ghosts{position:relative;height:clamp(200px,26vw,280px);margin-top:44px}
.kv-ghost{position:absolute;width:clamp(64px,8vw,104px);opacity:.52;
  filter:drop-shadow(0 0 14px rgba(124,77,255,.75)) drop-shadow(0 0 34px rgba(196,20,60,.25));
  animation:kvdrift 13s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * -2.3s)}
.kv-ghost img{display:block;width:100%;height:auto}
.kv-ghost:nth-child(1){left:2%;top:6%}
.kv-ghost:nth-child(2){left:20%;top:52%;animation-duration:16s}
.kv-ghost:nth-child(3){left:38%;top:14%;animation-duration:11.5s}
.kv-ghost:nth-child(4){left:56%;top:58%;animation-duration:14.5s}
.kv-ghost:nth-child(5){left:74%;top:8%;animation-duration:12.5s}
.kv-ghost:nth-child(6){left:88%;top:46%;animation-duration:15.5s}
@keyframes kvdrift{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  33%{transform:translate3d(14px,-22px,0) rotate(3deg)}
  66%{transform:translate3d(-10px,-10px,0) rotate(-1deg)}}

/* Still for anyone who asked for still: the emotes rest on top of the banner
   rather than vanishing, so the section is not simply emptier. */
@media (prefers-reduced-motion:reduce){
  .kv-lob,.kv-ghost{animation:none}
  .kv-lob{opacity:1;transform:translate3d(0,-225%,0) scale(1);z-index:1}
}
.perf-lite .kv-lob,.perf-lite .kv-ghost{animation:none}
.perf-lite .kv-lob{opacity:1;transform:translate3d(0,-225%,0) scale(1);z-index:1}
@media (max-width:560px){
  .kv-ghosts{height:300px}
  .kv-ghost:nth-child(1){left:4%;top:2%}
  .kv-ghost:nth-child(2){left:44%;top:22%}
  .kv-ghost:nth-child(3){left:76%;top:4%}
  .kv-ghost:nth-child(4){left:8%;top:52%}
  .kv-ghost:nth-child(5){left:46%;top:68%}
  .kv-ghost:nth-child(6){left:78%;top:44%}
}

/* ----------------------------------------------------------------- facts */
.kv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:38px}
.kv-fact{border-radius:18px;padding:22px;background:rgba(255,255,255,.60);border:2px solid rgba(124,77,255,.20)}
.kv-fact b{display:block;font-size:26px;color:var(--kv-violet)}
.kv-fact span{display:block;margin-top:4px;font-size:13px;color:#5C4576}

/* ------------------------------------------------------------- the turn */
.kv-turn{position:relative;padding:54px 0 10px;text-align:center}
.kv-turn small{display:block;margin-top:10px;font-size:14px;color:#9E8CB8;font-family:var(--kv-cute)}

/* THE BAD SIGNAL.
   Three things stacked, and none of them is a font file. The letters are
   filled with scanlines rather than a colour (background-clip:text) and the
   lines crawl. Two copies of the same words sit behind, one cyan and one red,
   nudged apart and sliced in half — that is the split you get off a dying
   cable. And the whole thing only misbehaves in bursts: the keyframes sit
   still for most of their length, so it settles, then tears, then settles.
   Constant glitching is a screensaver; occasional glitching is a signal. */
.kv-static{position:relative;display:inline-block;margin:0;
  font-family:var(--kv-glitch);font-size:clamp(22px,4vw,44px);letter-spacing:.02em;
  background:repeating-linear-gradient(0deg,#F6EDFF 0 2px,#B98CFF 2px 4px);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:kvcrawl 1.1s linear infinite, kvtear 5.2s steps(1,end) infinite}

.kv-static::before,.kv-static::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  pointer-events:none;background:none;-webkit-background-clip:border-box;background-clip:border-box}
.kv-static::before{color:#7FD6FF;transform:translate3d(-2px,0,0);clip-path:inset(0 0 52% 0);opacity:.85;
  animation:kvsplitA 5.2s steps(1,end) infinite;mix-blend-mode:screen}
.kv-static::after{color:#FF3B6B;transform:translate3d(2px,0,0);clip-path:inset(52% 0 0 0);opacity:.85;
  animation:kvsplitB 5.2s steps(1,end) infinite;mix-blend-mode:screen}

/* the scanlines crawling up through the letters */
@keyframes kvcrawl{from{background-position:0 0}to{background-position:0 -4px}}

/* the whole line jolting, twice, then behaving for four seconds */
@keyframes kvtear{
  0%,4%,9%,52%,56%,100%{transform:translate3d(0,0,0)}
  2%{transform:translate3d(-3px,1px,0)}
  6%{transform:translate3d(2px,-1px,0)}
  54%{transform:translate3d(-2px,0,0)}}

@keyframes kvsplitA{
  0%,3%,8%,51%,55%,100%{clip-path:inset(0 0 52% 0);transform:translate3d(-2px,0,0)}
  1%{clip-path:inset(12% 0 64% 0);transform:translate3d(-9px,0,0)}
  5%{clip-path:inset(38% 0 30% 0);transform:translate3d(7px,0,0)}
  53%{clip-path:inset(4% 0 72% 0);transform:translate3d(-11px,0,0)}}

@keyframes kvsplitB{
  0%,3%,8%,51%,55%,100%{clip-path:inset(52% 0 0 0);transform:translate3d(2px,0,0)}
  1%{clip-path:inset(60% 0 8% 0);transform:translate3d(8px,0,0)}
  5%{clip-path:inset(72% 0 0 0);transform:translate3d(-6px,0,0)}
  53%{clip-path:inset(66% 0 12% 0);transform:translate3d(10px,0,0)}}

/* Still, and legible, for anyone who did not ask for a broken television. */
@media (prefers-reduced-motion:reduce){
  .kv-static{animation:none;background:none;-webkit-text-fill-color:#C9A7FF;color:#C9A7FF}
  .kv-static::before,.kv-static::after{display:none}
}
.perf-lite .kv-static{animation:none}
.perf-lite .kv-static::before,.perf-lite .kv-static::after{display:none}

/* ---------------------------------------------------------------- media */
.kv-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:26px}
.kv-media{min-width:0}
.kv-media-thumb{position:relative;border-radius:16px;overflow:hidden;background:#150726;border:2px solid rgba(233,221,255,.14)}
.kv-media-thumb a{display:block;position:relative}
.kv-media-thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kv-media-thumb:hover img{transform:scale(1.05)}
.kv-media-play{position:absolute;inset:0;display:grid;place-items:center}
.kv-media-play::after{content:'';width:54px;height:54px;border-radius:50%;background:rgba(196,20,60,.9);
  box-shadow:0 10px 26px -10px #000;
  clip-path:polygon(38% 28%,38% 72%,74% 50%)}
.kv-media-chip{position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;background:rgba(11,5,16,.78);color:var(--kv-ghost)}
.kv-media-len{position:absolute;right:10px;bottom:10px;font-size:12px;font-weight:600;padding:4px 9px;border-radius:8px;
  background:rgba(11,5,16,.8);color:#fff}
.kv-media-title{margin:11px 2px 0;font-size:15px;line-height:1.45;color:var(--kv-ghost)}
.kv-media-meta{margin:4px 2px 0;font-size:12.5px;color:#9E8CB8}
.kv-media-empty{margin-top:20px;color:#9E8CB8}

/* ----------------------------------------------------------------- shop */
.kv-shop{margin-top:30px}
.kv-shop-note{margin:22px 2px 0;font-size:14px;color:#9E8CB8}

/* The shared glass cards come in DRXP orange. On her page they come in hers:
   violet borders, a violet ring when you hover one, and a buy button that
   goes from her hair colour to the mint off her chibis. Scoped to .kv, so
   every other partner's shop is untouched. */
.kv .gal-glass::before{
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(124,77,255,.30), transparent 70%),
    radial-gradient(34% 28% at 82% 48%, rgba(196,20,60,.20), transparent 70%),
    radial-gradient(40% 30% at 42% 88%, rgba(141,232,192,.14), transparent 70%)}

.kv .gl-card{border-color:rgba(124,77,255,.30);
  background:linear-gradient(160deg, rgba(124,77,255,.10), rgba(255,255,255,.02) 45%, rgba(141,232,192,.05))}
.kv .gl-card::before{background:linear-gradient(140deg, rgba(124,77,255,.95), rgba(240,166,255,.45) 40%, rgba(141,232,192,.55) 80%, rgba(124,77,255,.8))}
.kv .gl-card:hover{box-shadow:
  inset 0 1px 0 rgba(255,255,255,.1),
  0 34px 60px -30px rgba(0,0,0,.95),
  0 0 52px -16px rgba(124,77,255,.6)}

.kv .gal-glass .gl-buy{background:linear-gradient(135deg, var(--kv-violet), #A97BFF);color:#0B0510}
.kv .gal-glass .gl-buy:hover{background:linear-gradient(135deg, var(--kv-mint), #6FD9AE);
  box-shadow:0 8px 22px -8px rgba(141,232,192,.7)}

.kv .gl-name a:hover{color:#C9A7FF}
.kv .gl-by{color:#C9A7FF}
.kv .gl-chip{background:rgba(124,77,255,.9);color:#0B0510}
.kv .gl-tag{background:var(--kv-violet);color:#fff}
.kv .gl-tag.sale{background:var(--kv-blood)}
.kv .gl-tag.new{background:var(--kv-mint);color:#08210F}

/* ----------------------------------------------------------------- join */
.kv-join{margin:20px auto 80px}
.kv-join-card{border-radius:26px;padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;
  background:linear-gradient(150deg,rgba(124,77,255,.22),rgba(196,20,60,.16));
  border:2px solid rgba(233,221,255,.22)}
.kv-join-card h2{font-family:var(--kv-scare);font-size:clamp(28px,4.4vw,52px);letter-spacing:.03em;
  color:#D9C2FF;text-shadow:0 0 8px rgba(124,77,255,.9),0 0 26px rgba(124,77,255,.6)}
.kv-join-card h2 em{font-style:normal;color:var(--kv-mint);text-shadow:0 0 10px rgba(141,232,192,.8),0 0 30px rgba(141,232,192,.45)}
.kv-join-card p{color:#CFC1E4;line-height:1.75;margin:12px 0 0;max-width:56ch}
.kv-join-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.kv-join-num{border-radius:16px;padding:14px;background:rgba(11,5,16,.4);border:1.5px solid rgba(233,221,255,.16)}
.kv-join-num b{display:block;font-size:26px;color:var(--kv-mint);font-weight:600}
.kv-join-num span{display:block;margin-top:3px;font-size:12.5px;color:#B9A9D2;line-height:1.45}

/* --------------------------------------------------------------- footer */
.kv-end{padding:0 0 70px;text-align:center}
.kv-end a{color:var(--kv-mint)}

/* --------------------------------------------------------------- mobile */
@media (max-width:900px){
  .kv-hero-in{grid-template-columns:1fr}
  .kv-join-card{grid-template-columns:1fr}
  .kv-pad{display:grid}
  .kv-float--a,.kv-float--b{display:none}
}
@media (max-width:560px){
  .kv-wrap{padding:0 16px}
  .kv-sec{padding:52px 0}
  .kv-maze{padding:12px}
}

/* A page that darkens on scroll is a page that must not darken on a machine
   that cannot keep up, or for someone who asked for less movement. Both get
   the two halves as two states rather than a slide between them. */
.perf-lite .kv-bg::after{opacity:calc(var(--kv-night) * .8)}
@media (prefers-reduced-motion:reduce){
  .kv-emote:hover,.kv-media-thumb:hover img,.kv-btn:hover,.kv-start:hover{transform:none}
  .kv-media-thumb img{transition:none}
}

/* The page's scrollbars in this palette (site.css reads --scroll-acc off
   <html>, which only the literal colour can reach from here). */
html:has(> body.cp-theme-kloudivt) { --scroll-acc: #FF7AC6; }