/* Motion layers sit behind content and never intercept clicks. */
.hero .atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.5;background:radial-gradient(ellipse at 15% 50%,#f026271c,transparent 48%)}
.atmosphere::before,.atmosphere::after{content:'';position:absolute;width:35vw;height:1px;background:linear-gradient(90deg,transparent,#f0262780,transparent);transform:rotate(-35deg);left:-15%;top:35%;animation:web-drift 12s ease-in-out infinite alternate}
.atmosphere::after{left:auto;right:-15%;top:70%;animation-delay:-6s}
@keyframes web-drift{to{transform:translate3d(6vw,8vh,0) rotate(-35deg);opacity:.2}}
.portfolio-section{position:relative;isolation:isolate}
.portfolio-section::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 95% 5%,#f0262710,transparent 50%)}
.project-card{border-radius:14px;background:linear-gradient(145deg,#241316b0,#0d0d0f 75%)}
.project-card::after{content:'';position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,#ff5c6680,transparent);pointer-events:none}
.project-card .project-links a{position:relative}
.project-links a::after{content:'↗';display:inline-block;margin-left:7px;transition:transform .25s}
.project-links a:hover::after{transform:translate(2px,-2px)}
.power{transition:border-color .3s,background .3s,padding-left .3s}
.power:hover,.power:focus-within{border-color:#f0262760;background:linear-gradient(90deg,#f026270d,transparent);padding-left:10px}
.stat-box{transition:border-color .3s,background .3s}
.stat-box:hover{border-color:#f0262770;background:#f026270c}
.section-dots a{position:relative}
.section-dots a::before{content:attr(aria-label);position:absolute;right:22px;top:50%;transform:translate(4px,-50%);opacity:0;pointer-events:none;background:#101012;border:1px solid #ffffff24;border-radius:6px;padding:7px 10px;color:#f5f4ef;font:10px Inter,Arial,sans-serif;white-space:nowrap;transition:opacity .2s,transform .2s}
.section-dots a:hover::before,.section-dots a:focus-visible::before{opacity:1;transform:translate(0,-50%)}
.progress{box-shadow:0 0 12px #f0262770}
.motion-control{position:fixed;bottom:18px;right:20px;z-index:31;padding:9px 12px;border:1px solid #ffffff28;border-radius:30px;background:#0b0b0ee8;color:#d9d2d4;font-size:10px;letter-spacing:.4px;backdrop-filter:blur(12px)}
.motion-control:hover{border-color:#f02627}
.name-intro .motion-control,.intro-loading .motion-control{visibility:hidden}
html[data-motion='off'] .atmosphere::before,html[data-motion='off'] .atmosphere::after{animation:none}
html[data-motion='off']{scroll-behavior:auto}
html[data-motion='off'] .project-card,html[data-motion='off'] .power{transform:none!important;transition:none}
@media(max-width:600px){.motion-control{bottom:12px;right:12px;font-size:9px;padding:8px 10px}.atmosphere{display:none}}
@media(prefers-reduced-motion:reduce){.atmosphere::before,.atmosphere::after{animation:none}.power,.project-links a::after,.section-dots a::before{transition:none}}