/* Intro curtain */
.loader{display:none}
.js .loader{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:#0f0d14;transition:transform .9s cubic-bezier(.77,0,.18,1)}
.loader.done{transform:translateY(-100%)}
.loader-name{display:flex;overflow:hidden;padding:.1em .05em;font-family:var(--font-head);font-size:clamp(2.2rem,7vw,4rem);color:var(--text)}
.loader-name span{display:inline-block;opacity:0;animation:charIn .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d) * 70ms + .1s)}
.loader-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:loadBar 1.4s ease forwards}
@keyframes loadBar{to{transform:scaleX(1)}}
@keyframes charIn{from{opacity:0;transform:translateY(110%) rotate(8deg)}to{opacity:1;transform:none}}
.js body:not(.ready) .hero-left>*,.js body:not(.ready) .hero-right{animation-play-state:paused}

/* Hero: split headline, particles, parallax, 3D photo */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .02em .12em}
.ch{display:inline-block;opacity:0;transform:translateY(110%)}
.ready .ch{animation:charIn .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d) * 50ms + .25s)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .blob1{translate:calc(var(--mx,0) * -50px) calc(var(--my,0) * -50px);transition:translate .8s ease-out}
.hero .blob2{translate:calc(var(--mx,0) * 60px) calc(var(--my,0) * 60px);transition:translate .8s ease-out}
.image-ring{translate:calc(var(--mx,0) * 16px) calc(var(--my,0) * 16px);transition:translate .5s ease-out}
.image-box img{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out;box-shadow:0 30px 60px rgba(0,0,0,.5)}

/* Section titles: words rise from a mask */
.sw{display:inline-block;overflow:hidden;vertical-align:top;margin-right:.25em;padding-bottom:.1em}
.sw>span{display:inline-block;transform:translateY(115%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--w) * 90ms)}
.section-title.show .sw>span{transform:none}

/* Spotlight that follows the pointer inside cards */
.spot{position:relative}
.spot::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--x,50%) var(--y,50%),rgba(217,185,138,.18),transparent 60%)}
.spot:hover::before{opacity:1}

/* Cursor */
.cursor-dot,.cursor-ring,.cursor-glow{position:fixed;left:0;top:0;pointer-events:none;border-radius:50%;opacity:0}
.cursor-dot,.cursor-ring{z-index:6000;mix-blend-mode:difference}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff}
.cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid #fff;transition:width .3s,height .3s,margin .3s,background .3s,opacity .3s}
.cursor-ring.hover{width:76px;height:76px;margin:-38px 0 0 -38px;background:#fff}
.cursor-glow{z-index:0;width:600px;height:600px;margin:-300px 0 0 -300px;background:radial-gradient(circle,rgba(217, 185, 138, 0.032),transparent 67%);transition:opacity .3s}
.cursor-on .cursor-dot,.cursor-on .cursor-ring,.cursor-on .cursor-glow{opacity:1}
.has-cursor,.has-cursor *{cursor:none}
.has-cursor input,.has-cursor textarea{cursor:text}

@media(prefers-reduced-motion:reduce){
    .loader{display:none!important}
    .ch,.sw>span{opacity:1!important;transform:none!important}
}
