/* Clear controls, official store artwork and deliberate micro-interactions. */
:root{--control-ease:cubic-bezier(.22,1,.36,1)}
.direction-icon{width:1.12em;height:1.12em;stroke-width:2;transition:transform .38s var(--control-ease),opacity .25s;vertical-align:-.18em}
.footer-arrow .direction-icon{stroke-width:1.35}
:is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.store-link,.menu-control,.close-menu,.preview-close,.preview-arrow,.text-cta,.underlined,.row-links a,.clear-contact a,button){-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .35s var(--control-ease),background-color .25s,border-color .25s,color .25s,box-shadow .35s,opacity .25s}
:is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.clear-contact a){position:relative;isolation:isolate;border-radius:9px}
:is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.clear-contact a)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#ffffff20 47%,transparent 72%);background-size:250% 100%;background-position:170% 0;opacity:0;transition:background-position .7s var(--control-ease),opacity .3s}
:is(a,button):focus-visible{outline:2px solid #c7f580;outline-offset:5px}
.ma-footer :is(a,button):focus-visible{outline-color:#17220c}
:is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.menu-control,.preview-close,.preview-arrow,button):active:not(:disabled){transform:translateY(1px) scale(.97)}
button:disabled{cursor:default}
a.store-badge-link,.store-ctas>a.store-badge-link{display:inline-flex;align-items:center;justify-content:center;min-height:76px;min-width:166px;padding:10px 12px;border:0!important;border-radius:10px;background:transparent!important;box-shadow:none!important;transform:none!important;line-height:1;text-decoration:none;outline-offset:-1px;position:relative;transition:none}
a.store-badge-link img{display:block;height:48px;width:auto;max-width:none;object-fit:contain;border-radius:0;transform:none!important;filter:none!important;transition:none!important}
a.store-badge-google{padding:0!important;min-width:185px}
a.store-badge-google img{height:72px}
a.store-badge-link::after{display:none!important}
.store-ctas{align-items:center;gap:4px!important;flex-wrap:wrap}
@media(hover:hover) and (pointer:fine){
 :is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.clear-contact a):hover{transform:translateY(-3px);box-shadow:0 9px 26px #00000026}
 :is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.clear-contact a):hover::after{background-position:-70% 0;opacity:1}
 :is(a,button):hover .direction-icon{transform:translate(3px,-3px)}
 :is(.preview-arrow,.menu-control,.preview-close,.close-menu):hover:not(:disabled){background-color:#ffffff16;box-shadow:0 0 0 1px #c7f58066}
 .text-cta:hover,.row-links a:hover,.underlined:hover{color:var(--lime,#c7f580)}
 a.store-badge-link:hover{outline:1px solid #c7f58088}
}
@media(max-width:480px){a.store-badge-link,.store-ctas>a.store-badge-link{min-width:148px;padding:10px 8px}a.store-badge-link img{height:44px}a.store-badge-google img{height:66px}a.store-badge-google{min-width:168px}.store-ctas{gap:0!important}}
@media(prefers-reduced-motion:reduce){.direction-icon,:is(a,button),:is(a,button)::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}:is(a,button):hover,:is(a,button):active,:is(a,button):hover .direction-icon{transform:none!important}:is(a,button)::after{display:none!important}}

/* Store identity beside its name: homepage controls. */
.icon-store-link,.store-ctas>a.icon-store-link{display:inline-flex;align-items:center;justify-content:flex-start;gap:12px;min-height:58px;padding:10px 15px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #727c61;border-radius:12px;background:#171c14;color:#f4f7ef;font-size:15px;font-weight:650;letter-spacing:-.15px;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff09;transition:transform .36s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s,box-shadow .36s}
.store-ctas:has(.icon-store-link){gap:12px!important;margin-top:20px}
.icon-store-link .store-logo-tile{display:flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px}
.icon-store-link .store-name{font-size:15px;line-height:1.2;white-space:nowrap;color:inherit}
.icon-store-link .store-link-arrow{flex-shrink:0;margin-left:10px;color:#bcc9aa;transition:transform .36s cubic-bezier(.22,1,.36,1),color .3s}
.icon-store-link::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 15%,#ffffff0d 48%,transparent 75%);transform:translateX(-110%);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.icon-store-link:focus-visible{outline:2px solid #c7f580;outline-offset:4px;border-color:#c7f580}
.icon-store-link:active{transform:translateY(1px) scale(.98)}
@media(hover:hover) and (pointer:fine){.icon-store-link:hover,.store-ctas>a.icon-store-link:hover{background:#222c1b;color:#fff;border-color:#bedf91;transform:translateY(-3px);box-shadow:0 10px 25px #0004,inset 0 1px 0 #ffffff12}.icon-store-link:hover::before{transform:translateX(110%)}.icon-store-link:hover .store-link-arrow{transform:translate(2px,-2px);color:#d5f5ac}}
@media(max-width:480px){.icon-store-link,.store-ctas>a.icon-store-link{padding:10px 12px;gap:9px;min-height:56px}.icon-store-link .store-name{font-size:14px}.icon-store-link .store-link-arrow{margin-left:2px}.store-ctas:has(.icon-store-link){gap:10px!important}}
@media(prefers-reduced-motion:reduce){.icon-store-link,.icon-store-link::before,.icon-store-link .store-link-arrow{transition:none!important;transform:none!important}.icon-store-link::before{display:none}}

/* Direction-aware SVG navigation across every project and gallery. */
.back-link,.underlined{display:inline-flex;align-items:center;gap:10px}
.back-link{transition:color .25s,opacity .25s}
.ui-icon-left,.ui-icon-right,.ui-icon-down,.ui-icon-up,.ui-icon-replay,.ui-icon-close{display:inline-block;flex-shrink:0;width:1.15em;height:1.15em;vertical-align:-.18em;transform-origin:center;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s}
.lightbox button .direction-icon,.preview-arrow .direction-icon{width:24px;height:24px}
.lightbox button,.preview-arrow,.preview-close{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border-radius:10px;transition:background-color .25s,box-shadow .25s,transform .25s}
@media(hover:hover) and (pointer:fine){
 :is(a,button):hover .ui-icon-left{transform:translateX(-4px)}
 :is(a,button):hover .ui-icon-right{transform:translateX(4px)}
 :is(a,button):hover .ui-icon-down{transform:translateY(4px)}
 :is(a,button):hover .ui-icon-up{transform:translateY(-4px)}
 :is(a,button):hover .ui-icon-replay{transform:rotate(45deg)}
 :is(a,button):hover .ui-icon-close{transform:rotate(90deg)}
 .back-link:hover{color:#d5f5ac}
 .lightbox button:hover,.preview-arrow:hover{background:#ffffff16;box-shadow:inset 0 0 0 1px #c7f58055}
}
.lightbox button:active,.preview-arrow:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){:is(a,button):hover .ui-icon-left,:is(a,button):hover .ui-icon-right,:is(a,button):hover .ui-icon-down,:is(a,button):hover .ui-icon-up,:is(a,button):hover .ui-icon-replay,:is(a,button):hover .ui-icon-close{transform:none!important;transition:none!important}}

/* Softer control feedback; smaller travel, more time to settle. */
.direction-icon,.ui-icon-left,.ui-icon-right,.ui-icon-down,.ui-icon-up,.ui-icon-replay,.ui-icon-close,.icon-store-link .store-link-arrow{transition:transform .46s cubic-bezier(.22,1,.36,1),color .35s,opacity .35s}
.icon-store-link,.store-ctas>a.icon-store-link{transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,background .35s,box-shadow .45s}
@media(hover:hover) and (pointer:fine){
 :is(.cta,.button,.header-resume,.header-contact,.preview-trigger,.action-link,.clear-contact a,.icon-store-link,.store-ctas>a.icon-store-link):hover{transform:translateY(-2px)}
 :is(a,button):hover .direction-icon{transform:translate(2px,-2px)}
 :is(a,button):hover .ui-icon-left{transform:translateX(-2px)}
 :is(a,button):hover .ui-icon-right{transform:translateX(2px)}
 :is(a,button):hover .ui-icon-down{transform:translateY(2px)}
 :is(a,button):hover .ui-icon-up{transform:translateY(-2px)}
 :is(a,button):hover .ui-icon-replay{transform:rotate(30deg)}
 :is(a,button):hover .ui-icon-close{transform:rotate(90deg)}
}
@media(prefers-reduced-motion:reduce){.direction-icon,.icon-store-link,.icon-store-link .store-link-arrow{transition:none!important}:is(a,button):hover .direction-icon{transform:none!important}}

/* Interactive depth: magnetic controls, pointer light and portrait depth. */
.magnetic-control{transition:translate .35s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,background-color .3s,border-color .3s}
.interactive-project{position:relative;isolation:isolate}
.project-pointer-aura{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(320px circle at var(--aura-x,50%) var(--aura-y,50%),#c8f78a17,transparent 80%);box-shadow:inset 0 0 0 1px #c8f78a22;transition:opacity .5s}
.interactive-project:hover>.project-pointer-aura{opacity:1}
.interactive-portrait{transition:transform .55s cubic-bezier(.22,1,.36,1);transform-style:preserve-3d}
@media(prefers-reduced-motion:no-preference){
 .portrait-outline{animation:portrait-halo 6s ease-in-out infinite}
 .hero-foot>a .ui-icon-down{animation:explore-nudge 3s ease-in-out infinite}
 @keyframes portrait-halo{0%,100%{box-shadow:0 0 18px #c8f78a06}50%{box-shadow:0 0 45px #c8f78a1c,inset 0 0 28px #c8f78a08}}
 @keyframes explore-nudge{0%,70%,100%{translate:0 0}80%{translate:0 5px}90%{translate:0 1px}}
}
@media(hover:hover) and (pointer:fine){
 .showcase-art::after,.row-preview::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(115deg,transparent 20%,#ffffff12 48%,transparent 76%);transform:translateX(-110%);transition:transform .9s cubic-bezier(.22,1,.36,1)}
 .showcase-art:hover::after,.row-preview:hover::after{transform:translateX(110%)}
}
@media(prefers-reduced-motion:reduce){.magnetic-control{translate:none!important}.project-pointer-aura{display:none}.interactive-portrait{transform:none!important;transition:none!important}.showcase-art::after,.row-preview::after{display:none}}

/* Touch screens receive a single light sweep when a project comes into view. */
@media(hover:none) and (prefers-reduced-motion:no-preference){
 .cover-light-pass::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(115deg,transparent 20%,#ffffff15 48%,transparent 76%);animation:cover-light-pass 1.3s cubic-bezier(.22,1,.36,1) .15s both}
 @keyframes cover-light-pass{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
}

/* Render animated details only when their section is near the viewport. */
[data-motion-visible="false"],[data-motion-visible="false"] *{animation-play-state:paused!important}
.portrait-outline{animation:none!important;box-shadow:none}
.portrait-outline::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 40px #c8f78a1c,inset 0 0 24px #c8f78a08;opacity:.4}
@media(prefers-reduced-motion:no-preference){.portrait-outline::after{animation:halo-composite 6s ease-in-out infinite}@keyframes halo-composite{0%,100%{opacity:.25}50%{opacity:1}}}
[data-motion-visible="false"] .portrait-outline::after{animation-play-state:paused!important}
@media(max-width:767px){.ma-header{backdrop-filter:none;background:#10110ff5}.ma-mobile-menu{backdrop-filter:none}.hero-atmosphere video{backface-visibility:hidden;transform:translateZ(0)}}

/* Stable video layer while native compositor animations reveal the heading. */
.hero-atmosphere{transform:translateZ(0);opacity:.6}.hero-editorial .word-mask{contain:paint}

/* Arrow direction follows navigation semantics. */
@media(hover:hover) and (pointer:fine){:is(a,button):hover .ui-icon-left{transform:translateX(-2px)}:is(a,button):hover .ui-icon-right{transform:translateX(2px)}:is(a,button):hover .ui-icon-up{transform:translateY(-2px)}:is(a,button):hover .ui-icon-down{transform:translateY(2px)}:is(a,button):hover .ui-icon-diagonal{transform:translate(2px,-2px)}:is(a,button):hover :is(.ui-icon-mail,.ui-icon-phone,.ui-icon-expand,.ui-icon-plus){transform:none}}
@media(prefers-reduced-motion:reduce){:is(a,button):hover .direction-icon{transform:none!important}}