:root {
  --slot-width: 970px;
  --slot-height: 250px;
  --preview-scale: 1;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: #f2f2f2;
  font-family: Arial, Helvetica, sans-serif;
}

.stage {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  overflow: hidden;
  background: #f2f2f2;
}

.banner {
  position: relative;
  display: block;
  width: var(--slot-width);
  height: var(--slot-height);
  overflow: hidden;
  background: #a8f000;
  color: transparent;
  text-decoration: none;
  transform: scale(var(--preview-scale));
  transform-origin: center;
}

.banner__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.banner__layer {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z);
  display: block;
  width: var(--w);
  height: var(--h);
  pointer-events: none;
  user-select: none;
}

html.is-resizing .banner__layer:not(.banner__layer--background) {
  transition:
    left 220ms cubic-bezier(.2, .8, .2, 1),
    top 220ms cubic-bezier(.2, .8, .2, 1),
    width 220ms cubic-bezier(.2, .8, .2, 1),
    height 220ms cubic-bezier(.2, .8, .2, 1);
}

.banner__layer img,
.festival__stack {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.banner__layer img {
  object-fit: contain;
}

.banner__layer--background {
  --x: 0;
  --y: 0;
  --w: 100%;
  --h: 100%;
  --z: 0;
  object-fit: cover;
}

.banner__layer--shine {
  --shine-mask: none;
  overflow: hidden;
}

.banner__layer--shine::after {
  position: absolute;
  inset: 0;
  display: block;
  background-image: var(--shine-mask);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  clip-path: polygon(-44% 0, -20% 0, 10% 100%, -14% 100%);
  content: "";
  filter: brightness(1.8) contrast(1.08) saturate(1.08);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

html.is-animating .banner__layer--shine::after {
  animation: alfa-logo-shine 13000ms cubic-bezier(.38, 0, .24, 1) infinite both;
}

.festival__stack {
  position: relative;
}

.festival__stack img {
  position: absolute;
  object-fit: contain;
}

.festival__stack .festival__stack-bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.festival__stack .festival__stack-title {
  left: 2%;
  top: 17%;
  width: 56%;
  height: 27.5%;
}

.festival__stack .festival__stack-subtitle {
  left: 7.3%;
  top: 43.6%;
  width: 47%;
  height: 4.3%;
}

.festival__stack .festival__stack-wordmark {
  left: 7.7%;
  top: 49%;
  width: 46%;
  height: 20.5%;
}

.banner__layer .festival__landscape,
.banner__layer .event-logo__landscape,
.banner__layer .event-logo__portrait,
.banner__layer .event-logo__narrow,
.banner__layer .bank__portrait,
.banner__layer .bank__narrow,
.banner__layer .date__landscape,
.banner__layer .date__stack,
.banner__layer .date__narrow,
.banner__layer .artist__landscape,
.banner__layer .artist__portrait,
.banner__layer .artist__narrow,
.festival__stack {
  display: none;
}

html[data-layout="wide"] .banner__layer--festival {
  --x: clamp(210px, 22.5%, 230px);
  --y: 0;
  --w: calc(100% - var(--x));
  --h: 100%;
  --z: 1;
}

html[data-layout="wide"] .banner__layer--event-logo {
  --shine-mask: url("assets/970x250/alfa_future.svg");
  --x: clamp(18px, 2.1%, 24px);
  --y: clamp(16px, 8%, 22px);
  --w: clamp(170px, 20%, 196px);
  --h: clamp(58px, 28%, 72px);
  --z: 3;
}

html[data-layout="wide"] .banner__layer--date {
  --x: clamp(20px, 2.6%, 28px);
  --y: 41%;
  --w: clamp(170px, 19.6%, 192px);
  --h: 25.6%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--bank {
  --shine-mask: url("assets/970x250/logo.svg");
  --x: clamp(18px, 2.1%, 24px);
  --y: 73%;
  --w: clamp(130px, 15.4%, 150px);
  --h: 19%;
  --z: 3;
}

html[data-layout="wide"] .banner__layer--artist {
  --x: 72%;
  --y: 0;
  --w: 28%;
  --h: 100%;
  --z: 4;
}

html[data-layout="wide"] .banner__layer--artist img,
html[data-layout="landscape"] .banner__layer--artist img {
  object-position: right bottom;
}

html[data-layout="landscape"] .banner__layer--festival {
  --x: -2%;
  --y: 18%;
  --w: 102%;
  --h: 82%;
  --z: 1;
}

html[data-layout="landscape"] .banner__layer--event-logo {
  --shine-mask: url("assets/480x320/alfa_future.svg");
  --x: 4.2%;
  --y: 6.2%;
  --w: clamp(220px, 63%, 303px);
  --h: 19.5%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--date {
  --x: 4.2%;
  --y: 84%;
  --w: 61%;
  --h: 11.3%;
  --z: 3;
}

html[data-layout="landscape"] .banner__layer--bank {
  --shine-mask: none;
  --x: 0;
  --y: 0;
  --w: 0;
  --h: 0;
  --z: 3;
  visibility: hidden;
}

html[data-layout="landscape"] .banner__layer--artist {
  --x: 63.7%;
  --y: 0;
  --w: 36.3%;
  --h: 100%;
  --z: 4;
}

html[data-layout="landscape"] .banner__layer .event-logo__wide,
html[data-layout="landscape"] .banner__layer .festival__wide,
html[data-layout="landscape"] .banner__layer .date__wide,
html[data-layout="landscape"] .banner__layer .artist__wide {
  display: none;
}

html[data-layout="landscape"] .banner__layer .festival__landscape,
html[data-layout="landscape"] .banner__layer .event-logo__landscape,
html[data-layout="landscape"] .banner__layer .date__landscape,
html[data-layout="landscape"] .banner__layer .artist__landscape {
  display: block;
}

html[data-layout="landscape"] .banner__layer .festival__landscape {
  object-position: left bottom;
}

html[data-layout="portrait"] .banner__layer--festival,
html[data-layout="narrow"] .banner__layer--festival {
  --z: 1;
}

html[data-layout="portrait"] .banner__layer--festival {
  --x: -1%;
  --y: 7.3%;
  --w: 171%;
  --h: 92.7%;
}

html[data-layout="portrait"] .banner__layer--event-logo {
  --shine-mask: url("assets/320x480/alfa_future.svg");
  --x: 6.25%;
  --y: 4.2%;
  --w: 54.4%;
  --h: 12.9%;
  --z: 3;
}

html[data-layout="portrait"] .banner__layer--bank {
  --shine-mask: url("assets/320x480/logo.svg");
  --x: 67.8%;
  --y: 7.9%;
  --w: 26.3%;
  --h: 5.6%;
  --z: 3;
}

html[data-layout="portrait"] .banner__layer--date {
  --x: 6.25%;
  --y: 79.8%;
  --w: 34.4%;
  --h: 17.1%;
  --z: 3;
}

html[data-layout="portrait"] .banner__layer--artist {
  --x: 50%;
  --y: 60.2%;
  --w: 50%;
  --h: 39.8%;
  --z: 4;
}

html[data-layout="narrow"] .banner__layer--festival {
  --x: -4.6%;
  --y: 7.6%;
  --w: 186%;
  --h: 92.4%;
}

html[data-layout="narrow"] .banner__layer--event-logo {
  --shine-mask: url("assets/240x420/alfa_future.svg");
  --x: 6.1%;
  --y: 3.6%;
  --w: 54.6%;
  --h: 11.2%;
  --z: 3;
}

html[data-layout="narrow"] .banner__layer--bank {
  --shine-mask: url("assets/240x420/logo.svg");
  --x: 67.7%;
  --y: 6.8%;
  --w: 26.3%;
  --h: 4.8%;
  --z: 3;
}

html[data-layout="narrow"] .banner__layer--date {
  --x: 6.1%;
  --y: 82.6%;
  --w: 34.6%;
  --h: 14.3%;
  --z: 3;
}

html[data-layout="narrow"] .banner__layer--artist {
  --x: 43.7%;
  --y: 57.6%;
  --w: 56.3%;
  --h: 42.4%;
  --z: 4;
}

html[data-layout="portrait"] .banner__layer .festival__wide,
html[data-layout="narrow"] .banner__layer .festival__wide,
html[data-layout="portrait"] .banner__layer .event-logo__wide,
html[data-layout="narrow"] .banner__layer .event-logo__wide,
html[data-layout="narrow"] .banner__layer .event-logo__portrait,
html[data-layout="portrait"] .banner__layer .bank__wide,
html[data-layout="narrow"] .banner__layer .bank__wide,
html[data-layout="narrow"] .banner__layer .bank__portrait,
html[data-layout="portrait"] .banner__layer .date__wide,
html[data-layout="narrow"] .banner__layer .date__wide,
html[data-layout="narrow"] .banner__layer .date__stack,
html[data-layout="portrait"] .banner__layer .artist__wide,
html[data-layout="narrow"] .banner__layer .artist__wide,
html[data-layout="narrow"] .banner__layer .artist__portrait {
  display: none;
}

html[data-layout="portrait"] .festival__stack,
html[data-layout="narrow"] .festival__stack,
html[data-layout="portrait"] .banner__layer .event-logo__portrait,
html[data-layout="portrait"] .banner__layer .bank__portrait,
html[data-layout="portrait"] .banner__layer .date__stack,
html[data-layout="portrait"] .banner__layer .artist__portrait {
  display: block;
}

html[data-layout="narrow"] .banner__layer .event-logo__narrow,
html[data-layout="narrow"] .banner__layer .bank__narrow,
html[data-layout="narrow"] .banner__layer .date__narrow,
html[data-layout="narrow"] .banner__layer .artist__narrow {
  display: block;
}

html:not(.is-animating):not(.is-static) .banner__layer:not(.banner__layer--background) {
  opacity: 0;
}

html.is-animating .banner__layer--background {
  animation: alfa-bg-cycle 13000ms ease-in-out infinite both;
}

.banner__layer--festival {
  transform-origin: 55% 52%;
}

html.is-animating .banner__layer--festival {
  animation:
    alfa-festival-in 13000ms cubic-bezier(.18, .92, .22, 1) infinite both,
    alfa-festival-pulse 13000ms cubic-bezier(.36, 0, .2, 1) infinite both;
}

.banner__layer--event-logo,
.banner__layer--bank {
  transform-origin: 50% 50%;
}

html.is-animating .banner__layer--event-logo,
html.is-animating .banner__layer--bank {
  animation: alfa-top-in 13000ms cubic-bezier(.19, 1, .22, 1) infinite both;
}

html.is-animating .banner__layer--bank {
  animation-delay: 90ms;
}

.banner__layer--date {
  transform-origin: 0 100%;
}

html.is-animating .banner__layer--date {
  animation: alfa-date-in 13000ms cubic-bezier(.2, .9, .22, 1) infinite both;
}

.banner__layer--artist {
  transform-origin: 50% 100%;
}

html.is-animating .banner__layer--artist {
  animation: alfa-artist-in 13000ms cubic-bezier(.2, .9, .2, 1) infinite both;
}

@keyframes alfa-bg-cycle {
  0%,
  2.3% {
    opacity: 0;
  }

  5.8%,
  94.2% {
    opacity: 1;
  }

  98.8%,
  100% {
    opacity: 0;
  }
}

@keyframes alfa-festival-in {
  0%,
  7% {
    opacity: 0;
    transform: translate3d(-10%, 0, 0) rotate(-1.2deg) scale(.985);
  }

  14% {
    opacity: 1;
    transform: translate3d(1.2%, 0, 0) rotate(.25deg) scale(1.01);
  }

  17.5%,
  93% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  95.9% {
    opacity: 1;
    transform: translate3d(-1.2%, 0, 0) rotate(-.25deg) scale(1.01);
  }

  100% {
    opacity: 0;
    transform: translate3d(-10%, 0, 0) rotate(-1.2deg) scale(.985);
  }
}

@keyframes alfa-festival-pulse {
  0%,
  20%,
  28%,
  36%,
  44%,
  52%,
  60%,
  68%,
  76%,
  84%,
  92%,
  100% {
    translate: 0 0;
    scale: 1;
  }

  24%,
  40%,
  56%,
  72% {
    translate: -.8% -.4%;
    scale: 1.014;
  }

  26%,
  42%,
  58%,
  74% {
    translate: .6% .2%;
    scale: .997;
  }
}

@keyframes alfa-logo-shine {
  0%,
  24%,
  54%,
  100% {
    clip-path: polygon(-44% 0, -20% 0, 10% 100%, -14% 100%);
    opacity: 0;
  }

  28%,
  58% {
    clip-path: polygon(-8% 0, 16% 0, 46% 100%, 22% 100%);
    opacity: .42;
  }

  32%,
  62% {
    clip-path: polygon(36% 0, 60% 0, 90% 100%, 66% 100%);
    opacity: .88;
  }

  36%,
  66% {
    clip-path: polygon(72% 0, 96% 0, 126% 100%, 102% 100%);
    opacity: .46;
  }

  40%,
  70% {
    clip-path: polygon(104% 0, 128% 0, 158% 100%, 134% 100%);
    opacity: 0;
  }
}

@keyframes alfa-top-in {
  0%,
  4.7% {
    opacity: 0;
    transform: translate3d(0, -42px, 0) scale(.96);
  }

  9.9% {
    opacity: 1;
    transform: translate3d(0, 6px, 0) scale(1.015);
  }

  13.4%,
  93% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  95.9% {
    opacity: 1;
    transform: translate3d(0, 6px, 0) scale(1.015);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -42px, 0) scale(.96);
  }
}

@keyframes alfa-date-in {
  0%,
  7% {
    opacity: 0;
    transform: translate3d(-18%, 0, 0) scale(.985);
  }

  14%,
  17.5%,
  93%,
  95.9% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-18%, 0, 0) scale(.985);
  }
}

@keyframes alfa-artist-in {
  0%,
  5.8% {
    opacity: 0;
    transform: translate3d(0, 18%, 0) scale(.985);
  }

  12.9% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  16.4%,
  93% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  95.9% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 18%, 0) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner__layer,
  .banner__layer--background,
  .banner__layer--shine::after {
    translate: 0 0;
    scale: 1;
    animation: none;
  }
}