/* PolyClaw deep-navy → sky theme + moving halos */
:root {
  --pc-navy: #020b1f;
  --pc-deep: #0a1e4a;
  --pc-mid: #123a7a;
  --pc-sky: #38bdf8;
  --pc-sky-soft: #7dd3fc;
}

html, body {
  background-color: var(--pc-navy) !important;
}

/* Keep shell transparent so aurora shows; base color is deep navy */
.min-h-screen.bg-transparent,
.min-h-screen.bg-gradient-to-br.from-slate-950,
.min-h-screen.bg-gradient-to-br {
  background-image: none !important;
  background-color: transparent !important;
}

/* Hide old app orbs — we drive motion from #pc-ocean-flow */
.min-h-screen > .fixed.inset-0.overflow-hidden.pointer-events-none {
  display: none !important;
}

/* Matrix rain: subtle cyan on dark navy */
canvas.fixed.inset-0.pointer-events-none {
  opacity: 0.18 !important;
  mix-blend-mode: screen !important;
}

/* Deep navy stage, majority dark, fading toward sky blue */
#pc-ocean-flow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 85% 8%, rgba(56, 189, 248, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 55% at 12% 75%, rgba(14, 165, 233, 0.18), transparent 58%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(96, 165, 250, 0.14), transparent 60%),
    linear-gradient(165deg,
      #020617 0%,
      #061433 28%,
      #0b2a5c 55%,
      #0e3d7a 78%,
      #1a5fa8 100%);
}

#pc-ocean-flow .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  will-change: transform, opacity;
  mix-blend-mode: screen;
}

/* Soft sky/cyan halos — bright enough to see motion, not wash out text */
#pc-ocean-flow .blob-a {
  width: min(58vw, 560px);
  height: min(58vw, 560px);
  left: -10%;
  top: 5%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.55) 0%, rgba(37, 99, 235, 0.25) 45%, transparent 70%);
  animation: pc-drift-a 14s ease-in-out infinite;
  opacity: 0.75;
}

#pc-ocean-flow .blob-b {
  width: min(52vw, 500px);
  height: min(52vw, 500px);
  right: -8%;
  top: 12%;
  background: radial-gradient(circle, rgba(125, 211, 252, 0.5) 0%, rgba(59, 130, 246, 0.22) 48%, transparent 72%);
  animation: pc-drift-b 16s ease-in-out infinite;
  opacity: 0.7;
}

#pc-ocean-flow .blob-c {
  width: min(62vw, 580px);
  height: min(62vw, 580px);
  left: 25%;
  bottom: -16%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, rgba(30, 64, 175, 0.28) 50%, transparent 72%);
  animation: pc-drift-c 18s ease-in-out infinite;
  opacity: 0.65;
}

#pc-ocean-flow .blob-d {
  width: min(36vw, 340px);
  height: min(36vw, 340px);
  left: 52%;
  top: 38%;
  background: radial-gradient(circle, rgba(186, 230, 253, 0.45) 0%, rgba(56, 189, 248, 0.2) 50%, transparent 72%);
  animation: pc-drift-d 11s ease-in-out infinite;
  opacity: 0.6;
}

#pc-ocean-flow .blob-e {
  width: min(44vw, 400px);
  height: min(44vw, 400px);
  left: 6%;
  top: 52%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.4) 0%, rgba(29, 78, 216, 0.22) 52%, transparent 72%);
  animation: pc-drift-e 15s ease-in-out infinite;
  opacity: 0.55;
}

#pc-ocean-flow .sheen {
  position: absolute;
  inset: -25%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(125, 211, 252, 0.08) 46%,
    rgba(186, 230, 253, 0.22) 50%,
    rgba(56, 189, 248, 0.12) 54%,
    transparent 62%,
    transparent 100%
  );
  background-size: 220% 220%;
  animation: pc-sheen 8s ease-in-out infinite;
  mix-blend-mode: screen;
}

#pc-ocean-flow .ribbon {
  position: absolute;
  width: 150%;
  height: 26%;
  left: -25%;
  top: 42%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(30, 64, 175, 0.25),
    rgba(56, 189, 248, 0.35),
    rgba(125, 211, 252, 0.28),
    rgba(37, 99, 235, 0.22),
    transparent
  );
  filter: blur(26px);
  transform: rotate(-11deg);
  animation: pc-ribbon 9s ease-in-out infinite;
}

#pc-ocean-flow .sun-glow {
  position: absolute;
  width: min(48vw, 420px);
  height: min(48vw, 420px);
  right: 6%;
  top: 2%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(186, 230, 253, 0.35) 0%,
    rgba(56, 189, 248, 0.22) 32%,
    rgba(37, 99, 235, 0.1) 55%,
    transparent 72%);
  filter: blur(10px);
  animation: pc-sun 10s ease-in-out infinite;
}

@keyframes pc-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
  50% { transform: translate(12%, 14%) scale(1.18); opacity: 0.9; }
}
@keyframes pc-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1.04); opacity: 0.5; }
  50% { transform: translate(-14%, 12%) scale(0.9); opacity: 0.85; }
}
@keyframes pc-drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(-8%, -14%) scale(1.2); opacity: 0.8; }
}
@keyframes pc-drift-d {
  0%, 100% { transform: translate(0, 0) scale(0.95); opacity: 0.4; }
  50% { transform: translate(-10%, 8%) scale(1.25); opacity: 0.75; }
}
@keyframes pc-drift-e {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(14%, -10%) scale(1.15); opacity: 0.7; }
}
@keyframes pc-sheen {
  0% { background-position: 0% 40%; opacity: 0.35; }
  50% { background-position: 100% 55%; opacity: 0.85; }
  100% { background-position: 0% 40%; opacity: 0.35; }
}
@keyframes pc-ribbon {
  0%, 100% { transform: translateX(-10%) translateY(0) rotate(-11deg); opacity: 0.4; }
  50% { transform: translateX(12%) translateY(-6%) rotate(-7deg); opacity: 0.85; }
}
@keyframes pc-sun {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.1); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  #pc-ocean-flow .blob,
  #pc-ocean-flow .sheen,
  #pc-ocean-flow .ribbon,
  #pc-ocean-flow .sun-glow {
    animation: none !important;
  }
}

#root {
  position: relative;
  z-index: 1;
}

/* Mobile drawer: deep navy glass, not pale sky */
#root .bg-\[\#061225\] {
  background-color: rgba(6, 18, 40, 0.96) !important;
}


/* Generated utilities for remapped blue/sky theme */
.from-blue-400{--tw-gradient-from:var(--color-blue-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-blue-700{--tw-gradient-from:var(--color-blue-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-blue-950{--tw-gradient-from:var(--color-blue-950);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-blue-500\/5{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 5%,transparent)}
.from-blue-500\/10{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 10%,transparent)}
.from-blue-500\/15{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 15%,transparent)}
.from-blue-500\/20{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 20%,transparent)}
.from-blue-500\/25{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 25%,transparent)}
.from-blue-500\/30{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 30%,transparent)}
.from-blue-950\/90{--tw-gradient-from:color-mix(in oklab,var(--color-blue-950) 90%,transparent)}
.to-sky-300{--tw-gradient-to:var(--color-sky-300)}
.to-sky-400{--tw-gradient-to:var(--color-sky-400)}
.to-sky-500{--tw-gradient-to:var(--color-sky-500)}
.to-sky-950{--tw-gradient-to:var(--color-sky-950)}
.to-sky-400\/10{--tw-gradient-to:color-mix(in oklab,var(--color-sky-400) 10%,transparent)}
.to-sky-400\/20{--tw-gradient-to:color-mix(in oklab,var(--color-sky-400) 20%,transparent)}
.to-sky-400\/30{--tw-gradient-to:color-mix(in oklab,var(--color-sky-400) 30%,transparent)}
.to-blue-500{--tw-gradient-to:var(--color-blue-500)}
.to-blue-600{--tw-gradient-to:var(--color-blue-600)}
.to-blue-500\/30{--tw-gradient-to:color-mix(in oklab,var(--color-blue-500) 30%,transparent)}
.to-blue-500\/40{--tw-gradient-to:color-mix(in oklab,var(--color-blue-500) 40%,transparent)}
.via-blue-500{--tw-gradient-via:var(--color-blue-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.via-blue-950{--tw-gradient-via:var(--color-blue-950);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.via-sky-300{--tw-gradient-via:var(--color-sky-300);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.via-sky-400{--tw-gradient-via:var(--color-sky-400);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.via-sky-500{--tw-gradient-via:var(--color-sky-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.via-sky-300\/10{--tw-gradient-via:color-mix(in oklab,var(--color-sky-300) 10%,transparent);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.bg-blue-600{background-color:var(--color-blue-600)}
.bg-blue-700{background-color:var(--color-blue-700)}
.bg-blue-600\/25{background-color:color-mix(in oklab,var(--color-blue-600) 25%,transparent)}
.bg-blue-500\/5{background-color:color-mix(in oklab,var(--color-blue-500) 5%,transparent)}
.bg-blue-500\/10{background-color:color-mix(in oklab,var(--color-blue-500) 10%,transparent)}
.bg-blue-500\/15{background-color:color-mix(in oklab,var(--color-blue-500) 15%,transparent)}
.bg-blue-500\/20{background-color:color-mix(in oklab,var(--color-blue-500) 20%,transparent)}
.bg-blue-500\/30{background-color:color-mix(in oklab,var(--color-blue-500) 30%,transparent)}
.text-sky-300{color:var(--color-sky-300)}
.text-sky-400{color:var(--color-sky-400)}
.text-sky-500{color:var(--color-sky-500)}
.border-sky-500\/20{border-color:color-mix(in oklab,var(--color-sky-500) 20%,transparent)}
.border-sky-500\/30{border-color:color-mix(in oklab,var(--color-sky-500) 30%,transparent)}
.border-sky-500\/40{border-color:color-mix(in oklab,var(--color-sky-500) 40%,transparent)}
.shadow-sky-400\/30{--tw-shadow-color:color-mix(in oklab,var(--color-sky-400) 30%,transparent)}
.shadow-sky-400\/40{--tw-shadow-color:color-mix(in oklab,var(--color-sky-400) 40%,transparent)}
.shadow-sky-500\/20{--tw-shadow-color:color-mix(in oklab,var(--color-sky-500) 20%,transparent)}
.shadow-sky-500\/25{--tw-shadow-color:color-mix(in oklab,var(--color-sky-500) 25%,transparent)}
@media (hover:hover){
  .hover\:from-blue-600:hover{--tw-gradient-from:var(--color-blue-600)}
  .hover\:from-blue-700:hover{--tw-gradient-from:var(--color-blue-700)}
  .hover\:to-sky-500:hover{--tw-gradient-to:var(--color-sky-500)}
  .hover\:shadow-sky-400\/40:hover{--tw-shadow-color:color-mix(in oklab,var(--color-sky-400) 40%,transparent)}
  .hover\:from-blue-500\/30:hover{--tw-gradient-from:color-mix(in oklab,var(--color-blue-500) 30%,transparent)}
  .hover\:to-sky-400\/30:hover{--tw-gradient-to:color-mix(in oklab,var(--color-sky-400) 30%,transparent)}
}

.text-sky-200{color:var(--color-sky-200)}
.text-blue-600{color:var(--color-blue-600)}
.from-sky-500{--tw-gradient-from:var(--color-sky-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}
.from-sky-500\/15{--tw-gradient-from:color-mix(in oklab,var(--color-sky-500) 15%,transparent)}
.via-sky-500\/15{--tw-gradient-via:color-mix(in oklab,var(--color-sky-500) 15%,transparent);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}
.to-blue-600\/10{--tw-gradient-to:color-mix(in oklab,var(--color-blue-600) 10%,transparent)}
.to-blue-900\/90{--tw-gradient-to:color-mix(in oklab,var(--color-blue-900) 90%,transparent)}
.focus\:border-sky-500:focus{border-color:var(--color-sky-500)}
.focus\:border-blue-600:focus{border-color:var(--color-blue-600)}
.border-sky-400\/20{border-color:color-mix(in oklab,var(--color-sky-400) 20%,transparent)}
.border-sky-400\/30{border-color:color-mix(in oklab,var(--color-sky-400) 30%,transparent)}

.text-sky-100{color:var(--color-sky-100)}
.text-sky-100\/80{color:color-mix(in oklab,var(--color-sky-100) 80%,transparent)}
.text-sky-50{color:var(--color-sky-50)}
.bg-sky-400\/10{background-color:color-mix(in oklab,var(--color-sky-400) 10%,transparent)}
.bg-sky-500\/10{background-color:color-mix(in oklab,var(--color-sky-500) 10%,transparent)}
.bg-sky-500\/15{background-color:color-mix(in oklab,var(--color-sky-500) 15%,transparent)}
.bg-sky-500\/20{background-color:color-mix(in oklab,var(--color-sky-500) 20%,transparent)}
.focus\:border-sky-400:focus{border-color:var(--color-sky-400)}
@media (hover:hover){
  .hover\:bg-sky-500\/20:hover{background-color:color-mix(in oklab,var(--color-sky-500) 20%,transparent)}
  .hover\:shadow-sky-500\/25:hover{--tw-shadow-color:color-mix(in oklab,var(--color-sky-500) 25%,transparent)}
}