/* ELEME(NT) NET. — Scroll + entrance animations
   Tied to .anim-* classes added by /js/animate.js
   Easing + timings tuned for editorial / premium feel (slow, eased, sparse). */

:root{
  --anim-d: .9s;
  --anim-ease: cubic-bezier(.16,1,.3,1);
  --anim-distance: 56px;
}

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;
  width:0%;height:3px;
  background:linear-gradient(90deg, var(--yellow), #ffcd4a);
  z-index:200;pointer-events:none;
  box-shadow: 0 0 8px rgba(249,176,1,.5);
  transition: width .08s linear;
}

/* ---------- BASE: fade + slide up ---------- */
.anim-fade {
  opacity:0;
  transform:translateY(var(--anim-distance));
  transition: opacity var(--anim-d) var(--anim-ease),
              transform var(--anim-d) var(--anim-ease);
  will-change: opacity, transform;
}
.anim-fade.is-in {
  opacity:1;
  transform:none;
}

/* ---------- HORIZONTAL "WIPE-IN" REVEAL (for display headlines) ---------- */
/* Uses opacity + horizontal slide for reliability — clip-path was confusing
   IntersectionObserver (zero-width clipped boxes never registered as visible). */
.anim-clip {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 1.1s cubic-bezier(.7,0,.3,1),
              transform 1.1s cubic-bezier(.7,0,.3,1);
  will-change: opacity, transform;
}
.anim-clip.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- // MARKER ANIMATED UNDERLINE ---------- */
.marker {
  position:relative;
  padding-bottom:6px;
}
.marker::after {
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:48px; height:2px;
  background: currentColor;
  opacity:.5;
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .8s var(--anim-ease) .3s;
}
.marker.is-in::after { transform: scaleX(1); }

/* Slide from left (for funnel stages, timeline rows) */
.anim-slide-l {
  opacity:0;
  transform:translateX(-32px);
  transition: opacity var(--anim-d) var(--anim-ease),
              transform var(--anim-d) var(--anim-ease);
}
.anim-slide-l.is-in { opacity:1; transform:none; }

/* Slide from right (for cover pull-quote) */
.anim-slide-r {
  opacity:0;
  transform:translateX(32px);
  transition: opacity var(--anim-d) var(--anim-ease),
              transform var(--anim-d) var(--anim-ease);
}
.anim-slide-r.is-in { opacity:1; transform:none; }

/* Scale-in (for cohort callout big number) */
.anim-scale {
  opacity:0;
  transform:scale(.85);
  transition: opacity var(--anim-d) var(--anim-ease),
              transform var(--anim-d) var(--anim-ease);
}
.anim-scale.is-in { opacity:1; transform:none; }

/* ---------- COVER ENTRANCE (load-triggered) ---------- */
.prop-cover .cover-top,
.prop-cover .cover-title,
.prop-cover .cover-meta,
.prop-cover .cover-right .pull-quote {
  opacity:0;
  transform:translateY(20px);
  transition: opacity 1s var(--anim-ease), transform 1s var(--anim-ease);
}
.prop-cover .cover-right .pull-quote { transform:translateX(32px); }

body.is-loaded .prop-cover .cover-top { opacity:1; transform:none; transition-delay:.15s; }
body.is-loaded .prop-cover .cover-title { opacity:1; transform:none; transition-delay:.45s; }
body.is-loaded .prop-cover .cover-meta { opacity:1; transform:none; transition-delay:1s; }
body.is-loaded .prop-cover .cover-right .pull-quote { opacity:1; transform:none; transition-delay:.7s; }

/* Slight breathing on the decorative N( ) on cover */
.prop-cover .cover-deco{
  animation: cover-breathe 8s ease-in-out infinite alternate;
}
@keyframes cover-breathe{
  from { opacity:.10; transform:scale(1); }
  to   { opacity:.16; transform:scale(1.04); }
}

/* ---------- FUNNEL STAGES ---------- */
.funnel-stage.anim-funnel {
  opacity:0;
  transform:translateX(-40px) scaleX(.6);
  transform-origin:left center;
  transition: opacity 1s var(--anim-ease), transform 1s var(--anim-ease);
}
.funnel-stage.anim-funnel.is-in { opacity:1; transform:none; }
.funnel-arrow.anim-funnel {
  opacity:0; transform:translateY(-12px);
  transition: opacity .6s var(--anim-ease) .3s, transform .6s var(--anim-ease) .3s;
}
.funnel-arrow.anim-funnel.is-in { opacity:.9; transform:none; }

/* ---------- TIMELINE RAIL ---------- */
.timeline.anim-rail::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s var(--anim-ease);
}
.timeline.anim-rail.is-in::before {
  transform: scaleY(1);
}
.tl-row.anim-tl::before {
  opacity:0;
  transform: translate(-50%, -50%) scale(.2);
  transform-origin: center;
  transition: opacity .4s var(--anim-ease), transform .5s var(--anim-ease);
}
.tl-row.anim-tl.is-in::before {
  opacity:1;
  transform: translate(0,0) scale(1);
}

/* ---------- BUDGET TABLE ROWS ---------- */
.budget-table tbody tr.anim-row {
  opacity:0;
  transform:translateY(12px);
  transition: opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
}
.budget-table tbody tr.anim-row.is-in {
  opacity:1; transform:none;
}

/* ---------- KPI BIG-NUMBER PULSE (subtle, post-entrance) ---------- */
.target.is-in .v,
.phase-kpi.is-in .v,
.stat.is-in .n {
  animation: kpi-tap .9s var(--anim-ease) .2s 1;
}
@keyframes kpi-tap {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------- COHORT CALLOUT ---------- */
.cohort-callout.anim-cohort {
  opacity:0; transform:translateY(24px);
  transition: opacity .9s var(--anim-ease), transform .9s var(--anim-ease);
}
.cohort-callout.anim-cohort.is-in { opacity:1; transform:none; }
.cohort-callout.anim-cohort .big {
  display:inline-block;
  transform: scale(.7);
  opacity:0;
  transition: opacity .7s var(--anim-ease) .25s, transform .9s var(--anim-ease) .25s;
}
.cohort-callout.anim-cohort.is-in .big { opacity:1; transform: scale(1); }

/* ---------- BUTTON / LINK HOVER MICRO ---------- */
.btn { transition: background .25s, transform .15s, box-shadow .25s; }
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(91,9,9,.18);
}

/* Card lift on hover */
.pillar, .why-card, .tier-card, .phase, .target, .kpi, .aud, .deal-card, .unit-card {
  transition: transform .25s var(--anim-ease), border-color .2s, box-shadow .25s;
}
.pillar:hover, .why-card:hover, .aud:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(91,9,9,.08);
}

/* ---------- ACCESSIBILITY: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .anim-fade, .anim-slide-l, .anim-slide-r, .anim-scale,
  .funnel-stage.anim-funnel, .funnel-arrow.anim-funnel,
  .cohort-callout.anim-cohort, .cohort-callout.anim-cohort .big,
  .budget-table tbody tr.anim-row,
  .timeline.anim-rail::before,
  .tl-row.anim-tl::before {
    opacity:1 !important;
    transform:none !important;
  }
}