/* ScienceHub Labs UI Refresh v3 — Soft Twilight Playground.
   Presentation only: no canvas, GPS, route, simulation, or state changes. */
:root {
  --soft-night: #101b2d;
  --soft-night-2: #14243a;
  --soft-panel: rgba(29, 48, 73, .88);
  --soft-panel-2: rgba(34, 54, 79, .78);
  --soft-line: rgba(182, 210, 222, .16);
  --soft-text: #edf3f4;
  --soft-muted: #b6c6d0;
  --soft-blue: #a8dce5;
  --soft-lilac: #cbbde8;
  --soft-peach: #f0c7b6;
  --soft-mint: #b8dfcf;
  --soft-yellow: #eedca6;
  --soft-ease: cubic-bezier(.23, 1, .32, 1);
}

html { background: var(--soft-night); }
body {
  color: var(--soft-text);
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(168,220,229,.095), transparent 70%),
    radial-gradient(ellipse 65% 50% at 95% 18%, rgba(203,189,232,.08), transparent 72%),
    linear-gradient(150deg, #101b2d 0%, #122039 52%, #151e35 100%);
}

/* Keep the type playful without turning the page into a toy interface. */
h1, h2, h3, h4, .font-display, .app-card-body h4 {
  font-family: "Fredoka", "Nunito", ui-sans-serif, sans-serif;
  font-weight: 500;
  letter-spacing: -.018em;
}
body, button, input, textarea { font-family: "Nunito", "DM Sans", ui-sans-serif, sans-serif; }

.site-shell header {
  background: rgba(16, 27, 45, .82) !important;
  border-color: var(--soft-line) !important;
  box-shadow: 0 8px 24px rgba(3, 10, 22, .12);
}
.hero-section {
  background:
    radial-gradient(ellipse 45% 50% at 79% 30%, rgba(238,220,166,.105), transparent 72%),
    radial-gradient(ellipse 55% 45% at 58% 70%, rgba(184,223,207,.08), transparent 75%),
    linear-gradient(150deg, #101b2d 0%, #152740 55%, #1b2340 100%) !important;
}
.hero-section .text-glow { text-shadow: none !important; }
.hero-section .text-signal, .text-signal { color: var(--soft-blue) !important; }
.hero-section p, .text-slate-400 { color: var(--soft-muted) !important; }
.hero-glow { filter: blur(90px) !important; opacity: .5; background: rgba(168,220,229,.12) !important; }
.hero-orbit { border-color: rgba(168,220,229,.12) !important; }

/* Soft, slightly colorful cards with no harsh white borders. */
.lab-card, .showcase-card, .instrument-card, .live-instrument-card, .app-library-card {
  border: 1px solid var(--soft-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, var(--soft-panel), var(--soft-panel-2)) !important;
  box-shadow: 0 12px 32px rgba(3, 10, 22, .16) !important;
  transition: transform .24s var(--soft-ease), border-color .24s var(--soft-ease), box-shadow .24s var(--soft-ease);
}
.lab-card:hover, .showcase-card:hover, .instrument-card:hover, .live-instrument-card:hover, .app-library-card:hover {
  border-color: rgba(168,220,229,.36) !important;
  box-shadow: 0 17px 40px rgba(3, 10, 22, .22) !important;
  transform: translateY(-2px);
}

/* Pastel is used as a quiet accent, not a high-contrast fill. */
.lab-card:nth-child(4n+1), .app-library-card:nth-child(4n+1) { --soft-accent: var(--soft-blue); }
.lab-card:nth-child(4n+2), .app-library-card:nth-child(4n+2) { --soft-accent: var(--soft-lilac); }
.lab-card:nth-child(4n+3), .app-library-card:nth-child(4n+3) { --soft-accent: var(--soft-mint); }
.lab-card:nth-child(4n+4), .app-library-card:nth-child(4n+4) { --soft-accent: var(--soft-peach); }
.lab-card, .app-library-card { --soft-accent: var(--soft-blue); }
.app-card-icon {
  color: var(--soft-accent) !important;
  background: color-mix(in srgb, var(--soft-accent) 13%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--soft-accent) 25%, transparent);
  border-radius: 16px !important;
  transform: rotate(-2deg);
  transition: transform .25s var(--soft-ease), background-color .25s var(--soft-ease);
}
.app-card-icon::after {
  content: "•";
  position: absolute;
  right: -5px;
  top: -10px;
  color: var(--soft-yellow);
  font: 700 18px/1 "Fredoka", sans-serif;
  opacity: .8;
}
.app-library-card:hover .app-card-icon { transform: rotate(2deg) translateY(-2px); }
.app-card-meta { color: var(--soft-accent) !important; }
.app-card-body h4 { color: #eaf0f1 !important; font-size: 21px; }
.app-card-body p, .app-card-features { color: var(--soft-muted) !important; line-height: 1.65; }
.app-card-tags span {
  color: #c4d3da !important;
  border: 1px solid rgba(182,210,222,.15);
  background: rgba(255,255,255,.025);
  border-radius: 999px;
  padding: 5px 8px;
}
.app-download-btn {
  color: #1a2737 !important;
  background: var(--soft-yellow) !important;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 15px rgba(238,220,166,.1) !important;
  font-weight: 800;
}
.app-card-icon:hover { background: #f2e6bb !important; filter: none !important; }

/* Each Labs card gets a quiet, semantic SVG motion: orbit, geometry, atmosphere, lens. */
@keyframes lab-orbit-icon { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-3px); } }
@keyframes lab-physics-icon { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-5deg); } }
@keyframes lab-geometry-icon { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes lab-atmosphere-icon { 0%, 100% { transform: scale(1); opacity: .84; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes lab-lens-icon { 0%, 74%, 100% { transform: scale(1); opacity: .88; } 78% { transform: scale(.86); opacity: .62; } 82% { transform: scale(1.06); opacity: 1; } }
.lab-card .icon-box svg { transform-origin: center; transform-box: fill-box; will-change: transform, opacity; }
.lab-card:nth-child(1) .icon-box svg { animation: lab-orbit-icon 4.8s ease-in-out infinite; }
.lab-card:nth-child(2) .icon-box svg { animation: lab-physics-icon 5.2s ease-in-out infinite; }
.lab-card:nth-child(2) .icon-box { animation: lab-physics-icon 5.2s ease-in-out infinite; }
.lab-card:nth-child(3) .icon-box svg { animation: lab-geometry-icon 5.6s ease-in-out infinite; }
.lab-card:nth-child(4) .icon-box svg { animation: lab-atmosphere-icon 4.2s ease-in-out infinite; }
.lab-card:nth-child(5) .icon-box svg { animation: lab-lens-icon 6.5s ease-in-out infinite; }

/* Small motion: cards settle in once, then respond gently to hover. */
@keyframes soft-card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.app-library-card, .lab-card, .showcase-card { animation: soft-card-enter .28s var(--soft-ease) both; }
.app-card-icon { animation: none; }
.app-library-card:nth-child(2), .lab-card:nth-child(2) { animation-delay: .05s; }
.app-library-card:nth-child(3), .lab-card:nth-child(3) { animation-delay: .1s; }
.app-library-card:nth-child(4), .lab-card:nth-child(4) { animation-delay: .15s; }

/* Comfortable reading width and touch targets on small screens. */
@media (max-width: 720px) {
  .hero-section { min-height: 650px; }
  .hero-section h1 { font-size: clamp(2.7rem, 14vw, 4.5rem); line-height: .98; }
  .app-library-card, .lab-card, .showcase-card { border-radius: 18px !important; }
  .app-library-card { padding: 15px; }
  .app-download-btn { min-height: 44px; width: 100%; justify-content: center; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-library-card, .lab-card, .showcase-card, .app-card-icon { animation: none; }
  .lab-card .icon-box svg { animation: none; }
  .lab-card:hover, .showcase-card:hover, .instrument-card:hover, .live-instrument-card:hover, .app-library-card:hover { transform: none; }
}