:root {
  --red: #ee0000;
  --cream: #e8e8e2;
  --gallery-height: clamp(136px, 10.7vw, 205px);
}

* { box-sizing: border-box; }

::selection { color: #001d2b; background: #6fddff; }

img, video { -webkit-user-drag: none; user-select: none; }

html, body { min-height: 100%; margin: 0; }

body {
  overflow-x: hidden;
  background: var(--red);
  color: var(--cream);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

.poster {
  position: relative;
  isolation: isolate;
  min-height: max(700px, 100svh);
  overflow: hidden;
  background: var(--red) url("assets/bg.jpg") center bottom / cover no-repeat;
}

.poster::before {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: repeating-radial-gradient(circle at 25% 25%, rgba(255,255,255,.7) 0 1px, transparent 1px 4px);
  background-size: 5px 5px;
}

.intro {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2vw, 30px);
  width: min(72vw, 530px);
  transform: translate(-50%, -50%);
  animation: intro-in .7s both cubic-bezier(.2,.8,.2,1);
  transition: top .62s cubic-bezier(.2,.8,.2,1), left .62s cubic-bezier(.2,.8,.2,1), width .62s cubic-bezier(.2,.8,.2,1), transform .62s cubic-bezier(.2,.8,.2,1), gap .3s ease;
  pointer-events: none;
}
.intro img { display: block; width: 100%; height: auto; animation: logo-float 3.2s ease-in-out infinite; }
.poster.has-entered .intro {
  top: clamp(20px, 2vw, 38px);
  left: clamp(20px, 2vw, 42px);
  gap: 0;
  width: clamp(120px, 7.2vw, 170px);
  transform: translate(0, 0);
  animation: none;
}
.poster.has-entered .intro img { animation: none; }

.eye-glints { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; }
.poster.has-entered .eye-glints { animation: arrive .45s .3s both ease-out; }
.eye-glints i {
  --x: 0px;
  --y: 0px;
  position: absolute;
  top: 52.4%;
  width: clamp(4px, .38vw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .42;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 9px 2px rgba(255,237,184,.3);
  transform: translate(var(--x), var(--y));
  transition: transform .15s ease-out, opacity 1.8s ease-in-out;
  animation: glint 3.8s ease-in-out infinite;
}
.eye-glints i:first-child { left: 42.15%; }
.eye-glints i:last-child { left: 57.75%; animation-delay: .9s; }

.manifesto {
  position: absolute;
  z-index: 3;
  top: clamp(50px, 5.3vw, 105px);
  left: 50%;
  width: min(44vw, 890px);
  letter-spacing: .015em;
  line-height: .9;
  opacity: 0;
}

.eyebrow, h1, .description, footer p { margin: 0; }
.manifesto > * {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}
.eyebrow { font-size: clamp(31px, 3vw, 59px); }
h1 { font-size: clamp(36px, 3.12vw, 65px); }
.description { max-width: 820px; margin-top: .18em; font-size: clamp(21px, 1.66vw, 34px); line-height: 1.08; }

.gallery {
  position: absolute;
  z-index: 4;
  top: 46.3%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
}

.gallery-mask { width: 100%; overflow: hidden; }
.gallery-track { display: flex; width: max-content; will-change: transform; }
.gallery-set { display: flex; align-items: center; gap: clamp(32px, 4vw, 88px); padding-right: clamp(32px, 4vw, 88px); }

.work {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: var(--gallery-height);
  margin: 0;
  --tilt: 0deg;
  --raise: 0px;
  position: relative;
  pointer-events: auto;
  transform: translateY(var(--raise)) rotate(var(--tilt));
  transition: transform 180ms ease-out, filter 180ms ease-out;
}

.work img, .work video { display: block; max-width: min(34vw, 460px); height: var(--gallery-height); object-fit: cover; }
.work-sticker img { width: auto; object-fit: contain; }
.work-sticker { --tilt: -2deg; }
.work:nth-child(4n) { --tilt: 1.5deg; }
.work:nth-child(3n) { --raise: 7px; }

@media (hover: hover) {
  .work:hover {
    z-index: 2;
    transform: translateY(calc(var(--raise) - 8px)) rotate(var(--tilt)) scale(1.07);
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25));
  }
}

.gallery.is-moving .work:not(:hover) {
  filter: drop-shadow(-2px 0 rgba(0, 211, 255, .3)) drop-shadow(2px 0 rgba(255, 38, 96, .28));
}

.leather-mark {
  position: absolute;
  z-index: 3;
  bottom: clamp(25px, 6.3vh, 76px);
  left: 50%;
  width: clamp(220px, 21vw, 430px);
  transform: translateX(-50%);
  opacity: 0;
}

footer {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 2vw, 42px);
  bottom: clamp(18px, 2.2vw, 42px);
  left: clamp(20px, 2vw, 42px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  font-size: clamp(14px, 1.15vw, 24px);
  line-height: 1;
}

.poster.has-entered .manifesto {
  opacity: 1;
}
.poster.has-gallery .gallery { animation: arrive .65s .05s both cubic-bezier(.2,.8,.2,1); }
.poster.copy-complete .leather-mark { animation: arrive .6s .16s both cubic-bezier(.2,.8,.2,1); }

footer p:last-child { text-align: right; }
footer a { color: inherit; text-decoration: none; }
.footer-label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .72em;
  font-weight: 500;
  letter-spacing: .01em;
}
.powered a { text-decoration: underline; text-underline-offset: .15em; }

@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes logo-float {
  0%, 100% { transform: translateY(-5px) rotate(-.4deg); }
  50% { transform: translateY(7px) rotate(.5deg); }
}

@keyframes glint {
  0%, 100% { opacity: .22; }
  50% { opacity: .55; }
}

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

@media (max-width: 700px) {
  :root { --gallery-height: clamp(94px, 29vw, 142px); }
  body { min-height: 1200svh; }
  .poster { position: sticky; top: 0; height: 100svh; min-height: 100svh; background-position: 50% bottom; background-size: auto 100%; }
  .eye-glints i { top: 52.5%; width: 5px; }
  .eye-glints i:first-child { left: 19.5%; }
  .eye-glints i:last-child { left: 79.2%; }
  .brand-mark { width: 125px; top: 20px; left: 18px; }
  .intro { width: min(78vw, 360px); }
  .poster.has-entered .intro { top: 20px; left: 18px; width: 125px; }
  .manifesto { top: 91px; left: 18px; width: calc(100% - 36px); }
  .eyebrow { font-size: 27px; }
  h1 { font-size: clamp(31px, 9vw, 43px); }
  .description { max-width: 355px; margin-top: 7px; font-size: clamp(16px, 4.75vw, 21px); line-height: 1.04; }
  .gallery { top: 53%; }
  .gallery-set { gap: 30px; padding-right: 30px; }
  .work img, .work video { max-width: 69vw; }
  .work:nth-child(3n) { --raise: 3px; }
  .leather-mark { bottom: 86px; width: min(48vw, 220px); }
  footer { bottom: 17px; display: block; font-family: Impact, Haettenschweiler, sans-serif; font-size: 13px; line-height: 1.05; text-align: center; }
  footer p:last-child { margin-top: 11px; text-align: center; }
}