/* 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 */
/* The mask needs ROOM: .08em clipped the bottom of the coral full stop on big headlines, worst
   while the stop settles past full size (16 Oct, "Free for 30 days." on the pilot). The padding
   gives the stop space below and beside it; the equal negative margins keep the layout unmoved. */
.hm-h .hm-w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.04em .12em .24em 0;margin:-.04em -.12em -.24em 0}
.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}
}