/* 1.2.16: SHS Portfolio (C2) "nebula drift". Scoped to .shs-pf (templates/template-shs-portfolio.php). Port of design/about-v1.3/src/about.css (optC). */
.shs-pf{--pf-teal:#2ee6d6;--pf-cyan:#5ff4ff;--pf-frost:#bffcff;--pf-muted:#9fb0d0;--pf-line:rgba(140,200,255,.14);--pf-glass:linear-gradient(180deg,rgba(20,32,60,.55),rgba(8,14,30,.55));--pf-grad:linear-gradient(90deg,#2ee6d6,#5ff4ff 50%,#6aa8ff);--pf-pill:linear-gradient(180deg,#7ff7ee,#2b6cff);position:relative;z-index:1;color:#e8f1ff;font-family:Inter,sans-serif;overflow-x:clip;background:radial-gradient(ellipse at 50% 0,rgba(11,26,61,.85) 0,transparent 55%)}
.shs-pf *{box-sizing:border-box}
.shs-pf .ac{background:var(--pf-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.shs-pf .ph{display:inline-block;background:#ffd27a;color:#1a1200;font:700 10px/1.4 Inter,sans-serif;letter-spacing:.12em;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:6px;-webkit-text-fill-color:#1a1200;cursor:help}
.shs-pf .eyebrow{position:relative;font:600 12px Inter,sans-serif;letter-spacing:.3em;color:var(--pf-teal);text-transform:uppercase}
.shs-pf h1{position:relative;font:700 64px/1.08 Sora,sans-serif;margin:18px 0;color:#fff;letter-spacing:0}
.shs-pf .scroll{margin-top:40px;font-size:12px;letter-spacing:.2em;color:var(--pf-muted);animation:pfbob 2.4s ease-in-out infinite}
@keyframes pfbob{50%{transform:translateY(6px)}}
/* map */
.shs-pf .pf-map{position:relative;height:var(--mh,auto);max-width:none}
.shs-pf .pf-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:none}
.shs-pf.js .pf-svg{display:block}
.shs-pf .pf-ghost{fill:none;stroke:rgba(191,252,255,.12);stroke-width:1.5;stroke-dasharray:2 8}
.shs-pf .pf-trail{fill:none;stroke:#fff;stroke-width:2.6;filter:url(#pfglow);stroke-linecap:round}
.shs-pf .pf-head{fill:#fff;filter:url(#pfglow);animation:pfhp 1.1s ease-in-out infinite}
@keyframes pfhp{50%{r:11}}
.shs-pf .nd .core{fill:#fff;transition:all .4s}
.shs-pf .nd .halo{opacity:.25;transition:opacity .6s,transform .6s;transform-box:fill-box;transform-origin:center}
.shs-pf .nd.lit .halo{opacity:1}.shs-pf .nd.lit .core{filter:url(#pfglow)}.shs-pf .nd.lit .arm{opacity:.9}
.shs-pf .arm{opacity:.2;transition:opacity .8s}
.shs-pf .st{fill:#cfe9ff}
/* cards: stacked list without JS, positioned on the path with JS */
.shs-pf .pf-list{list-style:none;margin:0 auto;padding:0 20px 40px;max-width:600px}
.shs-pf .pf-card{position:relative;z-index:2;margin:0 0 28px;background-color:rgba(8,14,32,.92);background-image:var(--pf-glass);border:1px solid var(--pf-line);border-radius:28px;padding:26px 28px;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(95,244,255,.18),0 0 40px rgba(46,230,214,.18)}
.shs-pf.js .pf-list{max-width:none;padding:0;margin:0}
.shs-pf.js .pf-card{position:absolute;width:560px;margin:0;opacity:0;transform:translateY(24px) scale(.97);box-shadow:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s}
.shs-pf.js .pf-card.on{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(95,244,255,.18),0 0 40px rgba(46,230,214,.18)}
.shs-pf .pf-card .dt{font:700 13px Sora,sans-serif;letter-spacing:.18em;color:var(--pf-teal);text-transform:uppercase}
.shs-pf .pf-card h3{font:600 22px/1.25 Sora,sans-serif;margin:8px 0 10px;color:#fff}
.shs-pf .pf-card p{font-size:14.5px;line-height:1.65;color:#c4d3ee;margin:0}
.shs-pf .src{display:inline-block;margin-top:10px;font-size:12px;color:var(--pf-cyan);text-decoration:none}
.shs-pf .src:hover,.shs-pf .src:focus-visible{text-decoration:underline}

/* hero: S3 black-hole loop, neon logo locked to the core (about-v1.2/hero via about-v1.3/C2) */
@keyframes pfneon{0%,100%{opacity:1;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(190,250,255,.8)) drop-shadow(0 0 20px rgba(95,244,255,.5))}50%{opacity:.82;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(190,250,255,.5)) drop-shadow(0 0 10px rgba(95,244,255,.25))}}
.shs-pf .pf-hero{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden;background:#04060f url(portfolio-hero/poster-desktop.jpg?v=4427ce98a7) 50% 50%/cover no-repeat}
.shs-pf .pf-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.shs-pf .pf-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,#04060f);pointer-events:none}
.shs-pf .pf-hero .hlogo{position:absolute;z-index:4;left:50%;top:50%;width:26.4%;height:auto;max-width:none;margin:0;transform:translate(-50%,-50%);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(191,252,255,.75)) drop-shadow(0 0 18px rgba(95,244,255,.45));animation:pfneon 5s ease-in-out infinite}
.shs-pf .pf-intro{position:relative;z-index:2;text-align:center;padding:90px 24px 60px;max-width:860px;margin:auto}
.shs-pf .pf-intro p{position:relative;color:var(--pf-muted);font-size:18px;line-height:1.7;margin:0}
.shs-pf .pf-lead{fill:none;stroke:url(#pfleadg);stroke-width:2.6;filter:url(#pfglowL);stroke-linecap:round}
/* music videos (lazy youtube-nocookie facade) */
.shs-pf .pf-mv{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:40px 24px 30px;text-align:center}
.shs-pf .pf-mv h2{font:700 44px Sora,sans-serif;margin:12px 0 30px;color:#fff}
.shs-pf .mvg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.shs-pf .pf-mv figure{margin:0}
.shs-pf .yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#04060f;border:1px solid var(--pf-line);box-shadow:0 0 0 1px rgba(95,244,255,.12),0 0 30px rgba(46,230,214,.14)}
.shs-pf .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.shs-pf .pf-mv figcaption{margin-top:12px;font:600 15px Sora,sans-serif;color:var(--pf-frost)}
.shs-pf .ytf{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;border-radius:0;cursor:pointer;background:#04060f}
.shs-pf .ytf img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .3s}
.shs-pf .ytf .play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--pf-pill);box-shadow:0 0 26px rgba(46,230,214,.6);transition:transform .3s}
.shs-pf .ytf .play::after{content:"";position:absolute;left:27px;top:21px;border-left:20px solid #04060f;border-top:13px solid transparent;border-bottom:13px solid transparent}
.shs-pf .ytf:hover img,.shs-pf .ytf:focus-visible img{opacity:1}.shs-pf .ytf:hover .play,.shs-pf .ytf:focus-visible .play{transform:scale(1.06)}
.shs-pf .ytf:focus-visible{outline:2px solid var(--pf-cyan);outline-offset:-2px}
/* stay up to date: CTA + socials (spaced out more than the design: section padding, CTA margins, social gap) */
.shs-pf .pf-outro{text-align:center;padding:84px 24px 190px}
.shs-pf .pf-outro h2{font:700 44px Sora,sans-serif;margin:0 0 36px;color:#fff}
.shs-pf .pill{display:inline-block;margin:0 8px;padding:15px 32px;border-radius:99px;background:var(--pf-pill);color:#03101c;font:600 15px Inter,sans-serif;text-decoration:none;box-shadow:0 0 24px rgba(46,230,214,.6)}
.shs-pf .pill:hover,.shs-pf .pill:focus-visible{filter:brightness(1.08);color:#03101c}
.shs-pf .soc{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 18px;margin:52px auto 0;max-width:820px}
.shs-pf .soc a{font:600 13px Inter,sans-serif;color:#e8f1ff;text-decoration:none;padding:10px 18px;border-radius:99px;border:1px solid rgba(140,200,255,.22);transition:all .3s}
.shs-pf .soc a:hover,.shs-pf .soc a:focus-visible{color:#03101c;background:var(--pf-pill);box-shadow:0 0 18px rgba(46,230,214,.6)}
@media (max-width:700px){.shs-pf h1{font-size:38px}.shs-pf .pf-hero{aspect-ratio:390/844;background-image:url(portfolio-hero/poster-mobile.jpg?v=bbed8ed57d)}.shs-pf .pf-hero .hlogo{width:66%}.shs-pf .pf-intro{padding:60px 20px 30px}.shs-pf .pf-intro p{font-size:15px}.shs-pf.js .pf-card{width:calc(100% - 64px);padding:20px}.shs-pf .pf-card h3{font-size:18px}.shs-pf .pf-card p{font-size:13.5px}.shs-pf .mvg{grid-template-columns:1fr;gap:20px}.shs-pf .pf-mv h2,.shs-pf .pf-outro h2{font-size:30px}.shs-pf .pf-outro{padding:64px 20px 150px}.shs-pf .pf-outro h2{margin-bottom:30px}.shs-pf .soc{gap:12px 12px;margin-top:42px}.shs-pf .soc a{font-size:12px;padding:9px 15px}}
@media (prefers-reduced-motion:reduce){.shs-pf .pf-head,.shs-pf .scroll{animation:none}.shs-pf.js .pf-card{transition:none}.shs-pf .nd *{transition:none}.shs-pf .pf-hero video{display:none}.shs-pf .pf-hero .hlogo{animation:none}}
.shs-pf .pf-card .dt:empty{display:none}
/* 1.2.17: black hole sits ~15% closer to the top (core 50% -> 42.5% of hero); bottom fades out into the page (no hard band) */
.shs-pf .pf-hero{background:none;-webkit-mask-image:linear-gradient(#000 0,#000 58%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:linear-gradient(#000 0,#000 58%,rgba(0,0,0,.6) 78%,transparent 100%)}
.shs-pf .pf-hero::before{content:"";position:absolute;left:0;right:0;top:-15%;height:115%;background:#04060f url(portfolio-hero/poster-desktop.jpg?v=4427ce98a7) 50% 50%/cover no-repeat}
.shs-pf .pf-hero video{inset:auto 0;top:-15%;height:115%}
.shs-pf .pf-hero::after{display:none}
.shs-pf .pf-hero .hlogo{top:42.5%}
.shs-pf .pf-intro{margin-top:-6%}
@media (max-width:700px){.shs-pf .pf-hero{background:none}.shs-pf .pf-hero::before{background-image:url(portfolio-hero/poster-mobile.jpg?v=bbed8ed57d)}.shs-pf .pf-intro{margin-top:-14%}}
/* 1.2.19: poster url()s carry ?v=<md5 prefix> (update if the posters change) */
/* 1.2.18: music videos as nebula milestone marks on the C2 line */
.shs-pf .pf-card.pf-vid{border-color:rgba(169,139,255,.28)}
.shs-pf.js .pf-card.pf-vid.on,.shs-pf .pf-card.pf-vid{box-shadow:0 0 0 1px rgba(169,139,255,.25),0 0 46px rgba(169,139,255,.18),0 0 80px rgba(46,230,214,.12)}
.shs-pf .pf-vid .yt{margin-top:14px}
.shs-pf .nd.vid .halo2{opacity:.2;transition:opacity .8s}.shs-pf .nd.vid.lit .halo2{opacity:.8}
.shs-pf .nd.vid .arm{fill:#e2d8ff}
@media (prefers-reduced-motion:no-preference){.shs-pf .nd.vid.lit .halo2{animation:pfneb 6s ease-in-out infinite}}
@keyframes pfneb{50%{opacity:.5;transform:scale(1.12)}}
/* 1.2.18: bottom = Stay up to date + socials, then "Want to work with Solar Heavy?" + CTA */
.shs-pf .pf-work{margin:84px auto 0}
.shs-pf .pf-work h2{font:700 34px Sora,sans-serif;margin:0 0 34px;color:#fff}
@media (max-width:700px){.shs-pf .pf-work{margin-top:64px}.shs-pf .pf-work h2{font-size:24px;margin-bottom:28px}}

/* 1.2.19 perf: line on its own composited layer; HTML tip dot moved by translate3d with a pre-blurred gradient glow (no filters on moving parts) */
.shs-pf .pf-lsvg{z-index:1;pointer-events:none;will-change:transform;contain:layout paint}
.shs-pf .pf-lsvg .pf-trail{will-change:stroke-dashoffset}
.shs-pf .pf-dot{display:none;position:absolute;left:0;top:0;z-index:1;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;will-change:transform;background:radial-gradient(circle,#fff 0,#fff 14%,rgba(220,250,255,.75) 22%,rgba(150,240,255,.32) 42%,rgba(95,244,255,.1) 62%,rgba(95,244,255,0) 72%)}
.shs-pf.js .pf-dot{display:block}
.shs-pf .pf-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(190,250,255,.5) 0,rgba(95,244,255,0) 60%);animation:pfdot 1.1s ease-in-out infinite;will-change:opacity}
@keyframes pfdot{50%{opacity:.25}}
@media (max-width:700px){.shs-pf .pf-trail{filter:none;stroke-width:3;stroke:#fff;paint-order:stroke}.shs-pf .pf-lead{filter:none}.shs-pf .nd.lit .core{filter:none}}
@media (max-width:700px){.shs-pf .pf-lsvg .pf-trail{stroke:#f4feff}}
@media (prefers-reduced-motion:reduce){.shs-pf .pf-dot{display:none!important}.shs-pf .pf-dot::after{animation:none}}
.shs-pf .pf-trailg{display:none;fill:none;stroke:#7ff6ff;stroke-opacity:.16;stroke-width:10;stroke-linecap:round}
@media (max-width:700px){.shs-pf .pf-trailg{display:inline}}
/* 1.2.21: the drawn line starts at the core, above the map box. contain:paint on .pf-lsvg clipped everything above the map top, so the stroke and its glow ended in a hard straight edge at the bend. Layout containment only, overflow visible: one continuous round-capped stroke. Still its own composited layer, no per-frame filters. */
.shs-pf .pf-lsvg{contain:layout;overflow:visible}