@font-face {
  font-family: 'Release Date Numerals';
  src: local('BankGothic Lt BT'), local('Bank Gothic Light BT'), local('BankGothicBT-Light'),
    url('assets/science-gothic-date.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0031-0032, U+0036;
}

@font-face {
  font-family: 'D-DIN';
  src: url('assets/d-din-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #050906;
  --green: #85ef9a;
  --din: 'D-DIN', 'Bahnschrift', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: #e6eee7; }

.poster {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--night);
}

.poster::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
}

.poster::after {
  z-index: 0;
  background: linear-gradient(180deg, #05090630, transparent 22%, transparent 75%, #050906b3);
}

.brands {
  position: absolute;
  z-index: 2;
  top: max(clamp(22px, 4.5vh, 46px), calc(env(safe-area-inset-top) + 8px));
  left: max(clamp(22px, 4.5vw, 68px), calc(env(safe-area-inset-left) + 8px));
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
}

.brand {
  height: clamp(22px, 3.4vw, 34px);
}
.southward {
  aspect-ratio: 1981 / 572;
  background: var(--green);
  mask: url('assets/southward-logo.png') center / contain no-repeat;
}
.marvel { display: block; width: auto; }
.studio-color { flood-color: var(--green); }

.art {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: max(100%, 177.6833vh);
  width: max(100%, 177.6833svh);
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
  container-type: inline-size;
}

.portrait, .glove { position: absolute; inset: 0; width: 100%; height: 100%; }
.glove {
  pointer-events: none;
  /* Reuse the same crop so the fingers can occlude the projected light. */
  clip-path: polygon(
    34.3% 50%, 35.5% 50.9%, 36.5% 52.7%, 37.2% 55.3%, 37.8% 58.7%,
    38.3% 62.1%, 39.4% 66.2%, 40.5% 69.3%, 42.9% 72.9%, 45.2% 75.1%,
    46.9% 72.9%, 48.4% 69.1%, 50% 65.8%, 51.6% 63.2%, 52.9% 62.8%,
    54% 63.5%, 54.9% 65.2%, 55.2% 68%, 54.5% 71.2%, 52.7% 75.4%,
    50.2% 80.8%, 53.1% 78.7%, 56.3% 74.3%, 58.4% 67.6%, 59.8% 63.3%,
    60.7% 60.9%, 61.6% 60.3%, 62.5% 60.8%, 63.2% 62.1%, 63.6% 64.6%,
    62.6% 68.5%, 64.2% 69.7%, 65.2% 71.5%, 65.7% 74.4%, 64.1% 80.2%,
    59.5% 91%, 56.3% 100%, 32.4% 100%, 33.9% 85.3%, 34.1% 73.4%,
    33.7% 64.4%, 32.7% 58.6%, 32% 54.9%, 32% 52.4%, 32.9% 50.8%
  );
}

.clock {
  position: absolute;
  top: 57.1%;
  left: 50.2%;
  width: min(86vw, 24cqw, 450px);
  translate: -50% -50%;
  container-type: inline-size;
}

.clock::before {
  position: absolute;
  z-index: -1;
  inset: -20% -12% -95%;
  background: radial-gradient(ellipse at 50% 58%, #39ef6c3d, transparent 67%);
  pointer-events: none;
  content: '';
}

.digits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: #b0ffb7;
  font: 700 clamp(20px, 10.6cqw, 57px)/1 var(--din);
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-shadow: 0 1px 4px #020b04, 0 0 .2em #45ff69, 0 0 .55em #16e750a0;
}

.unit { position: relative; }
.unit span { display: block; letter-spacing: .2em; text-indent: .2em; }
.unit small {
  display: block;
  margin-top: .75em;
  font: 700 clamp(8px, 2.7cqw, 14px)/1.2 var(--din);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.unit + .unit::before {
  position: absolute;
  top: .13em;
  left: 0;
  translate: -50%;
  font-size: .8em;
  content: ':' / '';
}

.release {
  position: absolute;
  z-index: 1;
  inset: auto 14px max(21px, calc(env(safe-area-inset-bottom) + 8px)) 14px;
  text-align: center;
  text-shadow: 0 2px 16px #000;
}

.release h1 {
  margin: 0;
}

.release-logo {
  display: block;
  width: min(clamp(210px, 33vw, 470px), 78vw, max(210px, 50svh));
  height: auto;
  margin-inline: auto;
  /* The source art has a separate Marvel badge above the title. */
  clip-path: polygon(0 0, 46.8% 0, 46.8% 20%, 67.1% 20%, 67.1% 0, 100% 0, 100% 100%, 0 100%);
}

.release p {
  width: max-content;
  margin: 8px auto 0;
  color: #7fd986;
  font: 400 clamp(15px, 1.7vw, 22px)/1.35 'Microsoft YaHei', 'PingFang SC', sans-serif;
  letter-spacing: .045em;
  white-space: nowrap;
  transform: skewX(-12deg);
  text-shadow: none;
  filter: drop-shadow(0 1px 0 #0a2914) drop-shadow(0 0 4px #45f65a60);
}

.release-number {
  font-family: 'Release Date Numerals', sans-serif;
  /* The numeral face has shorter visible glyphs at the same font size. */
  font-size: 1.74em;
  line-height: 0;
  vertical-align: -.065em;
  letter-spacing: -.035em;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .release p {
    background-image: linear-gradient(180deg, #c3ffb8 17%, #83e778 37%, #4da956 51%, #77db74 58%, #368943 87%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: .018em #b5ffb088;
  }
}

@media (max-width: 600px) {
  .unit small { letter-spacing: .13em; }
}

@media (max-height: 420px) {
  .unit small { font-size: 7px; letter-spacing: .13em; }
  .release p { margin-top: 4px; }
}