/* Landing-page motion: progressive enhancement, disabled for reduced motion. */
.hero{isolation:isolate}
.hero-reward-mascot{--mascot-x:0px;--mascot-y:0px;position:absolute;z-index:0;top:4%;left:31%;width:clamp(390px,38vw,610px);height:92%;pointer-events:none;overflow:hidden;opacity:.2;filter:saturate(.88) drop-shadow(0 26px 45px rgba(65,34,126,.13));-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 19%,#000 74%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 19%,#000 74%,transparent 100%)}
.hero-reward-mascot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:translate3d(var(--mascot-x),var(--mascot-y),0) scale(1.04);transition:transform .65s cubic-bezier(.2,.72,.2,1)}
.hero-copy,.hero-visual{position:relative;z-index:2}

@media (prefers-reduced-motion:no-preference){
  .motion-ready.motion-loaded .hero-reward-mascot{animation:mascot-breathe 6.2s 1s ease-in-out infinite}
  .motion-ready .hero-copy>*{opacity:0;transform:translateY(22px)}
  .motion-ready .hero-visual{opacity:0;transform:translate3d(28px,18px,0) scale(.97)}
  .motion-ready.motion-loaded .hero-copy>*{animation:landing-rise .72s cubic-bezier(.2,.72,.2,1) forwards}
  .motion-ready.motion-loaded .hero-copy>*:nth-child(2){animation-delay:.09s}
  .motion-ready.motion-loaded .hero-copy>*:nth-child(3){animation-delay:.17s}
  .motion-ready.motion-loaded .hero-copy>*:nth-child(4){animation-delay:.25s}
  .motion-ready.motion-loaded .hero-copy>*:nth-child(5){animation-delay:.33s}
  .motion-ready.motion-loaded .hero-visual{animation:landing-visual-in .9s .12s cubic-bezier(.16,.84,.24,1) forwards}
  .motion-ready.motion-loaded .hero-visual .phone{animation:phone-float 5.5s 1.1s ease-in-out infinite}
  .motion-ready.motion-loaded .reward-pop{animation:float-card-left 4.4s 1.4s ease-in-out infinite}
  .motion-ready.motion-loaded .secure-pop{animation:float-card-right 4.8s 1.65s ease-in-out infinite}

  .motion-ready .scroll-reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .78s cubic-bezier(.2,.72,.2,1)}
  .motion-ready .scroll-reveal.reveal-left{transform:translateX(-32px)}
  .motion-ready .scroll-reveal.reveal-right{transform:translateX(32px)}
  .motion-ready .scroll-reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
  .motion-ready .scroll-stagger>*{opacity:0;transform:translateY(22px);transition:opacity .58s ease,transform .65s cubic-bezier(.2,.72,.2,1)}
  .motion-ready .scroll-stagger.is-visible>*{opacity:1;transform:none}
  .motion-ready .scroll-stagger.is-visible>*:nth-child(2){transition-delay:.07s}
  .motion-ready .scroll-stagger.is-visible>*:nth-child(3){transition-delay:.14s}
  .motion-ready .scroll-stagger.is-visible>*:nth-child(4){transition-delay:.21s}
  .motion-ready .scroll-stagger.is-visible>*:nth-child(5){transition-delay:.28s}

  .public-task-grid article,.steps article,.benefit-list article,.faq-list article{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
  .public-task-grid article:hover,.steps article:hover,.benefit-list article:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(6,63,67,.12)}
  .hero-primary,.join-button,.cta>a{transition:transform .2s ease,box-shadow .2s ease}
  .hero-primary:hover,.join-button:hover,.cta>a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(8,125,120,.25)}
  .portal-sidebar[data-header-mode="guest"]{transition:box-shadow .25s ease,background-color .25s ease}
  .landing-scrolled .portal-sidebar[data-header-mode="guest"]{box-shadow:0 12px 34px rgba(6,63,67,.14)}
}

@keyframes landing-rise{to{opacity:1;transform:translateY(0)}}
@keyframes landing-visual-in{to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(1.35deg)}}
@keyframes float-card-left{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-5px,-9px,0)}}
@keyframes float-card-right{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(6px,-8px,0)}}
@keyframes mascot-breathe{0%,100%{opacity:.18;translate:0 0}50%{opacity:.24;translate:0 -8px}}

@media(max-width:1100px){
  .hero-reward-mascot{left:26%;width:48vw;opacity:.14}
}
@media(max-width:760px){
  .hero-reward-mascot{z-index:1;top:1.5%;right:-7%;left:auto;width:64vw;height:42%;opacity:.18;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 84%,transparent 100%)}
  .hero-reward-mascot img{object-position:center top;transform:translate3d(var(--mascot-x),var(--mascot-y),0) scale(.96)}
}
@media(max-width:480px){
  .hero-reward-mascot{top:2.5%;right:-13%;width:70vw;height:39%;opacity:.17}
}

@media (prefers-reduced-motion:reduce){
  .motion-ready *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}