/* Portfolio motion layer. Animations are composited with opacity and transforms. */
:root{--animation-ease:cubic-bezier(.2,.75,.25,1);--pastel-mint:#a8f0df;--pastel-lilac:#d2c7ff;--pastel-peach:#ffd8c2;--scroll-progress:0}

/* Masked, staggered hero name. */
.hero-name-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.hero-name-word{display:inline-block;translate:0 112%;opacity:0}
.hero-animation-ready .hero-name-word{animation:hero-word-rise .82s var(--animation-ease) forwards;animation-delay:calc(100ms + var(--hero-word-index,0)*125ms)}
@keyframes hero-word-rise{to{translate:0 0;opacity:1}}
.hero-animation-ready .role,.hero-animation-ready .hero-desc,.hero-animation-ready .hero-actions,.hero-animation-ready .portrait-stage{animation:hero-detail-in .8s var(--animation-ease) both;animation-delay:var(--hero-detail-delay,650ms)}
.hero-animation-ready .role{--hero-detail-delay:670ms}.hero-animation-ready .hero-desc{--hero-detail-delay:790ms}.hero-animation-ready .hero-actions{--hero-detail-delay:910ms}.hero-animation-ready .portrait-stage{--hero-detail-delay:820ms}
@keyframes hero-detail-in{from{opacity:0;translate:0 14px;scale:.985}to{opacity:1;translate:0 0;scale:1}}

/* Lightweight supplemental reveals on pages without the existing reveal script. */
.premium-reveal{opacity:0;translate:0 18px;transition:opacity .7s var(--animation-ease),translate .7s var(--animation-ease);transition-delay:var(--premium-delay,0ms)}
.premium-reveal.premium-visible{opacity:1;translate:0 0}
.design-card.premium-reveal{scale:.985}.design-card.premium-reveal.premium-visible{scale:1}

/* Card lift and pointer-following warm light. */
.category{--spotlight-x:50%;--spotlight-y:50%;will-change:transform}
.category:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(340px circle at var(--spotlight-x) var(--spotlight-y),#d7a05d38,transparent 68%);transition:opacity .3s ease}
.category:hover{transform:translateY(-5px) scale(1.012)}.category:hover:after{opacity:1}

/* Gentle button pull and portrait parallax use individual translate to preserve existing transforms. */
.magnetic-motion{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .22s var(--animation-ease)}
.hero .portrait-stage img{translate:var(--portrait-shift-x,0px) var(--portrait-shift-y,0px);transition:translate .3s var(--animation-ease)}

/* Thin reading progress indicator and subtle static grain texture. */
#page-progress{position:fixed;z-index:1000;inset:0 0 auto;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--pastel-mint),var(--pastel-lilac),var(--pastel-peach));scale:var(--scroll-progress) 1;transform-origin:left center}
#film-grain{position:fixed;inset:-30%;z-index:90;pointer-events:none;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");background-size:180px 180px;animation:grain-drift 1.1s steps(2,end) infinite alternate}
@keyframes grain-drift{to{translate:1% -1%;opacity:.09}}

/* Pastel desktop cursor glow, applied to the site's existing cursor element. */
@media(hover:hover) and (pointer:fine){.premium-cursor{border-color:#d6d2e9;background:#c9eddf20;box-shadow:0 0 18px #bfeedd48,0 0 38px #d3c8ff24}.premium-cursor:after{background:radial-gradient(circle,#b8f1e738 0%,#d4c7ff20 36%,#ffd8c214 58%,transparent 74%)}.premium-cursor.cursor-hover{border-color:#c8f3e4;background:#d2c7ff24;box-shadow:0 0 25px #b8f1e760,0 0 46px #d4c7ff40}}
/* Use the native pointer over the modal player; the browser hides it less reliably
   when a custom cursor is layered over native playback controls. */
html.video-player-open,html.video-player-open a,html.video-player-open button{cursor:auto!important}
html.video-player-open .premium-cursor{opacity:0!important;visibility:hidden}

@media(prefers-reduced-motion:reduce){
  #page-progress,#film-grain{display:none!important}
  .hero-name-word{translate:0 0;opacity:1;animation:none!important}
  .hero-animation-ready .role,.hero-animation-ready .hero-desc,.hero-animation-ready .hero-actions,.hero-animation-ready .portrait-stage{opacity:1;translate:0 0;scale:1;animation:none!important}
  .premium-reveal,.premium-reveal.premium-visible,.design-card.premium-reveal,.design-card.premium-reveal.premium-visible{opacity:1;translate:0 0;scale:1;transition:none}
  .category,.category:hover{transform:none;transition:none}.category:after{display:none}
  .magnetic-motion,.hero .portrait-stage img{translate:0 0;transition:none}
}