/* Animated welcome: aurora background, staged entrance, floating phones with pointer tilt, status chips, marquee and scroll reveals. */
.hero{isolation:isolate}
.hero-aurora{position:absolute;top:-140px;bottom:-40px;left:calc(50% - 50vw);width:100vw;max-width:100vw;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.hero-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:.6;width:min(46vw,640px);height:min(46vw,640px);animation:h-aurora 18s ease-in-out infinite alternate;will-change:transform}
.hero-aurora i:nth-child(1){left:-4%;top:-4%;background:#7c3aed59}
.hero-aurora i:nth-child(2){right:-2%;top:4%;background:#ec489940;animation-delay:-6s}
.hero-aurora i:nth-child(3){left:36%;bottom:-18%;background:#6366f13d;animation-delay:-11s}
.hero-aurora:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 62% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 62% 40%,#000,transparent 75%);opacity:.55}
.hero-aurora:after{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--mx,68%) var(--my,34%),#a78bfa2e,transparent 70%);transition:background .15s linear}
@keyframes h-aurora{to{transform:translate3d(4vw,3vw,0) scale(1.18)}}

.hero-copy>*{opacity:0;transform:translateY(20px);animation:h-rise .85s cubic-bezier(.2,.8,.2,1) forwards}
.hero-copy>:nth-child(1){animation-delay:.05s}.hero-copy>:nth-child(2){animation-delay:.18s}.hero-copy>:nth-child(3){animation-delay:.34s}
.hero-copy>:nth-child(4){animation-delay:.48s}.hero-copy>:nth-child(5){animation-delay:.62s}.hero-copy>:nth-child(6){animation-delay:.76s}
@keyframes h-rise{to{opacity:1;transform:none}}
.hero h1 .gradient-text{background-image:linear-gradient(100deg,#ae9cff 0%,#cb9df0 25%,#efa0d9 50%,#cb9df0 75%,#ae9cff 100%);background-size:220% 100%;animation:h-shine 7s linear infinite}
@keyframes h-shine{to{background-position:-220% 0}}
.hero .status-dot{animation:h-ping 2.4s ease-out infinite}
@keyframes h-ping{0%{box-shadow:0 0 0 0 #4ade8088}80%,100%{box-shadow:0 0 0 9px #4ade8000}}

.hero .actions .button-primary{position:relative;overflow:hidden;animation:h-glow 3.6s ease-in-out infinite}
.hero .actions .button-primary:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);animation:h-sweep 4.2s ease-in-out 1.4s infinite}
.hero .actions .button-primary span{display:inline-block;transition:transform .2s}
.hero .actions .button-primary:hover span{transform:translate(3px,-3px)}
@keyframes h-glow{0%,100%{box-shadow:0 8px 30px #7c3aed40}50%{box-shadow:0 10px 46px #a855f777}}
@keyframes h-sweep{0%{left:-60%}38%,100%{left:140%}}
.hero .text-link span{display:inline-block;animation:h-bob 1.8s ease-in-out infinite}
@keyframes h-bob{50%{transform:translateY(4px)}}
.hero-details span{opacity:0;animation:h-rise .6s ease forwards}
.hero-details span:nth-child(1){animation-delay:1s}.hero-details span:nth-child(2){animation-delay:1.1s}.hero-details span:nth-child(3){animation-delay:1.2s}.hero-details span:nth-child(4){animation-delay:1.3s}

/* stage: pointer tilt, floating phones, status chips */
.paywall-stage{transform:perspective(1400px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .25s ease-out;transform-style:flat}
.paywall-stage .mobile-wall{animation:w-in 1s cubic-bezier(.2,.9,.2,1) both,w-float 7s ease-in-out 1s infinite}
.paywall-stage .wall-fitness{animation-delay:.25s,1.25s}
.paywall-stage .wall-creative{animation-delay:.1s,1.1s;animation-duration:1s,8s}
.paywall-stage .wall-mindful{animation-delay:.4s,1.4s;animation-duration:1s,6.5s}
.paywall-stage .publish-hub{animation:w-in .8s cubic-bezier(.2,.9,.2,1) both}
.mobile-wall:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#ffffff1f 50%,transparent 65%);transform:translateX(-120%);animation:w-glint 6s ease-in-out 2s infinite;pointer-events:none}
.wall-mindful:after{animation-delay:3.2s}.wall-fitness:after{animation-delay:4.4s}
@keyframes w-in{from{opacity:0;scale:.86;translate:0 46px}to{opacity:1;scale:1;translate:0 0}}
@keyframes w-float{50%{translate:0 -13px}}
@keyframes w-glint{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

.stage-chip{position:absolute;z-index:8;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;font-size:11px;font-weight:700;color:#efe9ff;background:#1d1631eb;border:1px solid #bd9bff44;box-shadow:0 10px 30px #0006;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;opacity:0;pointer-events:none;animation:chip-cycle 15s ease-in-out infinite}
.stage-chip i{width:8px;height:8px;border-radius:50%;background:var(--c,#4ade80);box-shadow:0 0 10px var(--c,#4ade80)}
.chip-1{left:-3%;top:21%;--c:#4ade80;animation-delay:2s}
.chip-2{right:0;top:21%;--c:#f472b6;animation-delay:5s}
.chip-3{left:0;bottom:27%;--c:#60a5fa;animation-delay:8s}
.chip-4{right:1%;bottom:25%;--c:#c084fc;animation-delay:11s}
.chip-5{left:17%;bottom:9%;--c:#fbbf24;animation-delay:14s}
@keyframes chip-cycle{0%{opacity:0;translate:0 14px;scale:.92}3%{opacity:1;translate:0 0;scale:1}17%{opacity:1;translate:0 -4px}21%,100%{opacity:0;translate:0 -14px;scale:.96}}

/* marquee */
.platform-strip.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:46px;padding:24px 23px}
.marquee-set span{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:13px;font-weight:600;color:#b9afd0;letter-spacing:.2px}
.marquee-set span:before{content:"✦";color:#8b5cf6;font-size:11px}
@keyframes marq{to{transform:translateX(-50%)}}

/* scroll reveal (classes are added by JS, so nothing is hidden without it) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1100px){.chip-2{right:5%}}
@media(max-width:800px){
  .hero-aurora i{filter:blur(60px)}
  .stage-chip{font-size:10px;padding:7px 11px}
  .chip-1{left:0;top:25%}.chip-2{right:0;top:15%}.chip-3{left:0;bottom:30%}.chip-4{right:0;bottom:27%}.chip-5{left:8%;bottom:8%}
  .marquee-set{gap:34px;padding:20px 17px}
}
@media(max-width:480px){.stage-chip{max-width:92%;font-size:9.5px}.hero-copy>*{animation-duration:.7s}}
@media(prefers-reduced-motion:reduce){
  .hero-aurora i,.hero h1 .gradient-text,.hero .status-dot,.hero .actions .button-primary,.hero .actions .button-primary:after,.hero .text-link span,.mobile-wall:after,.marquee-track{animation:none!important}
  .hero-copy>*,.hero-details span{opacity:1;transform:none;animation:none}
  .paywall-stage .mobile-wall,.paywall-stage .publish-hub{animation:none}
  .stage-chip{animation:none;opacity:0}.chip-1{opacity:1}
  .paywall-stage{transform:none}
  .reveal{opacity:1;transform:none;transition:none}
}