/* styles/base.css — split from styles.css (structural only) */

@font-face {
  font-family: "SatyrSP";
  src: url("../font/SatyrSP.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "zarubkaType-Regular";
  src: url("../font/zarubkaType-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  /* единственный скролл-контейнер; overflow-x:hidden → y становится auto */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg-main, #0a0c18);
  /* visible по обеим осям — иначе overflow-x:hidden форсирует вторую полосу на body */
  overflow: visible;
  /* UI/ритуалы/меню: тапы не должны выделять текст и вызывать callout «Копировать» */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 0;
  overflow: visible;
}

/* Контентный текст и поля ввода — выделение/копирование разрешены */
input,
textarea,
select,
[contenteditable="true"],
.app-disclaimer,
.app-confirm-message,
.result-screen,
.daily-result {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* Кнопки и оболочки внутри контентных экранов снова без выделения */
.result-screen button,
.result-screen .btn-shell,
.result-actions,
.daily-result-actions,
.daily-result-actions button,
.daily-result-actions .btn-shell {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

button {
  font: inherit;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.subtitle {
  color: var(--muted);
  margin-top: 6px;
  position: relative;
  z-index: 6;
}

/* Единый краевой ореол (не светит иконку/текст — только контур) */
:root {
  --ui-edge-halo-opacity: 0.48;
  --ui-edge-halo-opacity-hover: 0.7;
  --ui-edge-halo-core: linear-gradient(
    135deg,
    rgba(170, 236, 255, 0.5),
    rgba(124, 232, 255, 0.42) 50%,
    rgba(150, 130, 255, 0.4)
  );
  --ui-edge-halo-outer: linear-gradient(
    145deg,
    rgba(122, 86, 255, 0.32),
    rgba(80, 200, 255, 0.28)
  );
  /* Силуэт 3D-фигур ритуала / навигации (кристалл профиля, фигура дня) */
  --ui-intro-figure-glow:
    drop-shadow(0 0 10px rgba(140, 200, 255, 0.44))
    drop-shadow(0 0 20px rgba(170, 140, 255, 0.3));
  --ui-intro-figure-glow-hover:
    drop-shadow(0 0 14px rgba(140, 200, 255, 0.6))
    drop-shadow(0 0 28px rgba(170, 140, 255, 0.44));
}

.icon {
  width: 24px;
  height: 24px;
  display: block;
  margin-inline: auto;
  flex-shrink: 0;
}

.icon-menu {
  width: 22px;
  height: 22px;
}

.icon-pack {
  width: 24px;
  height: 24px;
}

.intro-geometry {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 258px;
  height: 296px;
  z-index: 4;
  transform: translate(
      calc(-50% + var(--intro-follow-x) * 0.5 + var(--intro-float-x)),
      calc(-50% + var(--intro-follow-y) * 0.5 + var(--intro-float-y))
    )
    rotateX(var(--intro-tilt-x))
    rotateY(var(--intro-tilt-y))
    rotateZ(var(--intro-float-rot))
    scale(calc(0.94 + var(--intro-progress) * 0.22));
}

.intro-ground-glow {
  --intro-glow-shape: circle(49% at 50% 50%);
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: -1;
  opacity: calc(0.52 + var(--intro-progress) * 0.3);
  mix-blend-mode: screen;
  animation: introGroundGlowPulse 2.8s ease-in-out infinite;
}

.intro-ground-glow::before,
.intro-ground-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-ground-glow::before {
  inset: 5%;
  clip-path: var(--intro-glow-shape);
  -webkit-clip-path: var(--intro-glow-shape);
  background: transparent;
  border: 1.8px solid rgba(186, 148, 255, 0.34);
  filter:
    blur(11px)
    drop-shadow(0 0 20px rgba(176, 136, 255, 0.5))
    drop-shadow(0 0 32px rgba(126, 220, 255, 0.4))
    saturate(1.2);
  opacity: 0.84;
  animation: introGroundGlowBlurPulse 2.8s ease-in-out infinite;
}

.intro-ground-glow::after {
  inset: -18%;
  background:
    radial-gradient(circle at 50% 50%, rgba(170, 132, 255, 0.14), rgba(170, 132, 255, 0) 64%),
    radial-gradient(circle at 50% 50%, rgba(132, 218, 255, 0.12), rgba(132, 218, 255, 0) 70%);
  filter: blur(40px) saturate(1.04);
  opacity: 0.54;
}

.intro-geometry::before,
.intro-geometry::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.intro-geometry::before {
  z-index: 1;
}

.intro-geometry::before {
  background:
    radial-gradient(circle at 26% 16%, rgba(243, 232, 255, 0.55), rgba(238, 235, 255, 0.03) 44%),
    linear-gradient(
      148deg,
      rgba(203, 171, 255, 0.56) 0%,
      rgba(151, 204, 255, 0.42) 38%,
      rgba(130, 97, 228, 0.56) 64%,
      rgba(94, 68, 184, 0.54) 100%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 18%,
      rgba(248, 239, 255, 0.2) 25%,
      rgba(255, 255, 255, 0) 33%,
      rgba(233, 217, 255, 0.16) 44%,
      rgba(255, 255, 255, 0) 54%,
      rgba(225, 209, 255, 0.14) 67%,
      rgba(255, 255, 255, 0) 78%
    ),
    linear-gradient(
      -34deg,
      rgba(255, 255, 255, 0) 14%,
      rgba(210, 236, 255, 0.16) 24%,
      rgba(255, 255, 255, 0) 34%,
      rgba(220, 203, 255, 0.14) 48%,
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      132deg,
      rgba(255, 255, 255, 0) 14%,
      rgba(255, 255, 255, 0.22) 19%,
      rgba(255, 255, 255, 0) 23%,
      rgba(255, 255, 255, 0.18) 33%,
      rgba(255, 255, 255, 0) 39%,
      rgba(255, 255, 255, 0.14) 52%,
      rgba(255, 255, 255, 0) 58%
    ),
    linear-gradient(
      -48deg,
      rgba(255, 255, 255, 0) 18%,
      rgba(175, 230, 255, 0.14) 26%,
      rgba(255, 255, 255, 0) 34%,
      rgba(211, 189, 255, 0.14) 45%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(
      38deg,
      rgba(255, 255, 255, 0) 24%,
      rgba(247, 241, 255, 0.23) 33%,
      rgba(255, 255, 255, 0) 42%,
      rgba(240, 231, 255, 0.18) 56%,
      rgba(255, 255, 255, 0) 66%
    );
  background-size: 100% 100%, 100% 100%, 135% 135%, 130% 130%, 100% 100%, 120% 120%, 120% 120%;
  background-position:
    50% 50%,
    50% 50%,
    0% 0%,
    100% 100%,
    50% 50%,
    0% 100%,
    100% 0%;
  box-shadow:
    0 0 calc(34px + var(--intro-progress) * 46px) rgba(178, 126, 255, 0.45),
    0 8px 38px rgba(42, 28, 76, 0.52),
    inset 0 0 calc(16px + var(--intro-progress) * 20px) rgba(138, 212, 255, 0.34),
    inset 0 0 1px rgba(248, 240, 255, 0.8);
  animation: introCrystalShimmer 8.5s ease-in-out infinite;
}

.intro-geometry::after {
  z-index: 2;
  display: none;
}

.intro-inner-flares {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.68;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 16%,
      rgba(246, 237, 255, 0.42) 17.4%,
      rgba(255, 255, 255, 0.05) 19.2%,
      rgba(255, 255, 255, 0.05) 33.5%,
      rgba(182, 232, 255, 0.36) 35.2%,
      rgba(255, 255, 255, 0.06) 36.8%,
      rgba(255, 255, 255, 0) 39%
    ),
    linear-gradient(
      -56deg,
      rgba(255, 255, 255, 0) 24%,
      rgba(217, 243, 255, 0.34) 25.6%,
      rgba(255, 255, 255, 0.04) 27.4%,
      rgba(255, 255, 255, 0.04) 48.4%,
      rgba(236, 219, 255, 0.32) 49.8%,
      rgba(255, 255, 255, 0.05) 51.4%,
      rgba(255, 255, 255, 0) 54%
    ),
    linear-gradient(
      16deg,
      rgba(255, 255, 255, 0) 41%,
      rgba(246, 239, 255, 0.26) 42.4%,
      rgba(255, 255, 255, 0.02) 44%,
      rgba(255, 255, 255, 0) 46%
    );
  background-size: 178% 178%, 168% 168%, 142% 142%;
  background-position: 8% 24%, 88% 72%, 56% 40%;
  filter: saturate(1.14) contrast(1.08);
  animation: introInnerFlareDance 3.1s ease-in-out infinite;
}

.intro-facet-lines {
  position: absolute;
  inset: 8%;
  display: none;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0.48;
  filter: saturate(1.08) brightness(1.04);
  animation: introFacetLinesDrift 5.8s ease-in-out infinite;
}

.intro-facet-lines-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.intro-facet-line {
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.58;
  filter: drop-shadow(0 0 1.4px rgba(198, 170, 255, 0.34)) drop-shadow(0 0 3.8px rgba(138, 216, 255, 0.3));
}

.intro-facet-line-warm {
  stroke: rgba(220, 194, 255, 0.5);
}

.intro-facet-line-cool {
  stroke: rgba(172, 229, 255, 0.48);
}

.intro-effects {
  position: absolute;
  inset: 0;
  z-index: 6;
  mix-blend-mode: screen;
  pointer-events: none;
}

.intro-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.intro-fx {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.intro-fx-tap {
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  background: radial-gradient(circle, rgba(226, 205, 255, 0.72), rgba(121, 82, 202, 0));
  animation: introTapBurst 920ms ease-out forwards;
}

.intro-fx-star {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  background: rgba(239, 232, 255, 0.82);
  box-shadow: 0 0 10px rgba(204, 168, 255, 0.8);
  animation: introStarFlight 980ms ease-out forwards;
}

.intro-fx-pulse {
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border: 1px solid rgba(201, 150, 255, 0.5);
  box-shadow: 0 0 24px rgba(145, 201, 255, 0.22);
  animation: introReleasePulse 980ms ease-out forwards;
}

.intro-fx-figure-spark {
  --dx: 0px;
  --dy: 0px;
  --delay: 0ms;
  --size: 2px;
  width: var(--size);
  height: calc(var(--size) * 1.8);
  margin-left: calc(var(--size) * -0.5);
  margin-top: calc(var(--size) * -0.9);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(251, 244, 255, 0.95), rgba(178, 226, 255, 0.2));
  box-shadow:
    0 0 10px rgba(196, 147, 255, 0.6),
    0 0 16px rgba(142, 218, 255, 0.4);
  animation: introFigureSparkFly 620ms ease-out forwards;
  animation-delay: var(--delay);
}

.intro-tap-wave::before {
  opacity: calc(0.58 + var(--intro-progress) * 0.28);
}

.intro-swipe-flow .intro-geometry::before {
  box-shadow:
    0 0 calc(34px + var(--intro-progress) * 42px) rgba(175, 110, 255, 0.52),
    0 0 calc(16px + var(--intro-progress) * 26px) rgba(127, 226, 255, 0.42) inset;
}

.intro-hold-flow .intro-geometry {
  transform: translate(
      calc(-50% + var(--intro-follow-x) * 0.5 + var(--intro-float-x)),
      calc(-50% + var(--intro-follow-y) * 0.5 + var(--intro-float-y))
    )
    rotateX(var(--intro-tilt-x))
    rotateY(var(--intro-tilt-y))
    rotateZ(var(--intro-float-rot))
    scale(calc(0.98 + var(--intro-progress) * 0.28));
}

.intro-shake-burst .intro-geometry::before {
  filter: saturate(1.24) brightness(1.08);
}

.intro-connected {
  animation: introConnectedFlash 1300ms ease-out 1;
}

.ritual-box {
  width: 100%;
  min-height: 0;
}

.ritual-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ritual-trail-dom {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.trail-drop {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(164, 247, 255, calc(0.35 + var(--p) * 0.45)), rgba(41, 59, 178, 0) 68%);
  filter: blur(0.5px);
  animation: trailDropExpand 720ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.trail-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  background: hsla(var(--h), 98%, 72%, calc(0.55 + var(--p) * 0.35));
  box-shadow: 0 0 10px hsla(var(--h), 98%, 74%, 0.8);
  animation: trailSparkFly 520ms cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

.ritual-galaxy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hold-orb {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 132px;
  height: 132px;
  border-radius: 46% 54% 52% 48% / 47% 45% 55% 53%;
  border-color: rgba(206, 185, 255, 0.26);
  color: #ffffff;
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  place-content: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(173, 255, 255, 0.66), rgba(81, 58, 166, 0.9) 62%),
    #17132a;
  box-shadow: 0 0 34px rgba(109, 87, 219, 0.55);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    background 220ms ease;
  animation: orbMorph 3.6s ease-in-out infinite;
}

.hold-orb.charged {
  box-shadow: 0 0 48px rgba(75, 255, 207, 0.72);
}


.ritual-core-burst {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
}

.daily-ray-target {
  position: relative;
}

.daily-ray-target::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(175, 221, 255, 0.22), rgba(175, 221, 255, 0) 62%),
    radial-gradient(circle at 50% 50%, rgba(205, 170, 255, 0.18), rgba(205, 170, 255, 0) 70%);
  opacity: 0.42;
  filter: blur(8px);
  pointer-events: none;
}

.daily-ray-target.daily-ray-absorb::after {
  animation: dailyRayAbsorb 620ms ease-out 1;
}

.intro-menu-ember-transfer {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 80;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 244, 226, 0.96), rgba(255, 224, 178, 0.46) 36%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(circle at 50% 58%, rgba(215, 158, 255, 0.34), rgba(0, 0, 0, 0) 68%);
  box-shadow:
    0 0 18px rgba(255, 214, 170, 0.74),
    0 0 30px rgba(175, 132, 255, 0.46);
}

.intro-menu-ember-hold {
  opacity: 1;
  animation: introMenuEmberHold 520ms ease-in-out infinite alternate;
}

.mode-icon-tarot {
  color: #be9eff;
}

.mode-icon-tarot_extended {
  color: #82fff1;
}

.mode-icon-runes {
  color: #9ec8ff;
}

.mode-icon-astrology {
  color: #c4b0ff;
}

.mode-icon-cookies {
  color: #ffc998;
}

.mode-icon-numerology {
  color: #97b9ff;
}

.mode-icon-dilemma {
  color: #a5b0d2;
}

.outline-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 4px);
  height: var(--size, 4px);
  transform: translate(var(--x), var(--y));
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle, rgba(174, 255, 235, 1), rgba(174, 255, 235, 0));
  box-shadow: 0 0 10px rgba(149, 255, 225, 0.75);
  animation: outlineSpark 520ms cubic-bezier(0.2, 0.9, 0.2, 1) var(--delay, 0ms) forwards;
}

.result-combination-window {
  display: grid;
  gap: 10px;
}

.result-combination-window h3 {
  margin: 0;
}

.keywords {
  margin: 4px 0 8px;
  color: #cbbef7;
}

@keyframes pulse-dark {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@keyframes backCorePulse {
  0% {
    transform: scale(1);
    opacity: 0.24;
  }
  50% {
    transform: scale(1.01);
    opacity: 0.56;
  }
  100% {
    transform: scale(1);
    opacity: 0.24;
  }
}

@keyframes backHaloBreath {
  0% {
    transform: scale(1);
    opacity: 0.08;
  }
  50% {
    transform: scale(1.015);
    opacity: 0.26;
  }
  100% {
    transform: scale(1);
    opacity: 0.08;
  }
}

@keyframes cardFaceArtBreath {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.06) saturate(1.08);
    transform: scale(1.012);
  }
}

@keyframes orbMorph {
  0%,
  100% {
    border-radius: 46% 54% 52% 48% / 47% 45% 55% 53%;
  }
  33% {
    border-radius: 54% 46% 49% 51% / 43% 56% 44% 57%;
  }
  66% {
    border-radius: 49% 51% 58% 42% / 55% 45% 52% 48%;
  }
}

@keyframes trailDropExpand {
  0% {
    transform: scale(0.5);
    opacity: 0.75;
  }
  100% {
    transform: scale(5.6);
    opacity: 0;
  }
}

@keyframes trailSparkFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.35);
    opacity: 0;
  }
}

@keyframes burst {
  from {
    opacity: 0;
    transform: scale(0.72) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes dailyBackDark {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.15) saturate(1.2);
  }
}

@keyframes dailyBackLight {
  0%,
  100% {
    filter: brightness(1) contrast(1);
  }
  50% {
    filter: brightness(1.08) contrast(1.05);
  }
}

@keyframes zoneEnterPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 12px 34px rgba(109, 255, 223, 0.42);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
  }
}

@keyframes outlineSpark {
  0% {
    transform: translate(var(--x), var(--y)) scale(0.9);
    opacity: 0.85;
  }
  100% {
    transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(0.2);
    opacity: 0;
  }
}

@keyframes quickShuffleFront {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(0.7deg) scale(1.012);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes quickShuffleBack {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-0.7deg) scale(0.988);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes chosenCenterIn {
  0% {
    transform: translate(-50%, -50%) scale(0.96);
  }
  65% {
    transform: translate(-50%, -50%) scale(1.06);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes dailyLevitate {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    filter: drop-shadow(0 10px 20px rgba(114, 102, 235, 0.2));
  }
  50% {
    transform: translateY(-5px) rotate(0.5deg);
    filter: drop-shadow(0 14px 25px rgba(114, 102, 235, 0.28));
  }
}

@keyframes introTapBurst {
  0% {
    transform: scale(0.3);
    opacity: 0.8;
  }
  100% {
    transform: scale(5.2);
    opacity: 0;
  }
}

@keyframes introStarFlight {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.92;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.35);
    opacity: 0;
  }
}

@keyframes introReleasePulse {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(7.4);
    opacity: 0;
  }
}

@keyframes introArtifactFloat {
  0% {
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5),
        calc(-50% + var(--intro-follow-y) * 0.5)
      )
      rotateX(var(--intro-tilt-x))
      rotateY(var(--intro-tilt-y))
      translateY(0px)
      translateX(0px)
      rotate(-2.4deg)
      scale(calc(0.94 + var(--intro-progress) * 0.22));
    filter: drop-shadow(0 12px 28px rgba(114, 102, 235, 0.28));
  }
  25% {
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5),
        calc(-50% + var(--intro-follow-y) * 0.5)
      )
      rotateX(var(--intro-tilt-x))
      rotateY(var(--intro-tilt-y))
      translateY(-8px)
      translateX(22px)
      rotate(5.6deg)
      scale(calc(0.965 + var(--intro-progress) * 0.235));
  }
  50% {
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5),
        calc(-50% + var(--intro-follow-y) * 0.5)
      )
      rotateX(var(--intro-tilt-x))
      rotateY(var(--intro-tilt-y))
      translateY(-14px)
      translateX(0px)
      rotate(2.8deg)
      scale(calc(0.982 + var(--intro-progress) * 0.245));
    filter: drop-shadow(0 18px 34px rgba(114, 102, 235, 0.36));
  }
  75% {
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5),
        calc(-50% + var(--intro-follow-y) * 0.5)
      )
      rotateX(var(--intro-tilt-x))
      rotateY(var(--intro-tilt-y))
      translateY(-8px)
      translateX(-22px)
      rotate(-5.6deg)
      scale(calc(0.965 + var(--intro-progress) * 0.235));
  }
  100% {
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5),
        calc(-50% + var(--intro-follow-y) * 0.5)
      )
      rotateX(var(--intro-tilt-x))
      rotateY(var(--intro-tilt-y))
      translateY(0px)
      translateX(0px)
      rotate(-2.4deg)
      scale(calc(0.94 + var(--intro-progress) * 0.22));
    filter: drop-shadow(0 12px 28px rgba(114, 102, 235, 0.28));
  }
}

@keyframes introCrystalBottomPrism {
  0%,
  100% {
    filter: saturate(1.44) brightness(1.24) hue-rotate(0deg);
    box-shadow:
      inset 0 0 24px rgba(88, 74, 168, 0.44),
      inset 0 -16px 40px rgba(118, 216, 255, 0.44),
      inset 0 -8px 18px rgba(204, 246, 255, 0.26),
      0 0 18px rgba(120, 102, 218, 0.32);
  }
  50% {
    filter: saturate(1.72) brightness(1.4) hue-rotate(12deg);
    box-shadow:
      inset 0 0 30px rgba(95, 82, 181, 0.54),
      inset 0 -26px 54px rgba(136, 230, 255, 0.62),
      inset 0 -12px 24px rgba(224, 250, 255, 0.42),
      0 0 28px rgba(132, 114, 234, 0.44);
  }
}

@keyframes introGroundGlowPulse {
  0%,
  100% {
    opacity: calc(0.52 + var(--intro-progress) * 0.28);
    transform: scale(0.98);
  }
  50% {
    opacity: calc(0.78 + var(--intro-progress) * 0.34);
    transform: scale(1.1);
  }
}

@keyframes introGroundGlowBlurPulse {
  0%,
  100% {
    filter:
      blur(9px)
      drop-shadow(0 0 16px rgba(176, 136, 255, 0.42))
      drop-shadow(0 0 26px rgba(126, 220, 255, 0.32))
      saturate(1.1);
  }
  50% {
    filter:
      blur(14px)
      drop-shadow(0 0 24px rgba(176, 136, 255, 0.56))
      drop-shadow(0 0 38px rgba(126, 220, 255, 0.46))
      saturate(1.28);
  }
}

@keyframes introArtifactShatter {
  0% {
    opacity: 1;
    filter: brightness(1.05);
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5 + var(--intro-float-x)),
        calc(-50% + var(--intro-follow-y) * 0.5 + var(--intro-float-y))
      )
      rotateZ(var(--intro-float-rot))
      scale(calc(1.01 + var(--intro-progress) * 0.14));
  }
  100% {
    opacity: 0;
    filter: brightness(1.18);
    transform: translate(
        calc(-50% + var(--intro-follow-x) * 0.5 + var(--intro-float-x)),
        calc(-50% + var(--intro-follow-y) * 0.5 + var(--intro-float-y))
      )
      rotateZ(var(--intro-float-rot))
      scale(calc(1.08 + var(--intro-progress) * 0.14));
  }
}

@keyframes introShardScatter {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(calc(var(--piece-scale) * 0.96));
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), var(--z3)) rotate(var(--rot)) scale(calc(var(--piece-scale) * 0.86));
    opacity: 0;
  }
}

@keyframes introFigureSparkFly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.95);
    opacity: 0.95;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(24deg) scale(0.35);
    opacity: 0;
  }
}

@keyframes introShatterSparkFly {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--dx), var(--dy), var(--z3)) rotate(30deg) scale(0.68);
    opacity: 0;
  }
}

@keyframes introShatterLayerFade {
  0% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes introShatterEmberGlow {
  0% {
    transform: scale(0.74);
    opacity: 0;
  }
  20% {
    transform: scale(1.04);
    opacity: 1;
  }
  62% {
    transform: scale(0.98);
    opacity: 0.84;
  }
  100% {
    transform: scale(0.88);
    opacity: 0;
  }
}

@keyframes introShatterEmberSpark {
  0% {
    transform: translate3d(0, 0, 0) scale(0.7);
    opacity: 0;
  }
  24% {
    transform: translate3d(calc(var(--sx) * 0.45), calc(var(--sy) * 0.5), 0) scale(1);
    opacity: 0.88;
  }
  100% {
    transform: translate3d(var(--sx), calc(var(--sy) - var(--rise)), 0) scale(0.6);
    opacity: 0;
  }
}

@keyframes introConnectedFlash {
  0% {
    filter: brightness(1);
  }
  24% {
    filter: brightness(1.28);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes introUniverseDrift {
  0% {
    transform: rotate(0deg) scale(1);
    filter: hue-rotate(0deg) saturate(1);
  }
  50% {
    transform: rotate(180deg) scale(1.04);
    filter: hue-rotate(12deg) saturate(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: hue-rotate(0deg) saturate(1);
  }
}

@keyframes introInnerGalaxyFlow {
  0% {
    background-position:
      16% 22%,
      82% 28%,
      58% 78%,
      14% 26%,
      86% 72%,
      34% 38%,
      56% 52%,
      70% 62%,
      18% 48%,
      82% 54%,
      44% 20%,
      28% 78%,
      66% 18%,
      52% 84%;
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
  33% {
    background-position:
      40% 10%,
      54% 44%,
      42% 56%,
      38% 54%,
      62% 44%,
      56% 46%,
      38% 66%,
      52% 46%,
      34% 36%,
      66% 68%,
      58% 26%,
      20% 64%,
      80% 26%,
      40% 78%;
    filter: hue-rotate(9deg) saturate(1.12) brightness(1.07);
  }
  66% {
    background-position:
      8% 40%,
      94% 18%,
      76% 90%,
      6% 66%,
      98% 34%,
      68% 62%,
      30% 24%,
      86% 80%,
      12% 58%,
      92% 48%,
      30% 12%,
      52% 88%,
      72% 12%,
      22% 82%;
    filter: hue-rotate(-8deg) saturate(1.1) brightness(1.06);
  }
  100% {
    background-position:
      16% 22%,
      82% 28%,
      58% 78%,
      14% 26%,
      86% 72%,
      34% 38%,
      56% 52%,
      70% 62%,
      18% 48%,
      82% 54%,
      44% 20%,
      28% 78%,
      66% 18%,
      52% 84%;
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
}

@keyframes introInnerGalaxyDance {
  0%,
  100% {
    filter: hue-rotate(0deg) saturate(1.02) brightness(1);
  }
  25% {
    filter: hue-rotate(10deg) saturate(1.14) brightness(1.08);
  }
  50% {
    filter: hue-rotate(-8deg) saturate(1.1) brightness(1.05);
  }
  75% {
    filter: hue-rotate(6deg) saturate(1.12) brightness(1.07);
  }
}

@keyframes introInnerGalaxyPulse {
  0%,
  100% {
    opacity: 0.96;
    box-shadow:
      inset 0 0 14px rgba(126, 108, 224, 0.28),
      inset 0 0 20px rgba(146, 218, 255, 0.2);
  }
  25% {
    opacity: 1;
    box-shadow:
      inset 0 0 24px rgba(150, 221, 255, 0.4),
      inset 0 0 30px rgba(132, 112, 236, 0.36);
  }
  50% {
    opacity: 0.98;
    box-shadow:
      inset 0 0 22px rgba(170, 228, 255, 0.32),
      inset 0 0 28px rgba(144, 118, 244, 0.3);
  }
  75% {
    opacity: 1;
    box-shadow:
      inset 0 0 26px rgba(162, 226, 255, 0.42),
      inset 0 0 34px rgba(150, 126, 248, 0.4);
  }
}

@keyframes introInnerFlareDance {
  0%,
  100% {
    opacity: 0.28;
    background-position: 8% 24%, 88% 72%;
    filter: brightness(1) saturate(1);
  }
  35% {
    opacity: 0.64;
    background-position: 26% 38%, 62% 54%;
    filter: brightness(1.08) saturate(1.08);
  }
  70% {
    opacity: 0.42;
    background-position: 14% 68%, 76% 22%;
    filter: brightness(1.04) saturate(1.05);
  }
}

@keyframes introFacetLinesDrift {
  0%,
  100% {
    opacity: 0.42;
    filter: saturate(1.06) brightness(1.02);
  }
  50% {
    opacity: 0.58;
    filter: saturate(1.12) brightness(1.08);
  }
}

@keyframes introCrystalCoreFlow {
  0% {
    background-position:
      50% 50%,
      18% 22%,
      78% 28%,
      66% 74%,
      20% 68%,
      44% 42%,
      58% 54%,
      68% 62%;
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
  33% {
    background-position:
      50% 50%,
      26% 30%,
      70% 22%,
      58% 66%,
      28% 74%,
      48% 46%,
      54% 52%,
      62% 58%;
    filter: hue-rotate(8deg) saturate(1.08) brightness(1.04);
  }
  66% {
    background-position:
      50% 50%,
      20% 34%,
      74% 34%,
      62% 78%,
      24% 62%,
      42% 48%,
      60% 50%,
      70% 66%;
    filter: hue-rotate(-6deg) saturate(1.05) brightness(1.02);
  }
  100% {
    background-position:
      50% 50%,
      18% 22%,
      78% 28%,
      66% 74%,
      20% 68%,
      44% 42%,
      58% 54%,
      68% 62%;
    filter: hue-rotate(0deg) saturate(1) brightness(1);
  }
}

@keyframes introCrystalShimmer {
  0% {
    background-position:
      50% 50%,
      50% 50%,
      0% 0%,
      100% 100%,
      50% 50%,
      0% 100%,
      100% 0%;
  }
  50% {
    background-position:
      50% 50%,
      50% 50%,
      32% 18%,
      72% 82%,
      50% 50%,
      28% 78%,
      76% 22%;
  }
  100% {
    background-position:
      50% 50%,
      50% 50%,
      0% 0%,
      100% 100%,
      50% 50%,
      0% 100%,
      100% 0%;
  }
}

@keyframes introPupilGalaxySpin {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: hue-rotate(0deg) saturate(1.02) brightness(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.04);
    filter: hue-rotate(10deg) saturate(1.18) brightness(1.08);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
    filter: hue-rotate(0deg) saturate(1.02) brightness(1);
  }
}

@keyframes modeFractalDrift {
  0% {
    transform: translateX(-2%) translateY(-1%) rotate(0deg) scale(1);
    filter: hue-rotate(0deg) saturate(1);
  }
  34% {
    transform: translateX(2%) translateY(-2%) rotate(3deg) scale(1.03);
    filter: hue-rotate(8deg) saturate(1.12);
  }
  67% {
    transform: translateX(-1%) translateY(1%) rotate(-2deg) scale(1.01);
    filter: hue-rotate(-7deg) saturate(1.08);
  }
  100% {
    transform: translateX(-2%) translateY(-1%) rotate(0deg) scale(1);
    filter: hue-rotate(0deg) saturate(1);
  }
}

@keyframes modeFractalShape {
  0% {
    clip-path: polygon(
      2% 20%,
      6% 10%,
      14% 4%,
      24% 7%,
      33% 2%,
      45% 6%,
      55% 1%,
      66% 5%,
      77% 2%,
      89% 8%,
      97% 18%,
      99% 31%,
      96% 45%,
      100% 58%,
      96% 73%,
      98% 86%,
      90% 95%,
      78% 98%,
      66% 94%,
      54% 99%,
      42% 95%,
      30% 99%,
      18% 95%,
      8% 90%,
      2% 79%,
      1% 66%,
      0% 53%,
      1% 40%,
      0% 29%
    );
    -webkit-clip-path: polygon(
      2% 20%,
      6% 10%,
      14% 4%,
      24% 7%,
      33% 2%,
      45% 6%,
      55% 1%,
      66% 5%,
      77% 2%,
      89% 8%,
      97% 18%,
      99% 31%,
      96% 45%,
      100% 58%,
      96% 73%,
      98% 86%,
      90% 95%,
      78% 98%,
      66% 94%,
      54% 99%,
      42% 95%,
      30% 99%,
      18% 95%,
      8% 90%,
      2% 79%,
      1% 66%,
      0% 53%,
      1% 40%,
      0% 29%
    );
  }
  25% {
    clip-path: polygon(
      1% 23%,
      5% 12%,
      12% 5%,
      22% 8%,
      35% 1%,
      47% 7%,
      58% 2%,
      68% 6%,
      80% 1%,
      91% 9%,
      98% 20%,
      100% 34%,
      95% 47%,
      99% 60%,
      95% 74%,
      97% 88%,
      88% 96%,
      76% 99%,
      64% 93%,
      52% 100%,
      40% 94%,
      27% 100%,
      15% 94%,
      7% 88%,
      1% 77%,
      2% 63%,
      0% 50%,
      2% 37%,
      0% 27%
    );
    -webkit-clip-path: polygon(
      1% 23%,
      5% 12%,
      12% 5%,
      22% 8%,
      35% 1%,
      47% 7%,
      58% 2%,
      68% 6%,
      80% 1%,
      91% 9%,
      98% 20%,
      100% 34%,
      95% 47%,
      99% 60%,
      95% 74%,
      97% 88%,
      88% 96%,
      76% 99%,
      64% 93%,
      52% 100%,
      40% 94%,
      27% 100%,
      15% 94%,
      7% 88%,
      1% 77%,
      2% 63%,
      0% 50%,
      2% 37%,
      0% 27%
    );
  }
  50% {
    clip-path: polygon(
      3% 18%,
      7% 9%,
      16% 3%,
      26% 6%,
      34% 2%,
      46% 5%,
      57% 1%,
      68% 4%,
      79% 2%,
      90% 7%,
      98% 17%,
      99% 29%,
      97% 43%,
      100% 56%,
      97% 71%,
      99% 84%,
      91% 94%,
      79% 97%,
      67% 95%,
      55% 98%,
      44% 96%,
      32% 99%,
      20% 96%,
      9% 91%,
      3% 80%,
      1% 67%,
      0% 54%,
      1% 41%,
      1% 30%
    );
    -webkit-clip-path: polygon(
      3% 18%,
      7% 9%,
      16% 3%,
      26% 6%,
      34% 2%,
      46% 5%,
      57% 1%,
      68% 4%,
      79% 2%,
      90% 7%,
      98% 17%,
      99% 29%,
      97% 43%,
      100% 56%,
      97% 71%,
      99% 84%,
      91% 94%,
      79% 97%,
      67% 95%,
      55% 98%,
      44% 96%,
      32% 99%,
      20% 96%,
      9% 91%,
      3% 80%,
      1% 67%,
      0% 54%,
      1% 41%,
      1% 30%
    );
  }
  75% {
    clip-path: polygon(
      1% 22%,
      6% 11%,
      13% 4%,
      23% 7%,
      32% 1%,
      44% 6%,
      54% 0%,
      65% 5%,
      76% 1%,
      88% 8%,
      96% 19%,
      100% 33%,
      95% 46%,
      99% 59%,
      94% 75%,
      97% 89%,
      89% 97%,
      77% 99%,
      65% 94%,
      53% 100%,
      41% 94%,
      29% 100%,
      17% 95%,
      8% 89%,
      2% 78%,
      1% 64%,
      0% 51%,
      2% 38%,
      0% 28%
    );
    -webkit-clip-path: polygon(
      1% 22%,
      6% 11%,
      13% 4%,
      23% 7%,
      32% 1%,
      44% 6%,
      54% 0%,
      65% 5%,
      76% 1%,
      88% 8%,
      96% 19%,
      100% 33%,
      95% 46%,
      99% 59%,
      94% 75%,
      97% 89%,
      89% 97%,
      77% 99%,
      65% 94%,
      53% 100%,
      41% 94%,
      29% 100%,
      17% 95%,
      8% 89%,
      2% 78%,
      1% 64%,
      0% 51%,
      2% 38%,
      0% 28%
    );
  }
  100% {
    clip-path: polygon(
      2% 20%,
      6% 10%,
      14% 4%,
      24% 7%,
      33% 2%,
      45% 6%,
      55% 1%,
      66% 5%,
      77% 2%,
      89% 8%,
      97% 18%,
      99% 31%,
      96% 45%,
      100% 58%,
      96% 73%,
      98% 86%,
      90% 95%,
      78% 98%,
      66% 94%,
      54% 99%,
      42% 95%,
      30% 99%,
      18% 95%,
      8% 90%,
      2% 79%,
      1% 66%,
      0% 53%,
      1% 40%,
      0% 29%
    );
    -webkit-clip-path: polygon(
      2% 20%,
      6% 10%,
      14% 4%,
      24% 7%,
      33% 2%,
      45% 6%,
      55% 1%,
      66% 5%,
      77% 2%,
      89% 8%,
      97% 18%,
      99% 31%,
      96% 45%,
      100% 58%,
      96% 73%,
      98% 86%,
      90% 95%,
      78% 98%,
      66% 94%,
      54% 99%,
      42% 95%,
      30% 99%,
      18% 95%,
      8% 90%,
      2% 79%,
      1% 66%,
      0% 53%,
      1% 40%,
      0% 29%
    );
  }
}

@keyframes appControlIconBob {
  0%,
  100% {
    transform: translateX(var(--icon-shift-x, 0px)) translateY(0) rotate(0deg) scale(1);
  }
  35% {
    transform: translateX(var(--icon-shift-x, 0px)) translateY(-0.8px) rotate(1.4deg) scale(1.015);
  }
  65% {
    transform: translateX(var(--icon-shift-x, 0px)) translateY(0.4px) rotate(-1.2deg) scale(0.992);
  }
}

@keyframes appButtonParticlesDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.9;
  }
  50% {
    transform: translate3d(0, -1px, 0);
    opacity: 1;
  }
}

@keyframes appButtonEdgeMorph {
  0%,
  100% {
    clip-path: polygon(5% 16%, 13% 8%, 25% 6%, 39% 8%, 52% 6%, 66% 8%, 79% 7%, 90% 12%, 95% 23%, 96% 38%, 97% 52%, 96% 67%, 95% 81%, 88% 91%, 74% 95%, 59% 94%, 44% 96%, 29% 94%, 16% 91%, 8% 81%, 5% 67%, 4% 52%, 5% 36%);
  }
  50% {
    clip-path: polygon(6% 17%, 14% 9%, 26% 7%, 40% 9%, 53% 7%, 67% 9%, 80% 8%, 90% 13%, 94% 24%, 95% 38%, 96% 52%, 95% 66%, 94% 80%, 87% 90%, 73% 94%, 58% 93%, 43% 95%, 28% 93%, 16% 90%, 9% 80%, 6% 66%, 5% 52%, 6% 37%);
  }
}

@keyframes modeIconLevitate {
  0%,
  100% {
    transform: translateY(0) rotate(calc(var(--icon-swing, 3deg) * -0.45));
    filter: drop-shadow(0 3px 8px rgba(118, 95, 225, 0.25));
  }
  50% {
    transform: translateY(-4px) rotate(var(--icon-swing, 3deg));
    filter: drop-shadow(0 6px 14px rgba(125, 220, 255, 0.4));
  }
}

@keyframes modeSparkFlight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  12% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(20deg) scale(0.25);
  }
}

@keyframes modeEdgeSparkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16);
  }
  15% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(18deg) scale(0.3);
  }
}

@keyframes modeFireflyOrbit {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(var(--fz, 1));
  }
  33% {
    transform: translate(-50%, -50%) translate(calc(var(--float-x) * 0.6), calc(var(--float-y) * -0.55))
      scale(calc(var(--fz, 1) * 1.05));
  }
  66% {
    transform: translate(-50%, -50%) translate(var(--float-x), var(--float-y)) scale(var(--fz, 1));
  }
  100% {
    transform: translate(-50%, -50%) translate(calc(var(--float-x) * -0.45), calc(var(--float-y) * 0.5))
      scale(calc(var(--fz, 1) * 0.92));
  }
}

@keyframes modeCardHaloPulse {
  0%,
  100% {
    opacity: calc(0.4 + var(--hover-morph, 0) * 0.35);
    filter: saturate(1) brightness(0.96);
  }
  50% {
    opacity: calc(0.62 + var(--hover-morph, 0) * 0.3);
    filter: saturate(1.08) brightness(1.08);
  }
}

@keyframes modeCardOuterHaloPulse {
  0%,
  100% {
    filter: saturate(1) brightness(0.92);
    opacity: calc(0.58 + var(--hover-morph, 0) * 0.25);
  }
  50% {
    filter: saturate(1.12) brightness(1.1);
    opacity: calc(0.86 + var(--hover-morph, 0) * 0.12);
  }
}

@keyframes modeCardOuterHaloPulseSoon {
  0%,
  100% {
    filter: saturate(0.55) brightness(0.82);
    opacity: 0.22;
  }
  50% {
    filter: saturate(0.65) brightness(0.9);
    opacity: 0.34;
  }
}

@keyframes modeFireflyPulse {
  0%,
  100% {
    opacity: 0.22;
    filter: saturate(1) brightness(0.95);
  }
  50% {
    opacity: 0.62;
    filter: saturate(1.12) brightness(1.06);
  }
}

@keyframes modeMobileFractal {
  0% {
    clip-path: polygon(
      4% 16%,
      11% 7%,
      23% 5%,
      36% 8%,
      49% 5%,
      63% 8%,
      76% 6%,
      89% 12%,
      96% 24%,
      97% 38%,
      99% 52%,
      97% 67%,
      96% 82%,
      87% 93%,
      73% 96%,
      58% 94%,
      43% 97%,
      28% 95%,
      14% 92%,
      6% 80%,
      3% 66%,
      2% 50%,
      3% 34%
    );
  }
  50% {
    clip-path: polygon(
      3% 18%,
      10% 8%,
      21% 4%,
      34% 9%,
      48% 4%,
      62% 9%,
      75% 5%,
      88% 11%,
      95% 23%,
      98% 37%,
      100% 51%,
      98% 66%,
      95% 81%,
      86% 92%,
      72% 97%,
      57% 95%,
      42% 98%,
      27% 96%,
      13% 93%,
      5% 81%,
      2% 67%,
      1% 51%,
      2% 35%
    );
  }
  100% {
    clip-path: polygon(
      5% 15%,
      12% 6%,
      24% 6%,
      37% 7%,
      50% 4%,
      64% 7%,
      77% 7%,
      90% 13%,
      97% 25%,
      96% 39%,
      98% 53%,
      96% 68%,
      97% 83%,
      88% 94%,
      74% 95%,
      59% 93%,
      44% 96%,
      29% 94%,
      15% 91%,
      7% 79%,
      4% 65%,
      3% 49%,
      4% 33%
    );
  }
}

@keyframes modeInnerCloudGather {
  0%,
  100% {
    border-radius: 68% 32% 62% 38% / 43% 57% 34% 66%;
    transform: scale(1.08) translateY(0);
    filter: blur(20px) saturate(1.3);
  }
  50% {
    border-radius: 52% 48% 46% 54% / 49% 51% 55% 45%;
    transform: scale(1.02) translateY(-1px);
    filter: blur(16px) saturate(1.22);
  }
}

@keyframes modeCloudMorph {
  0%,
  100% {
    clip-path: inset(0 round 44% 56% 54% 46% / 49% 51% 58% 42%);
    -webkit-clip-path: inset(0 round 44% 56% 54% 46% / 49% 51% 58% 42%);
  }
  50% {
    clip-path: inset(0 round 51% 49% 45% 55% / 55% 45% 47% 53%);
    -webkit-clip-path: inset(0 round 51% 49% 45% 55% / 55% 45% 47% 53%);
  }
}

@keyframes modeCardWobble {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-1px) rotate(0.35deg);
  }
  50% {
    transform: translateY(0px) rotate(-0.3deg);
  }
  75% {
    transform: translateY(-1px) rotate(0.22deg);
  }
}

@keyframes menuOmenFade {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modeTitleGlowPulse {
  0%,
  100% {
    opacity: 0.46;
    filter: blur(12px);
  }
  50% {
    opacity: 0.72;
    filter: blur(14px);
  }
}

@keyframes topBarTitleGlowPulse {
  0%,
  100% {
    opacity: 0.72;
    filter: blur(13px);
  }
  50% {
    opacity: 1;
    filter: blur(16px);
  }
}

@keyframes modeTitleSparkFall {
  0% {
    transform: translate(-50%, -2px) scale(0.7);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, 24px) scale(0.35);
    opacity: 0;
  }
}

@keyframes topBarTitleSparkFall {
  0% {
    transform: translate(-50%, -2px) scale(0.75);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 28px) scale(0.3);
    opacity: 0;
  }
}

@keyframes topBarRavenSparkFall {
  0% {
    transform: translate(-50%, 0) scale(0.5);
    opacity: 0;
  }
  16% {
    opacity: 0.95;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), 22px) scale(0.25);
    opacity: 0;
  }
}

@keyframes dailyRayAbsorb {
  0% {
    opacity: 0.5;
    transform: scale(1);
    filter: blur(8px);
  }
  55% {
    opacity: 0.95;
    transform: scale(1.25);
    filter: blur(11px);
  }
  100% {
    opacity: 0.42;
    transform: scale(1);
    filter: blur(8px);
  }
}

@keyframes introMenuEmberHold {
  0% {
    transform: scale(0.96);
    opacity: 0.84;
    filter: blur(0px);
  }
  100% {
    transform: scale(1.08);
    opacity: 1;
    filter: blur(0.45px);
  }
}


@keyframes modePredictionDust {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -56%) scale(1);
    opacity: 0.62;
  }
}

@keyframes modeTitleLevitate {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes modeCardTitleLevitate {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes modePredictionEdge {
  0% {
    opacity: 0.16;
    filter: brightness(0.9) saturate(0.88);
    background-position: 50% 50%, 0% 50%;
  }
  50% {
    opacity: 0.32;
    filter: brightness(1.03) saturate(1);
    background-position: 50% 50%, 100% 50%;
  }
  100% {
    opacity: 0.16;
    filter: brightness(0.9) saturate(0.88);
    background-position: 50% 50%, 0% 50%;
  }
}

@keyframes modePredictionContourMorph {
  0% {
    clip-path: polygon(
      2.8% 18%,
      4.8% 10.2%,
      11.8% 5.8%,
      22% 7.1%,
      33.5% 4.4%,
      44.5% 7.6%,
      50% 3.2%,
      55.5% 7.6%,
      66.5% 4.4%,
      78% 7.1%,
      88.2% 5.8%,
      95.2% 10.2%,
      97.2% 18%,
      99.1% 30%,
      97.5% 40%,
      99.3% 50%,
      97.5% 60%,
      99.1% 70%,
      97.2% 82%,
      95.2% 89.8%,
      88.2% 94.2%,
      78% 92.9%,
      66.5% 95.6%,
      55.5% 92.4%,
      50% 96.8%,
      44.5% 92.4%,
      33.5% 95.6%,
      22% 92.9%,
      11.8% 94.2%,
      4.8% 89.8%,
      2.8% 82%,
      0.9% 70%,
      2.5% 60%,
      0.7% 50%,
      2.5% 40%,
      0.9% 30%
    );
  }
  100% {
    clip-path: polygon(
      4.7% 22%,
      8.8% 11.8%,
      16.3% 8.8%,
      27.4% 10.4%,
      37.8% 6.6%,
      46.8% 10.1%,
      50% 5.1%,
      53.2% 10.1%,
      62.2% 6.6%,
      72.6% 10.4%,
      83.7% 8.8%,
      91.2% 11.8%,
      95.3% 22%,
      97.2% 33.8%,
      95.2% 43.4%,
      97.8% 50%,
      95.2% 56.6%,
      97.2% 66.2%,
      95.3% 78%,
      91.2% 88.2%,
      83.7% 91.2%,
      72.6% 89.6%,
      62.2% 93.4%,
      53.2% 89.9%,
      50% 94.9%,
      46.8% 89.9%,
      37.8% 93.4%,
      27.4% 89.6%,
      16.3% 91.2%,
      8.8% 88.2%,
      4.7% 78%,
      2.8% 66.2%,
      4.8% 56.6%,
      2.2% 50%,
      4.8% 43.4%,
      2.8% 33.8%
    );
  }
}

.intro-geometry-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
  opacity: calc(0.9 + var(--intro-progress) * 0.1);
  filter:
    brightness(calc(1 + var(--intro-progress) * 0.45))
    saturate(calc(1.06 + var(--intro-progress) * 0.28))
    drop-shadow(0 0 calc(22px + var(--intro-progress) * 22px) rgba(124, 232, 255, calc(0.34 + var(--intro-progress) * 0.34)))
    drop-shadow(0 0 calc(44px + var(--intro-progress) * 34px) rgba(170, 118, 255, calc(0.28 + var(--intro-progress) * 0.26)))
    drop-shadow(0 0 calc(72px + var(--intro-progress) * 42px) rgba(92, 196, 255, calc(0.14 + var(--intro-progress) * 0.22)));
  transition: filter 420ms ease, opacity 360ms ease;
}

.intro-swipe-flow .intro-geometry-3d,
.intro-shake-burst .intro-geometry-3d {
  filter: none;
}

.intro-collapsing .intro-geometry-3d {
  opacity: 1;
}

/* Мягкое свечение: силуэт сжатия должен читаться, не растворяться в bloom. */
.intro-collapsing .intro-geometry-3d canvas {
  filter:
    brightness(1.22)
    saturate(1.18)
    drop-shadow(0 0 22px rgba(230, 252, 255, 0.45))
    drop-shadow(0 0 48px rgba(140, 236, 255, 0.28));
  transition: filter 180ms ease;
}

.intro-hold-flow .intro-geometry-3d {
  transform: none;
}

.intro-geometry-fallback::before {
  content: "";
  position: absolute;
  inset: 10%;
  display: block !important;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 18%, rgba(246, 236, 255, 0.68), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 62% 68%, rgba(112, 218, 255, 0.38), rgba(112, 218, 255, 0) 58%),
    linear-gradient(148deg, rgba(202, 170, 255, 0.62), rgba(103, 78, 205, 0.72));
  box-shadow:
    0 0 42px rgba(178, 126, 255, 0.58),
    inset 0 0 22px rgba(142, 224, 255, 0.38);
}