/* The Brand Well: section motion (2026-10-26)
   Runs only when motion.js is active (html.js-motion).
   Uses keyframe animations with backwards fill, so once an element lands it returns
   to its normal state and the existing button and card hover effects keep working. */
:root{--bw-ease:cubic-bezier(.16,1,.3,1);--bw-dur:.9s}

@keyframes bw-up{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
@keyframes bw-left{from{opacity:0;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
@keyframes bw-right{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
@keyframes bw-scale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes bw-fade{from{opacity:0}to{opacity:1}}
@keyframes bw-pop{0%{opacity:0;transform:translate3d(0,18px,0) scale(.9)}60%{opacity:1;transform:translate3d(0,-3px,0) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes bw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bw-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bw-drop{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes bw-glow{0%,100%{opacity:.0}50%{opacity:.55}}

/* Hidden until revealed */
.js-motion [data-reveal]:not(.in){opacity:0}

/* Reveal styles */
.js-motion [data-reveal].in{animation:bw-up var(--bw-dur) var(--bw-ease) var(--d,0ms) backwards}
.js-motion [data-reveal="left"].in{animation-name:bw-left;animation-duration:1s}
.js-motion [data-reveal="right"].in{animation-name:bw-right;animation-duration:1s}
.js-motion [data-reveal="scale"].in{animation-name:bw-scale;animation-duration:1.1s}
.js-motion [data-reveal="fade"].in{animation-name:bw-fade;animation-duration:1s}
.js-motion [data-reveal="pop"].in{animation-name:bw-pop;animation-duration:.8s}

/* Header slides in on load */
.js-motion header.top{animation:bw-drop .7s var(--bw-ease) both}

/* Scorecard chip: bars fill after the chip lands */
.js-motion .score-chip .bar i{transform-origin:left center;transform:scaleX(0)}
.js-motion .score-chip.in .bar i{transform:none;animation:bw-fill 1s var(--bw-ease) backwards}
.js-motion .score-chip.in .chip-rows>span:nth-child(1) .bar i{animation-delay:calc(var(--d,0ms) + 450ms)}
.js-motion .score-chip.in .chip-rows>span:nth-child(2) .bar i{animation-delay:calc(var(--d,0ms) + 600ms)}
.js-motion .score-chip.in .chip-rows>span:nth-child(3) .bar i{animation-delay:calc(var(--d,0ms) + 750ms)}

/* Hero headline: the orange word gets a soft glow as it lands */
.js-motion .hero h1 .o{position:relative;z-index:0}
.js-motion .hero h1.in .o::after{content:"";position:absolute;inset:-10% -6%;border-radius:40%;
  background:radial-gradient(closest-side,rgba(236,60,16,.45),transparent);filter:blur(14px);z-index:-1;pointer-events:none;
  animation:bw-glow 1.8s ease calc(var(--d,0ms) + 500ms) 1 both}

/* Orange closing band wipes up into view, then its content rises */
.js-motion .band-orange{position:relative;isolation:isolate;background:transparent}
.js-motion .band-orange::before{content:"";position:absolute;inset:0;background:var(--orange);z-index:-1;transform-origin:50% 100%;transform:scaleY(0)}
.js-motion .band-orange.in::before{transform:none;animation:bw-rise 1s var(--bw-ease) backwards}

/* Respect reduced motion: show everything, no movement */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal]:not(.in){opacity:1}
  .js-motion .band-orange::before{transform:none}
  .js-motion .score-chip .bar i{transform:none}
}