/* Scroll reveal (class is added by motion.js only, never hidden by default) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
/* Drifting colour orbs behind the page */
.orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orbs i{position:absolute;width:42vmax;height:42vmax;border-radius:50%;filter:blur(70px);opacity:.26;will-change:transform}
.orbs i:nth-child(1){background:var(--accent);left:-10vmax;top:-8vmax;animation:orbA 26s ease-in-out infinite alternate}
.orbs i:nth-child(2){background:var(--accent2);right:-12vmax;bottom:-12vmax;animation:orbB 32s ease-in-out infinite alternate}
[data-motion="subtle"] .orbs i{opacity:.15;animation-duration:55s}
@keyframes orbA{to{transform:translate(18vmax,12vmax) scale(1.15)}}@keyframes orbB{to{transform:translate(-16vmax,-10vmax) scale(.9)}}
/* Entrance */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
[data-motion="subtle"] .profile>*,[data-motion="lively"] .profile>*,[data-motion="subtle"] .links>*,[data-motion="lively"] .links>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards}
[data-motion] .profile>*:nth-child(2){animation-delay:.06s}[data-motion] .profile>*:nth-child(3){animation-delay:.12s}[data-motion] .profile>*:nth-child(4){animation-delay:.18s}[data-motion] .profile>*:nth-child(5){animation-delay:.24s}[data-motion] .profile>*:nth-child(6){animation-delay:.3s}[data-motion] .profile>*:nth-child(7){animation-delay:.36s}
[data-motion] .links>*:nth-child(1){animation-delay:.15s}[data-motion] .links>*:nth-child(2){animation-delay:.22s}[data-motion] .links>*:nth-child(3){animation-delay:.29s}[data-motion] .links>*:nth-child(4){animation-delay:.36s}[data-motion] .links>*:nth-child(n+5){animation-delay:.43s}
/* Lively extras */
[data-motion="lively"] .bio-link{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,translate .25s,border-color .25s,box-shadow .25s,background .25s}
[data-motion="lively"] .avatar-wrap img{animation:ring 3.6s ease-in-out infinite}
@keyframes ring{0%,100%{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent),0 14px 44px color-mix(in srgb,var(--accent) 38%,transparent)}50%{box-shadow:0 0 0 3px var(--bg),0 0 0 7px var(--accent),0 18px 58px color-mix(in srgb,var(--accent) 60%,transparent)}}
[data-motion="lively"] .profile h1{background:linear-gradient(90deg,var(--text) 0%,var(--text) 38%,var(--accent) 50%,var(--text) 62%,var(--text) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .7s cubic-bezier(.2,.7,.2,1) .18s backwards,shine 7s linear 1s infinite}
@keyframes shine{from{background-position:100% 0}to{background-position:-100% 0}}
[data-motion="lively"] .bio-link.featured:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-130%);animation:sweep 5.5s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
[data-motion="lively"] .profile .badge{animation:rise .7s cubic-bezier(.2,.7,.2,1) .12s backwards,bob 4s ease-in-out .8s infinite}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
[data-motion="lively"] .status i,[data-motion="subtle"] .status i{animation:dot 2.2s ease-out infinite}
@keyframes dot{0%{box-shadow:0 0 0 0 rgba(61,220,132,.5)}70%,100%{box-shadow:0 0 0 8px rgba(61,220,132,0)}}
[data-motion="lively"] .product-visual{background-size:200% 200%;animation:flow 9s ease-in-out infinite alternate}
@keyframes flow{from{background-position:0 0}to{background-position:100% 100%}}
/* Click ripple */
.buy,[data-ripple]{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* Scroll progress bar */
.scroll-bar{position:fixed;left:0;top:0;right:0;height:3px;z-index:60;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent,#e4c5ad),var(--accent2,#fff));pointer-events:none;transition:transform .12s linear}
/* Floating sparkles */
.sparks{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sparks i{position:absolute;bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:var(--accent,#e4c5ad);opacity:0;box-shadow:0 0 10px var(--accent,#e4c5ad);animation:floatUp var(--t) linear var(--dl) infinite}
@keyframes floatUp{0%{opacity:0;transform:translate(0,0)}10%{opacity:.7}90%{opacity:.5}100%{opacity:0;transform:translate(var(--dx),-108vh)}}
/* Spotlight that follows the cursor inside cards */
.bio-link,.product,.features article,.gallery .card{--mx:50%;--my:50%}
@media(hover:hover){
  [data-motion] .bio-link::before,[data-motion] .product::before,[data-motion] .features article::before,[data-motion] .gallery .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent,#e4c5ad) 22%,transparent),transparent 70%)}
  [data-motion] .bio-link:hover::before,[data-motion] .product:hover::before,[data-motion] .features article:hover::before,[data-motion] .gallery .card:hover::before{opacity:1}
}
.bio-link,.product,.features article,.gallery .card{position:relative}
/* Magnetic buttons */
[data-motion="lively"] .button.primary,[data-motion="lively"] .buy,[data-motion="lively"] .header-actions>*{transform:translate(var(--tx,0),var(--ty,0))}
/* Cover parallax and gentle zoom */
[data-motion="lively"] .cover{transform:translateY(var(--py,0));will-change:transform}
/* Avatar hover pop */
[data-motion] .avatar-wrap{transition:transform .5s cubic-bezier(.2,.9,.3,1.4)}
[data-motion] .avatar-wrap:hover{transform:scale(1.06) rotate(-3deg)}
/* Home hero: floating mock card and pulsing CTA */
[data-motion="lively"] .mock-card{animation:hover 6s ease-in-out infinite}
@keyframes hover{0%,100%{translate:0 0}50%{translate:0 -12px}}
[data-motion="lively"] .button.primary.big{animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent,#e4c5ad) 50%,transparent)}70%,100%{box-shadow:0 0 0 16px transparent}}
/* Page fade-in */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
[data-motion] body{animation:pageIn .5s ease backwards}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.orbs,.sparks,.scroll-bar{display:none}}