:root {
  --skye-cyan: #57d7ff;
  --skye-cyan-2: #1ea0ff;
  --skye-pink: #ff47cb;
  --skye-pink-2: #ff1e8f;
  --skye-violet: #9b6dff;
  --skye-white: #eff4ff;
  --skye-bg-0: #02040b;
  --skye-bg-1: #071225;
  --skye-bg-2: #0f0d1d;
  --skye-shadow-heavy: 0 28px 90px rgba(0,0,0,.5);
}

.skye-motion-shell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.skye-floating-logo {
  animation: skyeFloat 7s ease-in-out infinite, skyeGlowPulse 4.5s ease-in-out infinite;
  filter:
    drop-shadow(0 0 16px rgba(87, 215, 255, .46))
    drop-shadow(0 0 36px rgba(255, 71, 203, .36))
    drop-shadow(0 0 80px rgba(155, 109, 255, .24));
}

.skye-no-container { background: transparent !important; border: 0 !important; box-shadow: none !important; }

.skye-loader-orbit {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.skye-loader-orbit::before,
.skye-loader-orbit::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid transparent;
  mix-blend-mode: screen;
}
.skye-loader-orbit::before {
  border-top-color: rgba(87, 215, 255, .95);
  border-right-color: rgba(87, 215, 255, .22);
  transform: rotate(28deg);
  animation: skyeSpin 2.2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(87, 215, 255, .55));
}
.skye-loader-orbit::after {
  inset: 16%;
  border-bottom-color: rgba(255, 71, 203, .95);
  border-left-color: rgba(255, 71, 203, .24);
  transform: rotate(-14deg);
  animation: skyeSpinReverse 1.6s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 71, 203, .55));
}
.skye-loader-core {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.28), transparent 26%),
    radial-gradient(circle at 66% 68%, rgba(255, 71, 203, .18), transparent 38%),
    radial-gradient(circle at center, rgba(14, 21, 44, .96), rgba(3,4,10,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 40px rgba(12, 26, 65, .48);
  display: grid;
  place-items: center;
  position: relative;
}
.skye-loader-core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(87,215,255,.18), rgba(255,71,203,.1), transparent 68%);
  filter: blur(18px);
  animation: skyeGlowPulse 3.5s ease-in-out infinite;
}
.skye-progress-track {
  width: min(320px, 72vw);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.skye-progress-bar {
  height: 100%;
  width: 35%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--skye-cyan), var(--skye-violet), var(--skye-pink));
  box-shadow: 0 0 22px rgba(87,215,255,.45);
  animation: skyeProgressSweep 1.9s ease-in-out infinite;
}

.skye-loader-scan {
  position: relative;
  width: min(420px, 76vw);
  aspect-ratio: 1.2 / 1;
  display: grid;
  place-items: center;
}
.skye-loader-scan::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; top: 50%; height: 18%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(87,215,255,.22), rgba(255,71,203,.18), transparent);
  filter: blur(16px);
  animation: skyeScan 2.25s ease-in-out infinite;
  pointer-events: none;
}
.skye-loader-scan .scan-grid {
  position: absolute;
  inset: 6%;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.08);
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black 48%, transparent 88%);
}

.skye-screen-wipe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}
.skye-screen-wipe.is-active {
  opacity: 1;
  animation: skyeWipeSequence 1.38s cubic-bezier(.16,1,.3,1) forwards;
}
.skye-screen-wipe::before,
.skye-screen-wipe::after {
  content: "";
  position: absolute;
  inset: 0;
}
.skye-screen-wipe::before {
  background: linear-gradient(90deg, rgba(3,7,16,.98), rgba(8,16,34,.96), rgba(3,7,16,.96));
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.skye-screen-wipe::after {
  background: linear-gradient(90deg, transparent, rgba(87,215,255,.32), rgba(255,71,203,.26), transparent);
  filter: blur(34px);
  transform: translateX(-108%);
}
.skye-screen-wipe.is-active::before { animation: skyeWipeMask 1.38s cubic-bezier(.16,1,.3,1) forwards; }
.skye-screen-wipe.is-active::after { animation: skyeWipeBeam 1.38s cubic-bezier(.16,1,.3,1) forwards; }

.skye-app-card {
  transform-origin: center center;
  opacity: 0;
}
.skye-app-card.is-entering {
  animation: skyeAppOpen .7s cubic-bezier(.16,1,.3,1) forwards;
}
.skye-app-card.is-exiting {
  animation: skyeAppClose .42s cubic-bezier(.6,0,.8,.2) forwards;
}

.skye-modal {
  opacity: 0;
  transform: translateY(12px) scale(.94);
  transform-origin: center;
}
.skye-modal.is-open {
  animation: skyeModalIn .42s cubic-bezier(.16,1,.3,1) forwards;
}
.skye-modal.is-close {
  animation: skyeModalOut .28s ease forwards;
}

.skye-notification {
  opacity: 0;
  transform: translateY(16px) scale(.96);
}
.skye-notification.is-show {
  animation: skyeToastIn .4s cubic-bezier(.16,1,.3,1) forwards;
}
.skye-notification.is-hide {
  animation: skyeToastOut .24s ease forwards;
}

.skye-dock-item { transform-origin: center bottom; }
.skye-dock-item:hover,
.skye-dock-item.is-bounce {
  animation: skyeDockBounce .46s cubic-bezier(.2,.8,.2,1);
}

.skye-workspace-switch {
  position: relative;
  overflow: hidden;
}
.skye-workspace-switch.is-switching::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(87,215,255,.06), rgba(255,71,203,.06));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: skyeWorkspaceFlash .55s ease forwards;
  z-index: 5;
}

@keyframes skyeFloat {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes skyeGlowPulse {
  0%,100% { opacity: .84; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes skyeSpin { to { transform: rotate(388deg); } }
@keyframes skyeSpinReverse { to { transform: rotate(-374deg); } }
@keyframes skyeProgressSweep {
  0% { transform: translateX(-106%); }
  55% { transform: translateX(190%); }
  100% { transform: translateX(190%); }
}
@keyframes skyeScan {
  0%,100% { transform: translateY(-120%) scaleX(.92); opacity: 0; }
  16% { opacity: 1; }
  52% { transform: translateY(0%) scaleX(1); opacity: 1; }
  84% { opacity: 1; }
  100% { transform: translateY(120%) scaleX(.92); opacity: 0; }
}
@keyframes skyeWipeMask {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  48% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}
@keyframes skyeWipeBeam {
  0% { transform: translateX(-115%) scaleX(.42); opacity: 0; }
  14% { opacity: 1; }
  58% { transform: translateX(0%) scaleX(1.08); opacity: .92; }
  100% { transform: translateX(115%) scaleX(.42); opacity: 0; }
}
@keyframes skyeWipeSequence {
  0% { opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes skyeAppOpen {
  0% { opacity: 0; transform: translateY(32px) scale(.88); filter: blur(12px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes skyeAppClose {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(18px) scale(.95); filter: blur(8px); }
}
@keyframes skyeModalIn {
  0% { opacity: 0; transform: translateY(16px) scale(.94); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes skyeModalOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(8px) scale(.97); }
}
@keyframes skyeToastIn {
  0% { opacity: 0; transform: translateY(16px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes skyeToastOut {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(.96); }
}
@keyframes skyeDockBounce {
  0% { transform: translateY(0) scale(1); }
  32% { transform: translateY(-8px) scale(1.08); }
  68% { transform: translateY(0) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes skyeWorkspaceFlash {
  0% { opacity: 0; }
  28% { opacity: 1; }
  100% { opacity: 0; }
}