/* home: hero, then the three phases as one connected row */
.hm { padding: 0 var(--gutter) 10vh calc(var(--zip-x) + 26px); }
.hm-hero { min-height: 58svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 120px; }
.hm-hero h1 { margin: 0; font: 900 clamp(46px, 8.4vw, 150px)/0.95 var(--display); }
.hm-lede { margin: 28px 0 0; max-width: 46ch; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.55; color: var(--ink); }
.hm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 26px; }
.hm-date { font: 900 clamp(20px, 2vw, 32px)/1 var(--display); color: var(--ink); text-shadow: 0 0 14px rgba(150, 180, 255, 0.35); }
.home .people { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.home .people a { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--dim); }
.home .people img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 14px rgba(120,150,255,.35); }

.hm-phases { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 9vh; }
.hm-beam { position: absolute; left: 4%; right: 4%; top: 46px; width: 92%; height: 10px; z-index: 0; overflow: visible; }
.hb-base { stroke: rgba(150, 170, 255, 0.22); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hb-pulse { stroke: rgb(60, 255, 230); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: .08 1; stroke-dashoffset: .08; opacity: 0; filter: drop-shadow(0 0 8px rgb(60,255,230)); }
.hm-phases.lit .hb-pulse { animation: hb-run 1.6s cubic-bezier(.2,.7,.2,1) .2s 1 both; }
@keyframes hb-run { 0% { opacity: 0; stroke-dashoffset: .08; } 10% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }

.phase { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 22px; border-radius: 18px; min-height: 560px; isolation: isolate;
  background: radial-gradient(120% 60% at 50% 0%, hsla(var(--th), 80%, 55%, 0.20), transparent 62%), linear-gradient(180deg, hsla(var(--th), 50%, 14%, 0.92), rgba(5, 7, 14, 0.97) 60%);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 0 0 1px hsla(var(--th), 80%, 70%, .16) inset, 0 40px 90px -40px hsla(var(--th), 90%, 50%, .6);
  opacity: .35; translate: 0 18px; transition: opacity .5s ease calc(var(--i) * .35s + .3s), translate .6s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .35s + .3s), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.hm-phases.lit .phase { opacity: 1; translate: 0 0; }
.phase::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from calc(var(--i) * 120deg), rgb(20,214,255), rgb(48,96,255), rgb(140,58,255), rgb(255,40,150), rgb(60,255,230), rgb(20,214,255));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .3; transition: opacity .3s; }
.phase:hover { transform: translateY(-10px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 0 0 1px hsla(var(--th), 80%, 70%, .28) inset, 0 60px 110px -40px hsla(var(--th), 95%, 55%, .85); }
.phase:hover::before { opacity: .95; }
.ph-n { font: 900 64px/1 var(--display); color: hsl(var(--th) 95% 76%); text-shadow: 0 0 18px hsla(var(--th), 95%, 65%, .55); }
.ph-name { font: 900 clamp(30px, 2.6vw, 44px)/1 var(--display); color: var(--ink); }
.ph-line { font-size: 15.5px; line-height: 1.5; color: var(--dim); min-height: 3em; }
.ph-art { display: block; height: 170px; margin: 6px -4px; border-radius: 10px; background: rgba(0,0,0,.28); overflow: hidden; position: relative; }
.ph-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.ph-stats span { display: flex; flex-direction: column; gap: 4px; }
.ph-stats b { font: 900 28px/1 var(--display); color: var(--ink); }
.ph-stats small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ph-go { align-self: flex-end; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); transition: color .2s; }
.phase:hover .ph-go { color: rgb(60,255,230); }

/* 01 art: the atlas */
.dots { position: absolute; inset: 14px; display: grid; grid-template-columns: repeat(auto-fill, 9px); gap: 5px; align-content: center; justify-content: center; }
.dots i { width: 9px; height: 9px; border-radius: 2px; background: rgba(150, 190, 230, 0.16); }
.dots i.on { background: rgb(60, 255, 230); box-shadow: 0 0 8px rgba(60, 255, 230, .9); opacity: 0; transition: opacity .3s ease var(--d); }
.hm-phases.lit .dots i.on { opacity: 1; }
/* 02 art: the night */
.ph-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rg-l { fill: none; stroke: hsl(250 95% 78%); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px hsl(250 95% 65%)); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1) .7s; }
.hm-phases.lit .rg-l { stroke-dashoffset: 0; }
/* 03 art: the projects */
.cells { position: absolute; inset: 18px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; align-content: center; justify-items: center; }
.cells i { width: 16px; height: 16px; transform: rotate(45deg) scale(.6); border: 1px solid rgba(170, 174, 188, .35); transition: transform .4s cubic-bezier(.2,.7,.2,1) calc(var(--d) + 1s), background .4s calc(var(--d) + 1s), box-shadow .4s calc(var(--d) + 1s); }
.hm-phases.lit .cells i.c-result { transform: rotate(45deg) scale(1); background: rgb(60, 255, 230); border-color: transparent; box-shadow: 0 0 10px rgba(60,255,230,.8); }
.hm-phases.lit .cells i.c-adverse { transform: rotate(45deg) scale(.85); border-color: rgba(247, 118, 142, .8); }
.hm-phases.lit .cells i:not(.c-result):not(.c-adverse) { transform: rotate(45deg) scale(.75); }

@media (max-width: 1100px) { .hm-phases { grid-template-columns: 1fr; } .hm-beam { display: none; } .phase { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .phase { opacity: 1; translate: none; transition: none; } .hm-phases.lit .hb-pulse { animation: none; } .rg-l { stroke-dashoffset: 0; transition: none; } .dots i.on { opacity: 1; } }

/* one screen: hero and the three phases share the viewport */
.home .hm { height: 100svh; min-height: 640px; display: flex; flex-direction: column; padding-top: 96px; padding-bottom: 3vh; box-sizing: border-box; }
.home .hm-hero { min-height: 0; padding-top: 0; flex: none; }
.home .hm-hero h1 { font-size: clamp(40px, min(5.6vw, 10vh), 112px); white-space: nowrap; }
.home .hm-lede { margin-top: 2.2vh; font-size: clamp(15px, min(1.25vw, 2.2vh), 20px); max-width: 64ch; }
.home .hm-meta { margin-top: 1.8vh; }
.home .hm-date { font-size: clamp(18px, min(1.6vw, 3vh), 28px); }
.home .hm-phases { flex: 1; min-height: 0; margin-top: 3.5vh; }
.home .phase { min-height: 0; padding: 2.2vh 22px 1.8vh; gap: 1.1vh; }
.home .ph-n { font-size: clamp(30px, 4.6vh, 52px); }
.home .ph-name { font-size: clamp(22px, min(2.2vw, 4vh), 38px); }
.home .ph-line { min-height: 0; font-size: 14px; }
.home .ph-art { flex: 1; min-height: 60px; height: auto; margin: 0.6vh -4px; }
.home .ph-stats { padding-top: 1.2vh; } .home .ph-stats b { font-size: clamp(20px, 3vh, 28px); }
.home .hm-beam { top: 4vh; }
@media (max-width: 1100px) { .home .hm { height: auto; } .home .hm-hero h1 { white-space: normal; } .home .ph-art { flex: none; height: 150px; } }
.home .ph-stats { gap: 16px; flex-wrap: nowrap; } .home .ph-stats small { letter-spacing: .08em; white-space: nowrap; }

/* the demo film link in the hero, and the film page */
.hm-film { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 2vh; padding-bottom: 5px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid rgba(60, 255, 230, 0.4); transition: color .2s, border-color .2s; }
.hm-film i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent rgb(60, 255, 230); }
.hm-film:hover { color: rgb(60, 255, 230); border-bottom-color: rgb(60, 255, 230); }
.film { max-width: min(1280px, 92vw, calc((100svh - 290px) * 16 / 9)); margin: 0 auto; padding: 104px 0 40px; }
.film h1 { margin: 0 0 6px; font: 900 clamp(34px, 4.6vw, 72px)/1 var(--display); }
.film .film-sub { margin: 0 0 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(255, 255, 255, 0.14); }
.film .film-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-size: 13px; }
.film .film-links a { color: var(--ink); border-bottom: 1px solid rgba(60, 255, 230, 0.4); }
.film .film-links a:hover { color: rgb(60, 255, 230); }