/* A restrained blue-glass motion language, shared by every public interaction. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.click-feedback{pointer-events:none!important;overflow:hidden;z-index:9999;contain:paint;line-height:0}
.click-wave{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent),white 58%) 0%,color-mix(in srgb,var(--accent),transparent 58%) 45%,transparent 70%);pointer-events:none}
#app .button,#app .icon-button,#app .filter,#app .round-arrow,#app .social-links a,#app .brand-tile{transition:transform .36s var(--motion-ease),box-shadow .36s var(--motion-ease),border-color .3s,background-color .3s}
#app .button:hover{transform:translateY(-3px);box-shadow:0 8px 28px color-mix(in srgb,var(--accent),transparent 79%)}
#app .button .icon,#app .button .round-arrow,#app .icon-button .icon,#app .service-card>.icon,#app .project-caption .round-arrow{transition:transform .4s var(--motion-ease),background-color .3s}
#app .button:hover>.icon,#app .project-card:hover .round-arrow>.icon{transform:translateX(3px)}
#app .theme-button:hover .icon{transform:rotate(18deg)}
#app .service-card:hover>.icon{transform:translateY(-3px) rotate(-7deg) scale(1.06)}
#app .filter:hover:not(.active){transform:translateY(-2px);border-color:var(--accent)}
#app .filter.active{box-shadow:0 4px 15px color-mix(in srgb,var(--accent),transparent 82%)}
#app .motion-card{position:relative;transition:transform .48s var(--motion-ease),border-color .3s,box-shadow .4s;isolation:isolate}
#app .motion-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--pointer-x,50%) var(--pointer-y,50%),color-mix(in srgb,var(--accent),transparent 90%),transparent 75%);transition:opacity .35s;z-index:2}
#app .motion-card:hover:after{opacity:1}
#app .project-card:hover{border-color:color-mix(in srgb,var(--accent),transparent 48%);box-shadow:0 15px 35px color-mix(in srgb,var(--accent),transparent 90%)}
#app .project-photo,#app .about-visual>.sprite,#app .about-visual>.media{transition:scale .8s var(--motion-ease)}
#app .project-card:hover .project-photo,#app .about-visual:hover>.sprite,#app .about-visual:hover>.media{scale:1.035}
#app .timeline-dot{transition:scale .4s var(--motion-ease),box-shadow .4s}
#app .timeline-item:hover .timeline-dot{scale:1.3;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent),transparent 88%)}
#app .timeline-item:active .timeline-dot{scale:.85}
#app .video-teaser:hover .play-circle,#app .about-visual:hover .play-circle{scale:1.08;box-shadow:0 0 28px color-mix(in srgb,var(--accent),transparent 40%)}
#app .play-circle{transition:scale .4s var(--motion-ease),box-shadow .4s}
#app .brand-tile:hover{transform:translateY(-3px);box-shadow:0 8px 22px #1677ff14}
#app.motion-ready [data-reveal]{opacity:0;translate:0 20px;transition:opacity .7s var(--motion-ease) var(--reveal-delay,0ms),translate .7s var(--motion-ease) var(--reveal-delay,0ms)}
#app.motion-ready [data-reveal].is-revealed{opacity:1;translate:0 0}
.track>span{transform-origin:left center}
#detail-dialog{transform-origin:center center}
#detail-dialog.motion-opening::backdrop{animation:dialog-backdrop-in .42s ease-out both}
#detail-dialog.motion-closing::backdrop{animation:dialog-backdrop-out .26s ease-in both}
#detail-dialog.motion-closing{pointer-events:none}
#detail-dialog .button{transition:box-shadow .3s,transform .3s var(--motion-ease)}
#detail-dialog .button:hover{box-shadow:0 8px 28px color-mix(in srgb,var(--accent),transparent 80%)}
#project-list[aria-busy=true]{pointer-events:none}
.motion-arrival>.section-heading h2,.motion-arrival.skills-card h2{animation:arrival-accent .85s ease-out}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(root){animation-duration:0s}
@keyframes dialog-backdrop-in{from{background:#05142b00;backdrop-filter:blur(0)}to{background:#05142b66;backdrop-filter:blur(10px)}}
@keyframes dialog-backdrop-out{from{background:#05142b66;backdrop-filter:blur(10px)}to{background:#05142b00;backdrop-filter:blur(0)}}
@keyframes arrival-accent{0%,100%{color:var(--ink)}38%{color:var(--accent)}}
@media(hover:hover) and (pointer:fine){#app .motion-card:hover{transform:translateY(-5px) perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}}
@media(prefers-reduced-motion:reduce){#app.motion-ready [data-reveal]{opacity:1;translate:none}#app .motion-card:hover,#app .button:hover,#app .brand-tile:hover{transform:none}#app .project-photo,#app .play-circle,#app .about-visual>.sprite,#app .about-visual>.media{scale:1!important}.click-feedback{display:none}::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}}
@media print{#app.motion-ready [data-reveal]{opacity:1;translate:none}.click-feedback{display:none}#detail-dialog{transform:none!important;filter:none!important;opacity:1!important}}
.theme-snapshot{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:clip;background:var(--bg);color:var(--ink);contain:paint}
.theme-snapshot-page{width:100%;position:absolute;inset:0 0 auto;pointer-events:none}
.theme-snapshot[data-theme=light] .hero-image{filter:brightness(1)}
.theme-snapshot[data-theme=light] .hero-image:after{background:linear-gradient(90deg,color-mix(in srgb,var(--bg),transparent 9%),transparent 58%)}
.theme-snapshot[data-theme=dark] .hero-image{filter:brightness(.46) saturate(.7)}
.theme-snapshot[data-theme=dark] .hero-image:after{background:linear-gradient(90deg,#040d1f 1%,rgba(3,12,26,.8) 25%,rgba(3,12,26,.13) 60%),linear-gradient(0deg,#050b14 0%,transparent 24%)}
@media(max-width:760px){.theme-snapshot[data-theme=light] .hero-image:after{background:linear-gradient(0deg,var(--bg),transparent 60%)}}
@media(prefers-reduced-motion:reduce){#detail-dialog::backdrop{animation:none!important}.theme-snapshot{display:none}}