/* uture — interactive layer styles */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--orange-hot));
  transform-origin: left;
  transform: scaleX(0);
  z-index: 300;
  pointer-events: none;
  box-shadow: 0 0 12px var(--orange-glow);
}

/* ---------- hero embers canvas ---------- */
.hero-embers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- film grain ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- card spotlight (cursor-tracked glow) ---------- */
@media (hover: hover) and (pointer: fine) {
  .concern-card::after,
  .fde-card::after,
  .bento-card::after,
  .sol1-card::after,
  .case-card::after,
  .stat-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(
      420px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 106, 26, 0.09),
      transparent 55%
    );
  }
  .bento-card, .sol1-card, .case-card, .stat-cell { position: relative; }
  .concern-card:hover::after,
  .fde-card:hover::after,
  .bento-card:hover::after,
  .sol1-card:hover::after,
  .case-card:hover::after,
  .stat-cell:hover::after {
    opacity: 1;
  }
}

/* ---------- 3D tilt ---------- */
@media (hover: hover) and (pointer: fine) {
  .fde-card {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  .fde-card:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  }
  .proposal-card {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease;
    will-change: transform;
  }
  .proposal-card:hover {
    border-color: rgba(255, 106, 26, 0.3);
  }
}

/* ---------- magnetic buttons ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn-primary,
  .nav-cta {
    transform: translate(var(--magx, 0px), var(--magy, 0px));
  }
  .btn-primary:hover {
    transform: translate(var(--magx, 0px), calc(var(--magy, 0px) - 2px));
  }
}

/* ---------- nav scrollspy ---------- */
.nav-links a.active:not(.nav-cta) {
  color: var(--orange);
}

/* ---------- process timeline fill ---------- */
/* run both the base line and the fill through the step dots (dots mask them) */
.process-list::before { left: 12px; }
.process-progress {
  position: absolute;
  left: 12px;
  top: 60px;
  bottom: 60px;
  width: 1px;
  background: linear-gradient(180deg, var(--orange), var(--orange-soft));
  box-shadow: 0 0 10px var(--orange-glow);
  transform-origin: top;
  transform: scaleY(0);
  pointer-events: none;
}
@media (max-width: 640px) {
  .process-list::before { display: none; }
  .process-progress { display: none; }
}

/* ---------- cases drag-to-scroll ---------- */
@media (hover: hover) and (pointer: fine) {
  .cases-track { cursor: grab; }
  .cases-track.dragging {
    cursor: grabbing;
    user-select: none;
    scroll-behavior: auto;
  }
  .cases-track.dragging .case-card { pointer-events: none; }
}

/* ---------- FDE journey: line draw + mock sequences ---------- */
.fde-track::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.6, 0.05, 0.2, 1) 0.15s;
}
.fde-track.in::before { transform: scaleX(1); }
.fde-track::after {
  opacity: 0;
  transition: opacity 0.4s ease 1.15s;
}
.fde-track.in::after { opacity: 1; }

.fde-track-divider span {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease 0.85s, transform 0.5s ease 0.85s;
}
.fde-track.in .fde-track-divider span {
  opacity: 1;
  transform: translateY(0);
}

/* phase 01 — curriculum bars fill */
.fde-edu-row .bar {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fde-track.in .fde-edu-row .bar { transform: scaleX(1); }
.fde-track.in .fde-mock-educate .fde-edu-row:nth-child(2) .bar { transition-delay: 0.5s; }
.fde-track.in .fde-mock-educate .fde-edu-row:nth-child(3) .bar { transition-delay: 0.7s; }
.fde-track.in .fde-mock-educate .fde-edu-row:nth-child(4) .bar { transition-delay: 0.9s; }

/* phase 02 — chat messages pop in */
.fde-chat,
.fde-chat-meta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fde-track.in .fde-chat.them { opacity: 1; transform: none; transition-delay: 0.65s; }
.fde-track.in .fde-chat.us { opacity: 1; transform: none; transition-delay: 0.95s; }
.fde-track.in .fde-chat-meta { opacity: 1; transform: none; transition-delay: 1.25s; }

/* phase 03 — terminal output streams */
.fde-term > div {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fde-track.in .fde-term > div:nth-child(1) { opacity: 1; transition-delay: 0.75s; }
.fde-track.in .fde-term > div:nth-child(2) { opacity: 1; transition-delay: 1.0s; }
.fde-track.in .fde-term > div:nth-child(3) { opacity: 1; transition-delay: 1.2s; }
.fde-track.in .fde-term > div:nth-child(4) { opacity: 1; transition-delay: 1.4s; }
.fde-track.in .fde-term > div:nth-child(5) { opacity: 1; transition-delay: 1.55s; }

/* node dot for phase 02 gets a living pulse once revealed */
.fde-track.in .fde-col:nth-child(3) .fde-node-dot {
  animation: fdeNodePulse 3s ease-in-out 1.6s infinite;
}
@keyframes fdeNodePulse {
  0%, 100% { box-shadow: 0 0 0 6px var(--bg-0), 0 0 28px rgba(255, 106, 26, 0.18); }
  50% { box-shadow: 0 0 0 6px var(--bg-0), 0 0 44px rgba(255, 106, 26, 0.42); }
}

/* bento flow diagram — active node breathes */
.flow-node.active {
  animation: flowBreathe 2.6s ease-in-out infinite;
}
@keyframes flowBreathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 106, 26, 0.25); }
  50% { box-shadow: 0 0 18px rgba(255, 106, 26, 0.35), 0 0 0 1px rgba(255, 106, 26, 0.45); }
}

/* ---------- reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .hero-embers { display: none; }
  .fde-track::before,
  .fde-track::after,
  .fde-track-divider span,
  .fde-edu-row .bar,
  .fde-chat,
  .fde-chat-meta,
  .fde-term > div {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .fde-track.in .fde-col:nth-child(3) .fde-node-dot,
  .flow-node.active { animation: none !important; }
}