/* The same compact header stays in place on entry, during reveal and at rest. */
:root{--portfolio-header-height:48px;}
/* Reserve the desktop scrollbar even while the intro locks scrolling. */
html{scrollbar-gutter:stable;}
.portfolio-header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;height:calc(var(--portfolio-header-height) + env(safe-area-inset-top));min-height:var(--portfolio-header-height);padding:2px max(24px,env(safe-area-inset-right)) 2px max(24px,env(safe-area-inset-left));padding-top:calc(2px + env(safe-area-inset-top));background:linear-gradient(100deg,#100c16f5,#131019f2 58%,#0b1316f5);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.portfolio-header:after{content:'';position:absolute;inset:auto 0 -5px;height:10px;background:url('assets/iridescent-ribbon.svg') center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 0 5px #be66ef55);}
.portfolio-header .contact-rail{position:static;min-height:44px;padding:0;gap:8px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.portfolio-header .contact-rail:after{display:none;}
.portfolio-header .contact-rail a{font-size:13px;padding-inline:18px;}
.portfolio-header .header-music{position:relative;inset:auto;transform:none;display:flex;flex-shrink:0;align-items:center;gap:28px;max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
.header-music .music-play,.sound-enabled .header-music .music-play{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;min-width:128px;height:40px;padding:0 16px;border:1px solid #dba0f0b3;border-radius:24px;color:#faeaff;background:linear-gradient(145deg,#84509c8f,#4a285f9c);box-shadow:inset 0 1px 0 #ffffff1c,0 0 18px #a744d016;}
.header-music .music-label{font:500 14px/1.2 Arial,sans-serif;}
.header-music .music-play:hover{background:linear-gradient(145deg,#985bb7b3,#633779b3);}
.header-music .music-play:focus-visible{outline:2px solid #f1c9ff;outline-offset:4px;}
.header-music .volume-control{display:flex;align-items:center;gap:16px;min-height:44px;}
.header-music .volume-icon{width:24px;height:24px;flex:none;color:#f7edf9;}
.header-music .volume-control input{appearance:none;-webkit-appearance:none;display:block;width:136px;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;accent-color:#edbcfa;}
.header-music input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#8d8293;}
.header-music input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#8d8293;}
.header-music input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border:1px solid #f5d7fe;border-radius:50%;background:#edbcfa;box-shadow:0 1px 5px #0004;}
.header-music input[type=range]::-moz-range-thumb{width:18px;height:18px;border:1px solid #f5d7fe;border-radius:50%;background:#edbcfa;box-shadow:0 1px 5px #0004;}
.header-music input[type=range]:focus-visible{outline:2px solid #edc6ff;outline-offset:4px;border-radius:8px;}
.header-music .music-status{top:calc(100% + 14px);bottom:auto;left:0;transform:none;text-align:left;}
body:has(.portfolio-header) #work{padding-top:calc(var(--portfolio-header-height) + env(safe-area-inset-top));}
/* Keep the existing motion-pause affordance available to keyboard users without
   adding another control to the simplified music player. */
.motion-access{position:fixed;top:60px;left:20px;z-index:51;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;}
.motion-access:focus-visible{clip-path:none;width:auto;height:44px;padding:0 18px;border:1px solid #dba0f0;border-radius:22px;background:#392442;color:#fff;outline:2px solid #edc6ff;outline-offset:3px;}
.motion-access span{margin-left:10px;}
@media(max-width:960px){.portfolio-header{gap:16px;padding-inline:20px;}.portfolio-header .header-music{gap:18px;}.header-music .volume-control{gap:12px;}.header-music .volume-control input{width:96px;}.portfolio-header .contact-rail{gap:0;}.portfolio-header .contact-rail a{padding-inline:13px;}}
/* The established phone/tablet policy is deliberately silent, with no player. */
.mobile-portfolio .portfolio-header{padding:2px max(12px,env(safe-area-inset-right)) 2px max(12px,env(safe-area-inset-left));padding-top:calc(2px + env(safe-area-inset-top));justify-content:center;}
.mobile-portfolio .portfolio-header .contact-rail a{padding-inline:20px;font-size:13px;}
.mobile-portfolio .motion-access{display:none;}
.mobile-portfolio body:has(.portfolio-header) #work{padding-top:calc(var(--portfolio-header-height) + env(safe-area-inset-top));}
@media(prefers-reduced-motion:reduce){.header-music *{animation:none!important;transition:none!important;}}

/* The ribbon/contact positions never animate. Only the player fades into its
   reserved space when the artwork reveal begins. */
.experience-revealing .header-music{animation:header-music-reveal .25s ease both;}
@keyframes header-music-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.experience-revealing .header-music{animation:none;}}