.intro{
  position:fixed; inset:0; z-index:9999;
  background:#050607;                 
  display:grid; place-items:center;
  overflow:hidden;
}

html.intro-on, html.intro-on body{overflow:hidden}

.intro-video{
  width:100%; height:100%;
  object-fit:cover;                   
  display:block;
}

.intro-skip{
  position:absolute; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  padding:9px 16px; border:1px solid rgba(255,255,255,.22); border-radius:8px;
  background:rgba(0,0,0,.35); color:rgba(255,255,255,.72);
  font-family:var(--mono,ui-monospace,monospace); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  opacity:0; transition:opacity .4s ease, color .2s, border-color .2s;
}
.intro-skip.on{opacity:1}
.intro-skip:hover{color:#fff; border-color:rgba(255,255,255,.5)}

.intro-sound{
  position:absolute; left:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  display:flex; align-items:center; gap:9px;
  padding:9px 15px; border:1px solid rgba(255,255,255,.22); border-radius:8px;
  background:rgba(0,0,0,.35); color:rgba(255,255,255,.55);
  font-family:var(--mono,ui-monospace,monospace); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; cursor:pointer;
  opacity:0; transition:opacity .4s ease, color .2s, border-color .2s;
}
.intro-sound.on{opacity:1}
.intro-sound:hover{color:#fff; border-color:rgba(255,255,255,.5)}
.intro-sound-ico{display:flex; align-items:flex-end; gap:2px; height:12px}
.intro-sound-ico i{width:2px; height:4px; background:currentColor; transition:height .2s}

.intro-sound[aria-pressed="true"]{color:var(--venom,#3de08a); border-color:rgba(61,224,138,.5)}
.intro-sound[aria-pressed="true"] .intro-sound-ico i:nth-child(1){height:7px}
.intro-sound[aria-pressed="true"] .intro-sound-ico i:nth-child(2){height:12px}
.intro-sound[aria-pressed="true"] .intro-sound-ico i:nth-child(3){height:8px}

.intro-grid{
  position:absolute; inset:0;
  display:grid; pointer-events:none;
}
.intro-tile{
  background:#050607;
  will-change:transform,opacity;
}
.intro.breaking .intro-tile{
  animation:tile-out var(--dur,420ms) cubic-bezier(.4,0,.75,.2) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes tile-out{
  0%  {opacity:1; transform:scale(1)}
  35% {opacity:1; transform:scale(1); background:#3de08a}  
  100%{opacity:0; transform:scale(.15)}
}

.intro.breaking .intro-tile:not(.spark){animation-name:tile-out-plain}
@keyframes tile-out-plain{
  0%  {opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(.15)}
}

.intro.breaking{background:transparent}

.intro.breaking .intro-video{
  transition:opacity .25s linear, transform .7s ease;
  opacity:0; transform:scale(1.04);
}
.intro.breaking .intro-skip,
.intro.breaking .intro-sound{opacity:0; pointer-events:none}

main.intro-settle, header.intro-settle{
  animation:settle .6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes settle{
  from{transform:scale(1.015); opacity:.9}
  to  {transform:none;         opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .intro.breaking .intro-tile,
  .intro.breaking .intro-tile:not(.spark){animation:none; opacity:0}
  .intro.breaking{transition:opacity .3s linear; opacity:0}
  main.intro-settle, header.intro-settle{animation:none}
}