:root{
  --c-black:#000000;
  --c-paper:#fbfbfb;
  --c-red:#d40018;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--c-black);
  color:var(--c-paper);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100svh;
  text-align:center;
  padding:6vw;
  overflow:hidden;
}
.title{
  font-size:clamp(1.75rem, 5vw, 3rem);
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.loader{
  margin-top:2rem;
  width:220px;
  max-width:50vw;
  height:2px;
  background:color-mix(in srgb, var(--c-paper) 15%, transparent);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.loader__bar{
  position:absolute;
  top:0;
  left:-40%;
  height:100%;
  width:40%;
  background:var(--c-red);
  border-radius:2px;
  animation:loading 3s ease-in-out infinite;
}
@keyframes loading{
  0%{ left:-40%; }
  100%{ left:100%; }
}
.footer{
  position:fixed;
  left:0;
  right:0;
  bottom:2rem;
  text-align:center;
  font-size:0.75rem;
  letter-spacing:0.04em;
  color:color-mix(in srgb, var(--c-paper) 40%, transparent);
}
.duck-container{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:50;
}
.duck{
  position:absolute;
  left:50%;
  top:38%;
  font-size:1.75rem;
  transform:translate(-50%,-50%) scale(0.4);
  opacity:0;
  animation:duck-pop 1.5s ease-out forwards;
}
.duck--1{ animation-name:duck-pop-1; }
.duck--2{ animation-name:duck-pop-2; }
.duck--3{ animation-name:duck-pop-3; }
.duck--4{ animation-name:duck-pop-4; }
.duck--5{ animation-name:duck-pop-5; }
.duck--6{ animation-name:duck-pop-6; }
.duck--7{ animation-name:duck-pop-7; }
.duck--8{ animation-name:duck-pop-8; }
@keyframes duck-pop-1{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% - 150px), calc(-50% - 150px)) rotate(-25deg) scale(1);opacity:0;} }
@keyframes duck-pop-2{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% - 90px), calc(-50% - 170px)) rotate(-12deg) scale(1);opacity:0;} }
@keyframes duck-pop-3{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% - 30px), calc(-50% - 190px)) rotate(-4deg) scale(1);opacity:0;} }
@keyframes duck-pop-4{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% + 30px), calc(-50% - 190px)) rotate(4deg) scale(1);opacity:0;} }
@keyframes duck-pop-5{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% + 90px), calc(-50% - 170px)) rotate(12deg) scale(1);opacity:0;} }
@keyframes duck-pop-6{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% + 150px), calc(-50% - 150px)) rotate(25deg) scale(1);opacity:0;} }
@keyframes duck-pop-7{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% - 60px), calc(-50% - 210px)) rotate(-8deg) scale(1);opacity:0;} }
@keyframes duck-pop-8{ 0%{transform:translate(-50%,-50%) scale(.4);opacity:0;} 15%{opacity:1;transform:translate(-50%,-50%) scale(1);} 100%{transform:translate(calc(-50% + 60px), calc(-50% - 210px)) rotate(8deg) scale(1);opacity:0;} }
@media (prefers-reduced-motion: reduce){
  .loader__bar{ animation:none; left:0; width:100%; opacity:.5; }
  .duck{ animation:none; opacity:1; transform:translate(-50%,-50%) scale(1); }
}