/* Hikari motion layer (15 Oct 2026). Shared by the homepage and the pilot page.
   One easing curve, generous timing, coral only where it matters. Restraint is the brand: if a
   motion feels busy, it goes. Everything here switches off under prefers-reduced-motion. */
:root{
  --hm-ease:cubic-bezier(.16,1,.3,1);          /* the one curve: long, soft ease-out */
  --hm-settle:cubic-bezier(.34,1.32,.64,1);    /* the full stop's landing: a small, slow settle */
  --hm-coral:#d95f4a;
  --hm-rise:22px;
}
@media (max-width:700px){:root{--hm-rise:14px}}

/* ---- the signature headline reveal: words rise out of a mask, the coral full stop lands last */
.hm-h .hm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hm-h .hm-wi{display:inline-block;transform:translateY(105%);transition:transform 1s var(--hm-ease);
  transition-delay:calc(var(--i,0) * 55ms)}
.hm-h .hm-dot{display:inline-block;color:var(--hm-coral);transform:scale(0);transform-origin:50% 80%;
  transition:transform .7s var(--hm-settle);transition-delay:calc(var(--i,0) * 55ms + 380ms)}
.hm-h.hm-in .hm-wi{transform:none}
.hm-h.hm-in .hm-dot{transform:none}

/* ---- body text and blocks: rise and resolve */
.rv{opacity:0;transform:translateY(var(--hm-rise));filter:blur(4px);
  transition:opacity .9s var(--hm-ease),transform 1s var(--hm-ease),filter .9s var(--hm-ease);
  transition-delay:calc(var(--d,0) * 1ms)}
.rv.in{opacity:1;transform:none;filter:none}

/* ---- hairlines that draw as a section arrives: the eye is led from one section to the next */
.hm-line{position:relative}
.hm-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(217,95,74,.55),rgba(244,239,230,.10) 38%,rgba(244,239,230,.10));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--hm-ease)}
.hm-line.hm-in::before{transform:scaleX(1)}

/* ---- reading progress: one coral hairline under the nav */
.hm-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:50;pointer-events:none;
  background:var(--hm-coral);transform:scaleX(0);transform-origin:0 50%;opacity:.85}

/* ---- the burst: turns and settles on load, with a soft coral bloom */
.hm-burst{position:relative;display:inline-block}
.hm-burst svg{animation:hm-turn 1.8s var(--hm-ease) both}
.hm-burst::after{content:"";position:absolute;inset:-60%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(217,95,74,.55),rgba(217,95,74,0) 62%);
  animation:hm-bloom 2.4s var(--hm-ease) .2s both}
@keyframes hm-turn{from{transform:rotate(-120deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes hm-bloom{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

/* ---- depth: a faint coral light that drifts very slowly behind the page */
.hm-glow{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(40% 35% at 30% 20%,rgba(217,95,74,.085),rgba(217,95,74,0) 70%),
             radial-gradient(35% 30% at 80% 70%,rgba(217,95,74,.05),rgba(217,95,74,0) 70%);
  animation:hm-drift 38s ease-in-out infinite alternate}
@keyframes hm-drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(3%,3%,0)}}

/* ---- links: a coral underline that draws, an arrow that moves a little */
.hm-link{text-decoration:none;background-image:linear-gradient(var(--hm-coral),var(--hm-coral));
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;padding-bottom:3px;
  transition:background-size .6s var(--hm-ease),color .3s}
.hm-link:hover{background-size:100% 2px;color:#fff}
.hm-link .hm-arr{display:inline-block;transition:transform .5s var(--hm-ease)}
.hm-link:hover .hm-arr{transform:translateX(5px)}

/* ---- buttons: smooth fill, the cursor's weight on desktop (moved by the script) */
.hm-btn{transition:transform .6s var(--hm-ease),background-color .4s var(--hm-ease),color .4s,
  border-color .4s,box-shadow .6s var(--hm-ease);will-change:transform}
.hm-btn.hm-solid:hover{box-shadow:0 10px 34px rgba(217,95,74,.32)}
.hm-btn.hm-ghost{background-image:linear-gradient(var(--hm-coral),var(--hm-coral));background-repeat:no-repeat;
  background-position:50% 100%;background-size:100% 0;transition:background-size .5s var(--hm-ease),color .4s,
  border-color .4s,transform .6s var(--hm-ease)}
.hm-btn.hm-ghost:hover{background-size:100% 100%;color:#0b0b0c;border-color:var(--hm-coral)}

/* ---- cards: lift, a coral edge, and a light that follows the cursor across the surface */
.hm-card{position:relative;transition:transform .7s var(--hm-ease),border-color .5s,box-shadow .7s var(--hm-ease)}
.hm-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(217,95,74,.10),transparent 60%);
  transition:opacity .5s}
@media (hover:hover){
  .hm-card:hover{transform:translateY(-6px);border-color:rgba(217,95,74,.45)!important;
    box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(217,95,74,.12)}
  .hm-card:hover::after{opacity:1}
}

/* ---- the hero's cursor light (desktop): weighted, soft, coral */
.hm-light{position:absolute;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(217,95,74,.11),rgba(217,95,74,0) 62%);transition:opacity .9s var(--hm-ease)}

/* ---- nav: the section you are in, in coral */
.hm-nav a.hm-active{color:var(--hm-coral)!important}

@media (prefers-reduced-motion:reduce){
  .hm-h .hm-wi,.hm-h .hm-dot,.rv,.hm-line::before{transition:none!important;transform:none!important;opacity:1!important;filter:none!important}
  .hm-burst svg,.hm-burst::after,.hm-glow{animation:none!important}
  .hm-progress{display:none}
  .hm-card,.hm-btn{transition:none!important}
}