/* ============================================================
   TECHNOCAST FOUNDRY — Premium Motion Layer
   Additive: enhances the existing v2 animation system.
   All effects degrade gracefully under prefers-reduced-motion.
   ============================================================ */

/* ─── Scroll progress bar (molten line, top of viewport) ──── */
.tcf-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--molten-core), var(--molten), var(--ember));
  box-shadow: 0 0 14px rgba(255, 122, 24, 0.55);
  z-index: 300;
  pointer-events: none;
  will-change: transform;
}

/* ─── Section-title line-mask reveal ──────────────────────── */
/* JS splits titles into .ttl-line > .ttl-inner; lines rise from behind a mask */
.tcf-ttl .ttl-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;   /* keep descenders from clipping */
}
.tcf-ttl .ttl-inner {
  display: block;
  transform: translateY(115%);
  transition: transform 0.95s var(--ease-out-expo);
  transition-delay: calc(var(--l, 0) * 90ms);
  will-change: transform;
}
.tcf-ttl.is-revealed .ttl-inner { transform: translateY(0); }

/* ─── Directional reveal variants (applied by JS) ─────────── */
.tcf-r {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  transition: opacity 0.85s var(--ease-out-expo),
              transform 0.85s var(--ease-out-expo),
              filter 0.85s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 85ms);
  will-change: opacity, transform, filter;
}
.tcf-r.from-left  { transform: translateX(-52px); }
.tcf-r.from-right { transform: translateX(52px); }
.tcf-r.is-revealed { opacity: 1; transform: none; filter: blur(0); }

/* ─── Magnetic buttons (cursor pull, set via --mx/--my in JS) ─ */
.tcf-mag {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 0.35s var(--ease-out-expo);
  will-change: transform;
}

/* ─── Parallax hooks (translateY set by JS) ───────────────── */
.tcf-parallax { will-change: transform; }

/* ─── Elevated card hover (cap cards + material panels) ───── */
.v2-cap-card {
  transition: transform 0.5s var(--ease-out-expo),
              border-color 0.4s ease,
              box-shadow 0.5s var(--ease-out-expo);
}
.v2-cap-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 122, 24, 0.45);
  box-shadow: 0 22px 50px -24px rgba(255, 122, 24, 0.55),
              0 0 0 1px rgba(255, 122, 24, 0.18) inset;
}
.v2-mat-panel {
  transition: transform 0.5s var(--ease-out-expo),
              box-shadow 0.5s var(--ease-out-expo);
}
.v2-mat-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.6);
}

/* ─── Reduced-motion: freeze everything at end state ──────── */
@media (prefers-reduced-motion: reduce) {
  .tcf-progress { display: none; }
  .tcf-ttl .ttl-inner { transform: none !important; transition: none !important; }
  .tcf-r { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .tcf-mag { transform: none !important; }
  .tcf-parallax { transform: none !important; }
}