/* ScienceHub Labs UI Refresh v2 — pastel playful presentation layer only.
   No canvas, GPS, route, simulation, or application-state changes. */
:root {
  --sh-pink: #ffb8d2;
  --sh-lilac: #cbb8ff;
  --sh-mint: #aeead5;
  --sh-sky: #9fe7f5;
  --sh-butter: #ffe39a;
  --sh-ink: #101a31;
  --sh-soft-ink: #273553;
  --sh-play-ease: cubic-bezier(.23, 1, .32, 1);
}

body {
  font-family: "Nunito", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,184,210,.13), transparent 24rem),
    radial-gradient(circle at 90% 22%, rgba(174,234,213,.12), transparent 28rem),
    #07111f;
}

h1, h2, h3, h4,
.font-display,
.app-card-body h4 {
  font-family: "Baloo 2", "Space Grotesk", ui-sans-serif, sans-serif;
  letter-spacing: -.025em;
}

.hero-section {
  background:
    radial-gradient(circle at 78% 26%, rgba(255,227,154,.19), transparent 18rem),
    radial-gradient(circle at 60% 70%, rgba(203,184,255,.15), transparent 24rem),
    linear-gradient(135deg, #0b1830 0%, #122844 52%, #1b2040 100%);
}
.hero-glow { background: rgba(255, 184, 210, .18) !important; }
.hero-section .text-signal,
.text-signal { color: var(--sh-sky) !important; }

/* Friendly pastel accents for different content families. */
.app-library-card:nth-child(3n+1) { --sh-card-accent: var(--sh-sky); }
.app-library-card:nth-child(3n+2) { --sh-card-accent: var(--sh-pink); }
.app-library-card:nth-child(3n+3) { --sh-card-accent: var(--sh-mint); }
.app-library-card {
  --sh-card-accent: var(--sh-sky);
  border-color: color-mix(in srgb, var(--sh-card-accent) 30%, transparent) !important;
  background: linear-gradient(145deg, rgba(24, 43, 70, .88), rgba(21, 31, 57, .82)) !important;
}
.app-library-card:hover {
  border-color: color-mix(in srgb, var(--sh-card-accent) 76%, white) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.25), 0 0 0 4px color-mix(in srgb, var(--sh-card-accent) 12%, transparent);
}
.app-card-icon {
  position: relative;
  overflow: visible;
  color: var(--sh-card-accent) !important;
  background: color-mix(in srgb, var(--sh-card-accent) 18%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--sh-card-accent) 24%, transparent);
  border-radius: 17px !important;
  transform: rotate(-3deg);
  transition: transform .2s var(--sh-play-ease), border-radius .2s var(--sh-play-ease);
}
.app-card-icon::after {
  content: "✦";
  position: absolute;
  right: -7px;
  top: -13px;
  color: var(--sh-butter);
  font: 700 15px/1 "Nunito", sans-serif;
  text-shadow: 0 2px 10px rgba(255,227,154,.45);
}
.app-library-card:hover .app-card-icon {
  transform: rotate(3deg) translateY(-2px) scale(1.05);
  border-radius: 13px !important;
}

.app-card-meta { color: var(--sh-card-accent) !important; }
.app-card-body h4 { font-size: 21px; color: #fff; }
.app-card-tags span {
  border-color: color-mix(in srgb, var(--sh-card-accent) 26%, transparent);
  color: #d7e7ef;
}
.app-download-btn,
.portfolio-btn {
  font-family: "Nunito", "DM Sans", sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
}
.app-download-btn {
  color: var(--sh-ink) !important;
  background: linear-gradient(135deg, var(--sh-butter), var(--sh-pink)) !important;
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 22px rgba(255,184,210,.18);
}
.app-download-btn:hover { background: linear-gradient(135deg, #fff0b9, #ffcde1) !important; }

/* Soft entrance animation: short, GPU-friendly, and disabled for reduced motion. */
@keyframes sh-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.app-library-card,
.lab-card,
.showcase-card {
  animation: sh-pop-in .42s var(--sh-play-ease) both;
}
.app-library-card:nth-child(2), .lab-card:nth-child(2) { animation-delay: .04s; }
.app-library-card:nth-child(3), .lab-card:nth-child(3) { animation-delay: .08s; }
.app-library-card:nth-child(4), .lab-card:nth-child(4) { animation-delay: .12s; }
.app-library-card:nth-child(5), .lab-card:nth-child(5) { animation-delay: .16s; }

@media (max-width: 720px) {
  .hero-section h1 { font-size: clamp(2.9rem, 15vw, 4.8rem); }
  .app-card-body h4 { font-size: 20px; }
  .app-card-icon::after { right: -5px; top: -11px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-library-card, .lab-card, .showcase-card { animation: none; }
  .app-card-icon, .app-library-card:hover .app-card-icon { transform: none; }
}