:root{
  --bg:#000; --fg:#fff;
  --page-pad:28px;
  --stack-gap:22px;
  --section-gap:90px;
  --header-left:40px; --header-top:28px;
  --maxw:680px; --tracking:.14em;

  --linew: 420px;    
  --topbar-h: 85px; 
  
  --c-immersive:#29d9ff;
  --c-physical:#ff00c8;
  --c-web:#ffe100;
  --c-av:#39ff14;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.topbar{
  position: fixed; top:0; left:0; right:0;
  height: var(--topbar-h);
  background: var(--bg);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--header-left);
}
.brand{ position: static; }  
.legend{ position: static; display:flex; flex-wrap:wrap; gap:18px 28px; }


.brand__name{ font-weight:700 }

.brand__role{ opacity:.9 }


.legend button{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; border:0; color:var(--fg); cursor:pointer;
  font:inherit; padding:0; opacity:.9;
}
.legend .swatch{
  width:34px; height:6px; border-radius:3px; display:inline-block;
}
.legend [data-cat="immersive"] .swatch{ background:var(--c-immersive); }
.legend [data-cat="physical"]  .swatch{ background:var(--c-physical); }
.legend [data-cat="web"]       .swatch{ background:var(--c-web); }
.legend [data-cat="av"]        .swatch{ background:var(--c-av); }
.legend button.active{ opacity:1; text-decoration:underline }


main{
  display:grid; place-items:start center;
  padding: calc(var(--page-pad) * 2) var(--page-pad);
  margin-top: var(--topbar-h);
  
}
.stack{ width:min(100%,var(--maxw)); text-align:center; margin-top:115px }
section{ margin:0 auto var(--section-gap) }
h2{
  margin:0 0 28px; font-size:20px; font-weight:700;
  letter-spacing:var(--tracking); text-transform:uppercase; text-align: left;
}


ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:var(--stack-gap);
  justify-items:center; 
}


li{
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:18px;
  width:var(--linew);    
  text-align:left;      
}
li .rect{ width:34px; height:6px; border-radius:3px; }
li[data-cat="immersive"] .rect{ background:var(--c-immersive) }
li[data-cat="physical"]  .rect{ background:var(--c-physical) }
li[data-cat="web"]       .rect{ background:var(--c-web) }
li[data-cat="av"]        .rect{ background:var(--c-av) }

li a{ color:var(--fg); text-decoration:none; font-size:16px }
li a:hover{ text-decoration:underline }

/* hidden when filtering */
li[hidden]{ display:none !important }




/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| LINE CROSS ||||||||||||||||||||||||||||||||||||||||||||||||||||| */


li a{
  position: relative;
  display: inline-block;
  width: max-content;    
  justify-self: start;    
  color: var(--fg);
  text-decoration: none;
  font-size: 16px;
  transition: color .3s ease;
}

li a:hover{
  text-decoration: none !important;
  color: #777;         
}


li a::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 0;
  background: currentColor; 
  transition: width .5s cubic-bezier(.22,.61,.36,1);
  z-index: 1;
}


li a::after{
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width .6s cubic-bezier(.22,.61,.36,1);
  z-index: 2;
}


li a:hover::before{ width: 100%; }
li a:hover::after{
  width: 100%;
  background: transparent; 
  transition: 0s;
}

/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| SCREEN LINES ||||||||||||||||||||||||||||||||||||||||||||||||||||| */


.screen-line{
  position: fixed;
  left: 50%;
  top: 50%;
  width: 240vw;             
  height: 8px;
  background: #fff;          
  border-radius: 4px;
  pointer-events: none;
  z-index: 900;              
  opacity: 0;
  transform: translate(-50%,-50%) rotate(var(--angle,0deg)) scaleX(.04);
  transform-origin: 50% 50%;
  animation: screenLine 900ms ease-out forwards;
}

@keyframes screenLine{
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) scaleX(.04); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) scaleX(1); }
}

@media (max-width: 640px){
  .screen-line{ height: 6px; }
}





/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| MOUSE ||||||||||||||||||||||||||||||||||||||||||||||||||||| */



/* ||||||||||||||||||||||||||||||||||||||||||||||||||||| MEDIA ||||||||||||||||||||||||||||||||||||||||||||||||||||| */

@media (max-width:640px){
    :root{ --linew: 86vw; } 
  .legend{ right:18px; gap:12px 18px }
}


@media (max-width: 900px){
  .legend{ gap:14px 18px; }
  .legend .swatch{ width:28px; }
}


@media (max-width: 640px){
  :root{ --topbar-h: 120px; }      
  .topbar{
    flex-direction: column;                 
    align-items: flex-start;
    padding: 10px var(--header-left);
    gap: 8px;                               
  }
  .legend{
    width: 100%;
    gap: 12px;                              
    flex-wrap: nowrap;                      
    overflow-x: auto;                       
    -webkit-overflow-scrolling: touch;      
    padding-bottom: 4px;                    
  }
  .legend button{ font-size: 14px; }
  .legend .swatch{ width:24px; height:6px; }
}