/* Act III after its title card, and the footer:
   every screen (gold), what's next and contact (crimson), sign-off (ink). */

/* ---------- every screen ---------- */

.screens {
  --focus: var(--ink-deep);
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(9rem, 20vw, 16rem);
  background: var(--gold);
  color: var(--ink-deep);
  overflow: clip;
}

.screens__body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

/* platform tabs */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.tabs__tab {
  position: relative;
  padding: 0.72em 0.95em;
  border: 2.5px solid var(--ink-deep);
  border-radius: 0.7em;
  background: transparent;
  font: 700 clamp(1rem, 0.95rem + 0.3vw, 1.15rem) / 1 var(--font-text);
  font-stretch: 92%;
  overflow: hidden;
  cursor: pointer;
  transition:
    background-color 0.25s,
    color 0.25s,
    translate 0.14s var(--ease-out);
}

.tabs__tab:hover {
  translate: 0 -0.1em;
}

.tabs__tab:active {
  translate: 0 0.12em;
}

.tabs__tab[aria-selected="true"] {
  background: var(--ink-deep);
  color: var(--gold-light);
}

/* while the tabs advance on their own, the selected one shows how long is left */
.tabs__tab::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 0.28em;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.tabs.is-auto .tabs__tab[aria-selected="true"]::after {
  animation: tab-fill var(--auto-ms, 3600ms) linear forwards;
}

@keyframes tab-fill {
  to {
    transform: scaleX(1);
  }
}

.tabs__panels {
  max-width: 28em;
  min-height: 5.4em;
  margin-top: 1.25rem;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.4;
}

.tabs__panel {
  animation: panel-in 0.45s var(--ease-out);
}

@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 0.6rem;
  }
}

/* the shape-shifting screen */

.device {
  position: relative;
  justify-self: center;
  width: min(100%, 44rem);
  aspect-ratio: 100 / 78;
  container-type: inline-size;
}

.device[data-platform="pc"] {
  --bw: 84cqw;
  --bh: 54cqw;
  --top: 5cqw;
  --br: 2.6cqw;
  --bezel-x: 1.9cqw;
  --bezel-y: 1.9cqw;
  --sr: 1.1cqw;
}

.device[data-platform="console"] {
  --bw: 98cqw;
  --bh: 57cqw;
  --top: 8cqw;
  --br: 1.7cqw;
  --bezel-x: 1.1cqw;
  --bezel-y: 1.1cqw;
  --sr: 0.9cqw;
}

.device[data-platform="handheld"] {
  --bw: 99cqw;
  --bh: 41cqw;
  --top: 18cqw;
  --br: 9cqw;
  --bezel-x: 17.5cqw;
  --bezel-y: 3.2cqw;
  --sr: 1.6cqw;
}

.device[data-platform="mobile"] {
  --bw: 34cqw;
  --bh: 72cqw;
  --top: 3cqw;
  --br: 5.6cqw;
  --bezel-x: 1.5cqw;
  --bezel-y: 1.5cqw;
  --sr: 4.2cqw;
}

.device__body {
  position: absolute;
  left: 50%;
  top: var(--top);
  width: var(--bw);
  height: var(--bh);
  padding: var(--bezel-y) var(--bezel-x);
  border-radius: var(--br);
  background: var(--ink-deep);
  box-shadow: 0 1.5cqw 0 rgb(6 31 34 / 0.26);
  translate: -50% 0;
  transition:
    width 0.75s var(--ease-spring),
    height 0.75s var(--ease-spring),
    top 0.75s var(--ease-spring),
    padding 0.6s var(--ease-out),
    border-radius 0.6s var(--ease-out);
}

.device__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--sr);
  background: var(--ink);
  overflow: hidden;
  transition: border-radius 0.6s var(--ease-out);
}

.device__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.08;
  transition:
    opacity 0.5s,
    scale 1.1s var(--ease-out);
}

.device[data-platform="pc"] .device__art[data-for="pc"],
.device[data-platform="console"] .device__art[data-for="console"],
.device[data-platform="handheld"] .device__art[data-for="handheld"],
.device[data-platform="mobile"] .device__art[data-for="mobile"] {
  opacity: 1;
  scale: 1;
}

.device__art[data-for="pc"] {
  object-position: 70% 30%;
}

.device__art[data-for="console"] {
  object-position: 66% 40%;
}

.device__art[data-for="handheld"] {
  object-position: 80% 35%;
}

.device__art[data-for="mobile"] {
  object-position: 50% 38%;
}

/* platform-specific hardware fades and pops in with the matching shape */
.device__notch,
.device__pad,
.device__stand,
.device__feet {
  position: absolute;
  opacity: 0;
  scale: 0.5;
  transition:
    opacity 0.25s,
    scale 0.5s var(--ease-spring);
}

.device[data-platform="mobile"] .device__notch,
.device[data-platform="handheld"] .device__pad,
.device[data-platform="pc"] .device__stand,
.device[data-platform="console"] .device__feet {
  opacity: 1;
  scale: 1;
  transition-delay: 0.3s;
}

.device__notch {
  left: 50%;
  top: 3.2cqw;
  width: 9.5cqw;
  height: 2.5cqw;
  border-radius: 2cqw;
  background: var(--ink-deep);
  translate: -50% 0;
}

.device__pad {
  top: 50%;
  width: 11cqw;
  height: 30cqw;
  translate: 0 -50%;
}

.device__pad--left {
  left: 3.3cqw;
  background:
    radial-gradient(circle at 50% 27%, var(--gold) 0 2.1cqw, var(--petrol-lift) 2.2cqw 3.9cqw, transparent 4cqw),
    linear-gradient(var(--petrol-lift) 0 0) 50% 78% / 2.6cqw 8cqw no-repeat,
    linear-gradient(var(--petrol-lift) 0 0) 50% 73.5% / 8cqw 2.6cqw no-repeat;
}

.device__pad--right {
  right: 3.3cqw;
  background:
    radial-gradient(circle at 50% 14%, var(--crimson) 0 1.45cqw, transparent 1.55cqw),
    radial-gradient(circle at 50% 36%, var(--teal) 0 1.45cqw, transparent 1.55cqw),
    radial-gradient(circle at 20% 25%, var(--cream) 0 1.45cqw, transparent 1.55cqw),
    radial-gradient(circle at 80% 25%, var(--gold) 0 1.45cqw, transparent 1.55cqw),
    radial-gradient(circle at 50% 75%, var(--petrol-lift) 0 3.6cqw, transparent 3.7cqw);
}

.device__stand {
  left: 50%;
  top: 58.6cqw;
  width: 30cqw;
  height: 12cqw;
  background: var(--ink-deep);
  clip-path: polygon(38% 0, 62% 0, 65% 80%, 100% 80%, 100% 100%, 0 100%, 0 80%, 35% 80%);
  translate: -50% 0;
  transform-origin: 50% 0;
}

.device__feet {
  left: 50%;
  top: 64.6cqw;
  width: 74cqw;
  height: 5cqw;
  background:
    linear-gradient(var(--ink-deep) 0 0) 0 0 / 2.6cqw 100% no-repeat,
    linear-gradient(var(--ink-deep) 0 0) 100% 0 / 2.6cqw 100% no-repeat;
  translate: -50% 0;
  transform-origin: 50% 0;
}

/* ---------- closing section: what is next, and contact ---------- */

.play {
  position: relative;
  background: var(--crimson-field);
  color: var(--cream);
  /* clip the drifting helmet at the sides and bottom, but let the crest stand above the top edge */
  clip-path: inset(-12rem 0 0 0);
}

/* the helmet as a tone-on-tone shape, cropped by the section's right and bottom edges */
.play__mark {
  position: absolute;
  right: 0;
  bottom: 0;
  height: min(100%, 54rem, 120vw);
  aspect-ratio: 1;
  background: var(--crimson-deep);
  -webkit-mask: url("../assets/brand/emblem-512.webp") 0 0 / 128% no-repeat;
  mask: url("../assets/brand/emblem-512.webp") 0 0 / 128% no-repeat;
  opacity: 0.4;
  pointer-events: none;
  translate: 0 calc((1 - var(--rise, 1)) * 16%);
}

/* the section's top edge is the helmet's crest; the bristles stand up as it arrives */
.play__crest {
  --k: 1;
  position: absolute;
  inset: auto 0 calc(100% - 1px) 0;
  height: clamp(5rem, 13vw, 11rem);
  background: var(--crimson-field);
  clip-path: polygon(
    0% 101%,
    0.53% calc(100% - 50% * var(--k)),
    3.33% calc(100% - 62% * var(--k)),
    3.33% calc(100% - 23% * var(--k)),
    3.87% calc(100% - 23% * var(--k)),
    3.87% calc(100% - 57% * var(--k)),
    6.67% calc(100% - 69% * var(--k)),
    6.67% calc(100% - 30% * var(--k)),
    7.20% calc(100% - 30% * var(--k)),
    7.20% calc(100% - 60% * var(--k)),
    10.00% calc(100% - 72% * var(--k)),
    10.00% calc(100% - 31% * var(--k)),
    10.53% calc(100% - 31% * var(--k)),
    10.53% calc(100% - 71% * var(--k)),
    13.33% calc(100% - 81% * var(--k)),
    13.33% calc(100% - 40% * var(--k)),
    13.87% calc(100% - 40% * var(--k)),
    13.87% calc(100% - 69% * var(--k)),
    16.67% calc(100% - 83% * var(--k)),
    16.67% calc(100% - 35% * var(--k)),
    17.20% calc(100% - 35% * var(--k)),
    17.20% calc(100% - 73% * var(--k)),
    20.00% calc(100% - 87% * var(--k)),
    20.00% calc(100% - 33% * var(--k)),
    20.53% calc(100% - 33% * var(--k)),
    20.53% calc(100% - 82% * var(--k)),
    23.33% calc(100% - 95% * var(--k)),
    23.33% calc(100% - 49% * var(--k)),
    23.87% calc(100% - 49% * var(--k)),
    23.87% calc(100% - 79% * var(--k)),
    26.67% calc(100% - 91% * var(--k)),
    26.67% calc(100% - 48% * var(--k)),
    27.20% calc(100% - 48% * var(--k)),
    27.20% calc(100% - 83% * var(--k)),
    30.00% calc(100% - 94% * var(--k)),
    30.00% calc(100% - 51% * var(--k)),
    30.53% calc(100% - 51% * var(--k)),
    30.53% calc(100% - 88% * var(--k)),
    33.33% calc(100% - 100% * var(--k)),
    33.33% calc(100% - 42% * var(--k)),
    33.87% calc(100% - 42% * var(--k)),
    33.87% calc(100% - 90% * var(--k)),
    36.67% calc(100% - 100% * var(--k)),
    36.67% calc(100% - 48% * var(--k)),
    37.20% calc(100% - 48% * var(--k)),
    37.20% calc(100% - 93% * var(--k)),
    40.00% calc(100% - 100% * var(--k)),
    40.00% calc(100% - 53% * var(--k)),
    40.53% calc(100% - 53% * var(--k)),
    40.53% calc(100% - 97% * var(--k)),
    43.33% calc(100% - 100% * var(--k)),
    43.33% calc(100% - 46% * var(--k)),
    43.87% calc(100% - 46% * var(--k)),
    43.87% calc(100% - 94% * var(--k)),
    46.67% calc(100% - 100% * var(--k)),
    46.67% calc(100% - 55% * var(--k)),
    47.20% calc(100% - 55% * var(--k)),
    47.20% calc(100% - 90% * var(--k)),
    50.00% calc(100% - 99% * var(--k)),
    50.00% calc(100% - 44% * var(--k)),
    50.53% calc(100% - 44% * var(--k)),
    50.53% calc(100% - 90% * var(--k)),
    53.33% calc(100% - 100% * var(--k)),
    53.33% calc(100% - 50% * var(--k)),
    53.87% calc(100% - 50% * var(--k)),
    53.87% calc(100% - 94% * var(--k)),
    56.67% calc(100% - 100% * var(--k)),
    56.67% calc(100% - 58% * var(--k)),
    57.20% calc(100% - 58% * var(--k)),
    57.20% calc(100% - 85% * var(--k)),
    60.00% calc(100% - 100% * var(--k)),
    60.00% calc(100% - 46% * var(--k)),
    60.53% calc(100% - 46% * var(--k)),
    60.53% calc(100% - 91% * var(--k)),
    63.33% calc(100% - 100% * var(--k)),
    63.33% calc(100% - 55% * var(--k)),
    63.87% calc(100% - 55% * var(--k)),
    63.87% calc(100% - 85% * var(--k)),
    66.67% calc(100% - 99% * var(--k)),
    66.67% calc(100% - 49% * var(--k)),
    67.20% calc(100% - 49% * var(--k)),
    67.20% calc(100% - 77% * var(--k)),
    70.00% calc(100% - 88% * var(--k)),
    70.00% calc(100% - 35% * var(--k)),
    70.53% calc(100% - 35% * var(--k)),
    70.53% calc(100% - 81% * var(--k)),
    73.33% calc(100% - 90% * var(--k)),
    73.33% calc(100% - 47% * var(--k)),
    73.87% calc(100% - 47% * var(--k)),
    73.87% calc(100% - 71% * var(--k)),
    76.67% calc(100% - 80% * var(--k)),
    76.67% calc(100% - 34% * var(--k)),
    77.20% calc(100% - 34% * var(--k)),
    77.20% calc(100% - 68% * var(--k)),
    80.00% calc(100% - 81% * var(--k)),
    80.00% calc(100% - 37% * var(--k)),
    80.53% calc(100% - 37% * var(--k)),
    80.53% calc(100% - 65% * var(--k)),
    83.33% calc(100% - 78% * var(--k)),
    83.33% calc(100% - 39% * var(--k)),
    83.87% calc(100% - 39% * var(--k)),
    83.87% calc(100% - 66% * var(--k)),
    86.67% calc(100% - 75% * var(--k)),
    86.67% calc(100% - 36% * var(--k)),
    87.20% calc(100% - 36% * var(--k)),
    87.20% calc(100% - 57% * var(--k)),
    90.00% calc(100% - 68% * var(--k)),
    90.00% calc(100% - 26% * var(--k)),
    90.53% calc(100% - 26% * var(--k)),
    90.53% calc(100% - 59% * var(--k)),
    93.33% calc(100% - 70% * var(--k)),
    93.33% calc(100% - 28% * var(--k)),
    93.87% calc(100% - 28% * var(--k)),
    93.87% calc(100% - 49% * var(--k)),
    96.67% calc(100% - 61% * var(--k)),
    96.67% calc(100% - 23% * var(--k)),
    97.20% calc(100% - 23% * var(--k)),
    97.20% calc(100% - 49% * var(--k)),
    100.00% calc(100% - 59% * var(--k)),
    100.00% calc(100% - 22% * var(--k)),
    100% 101%,
    100% 101%
  );
}

.play__inner {
  position: relative;
  z-index: 1;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(5rem, 13vw, 11rem);
}

.play__title {
  font: 600 clamp(3.25rem, 1.5rem + 9.5vw, 10rem) / 0.95 var(--font-display);
  letter-spacing: 0.005em;
}

.play__lead {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.play__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
  margin-top: clamp(2rem, 5vw, 3.75rem);
}

.play__address {
  font-size: var(--step-1);
  font-weight: 700;
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
}

/* ---------- footer ---------- */

.foot {
  padding: clamp(3rem, 7vw, 6rem) var(--gutter) 2rem;
  background: var(--ink-deep);
  color: var(--cream);
  overflow: clip;
}

.foot__word {
  padding-bottom: 0.06em;
  color: var(--gold);
  font: 600 9.6vw / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.foot__word span {
  display: block;
  transition: transform 1.1s var(--ease-out);
}

.motion .foot:not(.is-in) .foot__word span {
  transform: translateY(120%);
}

.foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 2px solid rgb(246 231 185 / 0.16);
}

.foot__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 600 1.05rem / 1 var(--font-display);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.foot__brand img {
  width: 2.75rem;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-right: auto;
}

.foot__links a {
  font-weight: 600;
  text-decoration-color: rgb(246 231 185 / 0.4);
  text-underline-offset: 0.25em;
}

.foot__links a:hover {
  text-decoration-color: currentColor;
}

.foot__legal {
  font-size: var(--step-small);
  opacity: 0.75;
}

@media (max-width: 52rem) {
  .screens__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .device {
    order: -1;
  }
}

/* phones: the four tabs share one row */
@media (max-width: 30rem) {
  .tabs {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .tabs__tab {
    flex: 1 1 auto;
    padding: 0.8em 0.4em;
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device__body,
  .device__screen,
  .device__art,
  .device__notch,
  .device__pad,
  .device__stand,
  .device__feet,
  .foot__word span {
    transition: none;
  }

  .tabs__panel {
    animation: none;
  }
}