/* Layered entrances and scroll motion, matching the Pika reference. */
.motion-mask{display:block;overflow:hidden;padding:.12em 0;margin:-.12em 0;translate:0 calc(var(--heading-splay,0px)*var(--line-position,0))}
.motion-line{display:block;transition:transform 1.05s var(--ease),opacity .8s var(--ease);transition-delay:var(--line-delay,0ms)}
.motion-ready .motion-heading:not(.is-entered) .motion-line{transform:translateY(115%);opacity:0}
.motion-heading .motion-mask + .motion-mask{margin-top:0}
.motion-word{display:inline-block;transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:var(--word-delay,0ms)}
.motion-ready .motion-copy:not(.is-entered) .motion-word{opacity:.12;transform:translateY(12px);filter:blur(3px)}
.motion-reveal{transition:opacity .85s var(--ease),transform .95s var(--ease),filter .85s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-reveal:not(.is-entered){opacity:0;transform:translateY(38px) scale(.98);filter:blur(3px)}
.motion-ready .hero video{height:118%;top:-9%;transform:translate3d(0,var(--hero-y,0px),0)}
.motion-ready .hero-content{transform:translate3d(0,var(--hero-copy-y,0px),0);opacity:var(--hero-copy-opacity,1)}
.hero-tagline{animation:tagline-in 1.1s .25s var(--ease) both}
@keyframes tagline-in{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.motion-ready .workflow-tabs{position:relative;isolation:isolate}
.motion-ready .workflow-tabs:before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:var(--tab-width,0px);transform:translateX(var(--tab-x,5px));border-radius:40px;background:#2e2e2e;transition:transform .5s var(--ease),width .5s var(--ease);z-index:-1}
.motion-ready .workflow-tabs button[aria-selected=true]{background:transparent}
.motion-ready .workflow-panel{animation:none}
.motion-ready .workflow-card>img,.motion-ready .workflow-card>video{transform:translate3d(0,var(--media-y,0px),0) scale(1.08);transition:transform .8s var(--ease)}
.workflow-copy h3,.workflow-copy .cta{transition:translate .55s var(--ease)}
.app-icon{transition:transform .65s var(--ease)}
.app-card.active .app-icon{transform:rotate(-5deg)}
.club-scene{border-radius:var(--club-radius,12px)}
.motion-ready .club-title{translate:0 var(--club-title-y,0px)}
.creation>img,.creation>video{transition:transform .8s var(--ease)}
.footer-logotype{transform:translateY(var(--logo-y,28%));transition:transform .25s linear}
.footer-logotype .stroke-invert-300{opacity:var(--logo-glow,0)}
.faq-answer p{animation:none}
.cta{overflow:hidden}
.cta:after{content:'';position:absolute;top:-50%;left:-60%;height:200%;width:35%;background:linear-gradient(90deg,transparent,#ffffff35,transparent);transform:translateX(0) rotate(18deg);pointer-events:none;transition:transform .7s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .cta:hover:after{transform:translateX(600%) rotate(18deg)}
  .motion-ready .workflow-card:hover>img,.motion-ready .workflow-card:hover>video{transform:translate3d(0,var(--media-y,0px),0) scale(1.13)}
  .workflow-card:hover .workflow-copy h3,.workflow-card:hover .workflow-copy .cta{translate:0 -5px}
  .app-card:hover .app-icon{transform:rotate(0deg) scale(1.07)}
  .creation:hover>img,.creation:hover>video{transform:scale(1.055)}
}
@media(max-width:767px){.motion-mask{translate:none}.motion-ready .club-title{translate:none}.club-scene{border-radius:12px}}
@media(prefers-reduced-motion:reduce){
  .motion-mask,.motion-line,.motion-word,.motion-reveal,.footer-logotype,.workflow-copy h3,.workflow-copy .cta,.club-title{transform:none!important;translate:none!important;opacity:1!important;filter:none!important}
  .hero-tagline{animation:none}
  .app-icon,.creation>img,.creation>video,.workflow-card>img,.workflow-card>video{transform:none!important}
  .cta:after{display:none}
}