:root{--blue:#3767df;--cyan:#219bc8;--gradient:linear-gradient(115deg,#7944df,#5266e8 55%,#269dc7)}
:root[data-theme=dark]{--blue:#96adff;--cyan:#78d2f0;--gradient:linear-gradient(115deg,#bc9bff,#9baaff 55%,#79d7ed)}
.hero{position:relative;isolation:isolate}
.hero:before{content:'';position:absolute;z-index:-1;pointer-events:none;width:65%;height:80%;left:-5%;top:0;background:radial-gradient(ellipse at center,rgb(146 111 245 / 12%),transparent 65%);animation:ambient-drift 14s ease-in-out infinite alternate}
.hero h1 em{color:var(--accent);background:var(--gradient);background-size:200% 200%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradient-flow 9s ease-in-out infinite}
.intro-line .tiny-star{display:inline-block;animation:rotate 15s linear infinite}
.status-dot{animation:status-pulse 3s ease-in-out infinite}
.portrait-backdrop{background:linear-gradient(135deg,#c8b7f0,#b7c5f2,#a9dce9,#c8b7f0);background-size:250% 250%;transform:translate3d(0,var(--portrait-drift,0px),0);animation:gradient-flow 12s ease-in-out infinite}
:root[data-theme=dark] .portrait-backdrop{background:linear-gradient(135deg,#65518e,#485e91,#397e8e,#65518e);background-size:250% 250%}
.floating-chip{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 12px 40px rgb(92 62 184 / 14%)}
.primary{background:linear-gradient(115deg,#7146d8,#465ed6);border-color:transparent;color:#fff;box-shadow:0 8px 25px rgb(89 68 197 / 15%)}
.primary:hover{background:linear-gradient(115deg,#6340c5,#337fce);border-color:transparent;box-shadow:0 12px 32px rgb(89 68 197 / 25%)}
.pill{position:relative;overflow:hidden}
.pill:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 25%,#ffffff32 50%,transparent 75%);transform:translateX(-150%);transition:transform .7s}
.pill:hover:after{transform:translateX(150%)}
.hero .primary:after{display:none}
.brand-icon span{display:inline-block;transition:transform .4s,color .4s}.brand:hover .brand-icon span{transform:rotate(180deg)}
.location .globe{display:inline-block;animation:globe-breathe 5s ease-in-out infinite}
.name-marquee span{display:inline-block;animation:rotate 20s linear infinite}
.name-marquee:hover>div{animation-play-state:paused}
.commercial-cover,.project-image{transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s ease,box-shadow .45s}
.commercial-cover:hover,.project-image:hover{box-shadow:0 18px 35px rgb(73 55 131 / 15%)}
.project-row:hover{background:color-mix(in srgb,var(--bg) 80%,#afa0ef 20%)}
.tags span{transition:transform .25s,border-color .25s,background .25s}.tags span:hover{transform:translateY(-4px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.contact-circle{position:relative;isolation:isolate;color:#073c40;background:radial-gradient(circle at 28% 18%,#c1fff0 0%,#64e4ce 38%,#35b9cd 100%);border:1px solid rgb(205 255 245 / 65%);box-shadow:inset 0 0 24px rgb(230 255 250 / 35%),0 8px 38px rgb(57 218 202 / 22%);animation:contact-glow 4s ease-in-out infinite;transition:filter .3s,transform .3s}
.contact-circle:hover{background:radial-gradient(circle at 28% 18%,#d8fff7 0%,#7cf3d9 38%,#46cada 100%);filter:brightness(1.07)}
.contact-circle:before{content:"";position:absolute;inset:-15px;border:1px solid rgb(109 237 216 / 45%);border-left-color:#b4fff0;border-bottom-color:transparent;border-radius:50%;animation:contact-orbit-spin 7s linear infinite;pointer-events:none}
.contact-circle:after{content:"";position:absolute;inset:-19px;border-radius:50%;background:radial-gradient(circle at 50% 4px,#e0fff7 0 3px,#68edcf 4px,transparent 6px);filter:drop-shadow(0 0 6px #65efd7);animation:contact-orbit-spin 7s linear infinite;pointer-events:none}
.contact-circle>span{position:relative;z-index:1}
.contact-circle>span:first-child{font-weight:650}
@keyframes contact-orbit-spin{from{rotate:-35deg}to{rotate:325deg}}
@keyframes contact-glow{0%,100%{box-shadow:inset 0 0 24px rgb(230 255 250 / 35%),0 8px 30px rgb(57 218 202 / 20%)}50%{box-shadow:inset 0 0 28px rgb(230 255 250 / 45%),0 8px 48px rgb(57 218 202 / 36%),0 0 0 8px rgb(77 225 204 / 5%)}}
.contact-circle>span:last-child{transition:transform .4s}.contact-circle:hover>span:last-child{transform:translate(5px,-5px)}
.contact h2 em{color:#b9adff}
.pill,.filters button,.text-link,.round-link,.download-row,.gallery-toolbar button,#gallery-thumbnails button,.dialog-close,.controls button,.contact-bar button{box-shadow:inset 0 0 0 1px rgb(155 131 246 / 18%),0 0 12px rgb(128 100 226 / 8%);transition:background .3s,color .3s,border-color .3s,box-shadow .3s,text-shadow .3s,transform .3s}
:is(.pill,.filters button,.text-link,.round-link,.download-row,.gallery-toolbar button,#gallery-thumbnails button,.dialog-close,.controls button,.contact-bar button):is(:hover,:focus-visible){border-color:#a18afa;box-shadow:inset 0 0 0 1px #a18afa,inset 0 0 18px rgb(148 112 255 / 14%),0 0 15px rgb(145 104 255 / 42%),0 0 32px rgb(102 151 250 / 24%);text-shadow:0 0 12px rgb(170 151 255 / 50%)}
.controls button,.dialog-close,.contact-bar button{border-radius:8px}
:is(#about .resume-cta,.hero .primary){position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:64px;margin-top:12px;padding:18px 28px;border:1px solid #bca7ff;border-radius:18px;background:linear-gradient(115deg,#803de0,#6447e9 50%,#366fe1);color:#fff;font-size:18px;font-weight:650;letter-spacing:-.02em;box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),0 0 0 5px rgb(132 90 233 / 10%),0 10px 30px rgb(103 66 218 / 35%);text-shadow:none}
:is(#about .resume-cta,.hero .primary):before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgb(255 255 255 / 30%) 50%,transparent 80%);transform:translateX(-140%);transition:transform .75s;pointer-events:none}
:is(#about .resume-cta,.hero .primary):is(:hover,:focus-visible){background:linear-gradient(115deg,#9350ef,#7958fa 50%,#438aff);border-color:#d4c5ff;box-shadow:inset 0 1px 0 rgb(255 255 255 / 40%),0 0 0 6px rgb(146 104 255 / 14%),0 0 22px rgb(142 99 255 / 65%),0 12px 45px rgb(93 122 255 / 45%);transform:translateY(-3px);text-shadow:0 0 12px rgb(255 255 255 / 35%)}
:is(#about .resume-cta,.hero .primary):is(:hover,:focus-visible):before{transform:translateX(140%)}
:is(#about .resume-cta,.hero .primary) svg{width:25px;height:25px;flex-shrink:0;transition:transform .3s}
:is(#about .resume-cta,.hero .primary):hover svg{transform:translateY(3px)}
@media(max-width:650px){:is(#about .resume-cta,.hero .primary){min-height:60px;font-size:17px;padding:16px 24px}}
.contact-links{gap:14px;flex-wrap:wrap}
.contact-links a,.contact-links button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 21px;border:1px solid rgb(115 237 219 / 48%);border-radius:999px;color:#cafff4;background:rgb(82 216 194 / 7%);box-shadow:inset 0 0 12px rgb(91 234 208 / 5%),0 0 13px rgb(91 234 208 / 12%);text-shadow:0 0 12px rgb(108 255 226 / 26%);transition:background .25s,border-color .25s,box-shadow .25s,color .25s,transform .25s,text-shadow .25s}
.contact-links a:after{display:none}
.contact-links a:is(:hover,:focus-visible),.contact-links button:is(:hover,:focus-visible){color:#effffb;background:rgb(81 235 204 / 22%);border-color:#a1ffe8;box-shadow:inset 0 0 18px rgb(107 255 221 / 18%),0 0 15px rgb(92 255 216 / 65%),0 0 36px rgb(68 234 204 / 40%),0 0 65px rgb(68 234 204 / 18%);text-shadow:0 0 6px #96ffe2,0 0 17px #5bffd0;transform:translateY(-3px);outline-offset:5px}
@media(max-width:650px){.contact-links{gap:12px}.contact-links a,.contact-links button{padding:10px 16px}}
.progress{background:linear-gradient(90deg,#8050df,#5a74ed,#41bedc)}
.cursor{background:transparent;box-shadow:none;isolation:isolate}
.cursor-core{position:absolute;inset:0;display:grid;place-items:center;border:1px solid rgb(255 255 255 / 45%);border-radius:50%;background:radial-gradient(circle at 25% 15%,#b6a0ff 0%,#7951e7 42%,#397edb 100%);box-shadow:inset 0 0 16px rgb(255 255 255 / 20%),0 6px 28px rgb(104 72 218 / 35%);scale:.55;transition:scale .45s cubic-bezier(.16,1,.3,1)}
.cursor.visible .cursor-core{scale:1}
.cursor-core svg{width:32px;height:32px;animation:cursor-arrow-lift 2.8s ease-in-out infinite;animation-play-state:paused}
.cursor-orbit{position:absolute;inset:-10px;border:1px solid rgb(139 113 238 / 50%);border-left-color:#80d7fa;border-bottom-color:transparent;border-radius:50%;animation:cursor-orbit-spin 3.6s linear infinite;animation-play-state:paused}
.cursor-orbit:before{content:"";position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:#a6edff;box-shadow:0 0 9px #77cfff,0 0 18px rgb(93 139 255 / 60%)}
.cursor-spark{position:absolute;left:-15px;bottom:0;color:#a78bfa;font-size:18px;line-height:1;text-shadow:0 0 12px rgb(116 92 235 / 50%);animation:cursor-spark-pulse 2.4s ease-in-out infinite;animation-play-state:paused}
.cursor.visible .cursor-orbit,.cursor.visible .cursor-spark,.cursor.visible svg{animation-play-state:running}
@keyframes cursor-orbit-spin{to{rotate:360deg}}
@keyframes cursor-arrow-lift{0%,100%{translate:0 0}50%{translate:2px -2px}}
@keyframes cursor-spark-pulse{0%,100%{scale:.7;opacity:.55;rotate:0deg}50%{scale:1.15;opacity:1;rotate:35deg}}
.motion-enabled .hero .intro-line,.motion-enabled .hero h1,.motion-enabled .hero-description,.motion-enabled .hero-copy>.pill{animation:hero-arrive 1s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .hero .intro-line{animation-delay:.05s}.motion-enabled .hero h1{animation-delay:.17s}.motion-enabled .hero-description{animation-delay:.3s}.motion-enabled .hero-copy>.pill{animation-delay:.42s}
.motion-enabled .portrait{animation:portrait-arrive 1.3s cubic-bezier(.16,1,.3,1) both}
.js .reveal{transition-delay:var(--reveal-delay,0ms);transition-duration:1s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
dialog[open]{animation:dialog-arrive .4s cubic-bezier(.16,1,.3,1)}
.gallery-changing{animation:gallery-arrive .45s ease both}
.portfolio-card .project-image{width:100%;height:auto;aspect-ratio:3/2;padding:0;border-radius:8px;background:var(--bg);display:grid;place-items:center}
.portfolio-card .project-image img{width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;transform:none;border-radius:0;box-shadow:none;transition:scale .7s cubic-bezier(.16,1,.3,1)}
.portfolio-card .project-image:hover img{transform:none;scale:1.04}
.portfolio-card .image-arrow{opacity:0;translate:-10px 10px;transition:opacity .35s,translate .35s;background:var(--bg);color:var(--accent)}
.portfolio-card .project-image:hover .image-arrow,.portfolio-card .project-image:focus-visible .image-arrow{opacity:1;translate:0 0}
.portfolio-card .card-title button{padding:0;text-align:left;font:inherit}
.portfolio-card .card-title>button{font-size:23px;padding:0 6px;transition:rotate .35s}
.portfolio-card .card-title>button:hover{rotate:45deg}
dialog[open]>:not(.dialog-close){animation:dialog-content-in .65s cubic-bezier(.16,1,.3,1) both}
dialog[open]>h2{animation-delay:.06s}dialog[open]>p{animation-delay:.1s}dialog[open]>.download-row{animation-delay:.15s}dialog[open]>.download-row+.download-row{animation-delay:.22s}dialog[open]>.recommendation-link{animation-delay:.29s}
dialog[open]::backdrop{animation:backdrop-in .45s ease both;transition:backdrop-filter .28s,background .28s}
dialog.closing{animation:none}dialog.closing::backdrop{animation:none;background:transparent;backdrop-filter:blur(0)}
.dialog-close{border-radius:50%;transition:rotate .35s,background .35s}.dialog-close:hover{rotate:90deg;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.download-row{border-radius:5px;transition:padding .35s,color .35s,background .35s}.download-row:hover{padding-left:15px;padding-right:15px;color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
html[data-transition=filter] .commercial-projects{view-transition-name:commercial-list}
html[data-transition=filter] .github-projects{view-transition-name:portfolio-grid}
::view-transition-group(*){animation-duration:.65s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:transition-out .35s both}::view-transition-new(root){animation:transition-in .6s both}
html[data-transition=theme]::view-transition-old(root){animation:none;mix-blend-mode:normal}
html[data-transition=theme]::view-transition-new(root){animation:theme-wipe .85s cubic-bezier(.16,1,.3,1) both;mix-blend-mode:normal;z-index:1}
::view-transition-new(portfolio-grid),::view-transition-new(commercial-list){animation:project-list-in .7s cubic-bezier(.16,1,.3,1) both}
::view-transition-old(portfolio-grid),::view-transition-old(commercial-list){animation:transition-out .3s both}
@keyframes dialog-content-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes backdrop-in{from{background:#15181300;backdrop-filter:blur(0)}to{background:#15181399;backdrop-filter:blur(8px)}}
@keyframes transition-out{to{opacity:0;filter:blur(3px)}}
@keyframes transition-in{from{opacity:0;translate:0 10px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes theme-wipe{from{clip-path:circle(0 at 95% 3%)}to{clip-path:circle(150% at 95% 3%)}}
@keyframes project-list-in{from{opacity:0;translate:0 35px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes hero-arrive{from{opacity:0;translate:0 32px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes portrait-arrive{from{opacity:0;clip-path:inset(12% 0 0 0 round 180px 180px 3px 3px)}to{opacity:1;clip-path:inset(0 round 180px 180px 3px 3px)}}
@keyframes gradient-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ambient-drift{from{translate:0 0;scale:.9}to{translate:10% 6%;scale:1.15}}
@keyframes status-pulse{0%,100%{box-shadow:0 0 0 4px rgb(115 85 237 / 10%)}50%{box-shadow:0 0 0 8px rgb(115 85 237 / 2%)}}
@keyframes globe-breathe{0%,100%{scale:1;opacity:.8}50%{scale:1.12;opacity:1}}
@keyframes contact-pulse{0%,65%,100%{box-shadow:0 0 0 0 rgb(125 99 237 / 0%)}20%{box-shadow:0 0 0 16px rgb(125 99 237 / 12%)}}
@keyframes dialog-arrive{from{opacity:0;translate:0 20px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes gallery-arrive{from{opacity:.4;scale:.985}to{opacity:1;scale:1}}
.skills-intro{max-width:340px;font-size:16px;line-height:1.8;color:var(--muted)}
.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.skill-card{padding:28px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 96%,#afa0ef 4%);display:flex;flex-direction:column;align-items:start}
.skill-card.reveal{transition:opacity .8s,transform .8s,border-color .3s,box-shadow .3s}
.skill-card:hover{border-color:#b59aff;background:color-mix(in srgb,var(--bg) 88%,#a78bfa 12%);box-shadow:inset 0 0 26px rgb(150 106 255 / 13%),0 0 0 1px rgb(164 126 255 / 50%),-12px 0 30px -12px rgb(143 98 247 / 70%),12px 0 30px -12px rgb(81 184 250 / 65%),0 0 42px rgb(132 93 246 / 25%)}
.tech-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.skill-icon{width:46px;height:46px;padding:8px;border-radius:12px;color:var(--accent);background:rgb(147 112 245 / 12%);margin-bottom:18px;flex-shrink:0;transition:filter .3s,transform .3s}
.skill-card:hover .skill-icon{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--tech-color) 70%,transparent));transform:rotate(-7deg) scale(1.08)}
.skill-card .tags span{display:inline-flex;align-items:center;gap:6px}.tech-icon{width:19px;height:19px;flex-shrink:0;transition:filter .3s,transform .3s}
[data-tech]{--tech-color:#6d64d9}
[data-tech=flutter]{--tech-color:#42a5f5}
[data-tech=dart]{--tech-color:#0175c2}
[data-tech=bloc]{--tech-color:#00a9e0}
[data-tech=firebase]{--tech-color:#ff9100}
[data-tech=git]{--tech-color:#f05032}
[data-tech=figma]{--tech-color:#a259ff}
[data-tech=phone]{--tech-color:#3ddc84}
[data-tech=api]{--tech-color:#009eae}
[data-tech=test]{--tech-color:#16a36d}
[data-tech=cloud]{--tech-color:#4285f4}
[data-tech=web]{--tech-color:#337bdc}
[data-tech=map]{--tech-color:#e64b41}
[data-tech=data]{--tech-color:#9270da}
.skill-icon,.tech-icon{color:var(--tech-color)}
.skill-icon{background:color-mix(in srgb,var(--tech-color) 12%,transparent)}
.skill-card:hover .tech-icon{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--tech-color) 55%,transparent))}
.skill-card .tags span:hover{border-color:var(--tech-color);background:color-mix(in srgb,var(--tech-color) 10%,transparent);box-shadow:0 0 15px color-mix(in srgb,var(--tech-color) 25%,transparent)}
.skill-card .tags span:hover .tech-icon{transform:scale(1.16);filter:drop-shadow(0 0 5px var(--tech-color))}
.js .skill-card.reveal{opacity:0;transform:translateY(42px) scale(.96);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s,background .25s;transition-delay:var(--skill-delay,0ms),var(--skill-delay,0ms),0s,0s,0s}
.js .skill-card.reveal.in-view{opacity:1;transform:translateY(0) scale(1)}
.controls #language,.controls #theme,.controls #menu{width:44px;height:44px;min-width:44px;padding:0;border:1px solid var(--line);border-radius:10px;line-height:1;align-items:center;justify-content:center;text-align:center}
.controls #language,.controls #theme{display:inline-flex}.controls #language{font-size:13px;letter-spacing:.04em}.controls #theme{font-size:25px}
.hero .primary>span{font-size:inherit}.card-title>a{font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:20px}
.gallery-toolbar button{width:auto;min-width:64px;padding:8px 12px;border-radius:20px;font-size:12px}
.round-link>span{font-size:12px;font-weight:650}
@media(max-width:650px){.controls{gap:10px}.controls #language,.controls #theme,.controls #menu{width:40px;height:40px;min-width:40px}.controls #menu{display:inline-flex}.gallery-toolbar{flex-wrap:wrap}.gallery-toolbar>div{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.js .skill-card.reveal{opacity:1;transform:none}.skill-card:hover .skill-icon{transform:none}}
.skill-number{font-size:11px;letter-spacing:.09em;color:var(--accent);margin-bottom:25px}
.skill-card h3,.skills-team h3{font-size:23px;line-height:1.35;font-weight:500;letter-spacing:-.03em}
.skill-card p{font-size:15px;line-height:1.8;color:var(--muted);margin:15px 0 24px}
.skill-card .tags{margin-top:auto;gap:7px}.skill-card .tags span{font-size:11px;line-height:1.5;padding:6px 10px}
.skills-team{display:grid;grid-template-columns:160px 1fr;gap:12px 28px;margin-top:28px;padding:28px 0;border-top:1px solid var(--line)}
.skills-team p{font-size:16px;line-height:1.8;color:var(--muted)}
.skills-team>span{grid-column:2;font-size:13px;color:var(--accent)}
@media(max-width:1050px){.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.skills-grid{grid-template-columns:1fr;gap:16px}.skill-card{padding:24px}.skills-intro{margin-top:24px}.skills-team{grid-template-columns:1fr}.skills-team>span{grid-column:1}}
@media(max-width:650px){.hero:before{width:100%;left:0;height:55%}.motion-enabled .hero h1{animation-duration:.8s}.commercial-cover,.project-image{transform:none}.portrait-backdrop{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-enabled .hero .intro-line,.motion-enabled .hero h1,.motion-enabled .hero-description,.motion-enabled .hero-copy>.pill,.motion-enabled .portrait{opacity:1;translate:none;filter:none;clip-path:none}.portrait-backdrop,.commercial-cover,.project-image{transform:none!important}.hero:before{translate:none;scale:1}}