/* Motion layer for Feliza Consulting. Only active when motion.js sets .motion on <html>
   (never with prefers-reduced-motion). Every animation ends in the normal, visible state. */

/* hero: the outline F draws itself, a red light runs along it */
.motion .f-outline path{stroke-dasharray:1;stroke-dashoffset:1}
.motion .hero .f-outline path{animation:f-draw 2.6s cubic-bezier(.65,0,.25,1) .15s forwards}
.motion .contact.in-view .f-outline path{animation:f-draw 2.6s cubic-bezier(.65,0,.25,1) forwards}
@keyframes f-draw{to{stroke-dashoffset:0}}
.f-light{opacity:0}
.motion .hero .f-light{animation:f-light-in .8s ease 2.4s forwards}
@keyframes f-light-in{to{opacity:1}}

/* hero: soft red glow follows the cursor */
.motion .hero::before,.motion .contact::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,72%) var(--my,35%),rgba(215,31,54,.14),transparent 62%);
  transition:background-position .2s}

/* hero: headline builds word by word, the rest follows */
.motion .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);
  animation:w-up .75s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(.2s + var(--i) * .075s)}
@keyframes w-up{to{opacity:1;transform:none}}
.motion .hero .eyebrow,.motion .hero .lead,.motion .hero .cta-row,.motion .hero-facts,.motion .partner{
  opacity:0;transform:translateY(14px);animation:f-up .8s cubic-bezier(.2,.75,.2,1) forwards}
.motion .hero .eyebrow{animation-delay:.05s}
.motion .hero .lead{animation-delay:.75s}
.motion .hero .cta-row{animation-delay:.95s}
.motion .hero-facts{animation-delay:1.15s}
.motion .partner{animation-delay:1.35s}
@keyframes f-up{to{opacity:1;transform:none}}
.motion .hero .eyebrow .tick{animation:tick-in 1s ease .1s both}
@keyframes tick-in{from{width:0}to{width:16px}}

/* sections: content glides in on scroll */
.motion .rv{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1);transition-delay:var(--d,0s)}
.motion .rv.in{opacity:1;transform:none}
.motion .vlabel.rv{transform:rotate(180deg) translateY(-26px)}
.motion .vlabel.rv.in{transform:rotate(180deg)}
@media (max-width:760px){.motion .vlabel.rv{transform:translateY(26px)}.motion .vlabel.rv.in{transform:none}}

/* hover: cards and rows react */
.motion .plan,.motion .pillar,.motion .why-buy > div,.motion .areas-grid > div{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.motion .plan:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.12);border-color:var(--ink)}
.motion .pillar:hover,.motion .why-buy > div:hover{transform:translateY(-3px)}
.motion .areas-grid > div:hover{transform:translateY(-3px)}
.motion .method li{transition:background-color .25s ease,padding .25s ease}
.motion .method li:hover{background:var(--paper);padding-inline:14px}
.motion .method li:hover::before{color:var(--red)}
.motion .btn-red{position:relative;overflow:hidden}
.motion .btn-red::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .6s ease}
.motion .btn-red:hover::after{left:120%}
.motion .ci{transition:transform .25s ease}
.motion .contact-list li:hover .ci{transform:translateY(-3px)}

/* Asana AI: the ticket travels through the flow */
.agent-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.agent-ctrl .agent-hint{margin:0}
.autoplay{display:none;align-items:center;gap:8px;background:transparent;border:1px solid var(--night-line);color:var(--night-muted);
  font:700 .68rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:2px;cursor:pointer}
.autoplay:hover{color:var(--night-fg);border-color:#6d6e71}
.autoplay .ico{width:8px;height:8px;background:var(--red);border-radius:50%}
.agent.can-play .autoplay{display:inline-flex}
.agent.playing .autoplay .ico{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.motion .agent-flow > li::before,.motion .agent-flow > li::after{transition:background-color .45s ease,border-color .45s ease}
.motion .agent-flow > li.passed::before,.motion .agent-flow > li.cur::before{background:var(--red)}
.motion .agent-flow > li.passed::after,.motion .agent-flow > li.cur::after{border-color:var(--red)}
.motion .pair .link,.motion .pair .link::before,.motion .pair .link::after{transition:background-color .45s ease,border-color .45s ease}
.motion .pair.side .link{background:var(--red)}
.motion .pair.side .link::before,.motion .pair.side .link::after{border-color:var(--red)}
.motion .step{position:relative;overflow:hidden}
.agent.playing .step[aria-pressed="true"]::after{content:"";position:absolute;left:0;bottom:0;height:2px;background:var(--red);width:0;animation:prog-a var(--dur,5s) linear forwards}
.agent.playing.flip .step[aria-pressed="true"]::after{animation-name:prog-b}
@keyframes prog-a{to{width:100%}}
@keyframes prog-b{to{width:100%}}
.motion .panel:not([hidden]){animation:panel-in .45s cubic-bezier(.2,.75,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.motion .step[aria-pressed="true"] .step-tag{animation:tag-glow 2s ease-in-out infinite}
@keyframes tag-glow{50%{box-shadow:0 0 0 4px rgba(215,31,54,.18)}}
.motion .step-start[aria-pressed="true"] .step-tag,.motion .step-goal[aria-pressed="true"] .step-tag{animation:none}