/* All motion is decorative. Application state and accessible text remain independent. */
kai-core {
  --kai-accent: #758bb7;
  --kai-fine: #54617b;
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 420 / 232;
  overflow: hidden;
  border: 1px solid #343b48;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 48%, #242a37 0%, #1c2029 45%, #161a22 100%);
  box-shadow: inset 0 1px 0 #ffffff08, 0 16px 40px #0d142112;
  isolation: isolate;
}

.kai-core__drawing {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  pointer-events: none;
}

.kai-core__drawing path,
.kai-core__drawing circle {
  vector-effect: non-scaling-stroke;
}

.kai-core__axis,
.kai-core__frame,
.kai-core__datum {
  stroke: #576073;
  stroke-width: 1;
  opacity: .5;
}

.kai-core__guide {
  stroke: #919cb2;
  stroke-width: .7;
  stroke-dasharray: 1 7;
  opacity: .12;
}

.kai-core__body { stroke: #10141c; stroke-width: 13; }
.kai-core__edge { stroke: #424f69; stroke-width: 2; }
.kai-core__highlight { stroke: var(--kai-accent); stroke-width: 2; stroke-linecap: round; opacity: .9; }
.kai-core__pulse { stroke: #7088b8; stroke-width: 6; opacity: 0; }
.kai-core__reticle { stroke: var(--kai-fine); stroke-width: .8; stroke-dasharray: 1 5; opacity: .65; }
.kai-core__lens-ring { stroke: var(--kai-accent); stroke-width: 1; opacity: .55; }
.kai-core__lens-inner { stroke: var(--kai-fine); stroke-width: .8; stroke-dasharray: 10 5; opacity: .55; }
.kai-core__crosshair { stroke: var(--kai-fine); stroke-width: .8; opacity: .7; }
.kai-core__alignment { stroke: var(--kai-accent); stroke-width: 1; opacity: .8; }
.kai-core__shutter { stroke: var(--kai-accent); stroke-width: .8; opacity: 0; }

kai-core[data-kai-state="review"] { --kai-accent: #c3b58b; --kai-fine: #8c8867; }
kai-core[data-kai-state="error"] { --kai-accent: #c39c97; --kai-fine: #99766e; }
kai-core[data-kai-state="working"][data-kai-motion="enabled"] .kai-core__pulse {
  animation: kai-core-breathe 3.8s ease-in-out infinite;
}

kai-core.kai-core--focusing[data-kai-motion="enabled"] .kai-core__lens {
  transform-box: fill-box;
  transform-origin: center;
  animation: kai-core-focus 560ms cubic-bezier(.4, 0, .2, 1) both;
}

kai-core.kai-core--focusing[data-kai-motion="enabled"] .kai-core__shutter {
  animation: kai-core-shutter 560ms ease-in-out both;
}

@keyframes kai-core-breathe {
  0%, 100% { opacity: .025; }
  50% { opacity: .2; }
}

@keyframes kai-core-focus {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
  35% { transform: rotate(7deg) scale(.88); opacity: .9; }
  52% { transform: rotate(15deg) scale(.22); opacity: .5; }
  74% { transform: rotate(3deg) scale(.95); opacity: .9; }
}

@keyframes kai-core-shutter {
  0%, 100% { opacity: 0; }
  38%, 66% { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  kai-core .kai-core__pulse,
  kai-core .kai-core__lens,
  kai-core .kai-core__shutter { animation: none !important; }
}

@media (forced-colors: active) {
  kai-core { border-color: CanvasText; background: Canvas; box-shadow: none; }
  kai-core .kai-core__edge,
  kai-core .kai-core__highlight,
  kai-core .kai-core__lens-ring,
  kai-core .kai-core__alignment { stroke: CanvasText; opacity: 1; }
  kai-core .kai-core__body,
  kai-core .kai-core__pulse,
  kai-core .kai-core__guide { stroke: none; }
}

/* Every surface uses the supplied PNG alpha, including its triangle and overlaps. */
.kai-core__artwork {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 2000 / 1125;
  transform: translate(calc(-50% + var(--kai-look-x, 0px)), calc(-50% + var(--kai-look-y, 0px)));
  transition: transform 480ms cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 5px 7px #155bea26) drop-shadow(0 0 2px #29cce83d);
  pointer-events: none;
  user-select: none;
}
.kai-core__silhouette {
  position: absolute;
  inset: 0;
  -webkit-mask: url('/vendor/kaos-white-logo.png') center / 100% 100% no-repeat;
  mask: url('/vendor/kaos-white-logo.png') center / 100% 100% no-repeat;
  mask-mode: alpha;
  isolation: isolate;
}
.kai-core__silhouette > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.kai-core__color {
  background: linear-gradient(115deg, #1244f4 12%, #086df4 29%, #12c3e1 48%, #169af0 62%, #414aee 78%, #7760f4 90%);
}
.kai-core__original {
  object-fit: contain;
  filter: grayscale(1) brightness(1.12) contrast(1.2);
  mix-blend-mode: multiply;
}
.kai-core__light {
  background: radial-gradient(ellipse 34% 68% at var(--kai-light-x, 50%) var(--kai-light-y, 50%), #d6ffffd9, #97faff1a 55%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .75;
}
.kai-core__scan {
  background: linear-gradient(180deg, transparent 44%, #c0ffff66 49%, #ffffffc9 50%, #c0ffff22 52%, transparent 57%);
  background-size: 100% 230%;
  background-position: 0 100%;
  opacity: .36;
  animation: kaos-light-pass 8.4s ease-in-out infinite;
  animation-play-state: paused;
}
.kai-core__blink {
  background: linear-gradient(90deg, #d9faff00, #e1ffffe6 28%, #ffffff 50%, #e1ffffe6 72%, #d9faff00);
  mix-blend-mode: screen;
  opacity: 0;
}
kai-core[data-kai-motion="enabled"] .kai-core__scan { animation-play-state: running; }
kai-core.kai-core--focusing[data-kai-motion="enabled"] .kai-core__blink { animation: kaos-light-blink 860ms ease-out both; }
@keyframes kaos-light-pass {
  0%, 32% { background-position: 0 100%; opacity: 0; }
  40% { opacity: .36; }
  68% { background-position: 0 0; opacity: .36; }
  76%, 100% { background-position: 0 0; opacity: 0; }
}
@keyframes kaos-light-blink {
  0%, 100% { opacity: 0; }
  28% { opacity: .12; }
  46% { opacity: .7; }
  70% { opacity: .09; }
}
@media (prefers-reduced-motion: reduce) {
  .kai-core__artwork { transition: none; transform: translate(-50%, -50%); }
  kai-core .kai-core__scan, kai-core .kai-core__blink { animation: none !important; opacity: 0; }
}
@media (forced-colors: active) {
  .kai-core__artwork { filter: none; }
  .kai-core__color { background: CanvasText; forced-color-adjust: none; }
  .kai-core__original, .kai-core__light, .kai-core__scan, .kai-core__blink { display: none; }
}