/* ============================================================
   NephSolutions — Hero & Animation CSS
   voron.css — loaded via index.html (safe to use @keyframes)
   ============================================================ */

/* ── Hero entrance (CSS-driven, fires immediately on load) ──── */

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes heroSlideRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.hero-1 { animation: heroFadeUp     0.70s cubic-bezier(.22,.68,0,1.2)  forwards 0.10s; opacity: 0; }
.hero-2 { animation: heroFadeUp     0.70s cubic-bezier(.22,.68,0,1.2)  forwards 0.26s; opacity: 0; }
.hero-3 { animation: heroFadeUp     0.70s cubic-bezier(.22,.68,0,1.2)  forwards 0.42s; opacity: 0; }
.hero-4 { animation: heroFadeUp     0.70s cubic-bezier(.22,.68,0,1.2)  forwards 0.56s; opacity: 0; }
.hero-5 { animation: heroFadeUp     0.70s cubic-bezier(.22,.68,0,1.2)  forwards 0.70s; opacity: 0; }
.hero-r { animation: heroSlideRight 0.90s cubic-bezier(.22,.68,0,1.05) forwards 0.55s; opacity: 0; }


/* ── Voron printer keyframes ────────────────────────────────── */

/* Toolhead X sweep (left ↔ right on gantry beam) */
@keyframes vHeadX {
  0%,  4%  { transform: translateX(-52px); }
  47%      { transform: translateX( 52px); }
  53%      { transform: translateX( 52px); }
  96%, 100%{ transform: translateX(-52px); }
}

/* Gantry Z rise — synced with build loop (0 → -178px) */
@keyframes vGantryZ {
  0%,  4%  { transform: translateY(   0px); }
  70%, 84% { transform: translateY(-178px); }
  94%      { transform: translateY(-178px); }
  100%     { transform: translateY(   0px); }
}

/* Print object reveal — bottom-to-top via inset clip-path */
@keyframes vObjBuild {
  0%,  4%  { clip-path: inset(100% 0 0 0 round 3px); }
  70%, 84% { clip-path: inset(  0% 0 0 0 round 3px); }
  94%      { clip-path: inset(  0% 0 0 0 round 3px); }
  100%     { clip-path: inset(100% 0 0 0 round 3px); }
}

/* Part-cooling fan blade spin */
@keyframes vFanSpin {
  to { transform: rotate(360deg); }
}

/* Nozzle heat glow pulse */
@keyframes vNozzlePulse {
  from { opacity: 0; }
  to   { opacity: 0.80; }
}

/* Progress bar scaleX fill — synced with build loop */
@keyframes vProgressBar {
  0%,  4%  { transform: scaleX(0); }
  70%, 84% { transform: scaleX(1); }
  94%      { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* Floating info chip movements */
@keyframes vFloat1 {
  0%, 100% { transform: translateY( 0px) translateX( 0px); }
  30%      { transform: translateY(-8px) translateX( 4px); }
  65%      { transform: translateY(-3px) translateX(-3px); }
}

@keyframes vFloat2 {
  0%, 100% { transform: translateY( 0px) translateX( 0px); }
  35%      { transform: translateY( 7px) translateX(-4px); }
  70%      { transform: translateY(-5px) translateX( 3px); }
}

@keyframes vFloat3 {
  0%, 100% { transform: translateY( 0px) translateX( 0px); }
  25%      { transform: translateY(-6px) translateX(-5px); }
  60%      { transform: translateY( 8px) translateX( 2px); }
}

/* Status indicator blink */
@keyframes vStatusBlink {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.1; }
}

/* Ambient printer glow breathe */
@keyframes vAmbient {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.62; }
}

/* Bed heat shimmer */
@keyframes vBedHeat {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 0.42; }
}


/* ── Animation classes ──────────────────────────────────────── */

.v-head {
  transform-box:    fill-box;
  transform-origin: center center;
  animation:        vHeadX 13s ease-in-out infinite;
}

.v-gantry {
  transform-box:    view-box;
  transform-origin: center center;
  animation:        vGantryZ 13s ease-in-out infinite;
  overflow:         visible;
}

.v-obj {
  animation: vObjBuild 13s ease-in-out infinite;
}

.v-fan {
  transform-box:    fill-box;
  transform-origin: center center;
  animation:        vFanSpin 0.42s linear infinite;
}

.v-nozzle-glow {
  transform-box:    fill-box;
  transform-origin: center center;
  animation:        vNozzlePulse 0.36s ease-in-out infinite alternate;
}

.v-progress {
  transform-box:    fill-box;
  transform-origin: left center;
  animation:        vProgressBar 13s ease-in-out infinite;
}

.v-chip-1  { animation: vFloat1      3.4s ease-in-out infinite; }
.v-chip-2  { animation: vFloat2      4.2s ease-in-out infinite; }
.v-chip-3  { animation: vFloat3      3.7s ease-in-out infinite; }
.v-status  { animation: vStatusBlink 1.1s ease-in-out infinite; }
.v-ambient { animation: vAmbient     3.0s ease-in-out infinite; }
.v-bed-heat{ animation: vBedHeat     2.2s ease-in-out infinite; }


/* ── Floating info chips (HTML elements around SVG) ─────────── */

.v-chip {
  position:        absolute;
  display:         inline-flex;
  align-items:     center;
  gap:             0.35rem;
  background:      rgba(9, 18, 38, 0.92);
  border:          1px solid rgba(92, 184, 64, 0.40);
  border-radius:   0.55rem;
  padding:         0.28rem 0.7rem;
  font-size:       0.695rem;
  font-weight:     600;
  color:           rgba(255, 255, 255, 0.88);
  white-space:     nowrap;
  backdrop-filter: blur(10px);
  pointer-events:  none;
  font-family:     'Inter', monospace;
  letter-spacing:  0.01em;
  box-shadow:      0 2px 16px rgba(0,0,0,0.55),
                   0 0 0 0.5px rgba(92,184,64,0.15) inset;
  z-index:         10;
}

.v-chip .v-dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    #5CB840;
  flex-shrink:   0;
  box-shadow:    0 0 6px rgba(92,184,64,0.8);
}

.v-chip .v-icon {
  font-style:  normal;
  font-size:   0.75rem;
  line-height: 1;
}


/* ── Voron printer responsive scaling ──────────────────────── */

.v-printer-outer {
  padding-right: 2.5rem; /* desktop: matches original */
}

.v-printer-wrap {
  width: 270px; /* desktop default */
}

/* Tablet / small desktop — tighten a little */
@media (max-width: 1279px) and (min-width: 1024px) {
  .v-printer-wrap  { width: 220px; }
  .v-printer-outer { padding-right: 1rem; }
}

/* Mobile — show centered above text, hide overflow chips */
@media (max-width: 1023px) {
  .v-printer-outer {
    padding-right: 0;
    padding-bottom: 0.5rem;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
  }
  .v-printer-wrap {
    width: 100%;
    max-width: 220px;
  }
  /* Hide floating chips on mobile — they'd overflow the viewport */
  .v-chip-lg {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Animated code typing terminal  (software dev hero)
═══════════════════════════════════════════════════════ */
.ns-tl {
  display:     block;
  overflow:    hidden;
  white-space: nowrap;
  max-width:   0;
  animation:   ns-reveal 0.35s ease-out forwards;
}
@keyframes ns-reveal {
  from { max-width: 0; }
  to   { max-width: 100%; }
}
.ns-tl:nth-child(1)  { animation-delay: 0.30s; }
.ns-tl:nth-child(2)  { animation-delay: 0.55s; }
.ns-tl:nth-child(3)  { animation-delay: 0.75s; }
.ns-tl:nth-child(4)  { animation-delay: 0.95s; }
.ns-tl:nth-child(5)  { animation-delay: 1.15s; }
.ns-tl:nth-child(6)  { animation-delay: 1.38s; }
.ns-tl:nth-child(7)  { animation-delay: 1.60s; }
.ns-tl:nth-child(8)  { animation-delay: 1.78s; }
.ns-tl:nth-child(9)  { animation-delay: 1.96s; }
.ns-tl:nth-child(10) { animation-delay: 2.14s; }
.ns-tl:nth-child(11) { animation-delay: 2.35s; }
.ns-tl:nth-child(12) { animation-delay: 2.55s; }

.ns-cursor {
  display:        inline-block;
  width:          2px;
  height:         0.9em;
  background:     #5CB840;
  vertical-align: middle;
  margin-left:    2px;
  opacity:        0;
  animation:      ns-blink 0.8s step-end infinite;
  animation-delay: 2.75s;
}
@keyframes ns-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}