/* ===== Extra motion & polish ===== */
html{scroll-behavior:smooth}
/* hero entrance */
.hero-copy.reveal{opacity:1;transform:none}
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-intro,.hero-copy .hero-actions,.hero-copy .hero-stats>div,.hero-copy .hero-scroll-inline{opacity:0;transform:translateY(26px);animation:fxUp .85s cubic-bezier(.2,.8,.2,1) forwards}
.hero-copy .eyebrow{animation-delay:.1s}.hero-copy h1{animation-delay:.25s}.hero-copy .hero-intro{animation-delay:.45s}.hero-copy .hero-actions{animation-delay:.6s}
.hero-copy .hero-stats>div:nth-child(1){animation-delay:.75s}.hero-copy .hero-stats>div:nth-child(2){animation-delay:.85s}.hero-copy .hero-stats>div:nth-child(3){animation-delay:.95s}.hero-copy .hero-stats>div:nth-child(4){animation-delay:1.05s}
.hero-copy .hero-scroll-inline{animation-delay:1.2s}
@keyframes fxUp{to{opacity:1;transform:none}}
.hero h1 em{background:linear-gradient(100deg,#c87936 20%,#f0b36a 45%,#c87936 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShine 5s ease-in-out infinite}
@keyframes fxShine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.art-glow{animation:fxBreathe 6s ease-in-out infinite}
@keyframes fxBreathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
.hero-art{position:relative}
.fx-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#f0b36a,#c87936);opacity:.55;filter:blur(.4px);animation:fxFloat 7s ease-in-out infinite;pointer-events:none;z-index:0}
.fx-dot.d1{left:8%;top:14%;animation-delay:0s}.fx-dot.d2{left:84%;top:22%;width:14px;height:14px;animation-delay:-2s}.fx-dot.d3{left:70%;top:72%;width:8px;height:8px;animation-delay:-4s}.fx-dot.d4{left:18%;top:78%;width:12px;height:12px;animation-delay:-1s}.fx-dot.d5{left:48%;top:6%;width:7px;height:7px;animation-delay:-3s}
@keyframes fxFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(10px,-22px)}66%{transform:translate(-8px,-10px)}}
/* ticker */
.fx-ticker{overflow:hidden;background:#171716;color:#fff8e7;padding:16px 0;transform:rotate(-1deg);margin:10px -2vw 0;position:relative;z-index:3;box-shadow:0 14px 30px rgba(40,25,10,.16)}
.fx-track{display:flex;gap:28px;width:max-content;animation:fxMarquee 38s linear infinite;font-size:15px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.fx-track i{font-style:normal;color:#e39a4f}
.fx-ticker:hover .fx-track{animation-play-state:paused}
@keyframes fxMarquee{to{transform:translateX(-50%)}}
/* scroll reveals (direction variety + stagger) */
.reveal.fx-left{transform:translateX(-40px)}.reveal.fx-right{transform:translateX(40px)}.reveal.fx-zoom{transform:scale(.92)}
.reveal.in-view.fx-left,.reveal.in-view.fx-right,.reveal.in-view.fx-zoom{transform:none}
/* cursor glow */
.fx-cursor{position:fixed;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(240,179,106,.20),rgba(240,179,106,0) 65%);transition:opacity .4s;opacity:0;will-change:transform}
/* cards */
.project-card,.skill-card{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .3s ease;will-change:transform}
.project-card:hover,.skill-card:hover{box-shadow:0 28px 60px rgba(101,74,38,.18)}
.project-card .project-image img,.project-card .project-image{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .project-image img{transform:scale(1.07)}
.project-card:hover .project-arrow{transform:translate(4px,-4px) rotate(8deg)}
.project-arrow{transition:transform .3s}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.project-card:hover .fx-glare,.skill-card:hover .fx-glare{opacity:1}
.skill-card:hover .skill-icon{animation:fxWiggle .7s ease}
@keyframes fxWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(9deg) scale(1.1)}}
.button{transition:transform .2s ease,box-shadow .3s ease,background .3s,color .3s}
.button:hover{box-shadow:0 14px 30px rgba(40,25,10,.2)}
.button span{display:inline-block;transition:transform .3s}.button:hover span{transform:translate(3px,-3px)}
.header-cta{position:relative;overflow:hidden}
.header-cta::after,.button-dark::after{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:fxSweep 4.5s ease-in-out infinite}
.button-dark{position:relative;overflow:hidden}
@keyframes fxSweep{0%,60%{left:-70%}100%{left:130%}}
/* timeline */
.timeline-line{transform-origin:top;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.3,.7,.2,1)}
.timeline.fx-drawn .timeline-line{transform:scaleY(1)}
.timeline-dot{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.8,.5,1) .3s}
.timeline-item.in-view .timeline-dot{transform:scale(1)}
/* heading words */
.fx-word{display:inline-block;opacity:0;transform:translateY(.6em);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.in-view .fx-word,.fx-in .fx-word{opacity:1;transform:none}
.section-kicker{position:relative}
.about-visual img,.about-visual .visual-blob{animation:fxBob 7s ease-in-out infinite}
@keyframes fxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.experience-stamp{animation:fxSpin 24s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.impact-item{transition:transform .3s,background .3s}.impact-item:hover{transform:translateX(6px)}
.nav-link{position:relative}
@media(max-width:720px){.fx-ticker{padding:12px 0}.fx-cursor{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero-copy>*,.hero-copy .hero-stats>div{opacity:1;transform:none}}
