*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:#f4f4f0;font-family:Helvetica,Arial,sans-serif;overflow:hidden}

#photoStage,#logoCanvas{position:fixed;inset:0;width:100vw;height:100vh}
#photoStage{z-index:1;pointer-events:none;overflow:hidden}
#logoCanvas{z-index:2;display:block;mix-blend-mode:screen}

.photo-slide{
  position:absolute;left:50%;top:50%;
  width:min(62vw,820px);height:min(66vh,760px);
  object-fit:cover;opacity:0;
  filter:contrast(1.18) saturate(1.28) brightness(.86);
  transform:translate(-50%,-50%) scale(.9);
  animation:photoAppear var(--duration) cubic-bezier(.4,0,.16,1) forwards;
  animation-play-state:var(--photo-play-state,paused);
  will-change:opacity,transform,filter;
  backface-visibility:hidden;
}
.photo-slide.vertical{width:min(44vw,560px);height:min(74vh,820px)}
.photo-slide.wide{width:min(78vw,1080px);height:min(54vh,640px)}

@keyframes photoAppear{
  0%{opacity:0;transform:translate3d(calc(-50% + var(--x0)),calc(-50% + var(--y0)),0) scale(.78) rotate(var(--r0));filter:contrast(1.4) saturate(1.7) brightness(.38) blur(10px)}
  12%{opacity:var(--opacity)}
  46%{opacity:calc(var(--opacity)*.95);transform:translate3d(calc(-50% + var(--x1)),calc(-50% + var(--y1)),0) scale(var(--scale)) rotate(var(--r1));filter:contrast(1.12) saturate(1.35) brightness(.95) blur(0)}
  82%{opacity:calc(var(--opacity)*.62)}
  100%{opacity:0;transform:translate3d(calc(-50% + var(--x2)),calc(-50% + var(--y2)),0) scale(calc(var(--scale)*1.22)) rotate(var(--r2));filter:contrast(1.7) saturate(2) brightness(.28) blur(12px)}
}

.interface{position:relative;z-index:4;min-height:100vh;pointer-events:none}
.player,footer{pointer-events:auto;mix-blend-mode:difference}
.player{position:fixed;right:4vw;bottom:4vw;width:min(560px,45vw)}
#projectTitle{margin:0;font-size:clamp(30px,4vw,68px);line-height:.88;letter-spacing:-.07em;font-weight:900}
#trackTitle{margin-top:12px;font-size:16px;font-weight:900;letter-spacing:.02em}
.wave-wrap{width:100%;height:94px;margin:16px 0 12px;border-top:2px solid #f4f4f0;border-bottom:2px solid #f4f4f0;cursor:pointer}
#waveCanvas{width:100%;height:100%;display:block}
.player-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
button,input{font:inherit}
button{appearance:none;border:2px solid #f4f4f0;background:transparent;color:#f4f4f0;padding:9px 14px;font-weight:900;cursor:pointer}
button:hover,button:focus-visible{background:#f4f4f0;color:#000}
#timeDisplay{font-size:12px;font-weight:900;letter-spacing:.08em}
#playlist{margin:12px 0 0;padding-left:28px;list-style:decimal-leading-zero;max-height:27vh;overflow:auto}
#playlist li{font-size:12px;font-weight:900;letter-spacing:.04em;margin:6px 0;opacity:.58;cursor:pointer}
#playlist li.active{opacity:1;text-decoration:underline}
footer{position:fixed;left:4vw;top:4vw}
footer a{color:#f4f4f0;font-size:13px;font-weight:900;letter-spacing:.03em;text-decoration:none}

.access-gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.54);backdrop-filter:blur(8px);transition:opacity .25s ease,visibility .25s ease}
.access-gate.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.access-box{position:relative;width:min(520px,92vw);padding:28px;border:2px solid #f4f4f0;background:#000}
.access-box h2{margin:0 36px 26px 0;font-size:clamp(30px,5vw,58px);line-height:.88;letter-spacing:-.055em;font-weight:900}
.access-box label{display:block;margin-bottom:9px;font-size:11px;font-weight:900;letter-spacing:.14em}
.access-row{display:flex;gap:8px}
.access-row input{min-width:0;flex:1;border:2px solid #f4f4f0;background:#000;color:#f4f4f0;padding:10px 12px;font-weight:900;outline:none}
.access-row input:focus{box-shadow:0 0 0 2px #000,0 0 0 4px #f4f4f0}
.close-gate{position:absolute;right:14px;top:12px;border:0;padding:3px 7px;font-size:27px;line-height:1}
#accessMessage{min-height:17px;margin:10px 0 0;font-size:12px;font-weight:900;letter-spacing:.04em}

@media(max-width:800px){
  .player{left:20px;right:20px;bottom:24px;width:auto}
  footer{left:20px;top:20px}
  .photo-slide,.photo-slide.vertical,.photo-slide.wide{width:88vw;height:62vh}
  .access-row{flex-direction:column}
  #playlist{max-height:22vh}
}

@media(prefers-reduced-motion:reduce){
  .photo-slide{animation-duration:1ms!important}
}

[hidden]{display:none!important}