/* Motion layer. Calm and slow: long ease-out curves, small distances, nothing bouncy.
   Everything lives inside prefers-reduced-motion: no-preference, so reduced-motion
   visitors get the finished page with no movement. Hidden start states only apply
   when JS is running (html.js), so the page never stays blank. */

.live{position:relative;flex:none;width:8px;height:8px;border-radius:4px;background:#8CC9A6}
.page{position:relative;isolation:isolate;overflow-x:clip}
.aura{position:absolute;inset:0 0 auto;height:1400px;z-index:-1;pointer-events:none;overflow:hidden}
.aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.aura i:nth-child(1){width:520px;height:520px;left:-120px;top:120px;background:#DDEBE2}
.aura i:nth-child(2){width:460px;height:460px;right:-100px;top:40px;background:#F6D5CF;opacity:.45}
.aura i:nth-child(3){width:620px;height:620px;left:30%;top:640px;background:#EFE2DC;opacity:.7}
.glow-box{position:relative;isolation:isolate;overflow:hidden}
.glow-box::before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 28% 30%,rgba(140,201,166,.13),transparent 32%),
             radial-gradient(circle at 74% 72%,rgba(220,133,118,.10),transparent 36%)}
.m-feel{background:#EFE2DC;color:#2A1D21}
.m-feel.on{background:#2F6A4F;color:#FFFFFF}
.m-wave{clip-path:inset(0 62% 0 0)}

@media (prefers-reduced-motion: no-preference){
  :root{--ease:cubic-bezier(.22,1,.36,1);--soft:cubic-bezier(.45,0,.55,1)}

  /* Hero, on load */
  @keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
  .js .ld{animation:rise 1.2s var(--ease) both;animation-delay:var(--d,0ms)}

  /* Hero phones: the centre one rises, the side ones fan out from behind it */
  @keyframes ph-c{from{opacity:0;transform:translateY(90px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes ph-l{from{opacity:0;transform:translate(90px,50px) rotate(6deg) scale(.94)}to{opacity:1;transform:none}}
  @keyframes ph-r{from{opacity:0;transform:translate(-90px,50px) rotate(-6deg) scale(.94)}to{opacity:1;transform:none}}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .js .ph-c>[role=img]{animation:ph-c 1.5s var(--ease) .55s both}
  .js .ph-l>[role=img]{animation:ph-l 1.6s var(--ease) .85s both}
  .js .ph-r>[role=img]{animation:ph-r 1.6s var(--ease) .95s both}
  .js .ph-m>[role=img]{animation:ph-c 1.5s var(--ease) 1.05s both}
  @media (min-width:641px){
    .js .ph-c>[role=img]{animation:ph-c 1.5s var(--ease) .55s both,bob 7s var(--soft) 2.1s infinite}
    .js .ph-l>[role=img]{animation:ph-l 1.6s var(--ease) .85s both,bob 8s var(--soft) 2.5s infinite}
    .js .ph-r>[role=img]{animation:ph-r 1.6s var(--ease) .95s both,bob 9s var(--soft) 2.9s infinite}
  }

  /* Scroll reveals */
  .js .rv{opacity:0;transform:translateY(26px);filter:blur(5px);
    transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0ms)}
  .js .rv.is-in{opacity:1;transform:none;filter:blur(0)}
  .js .rv-ph{opacity:0;transform:translateY(70px) rotate(-2.5deg) scale(.97);
    transition:opacity 1.1s var(--ease),transform 1.5s var(--ease);transition-delay:var(--d,0ms)}
  .js .rv-ph.is-in{opacity:1;transform:none}
  @keyframes pop{0%{transform:scale(.4) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
  .js .rv .ico{opacity:0}
  .js .rv.is-in .ico{animation:pop .9s var(--ease) both;animation-delay:calc(var(--d,0ms) + 300ms)}

  /* Ambient background */
  @keyframes drift1{to{transform:translate(90px,60px) scale(1.12)}}
  @keyframes drift2{to{transform:translate(-80px,90px) scale(.9)}}
  @keyframes drift3{to{transform:translate(-60px,-50px) scale(1.08)}}
  .aura i:nth-child(1){animation:drift1 26s var(--soft) infinite alternate}
  .aura i:nth-child(2){animation:drift2 31s var(--soft) infinite alternate}
  .aura i:nth-child(3){animation:drift3 37s var(--soft) infinite alternate}
  @keyframes swirl{to{transform:rotate(360deg)}}
  .glow-box::before{animation:swirl 60s linear infinite}

  /* Small details */
  @keyframes live{0%{box-shadow:0 0 0 0 rgba(140,201,166,.6)}70%,100%{box-shadow:0 0 0 8px rgba(140,201,166,0)}}
  .live{animation:live 2.8s var(--soft) infinite}
  @keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
  .leaf{transform-origin:20% 85%;animation:sway 6s var(--soft) infinite}
  .cta,.pf,.pfb{transition:transform .25s var(--ease),background-color .35s,border-color .35s,color .35s,box-shadow .35s}
  .cta:hover{transform:translateY(-1px)}
  .cta:active,.pf:active,.pfb:active{transform:scale(.97)}
  #waitlist .cta:hover{box-shadow:0 12px 24px -12px rgba(47,106,79,.6)}
  .wl-done:not([hidden]){animation:rise .9s var(--ease) both}
  .wl-err:not([hidden]){animation:rise .5s var(--ease) both}
  a[href="/sources"] svg{transition:transform .4s var(--ease)}
  a[href="/sources"]:hover svg{transform:translateX(2px) rotate(-6deg)}
  article.rv{transition-property:opacity,transform,filter,box-shadow}
  article.rv.is-in:hover{box-shadow:0 18px 40px -26px rgba(74,40,48,.35)}

  /* Inside the phone mockups */
  @keyframes breathe{0%,100%{transform:scale(.92);opacity:.07}50%{transform:scale(1.16);opacity:.13}}
  .m-breathe{animation:breathe 5.5s var(--soft) infinite}
  @keyframes dot{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
  .m-dot{transform-box:fill-box;transform-origin:center;animation:dot 5.5s var(--soft) infinite}
  .m-seg{transition:transform 1s linear}
  @keyframes tension{0%,100%{opacity:1}50%{opacity:.45}}
  .m-pulse{animation:tension 3.6s var(--soft) infinite}
  .m-pulse2{animation-delay:-1.2s}
  @keyframes play{0%{clip-path:inset(0 100% 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
  .m-wave{animation:play 7s linear infinite}
  @keyframes glow{0%{box-shadow:0 0 0 0 rgba(47,106,79,.32)}60%,100%{box-shadow:0 0 0 10px rgba(47,106,79,0)}}
  .m-glow{animation:glow 3.6s var(--soft) infinite}
  .m-feel{transition:background-color .6s var(--ease),color .6s var(--ease)}
  .js .m-bar{transform:scaleY(0);transform-origin:bottom;transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 55ms + 250ms)}
  .js .is-in .m-bar,.js .ld .m-bar,.js [role=img].is-in .m-bar{transform:none}
  .js .m-row{opacity:0;transform:translateX(18px);transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i) * 110ms + 450ms)}
  .js [role=img].is-in .m-row{opacity:1;transform:none}
}