/* css/animations.css (Improved with premium easings and durations) */
/* =========================================================
   IT NANBARGAL — ANIMATIONS CSS (ELITE REFINED)
   Motion language:
   Calm • Intentional • Human-first • Premium
   JS controls WHEN. CSS defines HOW.
   GPU-only: transform + opacity
   ========================================================= */

/* =========================================================
   GLOBAL MOTION TOKENS (Premium tuned)
========================================================= */
:root {
  --motion-fast: 160ms;
  --motion-base: 380ms;
  --motion-slow: 850ms;
  --motion-ease: cubic-bezier(0.2, 1, 0.3, 1);
  --motion-soft: cubic-bezier(0.35, 0, 0.15, 1);
  --motion-snap: cubic-bezier(0.3, 1.5, 0.6, 1);
}

/* =========================================================
   1️⃣ REVEAL TEXT (HEADINGS ONLY)
   Calm authority reveal — never flashy
========================================================= */
.reveal-text {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px); /* Softer blur */
  transition: clip-path var(--motion-slow) var(--motion-ease),
    opacity var(--motion-base) var(--motion-soft),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-base) var(--motion-soft);
  will-change: transform, opacity;
}
.reveal-text.is-visible {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================================================
   2️⃣ SECTION ENTRY (SCROLL-AS-TIMELINE)
   Soft vertical presence — no jump
========================================================= */
.section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--motion-slow) var(--motion-soft),
    transform var(--motion-slow) var(--motion-ease);
  will-change: transform, opacity;
}
.section.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   3️⃣ LOCK ZONE (FOCUS HOLD)
   Slight scale = mental pause
========================================================= */
.lock-zone {
  transition: transform var(--motion-base) var(--motion-soft),
    opacity var(--motion-base) var(--motion-soft);
}
.lock-zone.is-locked {
  transform: scale(1.01); /* Softer scale */
}

/* =========================================================
   4️⃣ MAGNETIC CARD MOTION
   Responsive, not playful
========================================================= */
.card.magnetic {
  transition: transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-soft);
}
.card.magnetic.is-hovered {
  box-shadow: 0 30px 68px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* =========================================================
   5️⃣ DEPTH CARD LAYERS
   Reserved for future layered cards
========================================================= */
.depth-card {
  transform-style: preserve-3d;
}
.depth-card .layer-front,
.depth-card .layer-mid,
.depth-card .layer-back {
  transform: translateZ(0);
  transition: transform var(--motion-fast) var(--motion-ease);
}

/* =========================================================
   6️⃣ CARD ACTIVE / DIM STATES
   Used for tap-focus systems
========================================================= */
.card.is-active {
  transition: transform var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-soft),
    opacity var(--motion-base) var(--motion-soft);
}
.card.is-dimmed {
  transition: opacity var(--motion-base) var(--motion-soft);
  opacity: 0.4;
}

/* =========================================================
   7️⃣ EDGE LIGHT TRACING
   Precision highlight — premium restraint
========================================================= */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--motion-soft);
  background: radial-gradient(
    140px circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.15),
    transparent 50%
  ); /* Softer gradient */
}
.card.is-hovered::before {
  opacity: 1;
}

/* =========================================================
   8️⃣ CTA BREATHING (IDLE CONFIDENCE)
   Breathes only when user is ready
========================================================= */
.cta-btn {
  transition: transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-soft);
}
.cta-btn.is-breathing {
  animation: cta-breathe 8s infinite ease-in-out; /* Slower breath */
}
@keyframes cta-breathe {
  0% {
    transform: scale(1);
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.35);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 20px 50px rgba(34, 197, 94, 0.55);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.35);
  }
}

/* Intent press */
.cta-btn.is-pressed {
  transform: scale(0.93);
}

/* =========================================================
   9️⃣ SCROLL PROGRESS BAR
========================================================= */
#scroll-progress {
  transition: width var(--motion-fast) linear;
}

/* =========================================================
   🔟 SCROLL VELOCITY ADAPTATION
========================================================= */
body.fast-scroll .section {
  transition-duration: var(--motion-fast);
}
body.slow-scroll .section {
  transition-duration: var(--motion-slow);
}

/* =========================================================
   11️⃣ SHOCK MOMENT (USE ONCE ONLY)
   Dramatic pause — never abuse
========================================================= */
.section.is-slow-motion {
  transition-duration: 1100ms !important;
}

/* =========================================================
   SAFETY: REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal-text,
  .section,
  .card,
  .cta-btn {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}
/* =========================================================
   📱 MOBILE TEXT VISIBILITY SAFETY
   Keep cinematic motion, avoid invisible text
========================================================= */
@media (max-width: 768px) {
  .reveal-text {
    opacity: 1; /* text is always readable */
    clip-path: inset(0 0 0 0); /* no hard masking */
    filter: blur(0);
  }
}

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
  pointer-events: none;
}

.scroll-text {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--text-muted),
    transparent
  );
  animation: scrollHint 1.6s ease-in-out infinite;
}

/* ================= SCROLL HINT ================= */

.scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.75;
  pointer-events: none;
  z-index: 5;
}

.scroll-text {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.scroll-line {
  width: 1px;
  height: 24px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--text-muted),
    transparent
  );
  animation: scrollHint 1.6s ease-in-out infinite;
}

@keyframes scrollHint {
  0% {
    transform: translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
}

/* Hide after first scroll */
.scroll-hint.hide {
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}