/* ═══════════════════════════════════════════════════════════════
   ELVISH PATEL PORTFOLIO — motion-upgrade.css
   Motion System CSS Layer
   Add <link rel="stylesheet" href="motion-upgrade.css"> to index.html
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   SCROLL REVEAL STATES
   .motion-hidden = initial (invisible, blurred, shifted up)
   .motion-in     = visible (transition fires)
───────────────────────────────────────────────────────────────*/
.motion-hidden {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  /* DO NOT use transition here — added on .motion-in trigger */
}

.motion-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  filter: blur(0px) !important;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Stagger children — each child inherits this but has delay set by JS */
.stagger > * {
  will-change: opacity, transform, filter;
}

/* ─────────────────────────────────────────────────────────────
   HERO SECTION MOTION
───────────────────────────────────────────────────────────────*/
.hero-left,
.hero-right {
  will-change: transform, opacity;
  /* Spring physics applied inline by JS */
}

/* Name chars — upgraded stagger (JS sets delay per char) */
.hero-name-line .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) skewX(-4deg);
  animation: charIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

@keyframes charIn {
  from {
    opacity: 0;
    transform: translateY(16px) skewX(-4deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewX(0deg);
    filter: blur(0);
  }
}

/* ─────────────────────────────────────────────────────────────
   TERMINAL BREATHING
   Subtle micro-animation for terminal window feel
───────────────────────────────────────────────────────────────*/
.hero-terminal {
  will-change: transform, box-shadow;
  /* box-shadow and scale driven by JS Spring + RAF */
}

/* Caret — replace CSS blink with smooth fade-blink */
.term-caret,
#term-caret,
.loader-cursor {
  animation: caretFade 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

@keyframes caretFade {
  0%, 100% { opacity: 1; }
  45%, 55% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   PROJECT CARDS — 3D TILT
───────────────────────────────────────────────────────────────*/
.proj-card {
  transform-style: preserve-3d;
  will-change: transform;
  /* transform is driven by JS spring */
}

/* Glow overlay injected by JS */
.tilt-glow {
  transition: none;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   MODAL — EXPAND FROM CARD
───────────────────────────────────────────────────────────────*/
.modal-overlay {
  backdrop-filter: blur(0px);
  transition: backdrop-filter 0.4s ease, background 0.4s ease;
}

.modal-overlay.active {
  backdrop-filter: blur(12px);
}

.modal-box {
  will-change: opacity, transform, filter;
  /* Transform driven by JS for origin expansion */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ─────────────────────────────────────────────────────────────
   NAVBAR INDICATOR
───────────────────────────────────────────────────────────────*/
#nav-indicator {
  pointer-events: none;
}

/* Nav links — remove hard active border, use indicator instead */
.nav-links a.active::after,
.nav-links a::after {
  display: none !important; /* Let the indicator handle this */
}

.nav-links a.active {
  color: var(--accent-light);
}

/* ─────────────────────────────────────────────────────────────
   MAGNETIC BUTTONS — press depth
───────────────────────────────────────────────────────────────*/
.btn-primary,
.btn-ghost {
  will-change: transform;
  cursor: pointer;
}

.btn-primary:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

.btn-ghost:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

/* ─────────────────────────────────────────────────────────────
   BACKGROUND PARTICLES — DEPTH LAYER
───────────────────────────────────────────────────────────────*/
#bg-canvas-depth {
  mix-blend-mode: screen;
  opacity: 0.35;
}

/* Existing canvas gets slightly higher opacity contrast */
#bg-canvas {
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────
   BLOB DRIFT
───────────────────────────────────────────────────────────────*/
.mesh-blob {
  will-change: transform;
  /* position driven by JS RAF */
}

/* Remove existing blob animation — JS takes over */
.mesh-blob {
  animation: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SKILL CARDS — hover lift
───────────────────────────────────────────────────────────────*/
.skill-card {
  will-change: transform, box-shadow;
  /* Driven by JS */
}

/* Remove the old CSS transition so JS spring is smoother */
.skill-card:hover {
  transform: none; /* JS takes over */
}

/* ─────────────────────────────────────────────────────────────
   INPUT FOCUS GLOW
───────────────────────────────────────────────────────────────*/
.contact-form input,
.contact-form textarea {
  will-change: box-shadow, border-color;
  /* Focus glow driven by JS */
}

/* Remove old focus outline, JS provides richer glow */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────
   SCROLL PROGRESS BAR
───────────────────────────────────────────────────────────────*/
#scroll-progress {
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   CREATIVE CURSOR
───────────────────────────────────────────────────────────────*/
@media (pointer: fine) {
  body {
    cursor: none;
  }

  a, button, .proj-card, .skill-card, [role="button"] {
    cursor: none;
  }
}

#cursor-dot {
  will-change: left, top, width, height;
  mix-blend-mode: screen;
}

#cursor-ring {
  will-change: left, top, width, height;
}

#cursor-ring-circle {
  transition: stroke 0.3s ease, stroke-width 0.3s ease, stroke-dasharray 0.3s ease;
}

#cursor-trail {
  mix-blend-mode: screen;
}

/* ─────────────────────────────────────────────────────────────
   SECTION COUNTER BADGE
───────────────────────────────────────────────────────────────*/
.sec-counter {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: rgba(20, 184, 166, 0.35);
  display: block;
  margin-bottom: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   ABOUT IMAGE FRAME — subtle float
───────────────────────────────────────────────────────────────*/
.about-img-frame {
  animation: floatImg 6s ease-in-out infinite;
}

@keyframes floatImg {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-6px) rotate(0.3deg); }
  66% { transform: translateY(-3px) rotate(-0.2deg); }
}

/* ─────────────────────────────────────────────────────────────
   HIGHLIGHT ITEMS — enhanced hover
───────────────────────────────────────────────────────────────*/
.hl-item {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

.hl-item:hover {
  transform: translateY(-3px) scale(1.02);
}

/* ─────────────────────────────────────────────────────────────
   SOCIAL LINKS — magnetic ready
───────────────────────────────────────────────────────────────*/
.social {
  will-change: transform;
  transition: color 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────
   SECTION HEADER — animated label
───────────────────────────────────────────────────────────────*/
.sec-label {
  position: relative;
  overflow: hidden;
}

.sec-label::before {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.15), transparent);
  animation: labelShimmer 4s ease-in-out infinite;
}

@keyframes labelShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   PROFICIENCY BARS — enhanced fill animation
───────────────────────────────────────────────────────────────*/
.prof-fill {
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}

.prof-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: barShimmer 2s ease-in-out 1.2s forwards;
}

@keyframes barShimmer {
  from { left: -100%; opacity: 1; }
  to { left: 200%; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   LINK UNDERLINE ANIMATION
───────────────────────────────────────────────────────────────*/
.about-text a,
.contact-info .val a {
  position: relative;
  text-decoration: none;
}

.about-text a::after,
.contact-info .val a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-text a:hover::after,
.contact-info .val a:hover::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   GLASSMORPHISM ENHANCEMENT
   Adds animated border shimmer to .glass elements on hover
───────────────────────────────────────────────────────────────*/
.glass {
  position: relative;
  overflow: hidden;
}

.glass::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glass:hover::before {
  opacity: 1;
  animation: glassLine 1.5s ease-in-out;
}

.modal-box.glass {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@keyframes glassLine {
  from { left: -100%; }
  to { left: 200%; }
}

/* ─────────────────────────────────────────────────────────────
   LOADER ENHANCEMENT
   Add a subtle scan line to loader terminal
───────────────────────────────────────────────────────────────*/
.loader-terminal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(20, 184, 166, 0.4);
  animation: scanLine 2.5s linear infinite;
  pointer-events: none;
}

@keyframes scanLine {
  from { top: 0; opacity: 0.8; }
  to { top: 100%; opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — disable heavy effects on mobile
───────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .motion-hidden {
    transform: translateY(16px);
    filter: blur(3px);
  }

  /* Disable tilt on touch */
  .proj-card {
    transform: none !important;
  }

  /* Disable cursor on touch */
  #cursor-dot,
  #cursor-ring,
  #cursor-trail,
  #cursor-wrap {
    display: none;
  }

  /* Simpler blob drift */
  .mesh-blob {
    animation: blobFloat 12s ease-in-out infinite !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   PERFORMANCE: Promote composited layers
   NOTE: .hero-right intentionally excluded from backface-visibility
   — it causes a mobile scroll opacity glitch on the terminal panel
───────────────────────────────────────────────────────────────*/
.hero-left,
.proj-card,
.modal-box,
#scroll-progress {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}