/* ============================================================
   Muji Rachmat Saputra — portfolio (Stitch UI integration)
   Custom styles on top of Tailwind: hero animation, coverflow
   carousel, dashboard pills/tooltip, fallbacks, reduced motion.
   ============================================================ */

body {
  background-color: #0b1120;
  color: #e2e8f0;
  font-family: "Inter", sans-serif;
}
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

.card-elevation {
  background-color: #151e32;
  border: 1px solid #1e293b;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-elevation:hover {
  border-color: #2dd4bf;
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.1);
}
.accent-glow { box-shadow: 0 0 15px rgba(45, 212, 191, 0.2); }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ============ Hero background chart ============ */
.hero-grid line { stroke: #1e293b; stroke-width: 1; opacity: 0.5; }
.hero-line {
  stroke: #2dd4bf;
  stroke-width: 2;
  opacity: 0.5;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: draw-line 6s ease-out forwards;
}
.hero-line-2 { stroke: #94a3b8; opacity: 0.25; animation-delay: 0.8s; animation-duration: 7s; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* ============ Dashboard filter pills ============ */
.pill-active { background-color: #2dd4bf; color: #0b1120; }
.pill-idle { background-color: #151e32; color: #94a3b8; }
.pill-idle:hover { color: #e2e8f0; }

/* ============ Chart tooltip ============ */
.pg-tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #151e32;
  border: 1px solid #2dd4bf;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.pg-tooltip strong { margin-right: 0.35rem; }
.pg-tooltip .up { color: #2dd4bf; margin-left: 0.45rem; }
.pg-tooltip .down { color: #f87171; margin-left: 0.45rem; }

/* ============ Coverflow carousel ============ */
#demos-carousel-container { perspective: 1200px; overflow: hidden; }

.carousel-track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 420px;
  position: relative;
}

.carousel-card {
  position: absolute;
  width: 85vw;
  max-width: 300px;
  flex-shrink: 0;
  transition: all 0.4s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translateX(0) scale(0.6);
  background-color: #151e32;
  border: 1px solid #1e293b;
}

/* Mobile: flat stack, no 3D rotation — cleaner on small screens */
.carousel-card.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 10;
  pointer-events: auto;
  border-color: #2dd4bf;
  box-shadow: 0 10px 40px -10px rgba(45, 212, 191, 0.4);
}
.carousel-card.prev {
  opacity: 0.45;
  transform: translateX(-70%) scale(0.75);
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
}
.carousel-card.next {
  opacity: 0.45;
  transform: translateX(70%) scale(0.75);
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
}
.carousel-card.far-prev { opacity: 0; transform: translateX(-120%) scale(0.5); z-index: 1; }
.carousel-card.far-next { opacity: 0; transform: translateX(120%) scale(0.5); z-index: 1; }

/* Tablet: slightly larger cards with mild 3D tilt */
@media (min-width: 640px) {
  .carousel-track { height: 480px; }
  .carousel-card { width: 380px; max-width: none; }
  .carousel-card.active { transform: translateX(0) scale(1.05); }
  .carousel-card.prev { opacity: 0.55; transform: translateX(-65%) scale(0.8) rotateY(15deg); }
  .carousel-card.next { opacity: 0.55; transform: translateX(65%) scale(0.8) rotateY(-15deg); }
  .carousel-card.far-prev { opacity: 0.2; transform: translateX(-110%) scale(0.6) rotateY(30deg); }
  .carousel-card.far-next { opacity: 0.2; transform: translateX(110%) scale(0.6) rotateY(-30deg); }
}

/* Desktop: full coverflow effect */
@media (min-width: 768px) {
  .carousel-track { height: 560px; }
  .carousel-card { width: 450px; }
  .carousel-card.active { transform: translateX(0) scale(1.08); }
  .carousel-card.prev { opacity: 0.6; transform: translateX(-60%) scale(0.8) rotateY(25deg); }
  .carousel-card.next { opacity: 0.6; transform: translateX(60%) scale(0.8) rotateY(-25deg); }
  .carousel-card.far-prev { opacity: 0.25; transform: translateX(-110%) scale(0.6) rotateY(45deg); }
  .carousel-card.far-next { opacity: 0.25; transform: translateX(110%) scale(0.6) rotateY(-45deg); }
}

.dot-indicator {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: #3c4a46;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.dot-indicator.active { width: 24px; background-color: #2dd4bf; }

/* Demo thumbnails: if assets/demo-N.png is missing, show an icon placeholder */
.demo-thumb img { position: relative; z-index: 2; }
.demo-thumb img.missing { display: none; }
.thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #151e32 0%, #1c2740 60%, rgba(45, 212, 191, 0.15) 100%);
  z-index: 1;
}
.thumb-fallback .material-symbols-outlined { font-size: 56px; color: rgba(45, 212, 191, 0.5); }

/* Loaded demo iframe fills the thumb container */
.demo-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
  background: #0b1120;
}
.demo-thumb .demo-note {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: #94a3b8;
  font-size: 0.85rem;
  background: rgba(11, 17, 32, 0.85);
}

/* Active nav link */
.nav-link.nav-active { color: #2dd4bf; font-weight: 600; }

/* ============ Mobile-friendly hero animation ============ */
@media (max-width: 639px) {
  .hero-line { stroke-width: 1.5; }
  .hero-grid line { opacity: 0.3; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-line { animation: none; stroke-dashoffset: 0; }
  .carousel-card, .card-elevation, .dot-indicator { transition: none; }
  .animate-pulse { animation: none; }
}