/* ============================================================
   Brightbeam · motion.css
   Editorial fade-up for headlines and sub-heads.
   Ember-wipe for the orange accent spans inside hero h1s.
   Subtle hover underline-grow for nav links.
   Honours prefers-reduced-motion.
   ============================================================ */

/* ---- 1. Default state for animated elements ----
   Only hide them if JS has confirmed it will animate them in.
   Without JS, .js-motion is never set and content shows immediately. */
.js-motion [data-anim]{
  opacity:0;
  transform:translate3d(0,18px,0);
  will-change:opacity, transform;
  transition:
    opacity 820ms cubic-bezier(.2,.7,.2,1),
    transform 820ms cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay, 0ms);
}
.js-motion [data-anim].in{
  opacity:1;
  transform:none;
}

/* Variants: from-left / from-right for split layouts */
.js-motion [data-anim="left"]{ transform:translate3d(-22px,6px,0); }
.js-motion [data-anim="right"]{ transform:translate3d(22px,6px,0); }
.js-motion [data-anim="left"].in,
.js-motion [data-anim="right"].in{ transform:none; }

/* Slower, longer for hero h1s */
.js-motion [data-anim="hero"]{
  transform:translate3d(0,28px,0);
  transition-duration:1020ms;
}
.js-motion [data-anim="hero"].in{ transform:none; }

/* ---- 2. Ember accent: the orange word inside a heading
        gets a left-to-right colour wipe after the heading lands. ---- */
.js-motion [data-anim] .ember{
  background-image:linear-gradient(90deg, var(--ember) 0%, var(--ember) 50%, var(--ink) 50%, var(--ink) 100%);
  background-size:200% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  transition:background-position 1100ms cubic-bezier(.2,.7,.2,1) 250ms;
}
.js-motion [data-anim].in .ember{
  background-position:0% 0;
}

/* ---- 3. A thin rule that draws itself.
        Add data-rule to any 2px hr or border-top element. ---- */
.js-motion [data-rule]{
  position:relative;
  overflow:hidden;
}
.js-motion [data-rule]::before{
  content:"";
  position:absolute;
  inset:0 100% 0 0;
  background:var(--ink);
  transition:right 900ms cubic-bezier(.2,.7,.2,1) var(--delay, 0ms);
}
.js-motion [data-rule].in::before{ right:0; }

/* ---- 4. Section-number tag: a tiny tick-up. ---- */
.js-motion [data-anim-num]{
  display:inline-block;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--delay, 0ms);
}
.js-motion [data-anim-num].in{ opacity:1; transform:none; }

/* ---- 5. Nav link underline grow on hover.
        Apply class .nav-anim to any anchor that wants this. ---- */
.nav-anim{ position:relative; }
.nav-anim::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:1.5px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}
.nav-anim:hover::after,
.nav-anim[aria-current="page"]::after{ transform:scaleX(1); }

/* ---- 6. Hero caret: small blinking square next to a hero h1
        for editorial effect. Add <span class="caret"></span>. ---- */
.caret{
  display:inline-block;
  width:0.42em;
  height:0.78em;
  margin-left:0.18em;
  background:var(--ember);
  vertical-align:-0.06em;
  animation:bb-caret 1.05s steps(2) infinite;
}
@keyframes bb-caret{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* ---- 7. Reduced motion: short-circuit everything. ---- */
@media (prefers-reduced-motion: reduce){
  .js-motion [data-anim],
  .js-motion [data-anim="left"],
  .js-motion [data-anim="right"],
  .js-motion [data-anim="hero"]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .js-motion [data-anim] .ember{
    background:none;
    -webkit-background-clip:initial;
            background-clip:initial;
    color:var(--ember);
    transition:none;
  }
  .js-motion [data-rule]::before{ right:0 !important; transition:none !important; }
  .js-motion [data-anim-num]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .caret{ animation:none; opacity:1; }
}