/* V4.2 homepage first screen: two-strength split ("choose your field").
   The divider never moves. Hover (or gamepad L/R) only moves a "cursor": that side lifts and the
   other dims slightly. A click, ←/→ or gamepad A selects a side. Both sides run a slow photo carousel.
   Everything is scoped to .home-split so the rest of the site is untouched. */
.home-split{
  --hs-cyan:#3fd0e0; --hs-sky:#8fd0ff; --hs-muted:#a9c0cf; --hs-tilt:4vw; --hs-ease:cubic-bezier(.22,1,.36,1);
  position:relative; height:calc(100vh - 84px); min-height:620px; max-height:1000px;
  overflow:hidden; background:#0d2233; color:#eaf2f7; isolation:isolate;
}
@supports (height:100svh){.home-split{height:calc(100svh - 84px)}}
.home-split a{color:inherit;text-decoration:none}
.home-split button{font:inherit;color:inherit}
.home-split p{color:inherit;margin:0}
.home-split h1,.home-split h2{color:#fff}

.hs-panel{position:absolute;inset:0;overflow:hidden;cursor:pointer}
.hs-a{clip-path:polygon(0 0,calc(50% + var(--hs-tilt) + 1px) 0,calc(50% - var(--hs-tilt) + 1px) 100%,0 100%)}
.hs-b{clip-path:polygon(calc(50% + var(--hs-tilt)) 0,100% 0,100% 100%,calc(50% - var(--hs-tilt)) 100%)}
.home-split[data-state="a"] .hs-a,.home-split[data-state="b"] .hs-b{cursor:default}

/* Each photo is centred in its own half so both subjects are visible from the first frame. */
.hs-bg{position:absolute;transform:scale(1.03);transition:transform .9s var(--hs-ease),filter .45s var(--hs-ease)}
.hs-a .hs-bg{inset:0 44% 0 0;filter:saturate(1.05) brightness(.9)}
.hs-b .hs-bg{inset:0 0 0 44%;filter:saturate(1.05) brightness(.95)}
/* Carousel: 1.8s cross-fade with a slow push-in; the outgoing photo resets only after it has faded. */
.hs-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1);transition:opacity 1.8s ease,transform 0s linear 1.8s}
.hs-slide.is-on{opacity:1;transform:scale(1.06);transition:opacity 1.8s ease,transform 9s linear}
.hs-b .hs-slide{background-position:52% center}
.home-split[data-state="a"] .hs-a .hs-bg,.home-split[data-state="b"] .hs-b .hs-bg{transform:scale(1.07)}
.hs-tint,.hs-read,.hs-flash{position:absolute;inset:0;pointer-events:none}
.hs-a .hs-tint{background:linear-gradient(0deg,rgba(6,20,32,.88) 0%,rgba(6,20,32,.62) 30%,rgba(6,20,32,.18) 50%,rgba(6,20,32,0) 60%),linear-gradient(90deg,rgba(6,24,38,.45) 0%,rgba(6,24,38,0) 40%),linear-gradient(180deg,rgba(6,20,32,.55) 0%,rgba(6,20,32,0) 24%)}
.hs-b .hs-tint{background:linear-gradient(0deg,rgba(6,20,32,.88) 0%,rgba(6,20,32,.62) 30%,rgba(6,20,32,.18) 50%,rgba(6,20,32,0) 60%),linear-gradient(270deg,rgba(6,24,38,.45) 0%,rgba(6,24,38,0) 40%),linear-gradient(180deg,rgba(6,20,32,.55) 0%,rgba(6,20,32,0) 24%)}
.hs-read{opacity:0;transition:opacity .7s var(--hs-ease)}
.hs-a .hs-read{background:linear-gradient(90deg,rgba(5,20,32,.88) 0%,rgba(5,20,32,.72) 40%,rgba(5,20,32,.25) 56%)}
.hs-b .hs-read{background:linear-gradient(270deg,rgba(5,20,32,.88) 0%,rgba(5,20,32,.72) 40%,rgba(5,20,32,.25) 56%)}
.home-split[data-state="a"] .hs-a .hs-read,.home-split[data-state="b"] .hs-b .hs-read{opacity:1}
.hs-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.32;transition:opacity .8s}
.home-split[data-state="a"] .hs-net{opacity:.14}
.hs-flash{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);opacity:0}
.hs-flash.go{animation:hs-flash .6s ease-out}
@keyframes hs-flash{0%{opacity:1}100%{opacity:0}}

/* Cursor: the focused side lifts, the other dims slightly (idle only). */
.hs-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(4,14,22,.42);opacity:0;transition:opacity .35s var(--hs-ease)}
.home-split[data-state="idle"][data-focus="a"] .hs-b::after,.home-split[data-state="idle"][data-focus="b"] .hs-a::after{opacity:1}
.home-split[data-state="idle"][data-focus="a"] .hs-b .hs-bg,.home-split[data-state="idle"][data-focus="b"] .hs-a .hs-bg{filter:saturate(.4) brightness(.78)}
.home-split[data-state="idle"][data-focus="a"] .hs-a .hs-bg,.home-split[data-state="idle"][data-focus="b"] .hs-b .hs-bg{transform:scale(1.06);filter:saturate(1.15) brightness(1)}
.home-split[data-state="idle"][data-focus="a"] .hs-net{opacity:.5}
.home-split[data-state="idle"][data-focus="b"] .hs-grid{opacity:.85}
.home-split[data-state="idle"][data-focus="a"] .hs-divider{background:var(--hs-cyan)}
.home-split[data-state="idle"][data-focus="b"] .hs-divider{background:var(--hs-sky)}
.home-split[data-state="idle"][data-focus="a"] .hs-a .hs-frame,.home-split[data-state="idle"][data-focus="b"] .hs-b .hs-frame{opacity:.8;animation:hs-breathe 1.4s ease-in-out infinite}
@keyframes hs-breathe{50%{transform:scale(1.025)}}
.home-split[data-state="idle"][data-focus="a"] .hs-a .hs-choose{background:rgba(63,208,224,.22);border-color:var(--hs-cyan);box-shadow:0 0 18px rgba(63,208,224,.45)}
.home-split[data-state="idle"][data-focus="b"] .hs-b .hs-choose{background:rgba(143,208,255,.2);border-color:var(--hs-sky);box-shadow:0 0 18px rgba(143,208,255,.45)}
.hs-choose{transition:background .3s,border-color .3s,box-shadow .3s}
/* Pointing at the locked side lifts its mask a little: it can be switched to. */
.home-split[data-state="a"][data-focus="b"] .hs-b .hs-mask,.home-split[data-state="b"][data-focus="a"] .hs-a .hs-mask{opacity:.86}

/* Shift grid (right side, top corner) */
.hs-grid{position:absolute;right:4vw;top:16%;display:grid;grid-template-columns:repeat(7,26px);gap:4px;opacity:.55;pointer-events:none;transition:opacity .8s}
.home-split[data-state="b"] .hs-grid{opacity:0}
.hs-grid span{height:22px;border-radius:5px;border:1px solid rgba(160,205,235,.25);background:rgba(10,40,60,.35);font:600 10px/22px var(--font);text-align:center;color:rgba(200,230,250,.32);transition:background .5s,color .5s,border-color .5s,box-shadow .5s}
.hs-grid span.on{background:rgba(28,150,212,.38);color:#fff;border-color:rgba(120,200,255,.8);box-shadow:0 0 12px rgba(28,150,212,.5)}
.hs-grid span.n.on{background:rgba(95,90,200,.42);border-color:rgba(170,160,255,.8)}
.hs-grid span.off.on{background:rgba(255,184,107,.28);border-color:rgba(255,200,140,.75)}

/* Copy: low in idle so photos stay visible; centred once chosen. Each side stays inside its half. */
.hs-copy{position:absolute;bottom:11%;width:39vw;max-height:calc(100% - 120px);overflow:auto;scrollbar-width:none;padding:15px 4px}
.hs-copy::-webkit-scrollbar{display:none}
.hs-a .hs-copy{left:5vw}
.hs-b .hs-copy{right:5vw}
.home-split[data-state="a"] .hs-a .hs-copy,.home-split[data-state="b"] .hs-b .hs-copy{bottom:auto;top:50%;transform:translateY(-50%)}
.hs-wrap{position:relative}
.hs-field{display:inline-flex;align-items:center;gap:10px;font-size:12px;line-height:1.4;letter-spacing:.3em;font-weight:700;text-transform:uppercase;color:var(--hs-cyan)}
.hs-b .hs-field{color:var(--hs-sky)}
.hs-field::before{content:"";width:30px;height:2px;background:currentColor;box-shadow:0 0 10px currentColor}
.hs-title{margin:14px 0 10px;font-size:clamp(34px,3.7vw,58px);line-height:1.15;font-weight:800;letter-spacing:.02em}
.hs-title em{font-style:normal;background:linear-gradient(90deg,#fff,var(--hs-cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-b .hs-title em{background:linear-gradient(90deg,#fff,var(--hs-sky));-webkit-background-clip:text;background-clip:text}
.hs-tagline{font-size:clamp(15px,1.1vw,18px);line-height:1.8;color:#d6e6f0!important}
.hs-title,.hs-tagline,.hs-field{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hs-choose{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.1em;padding:11px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(10,30,45,.4)}
.hs-choose i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hs-cyan);box-shadow:0 0 10px var(--hs-cyan)}
.hs-b .hs-choose i{background:var(--hs-sky);box-shadow:0 0 10px var(--hs-sky)}
.home-split[data-state="a"] .hs-choose,.home-split[data-state="b"] .hs-choose{display:none}
.home-split[data-state="a"] .hs-a .hs-title,.home-split[data-state="b"] .hs-b .hs-title{font-size:clamp(28px,2.6vw,40px);margin:8px 0 6px}
.home-split[data-state="a"] .hs-a .hs-tagline,.home-split[data-state="b"] .hs-b .hs-tagline{font-size:15px}

/* Selection frame */
.hs-frame{position:absolute;inset:-14px;pointer-events:none;opacity:0;transition:opacity .4s}
.hs-frame::before,.hs-frame::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--hs-cyan);filter:drop-shadow(0 0 6px var(--hs-cyan))}
.hs-frame::before{left:0;top:0;border-right:0;border-bottom:0}
.hs-frame::after{right:0;bottom:0;border-left:0;border-top:0}
.hs-b .hs-frame::before,.hs-b .hs-frame::after{border-color:var(--hs-sky);filter:drop-shadow(0 0 6px var(--hs-sky))}
.home-split[data-state="a"] .hs-a .hs-frame,.home-split[data-state="b"] .hs-b .hs-frame{opacity:1}

/* Detail sheet */
.hs-detail{display:none;margin-top:16px}
.home-split[data-state="a"] .hs-a .hs-detail,.home-split[data-state="b"] .hs-b .hs-detail{display:block}
.hs-label{font-size:11px;letter-spacing:.28em;font-weight:700;color:var(--hs-muted)!important;margin:0 0 10px!important;text-transform:uppercase}
.hs-records{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.hs-record{padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16)}
.hs-record b{display:block;font-size:clamp(20px,1.7vw,28px);font-weight:800;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.hs-record b small{font-size:.5em;font-weight:700;color:var(--hs-muted);margin-left:4px}
.hs-record span{display:block;font-size:12px;line-height:1.5;color:#c7dae6;margin-top:2px}
.hs-skills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hs-skills li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:10px 12px;border-radius:9px;background:rgba(8,30,46,.6);border:1px solid rgba(160,210,240,.18)}
.hs-skills li:last-child{grid-column:1 / -1}
.hs-skills .lv{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:800 12px/1 var(--font);color:#06202f;background:var(--hs-cyan);box-shadow:0 0 12px rgba(63,208,224,.45)}
.hs-b .hs-skills .lv{background:var(--hs-sky);box-shadow:0 0 12px rgba(143,208,255,.45)}
.hs-skills strong{display:block;font-size:14px;line-height:1.45;color:#fff}
.hs-skills small{display:block;font-size:12px;color:#b9cfdc;line-height:1.55;margin-top:2px}
.hs-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hs-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-size:14px;font-weight:700;border:1px solid transparent}
.home-split .hs-btn-main{background:#fff;color:#0d2233;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.hs-btn-ghost{border-color:rgba(255,255,255,.4)!important;background:rgba(255,255,255,.06)}
.hs-js .hs-record,.hs-js .hs-skills li,.hs-js .hs-cta{opacity:0;transform:translateY(10px)}
.hs-js .hs-reveal .hs-record,.hs-js .hs-reveal .hs-skills li,.hs-js .hs-reveal .hs-cta{opacity:1;transform:none;transition:opacity .5s var(--hs-ease),transform .5s var(--hs-ease)}

/* Mask over the side not chosen */
.hs-mask{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s var(--hs-ease);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px),rgba(5,15,24,.82);backdrop-filter:blur(6px) grayscale(.85)}
.home-split[data-state="a"] .hs-b .hs-mask,.home-split[data-state="b"] .hs-a .hs-mask{opacity:1;pointer-events:auto}
.hs-mask-inner{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.hs-a .hs-mask-inner{left:23%}
.hs-b .hs-mask-inner{left:77%}
.hs-lock{font-size:12px;letter-spacing:.45em;color:rgba(220,235,245,.6);display:flex;align-items:center;gap:8px}
.hs-lock svg{width:16px;height:16px}
.hs-mask-title{font-size:clamp(20px,1.8vw,28px);font-weight:800;color:rgba(235,245,250,.6)!important}
.hs-switch{cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);font-size:14px;font-weight:700;letter-spacing:.06em}

/* Fixed divider + emblem */
.hs-divider{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--hs-cyan),#fff 50%,var(--hs-sky));
  clip-path:polygon(calc(50% + var(--hs-tilt) - 1.5px) 0,calc(50% + var(--hs-tilt) + 1.5px) 0,calc(50% - var(--hs-tilt) + 1.5px) 100%,calc(50% - var(--hs-tilt) - 1.5px) 100%);
  filter:drop-shadow(0 0 10px rgba(63,208,224,.9))}
.home-split[data-state="a"] .hs-divider{background:var(--hs-cyan)}
.home-split[data-state="b"] .hs-divider{background:var(--hs-sky)}
.hs-emblem{position:absolute;left:50%;top:50%;width:116px;height:116px;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.hs-emblem::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(13,34,51,.96) 58%,rgba(13,34,51,0) 70%)}
.hs-emblem svg{position:absolute;inset:0;animation:hs-spin 18s linear infinite}
.hs-emblem img{position:relative;width:56px;height:auto;filter:drop-shadow(0 0 12px rgba(28,150,212,.7))}
.hs-ring{position:absolute;inset:8px;border-radius:50%;border:2px solid var(--hs-cyan);opacity:0}
.hs-ring.go{animation:hs-ring .7s ease-out}
@keyframes hs-ring{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
@keyframes hs-spin{to{transform:rotate(360deg)}}

/* Headline: slogan + H1 + prompt, top centre; hidden once a side is chosen */
.hs-head{position:absolute;left:50%;top:5.5%;transform:translateX(-50%);width:min(760px,80vw);text-align:center;pointer-events:none;transition:opacity .4s}
.home-split[data-state="a"] .hs-head,.home-split[data-state="b"] .hs-head{opacity:0}
.hs-slogan{font-size:clamp(17px,1.45vw,22px);font-weight:700;letter-spacing:.08em;color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.75)}
.hs-xuan,.hs-fu{display:inline-block;font-size:1.3em;font-weight:900;padding:0 .04em}
.hs-xuan{color:#5fe0d0}
.hs-fu{color:#7fcbff}
.hs-head h1{margin:6px 0 4px;font-size:clamp(20px,1.9vw,30px);font-weight:800;letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.hs-prompt{font-size:13px;letter-spacing:.12em;color:#cfe3ee!important;text-shadow:0 2px 12px rgba(0,0,0,.8)}

/* HUD inside the section */
.hs-hud{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;padding:14px 4vw 16px;font-size:13px;color:#c5d7e3;pointer-events:none}
.hs-keys{flex:1}
.hs-pad-keys,.hs-pad .hs-kb{display:none}
.hs-pad .hs-pad-keys{display:inline}
.hs-keys kbd{display:inline-block;min-width:26px;padding:2px 7px;margin-right:5px;border-radius:6px;border:1px solid rgba(255,255,255,.45);border-bottom-width:3px;font:700 12px/1.4 var(--font);text-align:center;color:#fff;background:rgba(255,255,255,.06)}
.hs-more{pointer-events:auto;font-weight:700;letter-spacing:.1em;padding:8px 16px;border-radius:999px;background:rgba(10,30,45,.45);border:1px solid rgba(255,255,255,.25)}
.hs-more span{display:inline-block;animation:hs-bob 1.8s ease-in-out infinite}
@keyframes hs-bob{50%{transform:translateY(3px)}}
.hs-hud-right{flex:1;display:flex;justify-content:flex-end;gap:10px}
.hs-back,.hs-sound,.hs-play{white-space:nowrap;pointer-events:auto;cursor:pointer;border:1px solid rgba(255,255,255,.3);background:rgba(13,34,51,.5);border-radius:999px;padding:7px 14px;font-size:13px}
.hs-back{display:none;font-weight:700}
.home-split[data-state="a"] .hs-back,.home-split[data-state="b"] .hs-back{display:inline-block}

@media (max-height:780px){
  .home-split[data-state="a"] .hs-a .hs-tagline,.home-split[data-state="b"] .hs-b .hs-tagline{display:none}
  .hs-detail{margin-top:10px}
  .hs-records{margin-bottom:12px}
  .hs-record{padding:9px 12px}
  .hs-skills{gap:6px}
  .hs-skills li{padding:7px 10px}
  .hs-cta{margin-top:10px}
  .hs-btn{padding:9px 18px}
}
@media (max-width:991px){.home-split{height:calc(100vh - 74px)}@supports (height:100svh){.home-split{height:calc(100svh - 74px)}}}

/* Phones / portrait: top & bottom halves, line fixed at the middle */
@media (max-width:820px),(max-aspect-ratio:1/1){
  .home-split{--hs-tilt:3vh;min-height:640px;max-height:none}
  .hs-a{clip-path:polygon(0 0,100% 0,100% calc(50% - var(--hs-tilt) + 1px),0 calc(50% + var(--hs-tilt) + 1px))}
  .hs-b{clip-path:polygon(0 calc(50% + var(--hs-tilt)),100% calc(50% - var(--hs-tilt)),100% 100%,0 100%)}
  .hs-divider{clip-path:polygon(0 calc(50% + var(--hs-tilt) - 1.5px),100% calc(50% - var(--hs-tilt) - 1.5px),100% calc(50% - var(--hs-tilt) + 1.5px),0 calc(50% + var(--hs-tilt) + 1.5px))}
  .hs-a .hs-bg{inset:0 0 46% 0}
  .hs-b .hs-bg{inset:46% 0 0 0}
  .hs-a .hs-tint,.hs-b .hs-tint{background:linear-gradient(0deg,rgba(6,24,38,.6),rgba(6,24,38,.15) 60%,rgba(6,24,38,.35))}
  .hs-a .hs-read,.hs-b .hs-read{background:rgba(5,20,32,.74)}
  .hs-net{opacity:.22}
  .hs-emblem{width:80px;height:80px}
  .hs-emblem img{width:38px}
  .hs-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hs-copy,.home-split[data-state="a"] .hs-a .hs-copy,.home-split[data-state="b"] .hs-b .hs-copy{width:auto;left:6vw;right:6vw;transform:none;max-height:none}
  .hs-a .hs-copy,.home-split[data-state="a"] .hs-a .hs-copy{top:14px;bottom:calc(50% + var(--hs-tilt) + 44px);display:flex;flex-direction:column;justify-content:flex-end}
  .hs-b .hs-copy,.home-split[data-state="b"] .hs-b .hs-copy{top:calc(50% + var(--hs-tilt) + 44px);bottom:60px}
  .hs-wrap{max-height:100%;overflow:auto;scrollbar-width:none}
  .hs-title{font-size:clamp(26px,7.4vw,36px);margin:8px 0 6px}
  .hs-tagline{font-size:14px;line-height:1.7}
  .home-split[data-state="a"] .hs-a .hs-tagline,.home-split[data-state="b"] .hs-b .hs-tagline{display:none}
  .hs-choose{margin-top:12px;padding:8px 14px;font-size:13px}
  .hs-records{gap:6px}
  .hs-record{padding:8px 9px}
  .hs-record b{font-size:17px}
  .hs-record span{font-size:11px}
  .hs-skills{grid-template-columns:1fr}
  .hs-skills li:last-child{grid-column:auto}
  .hs-grid{display:none}
  .hs-a .hs-mask-inner,.hs-b .hs-mask-inner{left:50%}
  .hs-a .hs-mask-inner{top:28%}
  .hs-b .hs-mask-inner{top:73%}
  .hs-frame{inset:-8px}
  .hs-keys{display:none}
  .hs-hud{padding:10px 5vw 12px}
  .hs-more{font-size:12px;padding:7px 12px}
  .hs-hud-right{gap:6px}
  .hs-back,.hs-sound,.hs-play{padding:6px 10px;font-size:12px}
  .home-split[data-state="a"] .hs-more,.home-split[data-state="b"] .hs-more{display:none}
}
@media (max-width:767px){.home-split{height:calc(100vh - 68px)}@supports (height:100svh){.home-split{height:calc(100svh - 68px)}}}
@media (prefers-reduced-motion:reduce){
  .home-split *{transition-duration:.01s!important;animation:none!important}
}