/* Homepage KV styles entrypoint. Keep import order aligned with the old monolithic cascade. */
/* Generated bundle. Keep source files as the editable cascade; update this bundle when imports change. */

/* === home-base.css === */
/* Homepage base reset, root tokens, and global media defaults. */
:root {
  --mx: 0;
  --my: 0;
  --ink: #030207;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

/* === home-kv-scene.css === */
/* Homepage KV stage, background, atmosphere, and light field. */
.kv-stage {
  width: 100vw;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.kv-hero {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.kv-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 83% 28%, rgba(2, 1, 7, 0.22) 0%, rgba(4, 1, 10, 0.12) 28%, transparent 54%),
    radial-gradient(ellipse at 68% 72%, rgba(2, 1, 7, 0.48) 0%, rgba(5, 2, 13, 0.28) 24%, transparent 52%),
    radial-gradient(ellipse at 57% 58%, rgba(68, 21, 96, 0.10) 0%, transparent 42%),
    linear-gradient(180deg, transparent 0%, transparent 49%, rgba(2, 1, 7, 0.22) 72%, rgba(1, 1, 4, 0.66) 100%),
    linear-gradient(90deg, rgba(1, 1, 5, 0.34) 0%, transparent 18%, transparent 76%, rgba(1, 1, 5, 0.24) 100%);
  mix-blend-mode: multiply;
}

.bg-base {
  position: absolute;
  z-index: 0;
  inset: -3%;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  filter:
    brightness(1)
    contrast(1.035)
    saturate(1.07);
  transform:
    translate3d(calc(var(--mx) * -7px), calc(var(--my) * -4px), 0)
    scale(1.02);
  transform-origin: center;
  transition: transform 220ms ease-out;
}

.bg-local-spotlight {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.70;
  background:
    radial-gradient(ellipse at 74% 12%, rgba(238, 188, 255, 0.16) 0%, rgba(205, 98, 255, 0.11) 24%, transparent 52%),
    radial-gradient(ellipse at 72% 30%, rgba(218, 98, 255, 0.14) 0%, rgba(226, 55, 142, 0.080) 22%, rgba(126, 52, 188, 0.040) 40%, transparent 58%),
    radial-gradient(ellipse at 61% 42%, rgba(150, 88, 255, 0.055) 0%, rgba(168, 45, 145, 0.030) 32%, transparent 58%);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 4px), 0);
  transition: transform 220ms ease-out;
  animation: kv-spotlight-breathe 11s ease-in-out infinite alternate;
}

.kv-key-light {
  position: absolute;
  z-index: 5;
  inset: -24% -10% -10% -12%;
  pointer-events: none;
  opacity: 0.80;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 6px), 0);
  transition: transform 220ms ease-out;
  animation: kv-key-light-stable-breathe 14s ease-in-out infinite alternate;
  will-change: opacity;
}

.kv-key-light::before,
.kv-key-light::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.kv-key-light::before {
  top: -10%;
  right: 7%;
  width: 44%;
  height: 132%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 255, 0.34) 0%, rgba(226, 172, 255, 0.17) 30%, transparent 62%),
    linear-gradient(180deg, rgba(255, 236, 255, 0.25) 0%, rgba(226, 168, 255, 0.18) 26%, rgba(190, 112, 255, 0.105) 56%, rgba(196, 52, 150, 0.045) 76%, transparent 100%),
    linear-gradient(92deg, transparent 0%, rgba(178, 100, 255, 0.022) 18%, rgba(248, 216, 255, 0.13) 42%, rgba(210, 104, 234, 0.095) 54%, rgba(142, 86, 255, 0.020) 76%, transparent 100%);
  filter: blur(22px);
  transform: rotate(13deg);
  transform-origin: 50% 0%;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.90) 34%, rgba(0, 0, 0, 0.48) 70%, transparent 100%),
    linear-gradient(92deg, transparent 0%, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.78) 41%, #000 50%, rgba(0, 0, 0, 0.54) 64%, rgba(0, 0, 0, 0.08) 82%, transparent 100%),
    radial-gradient(ellipse at 52% 18%, #000 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.22) 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.90) 34%, rgba(0, 0, 0, 0.48) 70%, transparent 100%),
    linear-gradient(92deg, transparent 0%, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.78) 41%, #000 50%, rgba(0, 0, 0, 0.54) 64%, rgba(0, 0, 0, 0.08) 82%, transparent 100%),
    radial-gradient(ellipse at 52% 18%, #000 0%, rgba(0, 0, 0, 0.74) 42%, rgba(0, 0, 0, 0.22) 72%, transparent 100%);
  mask-composite: intersect;
}

.kv-key-light::after {
  top: -8%;
  right: 13%;
  width: 24%;
  height: 114%;
  background:
    radial-gradient(ellipse at 52% 0%, rgba(255, 248, 255, 0.32) 0%, rgba(236, 188, 255, 0.16) 28%, transparent 66%),
    linear-gradient(180deg, rgba(255, 245, 255, 0.24) 0%, rgba(230, 178, 255, 0.15) 32%, rgba(188, 100, 255, 0.078) 62%, rgba(210, 58, 160, 0.030) 82%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(255, 244, 255, 0.012) 24%, rgba(255, 238, 255, 0.16) 48%, rgba(220, 130, 255, 0.078) 61%, rgba(150, 90, 255, 0.012) 78%, transparent 100%);
  filter: blur(9px);
  transform: rotate(13deg);
  transform-origin: 50% 0%;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 42%, rgba(0, 0, 0, 0.36) 76%, transparent 100%),
    linear-gradient(92deg, transparent 0%, rgba(0, 0, 0, 0.04) 24%, rgba(0, 0, 0, 0.72) 44%, #000 52%, rgba(0, 0, 0, 0.36) 66%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.82) 42%, rgba(0, 0, 0, 0.36) 76%, transparent 100%),
    linear-gradient(92deg, transparent 0%, rgba(0, 0, 0, 0.04) 24%, rgba(0, 0, 0, 0.72) 44%, #000 52%, rgba(0, 0, 0, 0.36) 66%, transparent 90%);
  mask-composite: intersect;
}

.kv-atmosphere {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0.74;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 3px), 0);
  transition: transform 220ms ease-out;
}

.kv-atmosphere::before,
.kv-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kv-atmosphere::before {
  opacity: 0.68;
  background:
    radial-gradient(circle at 68% 16%, rgba(255, 232, 255, 0.095) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 27%, rgba(222, 136, 255, 0.080) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 34%, rgba(255, 210, 255, 0.070) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 44%, rgba(212, 110, 255, 0.060) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 24%, rgba(255, 86, 172, 0.060) 0 1px, transparent 2px),
    radial-gradient(circle at 33% 63%, rgba(165, 104, 255, 0.050) 0 1px, transparent 2px);
  background-size:
    118px 132px,
    166px 184px,
    140px 126px,
    190px 176px,
    226px 204px,
    280px 248px;
  animation: kv-dust-drift 18s ease-in-out infinite alternate;
  -webkit-mask-image:
    radial-gradient(ellipse at 64% 40%, #000 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.28) 70%, transparent 92%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse at 64% 40%, #000 0%, rgba(0, 0, 0, 0.72) 42%, rgba(0, 0, 0, 0.28) 70%, transparent 92%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.kv-atmosphere::after {
  opacity: 0.62;
  background:
    radial-gradient(ellipse at 70% 26%, rgba(232, 184, 255, 0.080) 0%, rgba(176, 100, 255, 0.045) 28%, transparent 58%),
    linear-gradient(180deg, transparent 0%, transparent 52%, rgba(116, 62, 180, 0.045) 68%, rgba(194, 42, 136, 0.040) 84%, transparent 100%),
    radial-gradient(ellipse at 58% 75%, rgba(180, 92, 255, 0.080) 0%, rgba(208, 54, 144, 0.044) 38%, transparent 68%);
  filter: blur(14px);
  animation: kv-haze-breathe 12s ease-in-out infinite alternate;
}

.kv-luminous-motes {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mx) * 2px), calc(var(--my) * 1px), 0);
  transition: transform 220ms ease-out;
}

.kv-luminous-motes::before,
.kv-luminous-motes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kv-luminous-motes::before {
  opacity: 0.28;
  background:
    radial-gradient(circle at 58% 14%, rgba(255, 238, 255, 0.48) 0 0.9px, transparent 2.8px),
    radial-gradient(circle at 69% 20%, rgba(244, 190, 255, 0.42) 0 1px, transparent 3px),
    radial-gradient(circle at 76% 29%, rgba(255, 118, 194, 0.30) 0 0.9px, transparent 3px),
    radial-gradient(circle at 43% 28%, rgba(176, 118, 255, 0.26) 0 0.8px, transparent 2.8px),
    radial-gradient(circle at 82% 49%, rgba(230, 180, 255, 0.22) 0 0.8px, transparent 2.8px),
    radial-gradient(ellipse at 71% 23%, rgba(228, 172, 255, 0.050) 0%, rgba(184, 86, 240, 0.026) 22%, transparent 46%);
  background-repeat: no-repeat;
  filter:
    blur(0.35px)
    drop-shadow(0 0 5px rgba(218, 116, 255, 0.18));
  animation: kv-mote-drift 18s ease-in-out infinite alternate;
  -webkit-mask-image:
    radial-gradient(ellipse at 70% 24%, #000 0%, rgba(0, 0, 0, 0.66) 24%, rgba(0, 0, 0, 0.22) 48%, transparent 72%),
    radial-gradient(ellipse at 62% 43%, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.28) 38%, #000 58%, rgba(0, 0, 0, 0.38) 76%, transparent 94%);
  -webkit-mask-composite: source-over, source-over;
  mask-image:
    radial-gradient(ellipse at 70% 24%, #000 0%, rgba(0, 0, 0, 0.66) 24%, rgba(0, 0, 0, 0.22) 48%, transparent 72%),
    radial-gradient(ellipse at 62% 43%, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.28) 38%, #000 58%, rgba(0, 0, 0, 0.38) 76%, transparent 94%);
  mask-composite: add, add;
}

.kv-luminous-motes::after {
  opacity: 0.22;
  background:
    radial-gradient(circle at 17% 77%, rgba(255, 18, 54, 0.42) 0 1px, transparent 3.4px),
    radial-gradient(circle at 35% 70%, rgba(255, 42, 74, 0.28) 0 0.8px, transparent 3px),
    radial-gradient(circle at 84% 78%, rgba(220, 32, 84, 0.22) 0 0.8px, transparent 3px),
    radial-gradient(circle at 78% 43%, rgba(255, 158, 224, 0.18) 0 0.7px, transparent 2.8px),
    linear-gradient(112deg, transparent 0%, transparent 45%, rgba(255, 35, 76, 0.016) 50%, transparent 57%, transparent 100%);
  background-repeat: no-repeat;
  filter:
    blur(0.7px)
    drop-shadow(0 0 4px rgba(210, 0, 52, 0.12));
  animation: kv-ember-drift 22s ease-in-out infinite alternate;
  -webkit-mask-image:
    radial-gradient(ellipse at 24% 78%, #000 0%, rgba(0, 0, 0, 0.70) 24%, rgba(0, 0, 0, 0.18) 50%, transparent 74%),
    radial-gradient(ellipse at 84% 78%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 24%, transparent 56%),
    linear-gradient(180deg, transparent 0%, transparent 42%, #000 72%, rgba(0, 0, 0, 0.50) 100%);
  -webkit-mask-composite: source-over, source-over;
  mask-image:
    radial-gradient(ellipse at 24% 78%, #000 0%, rgba(0, 0, 0, 0.70) 24%, rgba(0, 0, 0, 0.18) 50%, transparent 74%),
    radial-gradient(ellipse at 84% 78%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 24%, transparent 56%),
    linear-gradient(180deg, transparent 0%, transparent 42%, #000 72%, rgba(0, 0, 0, 0.50) 100%);
  mask-composite: add, add;
}

/* === home-kv-effects.css === */
/* Homepage KV depth effects, ribbons, petals, and contact shadows. */
.kv-pc-depth-field {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: 0.88;
  background:
    radial-gradient(ellipse at 26% 72%, rgba(2, 1, 9, 0.18) 0%, rgba(13, 5, 32, 0.12) 34%, transparent 66%),
    radial-gradient(ellipse at 83% 54%, rgba(5, 1, 13, 0.14) 0%, rgba(35, 6, 42, 0.10) 30%, transparent 64%),
    linear-gradient(180deg, transparent 0%, transparent 42%, rgba(3, 1, 12, 0.18) 76%, rgba(1, 1, 5, 0.32) 100%),
    linear-gradient(90deg, rgba(1, 1, 8, 0.16) 0%, transparent 28%, transparent 66%, rgba(3, 1, 10, 0.12) 100%);
  backdrop-filter:
    blur(1.35px)
    saturate(0.92)
    contrast(0.92);
  -webkit-backdrop-filter:
    blur(1.35px)
    saturate(0.92)
    contrast(0.92);
  -webkit-mask-image:
    radial-gradient(ellipse at 66% 35%, transparent 0%, transparent 26%, rgba(0, 0, 0, 0.20) 42%, rgba(0, 0, 0, 0.72) 62%, #000 82%),
    radial-gradient(ellipse at 57% 58%, transparent 0%, rgba(0, 0, 0, 0.18) 24%, rgba(0, 0, 0, 0.76) 54%, #000 84%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, #000 42%, #000 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse at 66% 35%, transparent 0%, transparent 26%, rgba(0, 0, 0, 0.20) 42%, rgba(0, 0, 0, 0.72) 62%, #000 82%),
    radial-gradient(ellipse at 57% 58%, transparent 0%, rgba(0, 0, 0, 0.18) 24%, rgba(0, 0, 0, 0.76) 54%, #000 84%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, #000 42%, #000 100%);
  mask-composite: intersect;
}

.kv-action-ribbons {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  max-width: none;
  pointer-events: none;
  overflow: visible;
  transform: translate3d(calc(var(--mx) * var(--ribbon-layer-x)), calc(var(--my) * var(--ribbon-layer-y)), 0);
  transition: transform 220ms ease-out;
}

.kv-action-ribbons-front {
  z-index: 6;
  --ribbon-layer-x: -13px;
  --ribbon-layer-y: -6px;
  opacity: 0.96;
  mix-blend-mode: normal;
}

.action-ribbon {
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.action-ribbon-front-shadow {
  fill: rgba(18, 0, 8, 0.70);
  filter:
    blur(1.2px)
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.42));
  mix-blend-mode: multiply;
}

.action-ribbon-front-main {
  fill: url("#kv-ribbon-front-main");
  opacity: 0.44;
  filter:
    blur(1.8px)
    saturate(1.18)
    contrast(1.10)
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.32));
  animation: kv-ribbon-main-drift 9s ease-in-out infinite alternate;
}

.action-ribbon-front-trail {
  fill: rgba(58, 0, 18, 0.36);
  filter:
    blur(5px)
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.32));
  mix-blend-mode: screen;
  animation: kv-ribbon-trail-breathe 12s ease-in-out infinite alternate;
}

.action-ribbon-front-edge {
  fill: url("#kv-ribbon-front-edge");
  opacity: 0.38;
  filter:
    blur(0.9px)
    saturate(1.30)
    contrast(1.16)
    drop-shadow(0 0 10px rgba(220, 0, 48, 0.20));
  animation: kv-ribbon-edge-pulse 7s ease-in-out infinite alternate;
}

.kv-flower-field {
  position: absolute;
  inset: -6%;
  pointer-events: none;
  transform: translate3d(calc(var(--mx) * var(--flower-layer-x)), calc(var(--my) * var(--flower-layer-y)), 0);
  transition: transform 220ms ease-out;
}

.kv-flower-field-back {
  z-index: 3;
  --flower-layer-x: 10px;
  --flower-layer-y: 5px;
}

.kv-flower-field-front {
  z-index: 7;
  --flower-layer-x: -18px;
  --flower-layer-y: -9px;
}

.flower-petal {
  position: absolute;
  width: var(--petal-size);
  max-width: none;
  opacity: var(--petal-opacity, 0.94);
  z-index: var(--petal-z, 1);
  filter:
    sepia(var(--petal-sepia, 0.06))
    saturate(var(--petal-saturation, 4.05))
    hue-rotate(var(--petal-hue, -8deg))
    brightness(var(--petal-brightness, 0.82))
    contrast(var(--petal-contrast, 1.40))
    blur(var(--petal-blur, 0px))
    drop-shadow(1px -1px 0 rgba(255, 88, 104, var(--petal-rim-alpha, 0.58)))
    drop-shadow(2px -2px 3px rgba(226, 10, 38, var(--petal-hot-alpha, 0.20)))
    drop-shadow(-1px 1px 0 rgba(34, 0, 18, 0.92))
    drop-shadow(0 0 var(--petal-glow, 6px) rgba(110, 0, 38, var(--petal-glow-alpha, 0.18)));
  mix-blend-mode: normal;
  transform: translate3d(0, 0, 0) rotate(var(--petal-rotate)) scale(var(--petal-scale, 1));
  transform-origin: center;
  animation: kv-flower-drift var(--petal-duration) ease-in-out var(--petal-delay) infinite alternate;
  will-change: transform;
}

.flower-petal-a {
  top: 22%;
  left: 42%;
  --petal-size: 34px;
  --petal-rotate: -28deg;
  --petal-duration: 13s;
  --petal-delay: -2s;
  --petal-dx: 26px;
  --petal-dy: -18px;
  --petal-float: 7px;
  --petal-spin: 20deg;
  --petal-scale: 0.82;
  --petal-blur: 1.5px;
  --petal-sepia: 0.04;
  --petal-saturation: 3.05;
  --petal-hue: -5deg;
  --petal-brightness: 0.66;
  --petal-contrast: 1.20;
  --petal-opacity: 0.80;
  --petal-rim-alpha: 0.26;
  --petal-hot-alpha: 0.05;
  --petal-glow: 4px;
  --petal-glow-alpha: 0.06;
  --petal-z: 0;
}

.flower-petal-c {
  top: 70%;
  left: 34%;
  --petal-size: 36px;
  --petal-rotate: 16deg;
  --petal-duration: 16s;
  --petal-delay: -4s;
  --petal-dx: 32px;
  --petal-dy: -16px;
  --petal-float: 8px;
  --petal-spin: 18deg;
  --petal-scale: 0.78;
  --petal-blur: 1.8px;
  --petal-sepia: 0.04;
  --petal-saturation: 2.95;
  --petal-hue: -5deg;
  --petal-brightness: 0.64;
  --petal-contrast: 1.18;
  --petal-opacity: 0.78;
  --petal-rim-alpha: 0.22;
  --petal-hot-alpha: 0.04;
  --petal-glow: 4px;
  --petal-glow-alpha: 0.06;
  --petal-z: 0;
}

.flower-petal-d {
  top: 76%;
  left: 10%;
  --petal-size: 94px;
  --petal-rotate: -20deg;
  --petal-duration: 12s;
  --petal-delay: -5s;
  --petal-dx: 58px;
  --petal-dy: -34px;
  --petal-float: 16px;
  --petal-spin: 16deg;
  --petal-scale: 1.08;
  --petal-blur: 2.7px;
  --petal-sepia: 0.06;
  --petal-saturation: 4.05;
  --petal-hue: -8deg;
  --petal-brightness: 0.82;
  --petal-contrast: 1.34;
  --petal-opacity: 0.86;
  --petal-rim-alpha: 0.44;
  --petal-hot-alpha: 0.12;
  --petal-glow: 8px;
  --petal-glow-alpha: 0.14;
  --petal-z: 4;
}

.flower-petal-f {
  top: 75%;
  left: 80%;
  --petal-size: 70px;
  --petal-rotate: -34deg;
  --petal-duration: 13s;
  --petal-delay: -4s;
  --petal-dx: -48px;
  --petal-dy: -34px;
  --petal-float: 15px;
  --petal-spin: 24deg;
  --petal-scale: 1.04;
  --petal-blur: 2.3px;
  --petal-sepia: 0.06;
  --petal-saturation: 4.00;
  --petal-hue: -8deg;
  --petal-brightness: 0.80;
  --petal-contrast: 1.32;
  --petal-opacity: 0.86;
  --petal-rim-alpha: 0.42;
  --petal-hot-alpha: 0.12;
  --petal-glow: 8px;
  --petal-glow-alpha: 0.14;
  --petal-z: 4;
}

.flower-petal-g {
  top: 84%;
  left: 92%;
  --petal-size: 32px;
  --petal-rotate: 30deg;
  --petal-duration: 10s;
  --petal-delay: -7s;
  --petal-dx: -24px;
  --petal-dy: -20px;
  --petal-float: 7px;
  --petal-spin: -26deg;
  --petal-blur: 0.8px;
  --petal-sepia: 0.04;
  --petal-saturation: 3.20;
  --petal-hue: -6deg;
  --petal-brightness: 0.70;
  --petal-contrast: 1.24;
  --petal-opacity: 0.82;
  --petal-rim-alpha: 0.28;
  --petal-hot-alpha: 0.05;
  --petal-glow: 6px;
  --petal-glow-alpha: 0.07;
  --petal-z: 1;
}

.flower-petal-h {
  top: 17%;
  left: 12%;
  --petal-size: 22px;
  --petal-rotate: -18deg;
  --petal-duration: 19s;
  --petal-delay: -9s;
  --petal-dx: 24px;
  --petal-dy: -13px;
  --petal-float: 6px;
  --petal-spin: 16deg;
  --petal-scale: 0.66;
  --petal-blur: 2.2px;
  --petal-sepia: 0.04;
  --petal-saturation: 2.45;
  --petal-hue: -4deg;
  --petal-brightness: 0.54;
  --petal-contrast: 1.08;
  --petal-opacity: 0.68;
  --petal-rim-alpha: 0.14;
  --petal-hot-alpha: 0.02;
  --petal-glow: 3px;
  --petal-glow-alpha: 0.03;
  --petal-z: 0;
}

.flower-petal-i {
  top: 38%;
  left: 21%;
  --petal-size: 18px;
  --petal-rotate: 32deg;
  --petal-duration: 21s;
  --petal-delay: -13s;
  --petal-dx: 20px;
  --petal-dy: -10px;
  --petal-float: 5px;
  --petal-spin: -18deg;
  --petal-scale: 0.58;
  --petal-blur: 1.9px;
  --petal-sepia: 0.04;
  --petal-saturation: 2.40;
  --petal-hue: -4deg;
  --petal-brightness: 0.52;
  --petal-contrast: 1.08;
  --petal-opacity: 0.66;
  --petal-rim-alpha: 0.12;
  --petal-hot-alpha: 0.02;
  --petal-glow: 3px;
  --petal-glow-alpha: 0.03;
  --petal-z: 0;
}

.flower-petal-j {
  top: 62%;
  left: 28%;
  --petal-size: 24px;
  --petal-rotate: -34deg;
  --petal-duration: 18s;
  --petal-delay: -6s;
  --petal-dx: 28px;
  --petal-dy: -14px;
  --petal-float: 6px;
  --petal-spin: 20deg;
  --petal-scale: 0.68;
  --petal-blur: 1.7px;
  --petal-sepia: 0.04;
  --petal-saturation: 2.55;
  --petal-hue: -4deg;
  --petal-brightness: 0.55;
  --petal-contrast: 1.10;
  --petal-opacity: 0.70;
  --petal-rim-alpha: 0.16;
  --petal-hot-alpha: 0.02;
  --petal-glow: 4px;
  --petal-glow-alpha: 0.03;
  --petal-z: 0;
}

.flower-petal-k {
  top: 28%;
  left: 57%;
  --petal-size: 15px;
  --petal-rotate: 54deg;
  --petal-duration: 16s;
  --petal-delay: -10s;
  --petal-dx: 22px;
  --petal-dy: -15px;
  --petal-float: 6px;
  --petal-spin: -20deg;
  --petal-scale: 0.50;
  --petal-blur: 1.1px;
  --petal-sepia: 0.04;
  --petal-saturation: 3.05;
  --petal-hue: -6deg;
  --petal-brightness: 0.62;
  --petal-contrast: 1.16;
  --petal-opacity: 0.72;
  --petal-rim-alpha: 0.18;
  --petal-hot-alpha: 0.03;
  --petal-glow: 3px;
  --petal-glow-alpha: 0.03;
  --petal-z: 1;
}

.flower-petal-l {
  top: 35%;
  left: 66%;
  --petal-size: 12px;
  --petal-rotate: -48deg;
  --petal-duration: 18s;
  --petal-delay: -7s;
  --petal-dx: 18px;
  --petal-dy: -12px;
  --petal-float: 5px;
  --petal-spin: 18deg;
  --petal-scale: 0.46;
  --petal-blur: 1px;
  --petal-sepia: 0.04;
  --petal-saturation: 2.95;
  --petal-hue: -6deg;
  --petal-brightness: 0.60;
  --petal-contrast: 1.14;
  --petal-opacity: 0.70;
  --petal-rim-alpha: 0.16;
  --petal-hot-alpha: 0.03;
  --petal-glow: 3px;
  --petal-glow-alpha: 0.03;
  --petal-z: 1;
}

.character-contact-shadow {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 8vw, 160px);
  bottom: -10svh;
  width: min(1040px, 68vw);
  height: min(520px, 46svh);
  pointer-events: none;
  opacity: 0.78;
  background:
    radial-gradient(ellipse at 58% 62%, rgba(2, 1, 8, 0.76) 0%, rgba(5, 2, 14, 0.50) 28%, rgba(24, 7, 34, 0.18) 52%, transparent 76%),
    radial-gradient(ellipse at 70% 34%, rgba(93, 34, 132, 0.15) 0%, rgba(52, 14, 78, 0.09) 30%, transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(2, 1, 8, 0.24) 42%, rgba(1, 1, 4, 0.64) 100%);
  filter: blur(24px);
  mix-blend-mode: multiply;
  transform:
    translate3d(calc(var(--mx) * -18px), calc(var(--my) * -8px), 0)
    rotate(-5deg);
  transform-origin: 62% 72%;
  transition: transform 220ms ease-out;
  will-change: transform, opacity;
  animation: kv-character-shadow-breathe 6.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* === home-kv-character.css === */
/* Homepage KV character layers, tonal overlays, and grading masks. */
.kv-character {
  position: absolute;
  z-index: 4;
  right: clamp(190px, 14vw, 300px);
  bottom: -92svh;
  width: min(1420px, 78vw);
  min-width: 1120px;
  pointer-events: none;
  isolation: isolate;
  transform:
    translate3d(calc(var(--mx) * -32px), calc(var(--my) * -18px), 0)
    rotate(-1.2deg);
  transform-origin: 56% 50%;
  transition: transform 220ms ease-out;
  will-change: transform;
  animation: kv-character-presence-breathe 6.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.kv-character img {
  width: 100%;
  max-width: none;
}

.character-glow,
.character-focus-crisp,
.character-tone,
.character-shadow,
.character-rim,
.character-depth-shade {
  position: absolute;
  inset: 0;
}

.character-glow {
  z-index: 1;
  opacity: 0.19;
  filter:
    hue-rotate(-8deg)
    blur(19px)
    brightness(1.08)
    saturate(1.18)
    drop-shadow(0 -9px 18px rgba(186, 112, 255, 0.20))
    drop-shadow(11px -5px 20px rgba(220, 60, 120, 0.15));
  mix-blend-mode: screen;
  transform: translate3d(4px, -6px, 0) scale(1.01);
  -webkit-mask-image:
    radial-gradient(ellipse at 60% 30%, #000 0%, #000 28%, rgba(0, 0, 0, 0.48) 49%, transparent 70%),
    linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.16) 70%, transparent 86%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse at 60% 30%, #000 0%, #000 28%, rgba(0, 0, 0, 0.48) 49%, transparent 70%),
    linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.16) 70%, transparent 86%);
  mask-composite: intersect;
  animation: kv-character-glow-breathe 6.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.character-main {
  position: relative;
  z-index: 2;
  filter:
    contrast(1.20)
    saturate(1.12)
    brightness(0.990)
    sepia(0.095)
    hue-rotate(-11deg)
    drop-shadow(18px 30px 36px rgba(4, 2, 15, 0.46))
    drop-shadow(-5px -4px 8px rgba(120, 84, 236, 0.10))
    drop-shadow(8px -4px 9px rgba(224, 62, 136, 0.11));
}

.character-focus-crisp {
  z-index: 8;
  opacity: 0.28;
  filter:
    contrast(1.50)
    saturate(1.08)
    brightness(1.055)
    drop-shadow(0 -1px 2px rgba(255, 230, 255, 0.12))
    drop-shadow(3px -2px 5px rgba(220, 72, 150, 0.10));
  mix-blend-mode: soft-light;
  transform: translate3d(0, -1px, 0) scale(1.001);
  -webkit-mask-image:
    radial-gradient(ellipse at 61% 25%, #000 0%, rgba(0, 0, 0, 0.82) 20%, rgba(0, 0, 0, 0.34) 35%, transparent 50%),
    radial-gradient(ellipse at 48% 29%, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.58) 22%, transparent 46%),
    radial-gradient(ellipse at 72% 18%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.46) 26%, transparent 52%),
    linear-gradient(126deg, transparent 0%, transparent 34%, rgba(0, 0, 0, 0.30) 43%, #000 49%, rgba(0, 0, 0, 0.22) 56%, transparent 70%),
    radial-gradient(ellipse at 56% 48%, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.24) 18%, transparent 36%);
  -webkit-mask-composite: source-over, source-over, source-over, source-over;
  mask-image:
    radial-gradient(ellipse at 61% 25%, #000 0%, rgba(0, 0, 0, 0.82) 20%, rgba(0, 0, 0, 0.34) 35%, transparent 50%),
    radial-gradient(ellipse at 48% 29%, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.58) 22%, transparent 46%),
    radial-gradient(ellipse at 72% 18%, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.46) 26%, transparent 52%),
    linear-gradient(126deg, transparent 0%, transparent 34%, rgba(0, 0, 0, 0.30) 43%, #000 49%, rgba(0, 0, 0, 0.22) 56%, transparent 70%),
    radial-gradient(ellipse at 56% 48%, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.24) 18%, transparent 36%);
  mask-composite: add, add, add, add;
}

.character-tone {
  z-index: 3;
  opacity: 0.18;
  filter:
    brightness(0)
    saturate(100%)
    invert(34%)
    sepia(72%)
    saturate(1650%)
    hue-rotate(248deg)
    brightness(1.035)
    contrast(1.05);
  mix-blend-mode: color;
  transform: translate3d(1px, -1px, 0) scale(1.002);
  -webkit-mask-image:
    radial-gradient(ellipse at 61% 34%, #000 0%, #000 34%, rgba(0, 0, 0, 0.52) 58%, transparent 82%),
    linear-gradient(108deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.58) 40%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.30) 84%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse at 61% 34%, #000 0%, #000 34%, rgba(0, 0, 0, 0.52) 58%, transparent 82%),
    linear-gradient(108deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.58) 40%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.30) 84%, transparent 100%);
  mask-composite: intersect;
}

.character-window-light {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0.24;
  filter:
    brightness(0)
    saturate(100%)
    invert(44%)
    sepia(83%)
    saturate(1700%)
    hue-rotate(288deg)
    brightness(1.22)
    contrast(1.06);
  mix-blend-mode: screen;
  transform: translate3d(5px, -7px, 0) scale(1.005);
  -webkit-mask-image:
    radial-gradient(ellipse at 69% 21%, #000 0%, rgba(0, 0, 0, 0.88) 28%, rgba(0, 0, 0, 0.25) 56%, transparent 76%),
    linear-gradient(108deg, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.28) 62%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.11) 66%, transparent 84%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse at 69% 21%, #000 0%, rgba(0, 0, 0, 0.88) 28%, rgba(0, 0, 0, 0.25) 56%, transparent 76%),
    linear-gradient(108deg, transparent 0%, transparent 52%, rgba(0, 0, 0, 0.28) 62%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.11) 66%, transparent 84%);
  mask-composite: intersect;
  animation: kv-character-light-breathe 10s ease-in-out infinite alternate;
}

.character-shadow {
  z-index: 4;
  opacity: 0.36;
  filter:
    brightness(0)
    saturate(100%)
    invert(7%)
    sepia(42%)
    saturate(1370%)
    hue-rotate(236deg)
    brightness(0.58)
    contrast(1.14);
  mix-blend-mode: multiply;
  transform: translate3d(-2px, 3px, 0) scale(1.001);
  -webkit-mask-image:
    linear-gradient(112deg, #000 0%, rgba(0, 0, 0, 0.88) 40%, rgba(0, 0, 0, 0.30) 64%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.10) 28%, rgba(0, 0, 0, 0.74) 68%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(112deg, #000 0%, rgba(0, 0, 0, 0.88) 40%, rgba(0, 0, 0, 0.30) 64%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.10) 28%, rgba(0, 0, 0, 0.74) 68%, #000 100%);
  mask-composite: intersect;
}

.character-rim {
  z-index: 6;
  opacity: 0.32;
  filter:
    hue-rotate(-13deg)
    saturate(1.34)
    brightness(1.04)
    drop-shadow(0 -7px 14px rgba(214, 136, 255, 0.30))
    drop-shadow(9px -5px 17px rgba(226, 55, 132, 0.22))
    drop-shadow(4px 0 9px rgba(138, 90, 255, 0.15));
  mix-blend-mode: screen;
  transform: translate3d(3px, -3px, 0) scale(1.004);
  -webkit-mask-image:
    linear-gradient(108deg, transparent 0%, transparent 51%, rgba(0, 0, 0, 0.18) 59%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.14) 72%, transparent 88%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(108deg, transparent 0%, transparent 51%, rgba(0, 0, 0, 0.18) 59%, #000 100%),
    linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.14) 72%, transparent 88%);
  mask-composite: intersect;
  animation: kv-character-rim-flicker 12s ease-in-out infinite alternate;
}

.character-depth-shade {
  z-index: 7;
  opacity: 0.38;
  filter:
    brightness(0)
    saturate(100%)
    invert(5%)
    sepia(44%)
    saturate(1140%)
    hue-rotate(232deg)
    brightness(0.60)
    contrast(1.18);
  mix-blend-mode: multiply;
  transform: translate3d(-1px, 2px, 0) scale(1.001);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.64) 76%, #000 100%),
    radial-gradient(ellipse at 63% 80%, rgba(0, 0, 0, 0.14) 0%, #000 40%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.18) 58%, rgba(0, 0, 0, 0.64) 76%, #000 100%),
    radial-gradient(ellipse at 63% 80%, rgba(0, 0, 0, 0.14) 0%, #000 40%, #000 100%);
  mask-composite: intersect;
}

.global-color-unify {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: 0.094;
  background:
    radial-gradient(ellipse at 70% 28%, rgba(238, 190, 255, 0.26) 0%, rgba(132, 72, 190, 0.12) 36%, transparent 64%),
    radial-gradient(ellipse at 20% 74%, rgba(174, 32, 148, 0.14) 0%, rgba(70, 18, 96, 0.10) 34%, transparent 62%),
    linear-gradient(105deg, rgba(80, 64, 180, 0.72) 0%, rgba(132, 58, 190, 0.36) 42%, rgba(220, 60, 135, 0.58) 100%);
  mix-blend-mode: soft-light;
}

.kv-pc-focus-grade,
.kv-pc-vignette,
.kv-pc-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kv-pc-focus-grade::before,
.kv-pc-focus-grade::after,
.kv-pc-vignette::before,
.kv-pc-grain::before,
.kv-pc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.kv-pc-focus-grade {
  z-index: 9;
  opacity: 0.58;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse at 66% 30%, rgba(255, 236, 255, 0.22) 0%, rgba(225, 158, 255, 0.13) 20%, transparent 42%),
    radial-gradient(ellipse at 75% 22%, rgba(222, 70, 166, 0.15) 0%, rgba(132, 70, 210, 0.09) 28%, transparent 54%),
    radial-gradient(ellipse at 33% 70%, rgba(116, 40, 150, 0.18) 0%, rgba(40, 10, 72, 0.10) 36%, transparent 66%),
    linear-gradient(104deg, rgba(4, 1, 12, 0.44) 0%, rgba(22, 6, 46, 0.14) 31%, transparent 50%, rgba(214, 44, 130, 0.10) 100%);
}

.kv-pc-focus-grade::before {
  opacity: 0.42;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 67% 33%, rgba(255, 239, 255, 0.16) 0%, rgba(229, 154, 255, 0.078) 18%, transparent 36%),
    radial-gradient(ellipse at 77% 24%, rgba(255, 210, 245, 0.12) 0%, rgba(232, 86, 168, 0.050) 22%, transparent 42%),
    radial-gradient(ellipse at 55% 61%, rgba(255, 72, 126, 0.050) 0%, rgba(160, 36, 150, 0.032) 22%, transparent 42%),
    radial-gradient(ellipse at 49% 36%, rgba(120, 74, 255, 0.054) 0%, transparent 34%);
  -webkit-mask-image:
    radial-gradient(ellipse at 67% 35%, #000 0%, rgba(0, 0, 0, 0.78) 26%, rgba(0, 0, 0, 0.36) 48%, transparent 74%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse at 67% 35%, #000 0%, rgba(0, 0, 0, 0.78) 26%, rgba(0, 0, 0, 0.36) 48%, transparent 74%),
    linear-gradient(180deg, transparent 0%, #000 12%, #000 72%, transparent 100%);
  mask-composite: intersect;
}

.kv-pc-focus-grade::after {
  opacity: 0.34;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse at 18% 76%, rgba(172, 0, 58, 0.16) 0%, rgba(70, 6, 48, 0.12) 28%, transparent 58%),
    radial-gradient(ellipse at 66% 82%, rgba(7, 4, 28, 0.28) 0%, rgba(16, 5, 36, 0.12) 34%, transparent 62%),
    linear-gradient(112deg, rgba(2, 1, 8, 0.26) 0%, transparent 34%, transparent 72%, rgba(62, 4, 40, 0.12) 100%);
}

.kv-pc-vignette {
  z-index: 10;
  opacity: 0.92;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 66% 36%, transparent 0%, transparent 34%, rgba(6, 2, 18, 0.16) 58%, rgba(1, 1, 6, 0.58) 100%),
    linear-gradient(180deg, rgba(1, 1, 6, 0.30) 0%, transparent 22%, transparent 58%, rgba(1, 1, 5, 0.66) 100%),
    linear-gradient(90deg, rgba(1, 1, 6, 0.60) 0%, rgba(3, 1, 12, 0.20) 18%, transparent 42%, transparent 76%, rgba(3, 1, 10, 0.24) 100%);
}

.kv-pc-vignette::before {
  opacity: 0.22;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse at 63% 39%, transparent 0%, transparent 40%, rgba(5, 1, 14, 0.12) 66%, rgba(1, 1, 5, 0.38) 100%),
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(1, 1, 5, 0.32) 100%);
}

.kv-pc-grain {
  z-index: 11;
  opacity: 0.34;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.62'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.62'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)' opacity='0.90'/%3E%3C/svg%3E");
  background-size: 96px 96px;
  filter: contrast(1.34) brightness(1.08);
  -webkit-mask-image:
    radial-gradient(ellipse at 68% 35%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0.72) 42%, #000 68%),
    radial-gradient(ellipse at 58% 62%, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.36) 24%, #000 56%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, #000 26%, #000 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse at 68% 35%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.12) 18%, rgba(0, 0, 0, 0.72) 42%, #000 68%),
    radial-gradient(ellipse at 58% 62%, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.36) 24%, #000 56%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, #000 26%, #000 100%);
  mask-composite: intersect;
}

.kv-pc-grain::before {
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.72' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.1' intercept='-1.10'/%3E%3CfeFuncG type='linear' slope='3.1' intercept='-1.10'/%3E%3CfeFuncB type='linear' slope='3.1' intercept='-1.10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='72' height='72' filter='url(%23n)' opacity='0.94'/%3E%3C/svg%3E");
  background-size: 72px 72px;
  filter: contrast(1.85) brightness(1.18);
  -webkit-mask-image:
    radial-gradient(ellipse at 28% 72%, #000 0%, rgba(0, 0, 0, 0.92) 36%, rgba(0, 0, 0, 0.34) 64%, transparent 86%),
    radial-gradient(ellipse at 70% 34%, transparent 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.48) 58%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.24) 32%, #000 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    radial-gradient(ellipse at 28% 72%, #000 0%, rgba(0, 0, 0, 0.92) 36%, rgba(0, 0, 0, 0.34) 64%, transparent 86%),
    radial-gradient(ellipse at 70% 34%, transparent 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.48) 58%, #000 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.24) 32%, #000 100%);
  mask-composite: intersect;
}

.kv-pc-grain::after {
  opacity: 0.20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.0' intercept='-0.46'/%3E%3CfeFuncG type='linear' slope='2.0' intercept='-0.46'/%3E%3CfeFuncB type='linear' slope='2.0' intercept='-0.46'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.78'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  filter: contrast(1.30);
  -webkit-mask-image:
    radial-gradient(ellipse at 70% 36%, transparent 0%, rgba(0, 0, 0, 0.16) 28%, rgba(0, 0, 0, 0.72) 56%, #000 100%),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 24%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.62) 78%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse at 70% 36%, transparent 0%, rgba(0, 0, 0, 0.16) 28%, rgba(0, 0, 0, 0.72) 56%, #000 100%),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 24%, rgba(0, 0, 0, 0.38) 46%, rgba(0, 0, 0, 0.62) 78%, #000 100%);
  mask-composite: intersect;
}

/* === home-kv-animations.css === */
/* Homepage KV keyframe animations. */
@keyframes kv-dust-drift {
  from {
    transform: translate3d(-8px, 4px, 0);
    opacity: 0.48;
  }

  to {
    transform: translate3d(10px, -8px, 0);
    opacity: 0.70;
  }
}

@keyframes kv-haze-breathe {
  from {
    transform: translate3d(-6px, 2px, 0) scale(1);
    opacity: 0.46;
  }

  to {
    transform: translate3d(8px, -4px, 0) scale(1.015);
    opacity: 0.62;
  }
}

@keyframes kv-spotlight-breathe {
  from {
    opacity: 0.62;
    filter: saturate(1) brightness(1);
  }

  to {
    opacity: 0.78;
    filter: saturate(1.08) brightness(1.05);
  }
}

@keyframes kv-key-light-stable-breathe {
  from {
    opacity: 0.76;
  }

  to {
    opacity: 0.84;
  }
}

@keyframes kv-mote-drift {
  from {
    transform: translate3d(-5px, 3px, 0);
    opacity: 0.70;
  }

  to {
    transform: translate3d(7px, -5px, 0);
    opacity: 1;
  }
}

@keyframes kv-ember-drift {
  from {
    transform: translate3d(4px, 5px, 0);
    opacity: 0.70;
  }

  to {
    transform: translate3d(-8px, -6px, 0);
    opacity: 1;
  }
}

@keyframes kv-ribbon-main-drift {
  from {
    opacity: 0.36;
    transform: translate3d(-6px, 2px, 0) scaleX(0.99);
  }

  to {
    opacity: 0.50;
    transform: translate3d(8px, -4px, 0) scaleX(1.015);
  }
}

@keyframes kv-ribbon-trail-breathe {
  from {
    opacity: 0.24;
    transform: translate3d(-8px, 8px, 0) scaleX(0.99);
  }

  to {
    opacity: 0.42;
    transform: translate3d(10px, -3px, 0) scaleX(1.02);
  }
}

@keyframes kv-ribbon-edge-pulse {
  from {
    opacity: 0.28;
    transform: translate3d(-4px, 1px, 0);
  }

  to {
    opacity: 0.48;
    transform: translate3d(7px, -3px, 0);
  }
}

@keyframes kv-character-light-breathe {
  from {
    opacity: 0.19;
  }

  to {
    opacity: 0.29;
  }
}

@keyframes kv-character-presence-breathe {
  0%,
  100% {
    transform:
      translate3d(calc(var(--mx) * -32px), calc(var(--my) * -18px), 0)
      rotate(-1.2deg)
      scale(1);
  }

  50% {
    transform:
      translate3d(calc(var(--mx) * -32px), calc(var(--my) * -18px - 3px), 0)
      rotate(-1.18deg)
      scale(1.002);
  }
}

@keyframes kv-character-shadow-breathe {
  0%,
  100% {
    opacity: 0.76;
    transform:
      translate3d(calc(var(--mx) * -18px), calc(var(--my) * -8px), 0)
      rotate(-5deg)
      scale(1);
  }

  50% {
    opacity: 0.82;
    transform:
      translate3d(calc(var(--mx) * -18px), calc(var(--my) * -8px + 2px), 0)
      rotate(-5deg)
      scale(1.014, 0.992);
  }
}

@keyframes kv-character-glow-breathe {
  0%,
  100% {
    opacity: 0.17;
  }

  50% {
    opacity: 0.22;
  }
}

@keyframes kv-character-rim-flicker {
  0% {
    opacity: 0.26;
  }

  42% {
    opacity: 0.34;
  }

  100% {
    opacity: 0.30;
  }
}

@keyframes kv-flower-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--petal-rotate)) scale(var(--petal-scale, 1));
  }

  48% {
    transform: translate3d(calc(var(--petal-dx) * 0.48), calc(var(--petal-dy) * 0.48 - var(--petal-float, 7px)), 0) rotate(calc(var(--petal-rotate) + var(--petal-spin) * 0.42)) scale(calc(var(--petal-scale, 1) * 1.025));
  }

  100% {
    transform: translate3d(var(--petal-dx), var(--petal-dy), 0) rotate(calc(var(--petal-rotate) + var(--petal-spin))) scale(var(--petal-scale, 1));
  }
}

/* === home-responsive.css === */
/* Homepage responsive layout and motion overrides. */
@media (prefers-reduced-motion: reduce) {
  .bg-local-spotlight,
  .kv-key-light,
  .kv-atmosphere::before,
  .kv-atmosphere::after,
  .kv-luminous-motes::before,
  .kv-luminous-motes::after,
  .action-ribbon-front-main,
  .action-ribbon-front-trail,
  .action-ribbon-front-edge,
  .character-contact-shadow,
  .kv-character,
  .character-glow,
  .character-window-light,
  .character-rim,
  .flower-petal {
    animation: none;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .bg-base {
    object-position: 56% center;
  }

  .bg-local-spotlight {
    opacity: 0.68;
    background:
      radial-gradient(ellipse at 72% 16%, rgba(232, 170, 255, 0.16) 0%, rgba(199, 78, 255, 0.10) 28%, rgba(122, 50, 180, 0.046) 48%, transparent 66%);
  }

  .kv-key-light {
    opacity: 0.62;
    inset: -18% -24% -10% -44%;
  }

  .kv-key-light::before {
    right: 8%;
    width: 48%;
    filter: blur(20px);
  }

  .kv-key-light::after {
    right: 14%;
    width: 26%;
    filter: blur(7px);
  }

  .character-contact-shadow {
    right: 2vw;
    bottom: -8svh;
    width: 86vw;
    height: 44svh;
    opacity: 0.66;
    filter: blur(20px);
  }

  .kv-character {
    right: 0;
    bottom: -70svh;
    width: min(1120px, 92vw);
    min-width: 860px;
  }

  .kv-pc-focus-grade {
    opacity: 0.50;
  }

  .kv-pc-vignette {
    opacity: 0.84;
  }

  .kv-action-ribbons-front {
    opacity: 0.78;
  }
}

@media (min-width: 901px) and (max-width: 1040px) {
  .kv-character {
    right: -4vw;
    bottom: -66svh;
    width: min(1040px, 98vw);
    min-width: 780px;
  }

  .character-contact-shadow {
    right: -2vw;
    width: 96vw;
  }
}

@media (min-width: 901px) and (max-width: 1040px) and (min-height: 1000px) {
  .bg-base {
    object-position: 58% center;
    filter:
      brightness(1)
      contrast(1.035)
      saturate(1.07);
  }

  .bg-local-spotlight {
    opacity: 0.62;
    background:
      radial-gradient(ellipse at 76% 16%, rgba(232, 170, 255, 0.15) 0%, rgba(199, 78, 255, 0.09) 28%, rgba(122, 50, 180, 0.04) 48%, transparent 66%);
  }

  .kv-key-light {
    opacity: 0.44;
    inset: -22% -36% -10% -46%;
  }

  .kv-key-light::before {
    right: -4%;
    width: 48%;
    filter: blur(22px);
  }

  .kv-key-light::after {
    right: 2%;
    width: 26%;
    filter: blur(7px);
  }

  .kv-atmosphere {
    opacity: 0.52;
  }

  .kv-luminous-motes {
    opacity: 0.18;
  }

  .kv-pc-depth-field,
  .character-glow,
  .character-focus-crisp,
  .character-tone,
  .character-window-light,
  .character-shadow,
  .character-rim,
  .character-depth-shade,
  .kv-pc-focus-grade,
  .kv-pc-vignette,
  .kv-pc-grain {
    display: none;
  }

  .character-contact-shadow {
    right: 8vw;
    bottom: -8svh;
    width: 110vw;
    height: 38svh;
    opacity: 0.44;
    filter: blur(12px);
    animation: none;
    transition: none;
  }

  .kv-character {
    right: 6vw;
    bottom: -7svh;
    width: 108vw;
    min-width: 0;
    animation: none;
    transition: none;
    transform: rotate(-1.2deg);
    will-change: auto;
  }
}

@media (min-width: 901px) and (max-width: 1180px) and (max-height: 680px) {
  .bg-base {
    object-position: 55% center;
  }

  .kv-key-light {
    opacity: 0.54;
    inset: -18% -22% -10% -42%;
  }

  .character-contact-shadow {
    right: 15vw;
    bottom: -10svh;
    width: 76vw;
    height: 38svh;
  }

  .kv-character {
    right: 13vw;
    bottom: -72svh;
    width: min(840px, 82vw);
    min-width: 660px;
  }
}

@media (max-width: 900px) {
  .bg-base {
    object-position: 60% center;
    filter:
      brightness(1)
      contrast(1.035)
      saturate(1.07);
  }

  .bg-local-spotlight {
    opacity: 0.60;
    background:
      radial-gradient(ellipse at 72% 16%, rgba(232, 170, 255, 0.13) 0%, rgba(199, 78, 255, 0.090) 26%, rgba(122, 50, 180, 0.040) 44%, transparent 62%);
  }

  .kv-key-light {
    opacity: 0.40;
    inset: -22% -34% -10% -50%;
  }

  .kv-key-light::before {
    right: 0%;
    width: 50%;
    filter: blur(22px);
  }

  .kv-key-light::after {
    right: 6%;
    width: 28%;
    filter: blur(7px);
  }

  .kv-atmosphere {
    opacity: 0.52;
  }

  .kv-atmosphere::before {
    opacity: 0.42;
  }

  .kv-atmosphere::after {
    opacity: 0.38;
  }

  .kv-luminous-motes {
    opacity: 0.18;
  }

  .kv-pc-depth-field,
  .character-glow,
  .character-focus-crisp,
  .character-tone,
  .character-window-light,
  .character-shadow,
  .character-rim,
  .character-depth-shade {
    display: none;
  }

  .kv-action-ribbons-front {
    opacity: 0.38;
    --ribbon-layer-x: -7px;
    --ribbon-layer-y: -4px;
  }

  .action-ribbon-front-main {
    opacity: 0.28;
    filter:
      blur(1.8px)
      saturate(1.08)
      contrast(1.02)
      drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
  }

  .kv-flower-field-back {
    opacity: 1;
  }

  .kv-flower-field-front {
    opacity: 1;
  }

  .flower-petal-a {
    top: 19%;
    left: 16%;
  }

  .flower-petal-c,
  .flower-petal-f,
  .flower-petal-j,
  .flower-petal-l {
    display: none;
  }

  .flower-petal-h {
    top: 24%;
    left: 9%;
    --petal-size: 18px;
  }

  .flower-petal-i {
    top: 47%;
    left: 13%;
    --petal-size: 16px;
  }

  .flower-petal-k {
    top: 18%;
    left: 48%;
    --petal-size: 14px;
  }

  .flower-petal-d {
    top: 69%;
    left: 7%;
    --petal-size: 54px;
  }

  .flower-petal-g {
    top: 77%;
    left: 84%;
    --petal-size: 24px;
  }

  .character-contact-shadow {
    right: -22vw;
    bottom: -6svh;
    width: 118vw;
    height: 42svh;
    opacity: 0.44;
    filter: blur(12px);
    animation: none;
    transition: none;
  }

  .kv-character {
    right: -34vw;
    bottom: -6svh;
    width: 118vw;
    min-width: 0;
    animation: none;
    transition: none;
    transform: rotate(-1.2deg);
    will-change: auto;
  }

  .character-main {
    filter:
      contrast(1.10)
      saturate(1.06)
      brightness(0.99)
      drop-shadow(10px 18px 24px rgba(4, 2, 15, 0.40));
  }

  .global-color-unify {
    opacity: 0.055;
  }

  .kv-pc-focus-grade,
  .kv-pc-vignette,
  .kv-pc-grain {
    display: none;
  }
}

@media (min-width: 700px) and (max-width: 900px) {
  .bg-base {
    object-position: 58% center;
  }

  .bg-local-spotlight {
    opacity: 0.62;
    background:
      radial-gradient(ellipse at 76% 16%, rgba(232, 170, 255, 0.15) 0%, rgba(199, 78, 255, 0.09) 28%, rgba(122, 50, 180, 0.04) 48%, transparent 66%);
  }

  .kv-key-light {
    opacity: 0.44;
    inset: -22% -36% -10% -46%;
  }

  .kv-key-light::before {
    right: -4%;
    width: 48%;
  }

  .kv-key-light::after {
    right: 2%;
    width: 26%;
  }

  .character-contact-shadow {
    right: 46vw;
    bottom: -8svh;
    width: 108vw;
    height: 38svh;
  }

  .kv-character {
    right: 44vw;
    bottom: -7svh;
    width: 108vw;
  }

  .flower-petal-d {
    top: 66%;
    left: 8%;
    --petal-size: 60px;
  }

  .flower-petal-g {
    top: 76%;
    left: 86%;
    --petal-size: 28px;
  }
}

@media (min-width: 521px) and (max-width: 699px) and (max-height: 820px) {
  .bg-base {
    object-position: 58% center;
  }

  .kv-key-light {
    opacity: 0.42;
    inset: -22% -34% -10% -50%;
  }

  .character-contact-shadow {
    right: 10vw;
    bottom: -8svh;
    width: 108vw;
    height: 38svh;
  }

  .kv-character {
    right: 8vw;
    bottom: -7svh;
    width: 112vw;
  }
}

@media (max-width: 699px) {
  .kv-character,
  .character-contact-shadow {
    -webkit-mask-image:
      radial-gradient(ellipse 52% 42% at 30% 62%, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.42) 64%, #000 88%);
    mask-image:
      radial-gradient(ellipse 52% 42% at 30% 62%, transparent 0%, transparent 48%, rgba(0, 0, 0, 0.42) 64%, #000 88%);
  }

  .character-contact-shadow {
    opacity: 0.32;
  }
}

@media (min-width: 1181px) and (max-width: 1320px) and (max-height: 850px) {
  .character-contact-shadow {
    right: clamp(48px, 6vw, 96px);
    bottom: -8svh;
  }

  .kv-character {
    right: clamp(112px, 9vw, 150px);
    bottom: -82svh;
  }
}

@media (max-width: 520px) {
  .kv-character {
    right: 6vw;
    bottom: -6svh;
    width: 148vw;
  }

  .character-contact-shadow {
    right: -2vw;
    bottom: -8svh;
    width: 140vw;
  }

  .kv-character,
  .character-contact-shadow {
    -webkit-mask-image:
      radial-gradient(ellipse 50% 48% at 27% 66%, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.42) 65%, #000 90%);
    mask-image:
      radial-gradient(ellipse 50% 48% at 27% 66%, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.42) 65%, #000 90%);
  }
}

@media (min-width: 830px) and (max-width: 880px) and (min-height: 1180px) and (max-height: 1320px) {
  .character-contact-shadow {
    right: 40vw !important;
    bottom: -8svh;
    width: 108vw;
    transform: translateX(-10vw);
  }

  .kv-character {
    right: 38vw !important;
    bottom: -7svh;
    width: 108vw;
    transform: translateX(-10vw) rotate(-1.2deg) !important;
  }
}

@media (min-width: 660px) and (max-width: 699px) and (min-height: 980px) and (max-height: 1100px) {
  .bg-base {
    object-position: 58% center;
  }

  .bg-local-spotlight {
    opacity: 0.62;
    background:
      radial-gradient(ellipse at 76% 16%, rgba(232, 170, 255, 0.15) 0%, rgba(199, 78, 255, 0.09) 28%, rgba(122, 50, 180, 0.04) 48%, transparent 66%);
  }

  .kv-key-light {
    opacity: 0.44;
    inset: -22% -36% -10% -46%;
  }

  .kv-key-light::before {
    right: -4%;
    width: 48%;
  }

  .kv-key-light::after {
    right: 2%;
    width: 26%;
  }

  .character-contact-shadow {
    right: 22vw !important;
    bottom: -7svh;
    width: 112vw;
    height: 38svh;
  }

  .kv-character {
    right: 18vw !important;
    bottom: -6svh;
    width: 118vw;
    transform: rotate(-1.2deg) !important;
  }
}