/* Site #5 hero: midnight navy, glass, electric blue / cyan */
:root{--nv:#050b1a;--ink:rgba(6,14,32,.52);--ln:rgba(120,180,255,.32);--eb:#2f7bff;--cy:#38e1ff}
.h5{position:relative;height:1500vh;background:var(--nv)}
.h5s{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--nv) url(frames/d/001.webp) center/cover no-repeat}
#h5cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.h5shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,8,20,.55),rgba(3,8,20,0) 26%,rgba(3,8,20,0) 70%,rgba(3,8,20,.45))}
.h5fx,.h5lines{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.h5lines line{stroke:var(--cy);stroke-width:1;stroke-dasharray:3 4;opacity:0;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.hs{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;will-change:transform}
.hs i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--cy);box-shadow:0 0 0 2px rgba(56,225,255,.35),0 0 18px var(--cy)}
.hs::before,.hs::after{content:"";position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--cy);animation:pulse 2.4s ease-out infinite}
.hs::after{animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.fx-brk{position:absolute;left:22%;right:22%;top:10%;bottom:22%;opacity:0;
 background:linear-gradient(var(--cy),var(--cy)) 0 0/26px 1px,linear-gradient(var(--cy),var(--cy)) 0 0/1px 26px,linear-gradient(var(--cy),var(--cy)) 100% 0/26px 1px,linear-gradient(var(--cy),var(--cy)) 100% 0/1px 26px,
 linear-gradient(var(--cy),var(--cy)) 0 100%/26px 1px,linear-gradient(var(--cy),var(--cy)) 0 100%/1px 26px,linear-gradient(var(--cy),var(--cy)) 100% 100%/26px 1px,linear-gradient(var(--cy),var(--cy)) 100% 100%/1px 26px;background-repeat:no-repeat}
.fx-brk::after{content:"";position:absolute;left:0;right:0;height:1px;top:0;background:linear-gradient(90deg,transparent,rgba(56,225,255,.55),transparent);animation:scanY 4.5s ease-in-out infinite alternate}
@keyframes scanY{to{top:100%}}
.fx-scan{position:absolute;width:320px;height:180px;opacity:0;border-left:1px solid var(--ln);border-right:1px solid var(--ln)}
.fx-scan::after{content:"";position:absolute;top:0;bottom:0;width:2px;left:0;background:linear-gradient(180deg,transparent,var(--cy),transparent);box-shadow:0 0 12px var(--cy);animation:scanX 2.6s ease-in-out infinite alternate}
@keyframes scanX{to{left:100%}}
.fx-sweep{position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(170,220,255,.16) 48%,rgba(255,255,255,.22) 50%,rgba(170,220,255,.16) 52%,transparent 65%) -60vw 0/220% 100% no-repeat;animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{to{background-position:60vw 0}}
.fx-warm{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 70%,rgba(255,190,120,.10),transparent 60%),linear-gradient(180deg,rgba(20,60,140,.18),transparent 40%)}
.p5,.p5intro,.p5fin{position:absolute;color:#fff;opacity:0;visibility:hidden;will-change:opacity,translate}
.p5{width:min(400px,30vw);padding:22px 24px;background:var(--ink);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--ln);border-radius:14px;box-shadow:0 0 0 1px rgba(47,123,255,.08) inset}
.p5[data-ch="4"]{width:min(340px,26vw)}
.p5.tl{left:clamp(24px,4vw,64px);top:clamp(92px,13vh,130px)}.p5.tr{right:clamp(150px,13vw,200px);top:clamp(92px,13vh,130px)}
.p5cat{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cy);margin:0 0 10px;font-weight:600}
.p5 h2{font-size:clamp(24px,2.1vw,32px);line-height:1.12;letter-spacing:-.015em;font-weight:700;margin:0 0 10px}
.p5d{font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);margin:0}
.p5tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.p5tags li{font-size:11px;letter-spacing:.06em;padding:4px 9px;border:1px solid var(--ln);border-radius:999px;color:rgba(255,255,255,.86)}
.p5link{display:inline-block;margin-top:14px;font-size:13px;color:#9cc4ff;text-decoration:none;border-bottom:1px solid rgba(156,196,255,.35)}
.p5link:hover,.p5link:focus-visible{color:#fff;border-color:var(--cy)}
.p5intro{left:clamp(24px,5vw,80px);top:clamp(110px,16vh,170px);max-width:min(560px,44vw);opacity:1;visibility:visible}
.p5brand{font-size:12px;letter-spacing:.34em;color:var(--cy);font-weight:600;margin:0 0 14px}
.p5intro h1{font-size:clamp(40px,4.6vw,72px);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin:0 0 16px;text-shadow:0 2px 24px rgba(0,0,0,.4)}
.p5explore{position:absolute;left:0;right:0;bottom:7vh;text-align:center;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#fff;opacity:0;margin:0}
.p5fin{left:50%;top:clamp(96px,14vh,150px);transform:translateX(-50%);width:min(820px,90vw);text-align:center}
.p5fin h2{font-size:clamp(38px,5vw,76px);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin:0 0 12px;text-shadow:0 2px 30px rgba(0,20,60,.45)}
.p5fin .p5d{font-size:clamp(16px,1.4vw,19px);color:#fff}
.p5btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.h5nav{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.h5nav a{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:rgba(255,255,255,.5);text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.h5nav a span{opacity:0;transform:translateX(6px);transition:.3s}
.h5nav a b{font-weight:600;padding-right:14px;border-right:1px solid rgba(255,255,255,.25);transition:.3s}
.h5nav a:hover span,.h5nav a:focus-visible span,.h5nav a.on span{opacity:1;transform:none}
.h5nav a.on{color:#fff}.h5nav a.on b{color:var(--cy);border-color:var(--cy);text-shadow:0 0 10px var(--cy)}
@media (hover:hover){.p5{transition:box-shadow .3s,border-color .3s}.p5:hover{border-color:rgba(56,225,255,.6);box-shadow:0 0 24px rgba(47,123,255,.25)}}
@media (max-width:720px),(orientation:portrait){
 .h5{height:1300vh}
 .h5s{background-image:url(frames/m3/001.webp)}
 .h5nav{display:none}
 .p5,.p5.tl,.p5.tr{left:14px;right:14px;width:auto;top:74px;padding:14px 16px;border-radius:12px}
 .p5 h2{font-size:21px;margin-bottom:6px}.p5d{font-size:13.5px;line-height:1.45}.p5cat{font-size:10px;margin-bottom:6px}
 .p5tags{margin-top:9px;gap:5px}.p5tags li{font-size:10px;padding:3px 8px}.p5link{margin-top:9px;font-size:12px}
 .p5intro{left:18px;right:18px;max-width:none;top:96px}.p5intro h1{font-size:clamp(32px,9vw,42px)}
 .p5fin{top:96px}.p5fin h2{font-size:clamp(32px,9vw,42px)}
 .hs i{width:10px;height:10px;left:-5px;top:-5px}.hs::before,.hs::after{width:32px;height:32px;left:-16px;top:-16px}
 .fx-scan{width:200px;height:110px}
 .p5explore{bottom:9vh}
 .p5[data-ch="3"]{top:auto;bottom:22px}
 .h5shade{background:linear-gradient(180deg,rgba(3,8,20,.78),rgba(3,8,20,.35) 30%,rgba(3,8,20,0) 46%,rgba(3,8,20,0) 72%,rgba(3,8,20,.55))}
 .p5intro h1,.p5fin h2{text-shadow:0 2px 18px rgba(0,0,0,.6)}
}
@media (prefers-reduced-motion:reduce){.hs::before,.hs::after,.fx-brk::after,.fx-scan::after,.fx-sweep,.h5lines line{animation:none}}