/* motion-extras.css
   Visual layer for motion-extras.js + extras (4, 5, 6, 9).
*/

/* ============ 1) HERO WORD REVEAL ============ */
.cascade .l { display: block; }
.cascade .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition:
    opacity .85s cubic-bezier(.22,1,.36,1) var(--wd, 0ms),
    filter .85s cubic-bezier(.22,1,.36,1) var(--wd, 0ms),
    transform .9s cubic-bezier(.22,1,.36,1) var(--wd, 0ms);
}
.cascade.words-in .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* Disable the original line-cascade animation since words handle reveal */
.cascade .l { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ============ 2) MANIFESTO STAGGERED REVEAL ============ */
.manifesto .open .mword {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--md, 0ms),
    transform 1s cubic-bezier(.22,1,.36,1) var(--md, 0ms),
    filter .9s cubic-bezier(.22,1,.36,1) var(--md, 0ms);
}
.manifesto .open.mwords-in .mword {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.manifesto .mstag {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1) var(--msd, 0ms),
    transform 1.05s cubic-bezier(.22,1,.36,1) var(--msd, 0ms);
}
.manifesto .mstag.mstag-in {
  opacity: 1;
  transform: translateY(0);
}

/* SPLIT FLIP SEQUENCE — Service as a System reveal */
/* Strikethrough draws across "System as a Service." */
.manifesto .col.old .big .strike::after {
  transform-origin: left center;
  transform: rotate(-4deg) scaleX(0);
  transition: transform .9s cubic-bezier(.65,0,.35,1) .35s;
}
.manifesto .split.split-animate .col.old .big .strike::after {
  transform: rotate(-4deg) scaleX(1);
}

/* VS badge does a vertical flip (rotateX 180) */
.manifesto .vs span {
  display: inline-block;
  perspective: 200px;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.65,0,.35,1) .55s, color .6s ease .55s;
  color: var(--bone-mute);
}
.manifesto .split.split-animate .vs span {
  transform: rotateX(360deg);
  color: var(--ember);
}

/* Old arrow drifts right, new arrow drifts left (entering the flip direction) */
.manifesto .col.old .arrow-row .arrow,
.manifesto .col.new .arrow-row .arrow {
  display: inline-block;
  opacity: 0;
  transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.manifesto .col.old .arrow-row .arrow { transform: translateX(-14px); transition-delay: .15s; }
.manifesto .col.new .arrow-row .arrow { transform: translateX(14px);  transition-delay: .85s; }
.manifesto .split.split-animate .col.old .arrow-row .arrow,
.manifesto .split.split-animate .col.new .arrow-row .arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Ember words in new col pulse on after the flip */
.manifesto .col.new .big em {
  opacity: 0;
  text-shadow: 0 0 0 rgba(255, 68, 0, 0);
  transition: opacity .7s ease, text-shadow .8s ease;
}
.manifesto .col.new .big em:nth-of-type(1) { transition-delay: 1.1s; }
.manifesto .col.new .big em:nth-of-type(2) { transition-delay: 1.35s; }
.manifesto .split.split-animate .col.new .big em {
  opacity: 1;
  text-shadow: 0 0 26px rgba(255, 68, 0, 0.55);
}
/* After the glow, settle */
.manifesto .split.split-animate .col.new .big em {
  animation: ember-settle 1.4s ease-out 1.9s forwards;
}
@keyframes ember-settle {
  0%   { text-shadow: 0 0 26px rgba(255, 68, 0, 0.55); }
  100% { text-shadow: 0 0 0 rgba(255, 68, 0, 0); }
}

/* ============ 3) MAGNETIC CTA — handled in JS via transform ============ */

/* ============ 4) HAIRLINES DRAWING IN ============ */
.lbl-row .line,
.hero-eyebrow .line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.65,0,.35,1) .15s;
}
/* hero: animate on load */
.hero-eyebrow .line { transform: scaleX(1); }
.hero-eyebrow .line {
  animation: hairline-draw 1.1s cubic-bezier(.65,0,.35,1) .2s both;
}
@keyframes hairline-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* sections: animate when section gets .in via existing reveal */
section.in .lbl-row .line,
section .lbl-row.in .line {
  transform: scaleX(1);
}
/* Fallback: ensure visible if reveal system never fires */
.no-js .lbl-row .line { transform: scaleX(1); }

/* ============ 5) KEN BURNS — ADVISORY IMAGE ============ */
@keyframes ken-burns {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.07) translate(-1.5%, -1%); }
  100% { transform: scale(1.02) translate(0, 0); }
}
.adv-visual .bg-video {
  animation: ken-burns 26s ease-in-out infinite;
  will-change: transform;
}

/* ============ 6) SCROLL PROGRESS BAR ============ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--ember), #FF1A00);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 68, 0, 0.55);
  transition: width .12s linear;
}

/* ============ 7) COUNTERS — visual handled by JS ============ */

/* ============ 8) ACTIVE SECTION DOT PULSE ============ */
.lbl-row.eyebrow-pulsable::before,
.hero-eyebrow.eyebrow-pulsable::before {
  transition: box-shadow .4s ease, transform .4s ease;
}
.lbl-row.eyebrow-active::before,
.hero-eyebrow.eyebrow-active::before {
  animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(255,58,14,0.55),
      0 0 0 0 rgba(255,58,14,0.35);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 18px rgba(255,58,14,0.85),
      0 0 0 8px rgba(255,58,14,0);
    transform: scale(1.18);
  }
}

/* ============ 9) ARROW LINKS — UNDERLINE HOVER ============ */
/* For .arrow links that are inline-flex (manifesto, advisory, product-foot) */
a.arrow {
  position: relative;
}
a.arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
  opacity: 0.7;
}
a.arrow:hover::before { transform: scaleX(1); }
/* Don't apply to bordered arrow buttons (product-foot has a box) */
.product-foot a.arrow::before { display: none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .cascade .word,
  .manifesto .open .mword,
  .manifesto .mstag {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .lbl-row .line,
  .hero-eyebrow .line {
    transform: scaleX(1) !important;
    animation: none !important;
  }
  .adv-visual .bg-video { animation: none !important; }
  .lbl-row.eyebrow-active::before,
  .hero-eyebrow.eyebrow-active::before {
    animation: none !important;
  }
  .scroll-progress { display: none; }
}