:root {
  --ink: #0b2938;
  --ink-deep: #071c25;
  --cream: #ecd39e;
  --gold: #cb8e20;
  --rust: #9f4725;
  --line: rgb(236 211 158 / 35%);
  --cover-size: min(100vw, 100svh);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-deep);
}

body {
  display: grid;
  min-height: 100svh;
  place-items: center;
  color: var(--cream);
  font-family: "Arial Narrow", "Roboto Condensed", Impact, system-ui, sans-serif;
}

button {
  font: inherit;
  color: inherit;
}

.cover-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: var(--cover-size);
  height: var(--cover-size);
  gap: 0;
  perspective: 1400px;
}

.cover-grid::after {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(50% - 1.5px);
  width: 3px;
  pointer-events: none;
  content: "";
  background: url("./assets/drama-season-cover.png") center / var(--cover-size) var(--cover-size) no-repeat;
}

.cover-grid.has-open-tile::after {
  opacity: 0;
}

.play-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(3.35rem, 9vw, 4.2rem);
  height: clamp(3.35rem, 9vw, 4.2rem);
  padding: 0;
  cursor: pointer;
  place-items: center;
  border: 1px solid rgb(236 211 158 / 56%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgb(37 70 79 / 94%), rgb(10 37 48 / 94%) 62%, rgb(5 23 31 / 96%)),
    var(--ink);
  box-shadow:
    inset 0 0 0 2px rgb(236 211 158 / 11%),
    0 2px 7px rgb(3 16 22 / 34%);
  opacity: 0.92;
  transform: translate(-50%, -50%);
  transition:
    opacity 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.play-button span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.18rem;
  border-top: clamp(0.45rem, 1.35vw, 0.6rem) solid transparent;
  border-bottom: clamp(0.45rem, 1.35vw, 0.6rem) solid transparent;
  border-left: clamp(0.72rem, 1.9vw, 0.94rem) solid rgb(236 211 158 / 92%);
}

.play-button:hover,
.play-button:focus-visible {
  border-color: rgb(247 224 177 / 95%);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

.play-button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.play-button.is-hidden {
  pointer-events: none;
  opacity: 0;
}

.theater-dimmer {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
  background: rgb(3 12 17 / 78%);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.theater-dimmer.is-active {
  pointer-events: auto;
  opacity: 1;
  transition-duration: 4s;
  transition-timing-function: cubic-bezier(0.36, 0, 0.2, 1);
}

.theater-dimmer.is-resetting,
.million-video.is-resetting {
  transition: none;
}

.million-video {
  position: absolute;
  z-index: 3;
  top: 25%;
  left: 50%;
  display: block;
  width: 50%;
  height: auto;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition:
    top 4s cubic-bezier(0.36, 0, 0.2, 1),
    left 4s cubic-bezier(0.36, 0, 0.2, 1),
    width 4s cubic-bezier(0.36, 0, 0.2, 1),
    transform 4s cubic-bezier(0.36, 0, 0.2, 1),
    opacity 180ms ease;
}

.million-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.million-video.is-playing {
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
}

.million-video.is-expanded {
  top: 50%;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, -50%);
}

.tile {
  min-width: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;
  perspective: 1100px;
}

.tile__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 640ms cubic-bezier(0.2, 0.78, 0.25, 1);
  transform-style: preserve-3d;
}

.tile:focus-visible .tile__card {
  outline: 3px solid var(--cream);
  outline-offset: -3px;
}

.tile.is-flipped .tile__card {
  transform: rotateY(180deg);
}

.tile__front,
.tile__back {
  position: absolute;
  inset: 0;
  display: flex;
  backface-visibility: hidden;
}

.tile__front {
  background-image: url("./assets/drama-season-cover.png");
  background-repeat: no-repeat;
  background-size: calc(200% + 1px) calc(200% + 1px);
}

.tile:nth-child(1) .tile__front {
  background-position: left top;
}

.tile:nth-child(2) .tile__front {
  background-position: right top;
}

.tile:nth-child(3) .tile__front {
  background-position: left bottom;
}

.tile:nth-child(4) .tile__front {
  background-position: right bottom;
}

.tile__back {
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(0.85rem, 3.4vw, 2.15rem);
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgb(203 142 32 / 14%), transparent 52%),
    var(--ink);
  transform: rotateY(180deg);
}

.tile__back::after {
  position: absolute;
  right: clamp(0.85rem, 3.4vw, 2.15rem);
  bottom: clamp(0.85rem, 3.4vw, 2.15rem);
  left: clamp(0.85rem, 3.4vw, 2.15rem);
  height: 1px;
  content: "";
  background: var(--line);
}

.tile__back--million-hundred {
  padding: 0;
  border: 0;
  background: url("./assets/million-hundred-cover.png") center / cover no-repeat;
}

.tile__back--million-hundred::after {
  display: none;
}

.song-play-mark {
  position: absolute;
  top: 54%;
  left: 50%;
  display: grid;
  width: clamp(1.45rem, 4.2vw, 2rem);
  height: clamp(1.45rem, 4.2vw, 2rem);
  place-items: center;
  border: 1px solid rgb(236 211 158 / 56%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgb(37 70 79 / 94%), rgb(10 37 48 / 94%) 62%, rgb(5 23 31 / 96%)),
    var(--ink);
  box-shadow:
    inset 0 0 0 1px rgb(236 211 158 / 11%),
    0 1px 4px rgb(3 16 22 / 34%);
  opacity: 0.92;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.tile.is-video-playing .song-play-mark {
  opacity: 0;
}

.song-play-mark span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 0.1rem;
  border-top: clamp(0.2rem, 0.65vw, 0.28rem) solid transparent;
  border-bottom: clamp(0.2rem, 0.65vw, 0.28rem) solid transparent;
  border-left: clamp(0.34rem, 1vw, 0.45rem) solid rgb(236 211 158 / 92%);
}

.tile:nth-child(3) .tile__back {
  background:
    linear-gradient(30deg, rgb(159 71 37 / 30%), transparent 53%),
    #113441;
}

.tile__back--credits {
  background:
    linear-gradient(145deg, rgb(159 71 37 / 34%), transparent 52%),
    #0b2531;
}

.side {
  color: rgb(236 211 158 / 65%);
  font: 600 clamp(0.62rem, 1.3vw, 0.78rem)/1.3 system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.tile__back strong {
  margin-top: auto;
  margin-bottom: 0.45rem;
  font-size: clamp(1.25rem, 4vw, 2.7rem);
  font-weight: 900;
  line-height: 0.89;
  text-align: left;
  text-transform: uppercase;
}

.detail {
  padding-bottom: clamp(1.1rem, 3.2vw, 2rem);
  color: var(--gold);
  font: 600 clamp(0.62rem, 1.4vw, 0.86rem)/1.3 system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}

.action {
  position: absolute;
  bottom: clamp(0.32rem, 1vw, 0.7rem);
  left: clamp(0.85rem, 3.4vw, 2.15rem);
  font: 500 clamp(0.52rem, 1.1vw, 0.62rem)/1 system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .tile__card,
  .play-button,
  .theater-dimmer,
  .million-video,
  .song-play-mark {
    transition-duration: 1ms;
  }
}