:root{
  --black:#000;
  --white:#f4f4f2;
  --silver:#b8b8b8;
  --line:rgba(255,255,255,.34);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;background:var(--black);overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;color:var(--white)}
button,a{-webkit-tap-highlight-color:transparent}

.prologue{position:relative;width:100%;height:100svh;min-height:100%;isolation:isolate;background:#000;overflow:hidden}
.prologue__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#000;transition:opacity 1.2s var(--ease),transform 1.8s var(--ease)}
.prologue.is-finished .prologue__video{opacity:0;transform:scale(1.025)}
.prologue__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 42%,rgba(0,0,0,.36));pointer-events:none}
.prologue__grain{position:absolute;inset:-50%;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");animation:grain .22s steps(2) infinite;z-index:2}

.sound-control,.skip-control{position:absolute;top:max(24px,env(safe-area-inset-top));z-index:6;border:0;background:none;color:rgba(255,255,255,.66);font-size:10px;letter-spacing:.2em;cursor:pointer;transition:color .3s ease,opacity .6s ease}
.sound-control:hover,.skip-control:hover{color:#fff}
.sound-control{left:max(24px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px;padding:10px 0}
.skip-control{right:max(24px,env(safe-area-inset-right));padding:10px 0}
.prologue.is-finished .sound-control,.prologue.is-finished .skip-control{opacity:0;pointer-events:none}
.sound-control__bars{height:14px;display:flex;align-items:flex-end;gap:2px}
.sound-control__bars i{display:block;width:1px;height:5px;background:currentColor;transform-origin:bottom}
.sound-control[aria-pressed="true"] .sound-control__bars i:nth-child(1){animation:eq .8s ease-in-out infinite alternate}
.sound-control[aria-pressed="true"] .sound-control__bars i:nth-child(2){animation:eq .55s .1s ease-in-out infinite alternate}
.sound-control[aria-pressed="true"] .sound-control__bars i:nth-child(3){animation:eq .7s .2s ease-in-out infinite alternate}

.end-card{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,5vw,72px);opacity:0;visibility:hidden;transform:scale(.985);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),visibility 0s 1.1s;background:#000}
.end-card.is-visible{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.end-card__logo{display:block;width:min(1050px,92vw);height:auto;max-height:58vh;object-fit:contain;filter:contrast(1.03);user-select:none}
.enter-button{position:relative;display:inline-flex;align-items:center;gap:17px;margin-top:clamp(8px,2.2vh,26px);padding:15px 2px 13px;color:rgba(255,255,255,.82);text-decoration:none;font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity .9s .65s var(--ease),transform .9s .65s var(--ease),color .3s ease}
.end-card.is-visible .enter-button{opacity:1;transform:none}
.enter-button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.42);transform-origin:left;transition:transform .45s var(--ease),background .3s ease}
.enter-button:hover{color:#fff}.enter-button:hover::after{transform:scaleX(.62);background:#fff}
.enter-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.25;transition:transform .4s var(--ease)}
.enter-button:hover svg{transform:translateX(5px)}

.transition{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;visibility:hidden}
.transition.is-active{visibility:visible}
.transition__ring{width:14px;height:14px;border:1px solid rgba(255,255,255,.85);border-radius:50%;transform:scale(.1);opacity:0;background:#000}
.transition.is-active .transition__ring{animation:ringOut 1.15s var(--ease) forwards}

.noscript-card{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:#000;text-align:center;padding:30px}.noscript-card img{max-width:92vw}.noscript-card a{color:#fff;letter-spacing:.2em;font-size:12px}

@keyframes eq{from{height:3px}to{height:14px}}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes ringOut{0%{transform:scale(.1);opacity:0}12%{opacity:1}100%{transform:scale(180);opacity:1}}

@media (max-width:700px){
  .sound-control__label{display:none}
  .skip-control{font-size:9px}
  .end-card__logo{width:112vw;max-width:none}
  .enter-button{margin-top:-2vh;font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .prologue__grain{display:none}
}