/* ============================================================
   Editorial Future v2 — LAYER 3a: MOTION (CSS)
   Opt-in via data attributes; motion.js adds the state classes.
     data-ef-reveal            fade/rise in when scrolled into view (+ .is-in)
     data-ef-reveal-group      stagger direct children (sets --ef-d per child)
     data-ef-boot              hero display headline: line stagger + decode
     data-ef-decode            decode text nodes on reveal (optional ms value)
     data-ef-decode-hover      decode on pointerenter (optional ms value)
     data-ef-morph="text"      wordmark: scramble to text on hover, back on leave
     data-ef-tilt              pointer tilt (cards)
     data-ef-sweep             light sweep on hover (case rows)
     data-ef-draw              accent line draws in on reveal (steps container)
     data-ef-sequence          children get .is-in one after another on reveal
   All of it is disabled under prefers-reduced-motion.
   ============================================================ */

/* pointer spotlight on the HUD grid + nav scroll progress (driven by --ef-mx/--ef-my/--ef-progress) */
body.ef::before { mask-image: radial-gradient(420px 420px at var(--ef-mx, 50%) var(--ef-my, 0%), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.ef-nav::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: var(--ef-progress, 0%); background: var(--ef-fg); box-shadow: 0 0 10px var(--ef-accent); transition: width .1s linear; }
.ef-brand::before { animation: ef-blink 1.2s steps(2) infinite; }
@keyframes ef-blink { 50% { opacity: 0; } }

/* reveal */
[data-ef-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--ef-t-reveal) var(--ef-ease), transform var(--ef-t-reveal) var(--ef-ease); transition-delay: var(--ef-d, 0ms); }
[data-ef-reveal].is-in { opacity: 1; transform: none; }

/* hero boot */
.ef-display .ef-line { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s var(--ef-ease); }
.ef-display.is-in .ef-line { opacity: 1; transform: none; }
.ef-display.is-in .ef-line:nth-of-type(1) { transition-delay: .15s; }
.ef-display.is-in .ef-line:nth-of-type(2) { transition-delay: .70s; }
.ef-display.is-in .ef-line:nth-of-type(3) { transition-delay: 1.25s; }
.ef-display::after { content: "_"; color: var(--ef-accent); font-weight: 300; opacity: 0; animation: ef-blink 1s steps(2) infinite; }
.ef-display.is-done::after { opacity: 1; }
.ef-fact { opacity: 0; transform: translateX(24px); transition: opacity .6s ease, transform .6s var(--ef-ease); transition-delay: var(--ef-d, 0ms); }
.ef-fact.is-in { opacity: 1; transform: none; }
.ef-display .ef-thin, .ef-stmt em { animation: ef-flick 7s infinite; }
@keyframes ef-flick { 0%,94%,100% { opacity: 1; transform: none; } 95% { opacity: .6; transform: translateX(1px); } 97% { opacity: 1; transform: translateX(-1px); } 98% { opacity: .7; } }

/* marquee: runs at rest; frozen + scrambled while scrolling (motion.js toggles .is-scrolling) */
.ef-marquee__inner { animation: ef-slide var(--ef-marquee) linear infinite; }
.ef-marquee:hover .ef-marquee__inner, .ef-marquee.is-scrolling .ef-marquee__inner { animation-play-state: paused; }
.ef-marquee.is-scrolling .ef-marquee__inner { color: var(--ef-fg-2); }
@keyframes ef-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* case sweep */
[data-ef-sweep]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(var(--ef-accent-rgb),.10), transparent); transform: skewX(-20deg); opacity: 0; }
[data-ef-sweep]:hover::after { animation: ef-sweep .9s ease forwards; }
@keyframes ef-sweep { from { left: -40%; opacity: 1; } to { left: 120%; opacity: 0; } }

/* tilt (cards) */
[data-ef-tilt] { transform: perspective(900px) rotateX(var(--ef-rx, 0deg)) rotateY(var(--ef-ry, 0deg)) translateY(var(--ef-ty, 0)); transition: transform .25s ease, border-color var(--ef-t-fast) ease, opacity var(--ef-t-reveal) ease; will-change: transform; }
[data-ef-tilt]:hover { --ef-ty: -3px; }
[data-ef-tilt][data-ef-reveal] { opacity: 0; } [data-ef-tilt][data-ef-reveal].is-in { opacity: 1; }

/* tool glyph */
.ef-tool__glyph { transition: transform .4s var(--ef-ease), text-shadow .3s ease; }
.ef-tool.is-in .ef-tool__glyph { animation: ef-glyph-in .9s var(--ef-ease) both; }
@keyframes ef-glyph-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ef-tool:hover .ef-tool__glyph { transform: scale(1.12) rotate(-4deg); text-shadow: var(--ef-glow-strong); }

/* capabilities underline */
.ef-cap .ef-label-sm { position: relative; }
.ef-cap .ef-label-sm::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--ef-accent); transition: width .6s var(--ef-ease) .3s; }
.ef-cap.is-in .ef-label-sm::after { width: 100%; }

/* process draw + sequence */
[data-ef-draw]::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--ef-accent); box-shadow: var(--ef-glow); transition: width 1.6s var(--ef-ease); z-index: 1; }
[data-ef-draw].is-in::before { width: 100%; }
[data-ef-sequence] > * .ef-step__n { opacity: .35; transition: opacity .3s ease; }
[data-ef-sequence] > .is-in .ef-step__n { opacity: 1; }

/* contact form edge */
.ef-form::before { content: ""; position: absolute; left: -24px; top: 0; width: 1px; height: 0; background: linear-gradient(var(--ef-accent), transparent); transition: height 1.2s var(--ef-ease) .2s; }
.ef-contact.is-in .ef-form::before { height: 100%; }
.ef-field:focus-within label::before { animation: ef-blink .8s steps(2) infinite; }

/* reduced motion: everything in its final state */
@media (prefers-reduced-motion: reduce) {
  [data-ef-reveal], .ef-fact, .ef-display .ef-line { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ef-display::after { opacity: 1; }
  .ef-marquee__inner, .ef-brand::before, .ef-display::after, .ef-display .ef-thin, .ef-stmt em, .ef-tool.is-in .ef-tool__glyph, .ef-field:focus-within label::before { animation: none !important; }
  .ef-section::before { width: 80px; } .ef-fact::before { transform: none; }
  [data-ef-tilt] { transform: none !important; }
  [data-ef-draw]::before { width: 100%; transition: none; } [data-ef-sequence] > * .ef-step__n { opacity: 1; }
  .ef-cap .ef-label-sm::after, .ef-form::before { transition: none; } .ef-contact .ef-form::before { height: 100%; } .ef-cap .ef-label-sm::after { width: 100%; }
}