/* ═══════════════════════════════════════════════════
   PAGE VFX — Shared animations for case studies
   & articles. Loaded by page-vfx.js at runtime.
   ═══════════════════════════════════════════════════ */

/* ─── READING PROGRESS BAR ─── */
#vfx-prog {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 2px; width: 0;
  background: linear-gradient(90deg,#D4A843,#00C8FF,#4ade80,#D4A843);
  background-size: 300% 100%;
  animation: vfxProgShimmer 3s linear infinite;
  transition: width .12s linear;
  pointer-events: none;
}
@keyframes vfxProgShimmer {
  0%   { background-position:  0% 50% }
  100% { background-position: 300% 50% }
}

/* ─── HERO CANVAS LAYER ─── */
.vfx-hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  opacity: .9;
}
.cs-hero > *:not(canvas),
.art-hero > *:not(canvas) { position: relative; z-index: 1 }

/* ─── TICKER TAPE ─── */
#vfx-ticker {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 28px; overflow: hidden; z-index: 2;
  background: rgba(0,0,0,.38);
  border-top: 1px solid rgba(212,168,67,.12);
}
#vfx-ticker-track {
  display: inline-flex; align-items: center; gap: 32px;
  white-space: nowrap; height: 28px; padding: 0 32px;
  animation: vfxTicker 28s linear infinite;
  font-family: 'DM Mono', monospace;
  font-size: .54rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(212,168,67,.5);
}
#vfx-ticker-track span { flex-shrink: 0 }
#vfx-ticker-track .sep { opacity: .22; margin: 0 4px }
@keyframes vfxTicker {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

/* ─── META STRIP HOVER ─── */
.cs-meta-cell {
  transition: background .3s, border-color .3s;
}
.cs-meta-cell:hover {
  background: rgba(212,168,67,.04);
  border-color: rgba(212,168,67,.2) !important;
}

/* ─── RESULT CARDS ─── */
.result-card {
  position: relative; overflow: hidden;
  transition: transform .38s cubic-bezier(.23,1,.32,1), border-color .25s, box-shadow .3s !important;
  cursor: default;
}
.result-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,transparent,rgba(212,168,67,.45),transparent);
}
.result-num {
  background: linear-gradient(135deg,#D4A843,#F0C968,#00C8FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ─── PROCESS STEPS ─── */
.steps { position: relative }
.steps::before {
  content: '';
  position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px;
  background: linear-gradient(to bottom,transparent,rgba(212,168,67,.2),transparent);
}
.step-num {
  transition: color .5s ease, text-shadow .5s ease;
  position: relative; z-index: 1;
}
.step-num.vfx-lit {
  color: rgba(212,168,67,.55) !important;
  text-shadow: 0 0 18px rgba(212,168,67,.3);
}

/* ─── CALLOUT & QUOTE BORDER GLOW ─── */
.callout, .art-callout, .art-quote {
  position: relative; overflow: hidden;
}
.vfx-border-glow {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom,#D4A843,#00C8FF,#D4A843);
  background-size: 100% 300%;
  animation: vfxBorderFlow 3s ease-in-out infinite;
}
@keyframes vfxBorderFlow {
  0%,100% { background-position: 0% 0%   }
  50%      { background-position: 0% 100% }
}

/* ─── SECTION DIVIDERS DRAW IN ─── */
.cs-divider, .art-h2-div {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.22,1,.36,1) .15s;
}
.cs-divider.vfx-drawn, .art-h2-div.vfx-drawn {
  transform: scaleX(1);
}

/* ─── SCROLL REVEAL ─── */
.vfx-rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .68s cubic-bezier(.22,1,.36,1);
}
.vfx-rv.vfx-in { opacity: 1; transform: none }

/* ─── ARTICLE DROP CAP ─── */
.art-body > p:first-of-type::first-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem; color: #D4A843;
  float: left; line-height: .72;
  margin-right: 9px; margin-top: 6px;
}

/* ─── CODE BLOCK ─── */
.code-block { transition: box-shadow .3s }
.code-block:hover { box-shadow: 0 0 28px rgba(212,168,67,.08) }

/* ─── HERO ENTRANCE ─── */
@keyframes vfxHeroIn {
  from { opacity:0; transform:translateY(18px) }
  to   { opacity:1; transform:none }
}
.cs-cat, .art-meta   { animation: vfxHeroIn .6s ease .2s both }
.cs-title, .art-title { animation: vfxHeroIn .8s cubic-bezier(.22,1,.36,1) .35s both }
.cs-subtitle,.art-lede{ animation: vfxHeroIn .7s ease .55s both }

/* ─── TOOL TAG HOVER ─── */
.tool-tag, .art-tag {
  transition: border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.tool-tag:hover, .art-tag:hover {
  border-color: rgba(212,168,67,.5) !important;
  color: rgba(212,168,67,.9) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

@media(max-width:768px){
  #vfx-ticker { display:none }
  .art-body > p:first-of-type::first-letter { font-size:2.8rem }
}