/* v4: pixel-art dusk hero (palette from the reference image). Loads last. */
.px{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;image-rendering:pixelated;display:block}
#cvSky,#cvSpark{object-position:50% 0}
.cliffL{object-position:0 100%}
.cliffR{object-position:100% 100%}
.hero .sky:not(.dusk),.hero .stars{display:none}
.hero{background:#506e90}
.sky.dusk{position:absolute;inset:0;z-index:3;mix-blend-mode:multiply;pointer-events:none;opacity:0;background:linear-gradient(180deg,#1a1d4a,#6a4a7a)}
.twinkle{animation:tw 3.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.55}}
.sway{inset:0 -14px;width:calc(100% + 28px);animation:swayA 16s ease-in-out infinite alternate}
.sway2{inset:0 -14px;width:calc(100% + 28px);animation:swayA 12s ease-in-out -5s infinite alternate-reverse}
@keyframes swayA{to{transform:translateX(12px)}}

/* ring + figure */
.ring{image-rendering:pixelated;filter:drop-shadow(0 18px 0 rgba(20,16,50,.18))}
.me-svg{image-rendering:pixelated;filter:none}
.me{animation:none}

/* light text on the dusk sky */
.hero-left .big,.big{color:#fdf0dc}
.big .acc{color:#f4a27d}
.big .caret{background:#f4a27d}
.name{color:#fdf0dc}
.role{color:#f4a27d}
.pill{background:rgba(24,22,52,.45);color:#fdf0dc;backdrop-filter:blur(8px);box-shadow:none;border:1px solid rgba(255,255,255,.18)}
.blurb{background:rgba(24,22,52,.42);color:#eadfe8;border:1px solid rgba(255,255,255,.12);box-shadow:none}
.hero .scroll-cue{color:#fdf0dc}
.mouse{border-color:rgba(253,240,220,.85)}
.nav nav a,.brand{color:#fdf0dc}
.avail{color:#1a1830!important}

.name span:nth-child(3){color:#f4a27d}
.name span{color:#fdf0dc}
.name span:nth-child(3){color:#f4a27d}

/* ---- portrait hero (head and shoulders, headphones) ---- */
.hero{--W:min(30vw,44vh);--bot:0px}
.me{width:var(--W)}
.me-photo{width:100%;height:auto;max-height:none;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);filter:drop-shadow(0 20px 30px rgba(20,16,50,.35)) saturate(.95)}
.ring-box{height:calc(var(--W)*1024/748)}
.ring{left:50%;top:38%;width:125%}
@media (max-width:900px){.hero{--W:min(58vw,40vh)}}
.me-photo{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 80%,transparent 100%),linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-composite:intersect}

/* ---- phones: single column hero, calmer scene ---- */
@media (max-width:700px), (max-width:900px) and (orientation:portrait){
  .hero{--W:min(60vw,38vh);--bot:clamp(64px,9vh,96px)}
  .cliffL,.cliffR{display:none}
  .hero-left{top:78px}
  .big{font-size:clamp(2.6rem,13vw,3.6rem)}
  .hero-right{top:clamp(236px,31vh,290px);bottom:auto;left:18px;right:auto;text-align:left;max-width:80vw}
  .name{font-size:clamp(1.5rem,7vw,2rem)}
  .name span{display:inline}
  .name span:after{content:" "}
  .role{margin-top:6px;font-size:.8rem}
  .blurb{display:none}
}

/* ---- smooth sage ring, much larger (matches the reference video) ---- */
.ring{image-rendering:auto;width:250%;filter:drop-shadow(0 36px 46px rgba(30,24,70,.35)) drop-shadow(0 2px 0 rgba(255,255,255,.35))}
.hero-left,.hero-right{text-shadow:0 2px 22px rgba(18,22,54,.6)}
@media (max-width:700px), (max-width:900px) and (orientation:portrait){.ring{width:215%}}

/* ---- smooth scrolling: drop everything that forces a re-blur or re-blend every frame ---- */
.ring{filter:none;will-change:auto}
.sky.dusk{mix-blend-mode:normal;background:linear-gradient(180deg,#12163a,#3d2c5e)}
.cursor-glow{mix-blend-mode:normal;background:radial-gradient(circle,rgba(255,200,87,.1),transparent 65%)}
.orb{filter:none;animation:none;opacity:1;background:radial-gradient(circle,var(--orb,rgba(232,96,63,.3)),transparent 68%)}
.o1,.o3{--orb:rgba(232,96,63,.3)}
.o2,.o4{--orb:rgba(91,75,255,.26)}
.pill,.blurb,.cert-in,.c-card,.eyebrow,.nav.solid,.drawer,.card-art .no,.socials a{backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.solid{background:rgba(11,12,17,.92)}
.drawer{background:rgba(20,17,54,.97)}
.hero-left,.hero-right{text-shadow:0 1px 10px rgba(18,22,54,.55)}
.hero,.certs,.projects{contain:paint}
.cert-in{transition:transform .18s,border-color .3s}

/* ---- v24 performance: cached ring, portal disc, no continuous animations on big layers ---- */
.ring{will-change:transform;image-rendering:auto}
.portal{position:absolute;border-radius:50%;background:radial-gradient(circle at 50% 38%,#16131f,#0b0c11 70%);will-change:transform;transform:scale(0);visibility:hidden}
.sway,.sway2{animation:none;inset:0;width:100%}
.twinkle{animation:none}