:root {
--shape-steam: url('data:image/svg+xml,');
--shape-steam--rotated: url('data:image/svg+xml,');
--shape-plus: url('data:image/svg+xml,');
--shape-plus--rotated: url('data:image/svg+xml,');
--shape-plus--opaque: url('data:image/svg+xml,');
--shape-plus--teal: url('data:image/svg+xml,');
--shape-plus--teal--opaque: url('data:image/svg+xml,');
--shape-disc: url('data:image/svg+xml,');
--shape-disc--opaque: url('data:image/svg+xml,');
--shape-disc--teal: url('data:image/svg+xml,');
--shape-ring: url('data:image/svg+xml,');
--shape-ring--opaque: url('data:image/svg+xml,');
--shape-ring--teal: url('data:image/svg+xml,');
--shape-semicircle: url('data:image/svg+xml,');
--shape-semicircle--opaque: url('data:image/svg+xml,');
--shape-rings: url('data:image/svg+xml,');
--shape-rings--opaque: url('data:image/svg+xml,');
--shape-arrow: url('data:image/svg+xml,');
--shape-arrow--rotated: url('data:image/svg+xml,');
--shape-pentagon: url('data:image/svg+xml,');
--shape-pentagon--opaque: url('data:image/svg+xml,');
--shape-pentagon--rotated: url('data:image/svg+xml,');
--shape-pentagon--teal: url('data:image/svg+xml,');
--shape-pentagon--teal--rotated: url('data:image/svg+xml,');
--background-top-default-images:
/* left */
var(--shape-steam--rotated),
var(--shape-disc),
var(--shape-disc),
var(--shape-plus--teal),
/* right */
var(--shape-semicircle),
var(--shape-pentagon--opaque),
var(--shape-disc),
var(--shape-disc--teal),
var(--shape-plus),
var(--shape-disc--opaque)
;
--background-top-default-sizes:
/* left */
40%,
1.75%,
1.75%,
6%,
/* right */
30%,
15%,
1.75%,
1.75%,
5%,
15%
;
--background-top-default-start-positions:
/* left */
left -28vi top 13vb,
left 5vi top 40vb,
left 3vi top 80vb,
left -2.5vi top 63vb,
/* right */
right -20vi top 5vb,
right 15vi top 20vb,
right 35vi top 15vb,
right 3vi top 40vb,
right 3vi top 50vb,
right -11vi top 65vb
;
--background-top-default-end-positions:
/* left */
left -50vi top -10vb,
left -10vi top -10vb,
left -10vi top -10vb,
left -10vi top -10vb,
/* right */
right -40vi top -10vb,
right -10vi top -10vb,
right -10vi top -10vb,
right -10vi top -10vb,
right -10vi top -10vb,
right -10vi top -10vb
;
--background-bottom-default-images:
/* left */
var(--shape-plus--teal--opaque),
var(--shape-disc),
var(--shape-rings--opaque),
/* right */
var(--shape-arrow--rotated),
var(--shape-pentagon--teal--rotated),
var(--shape-disc)
;
--background-bottom-default-sizes:
/* left */
5%,
1.75%,
22%,
/* right */
10%,
20%,
1.75%
;
--background-bottom-default-start-positions:
/* left */
left -10vi bottom 0,
left -10vi bottom 0,
left -30vi bottom 0,
/* right */
right -10vi bottom 0,
right -25vi bottom 0,
right -10vi bottom 0
;
--background-bottom-default-end-positions:
/* left */
left 3vi bottom 10vb,
left 2vi bottom 30vb,
left -17vi bottom 50vb,
/* right */
right 2vi bottom 3vb,
right -13vi bottom 20vb,
right 2vi bottom 60vb
;
--background-top-alternate-images:
/* left */
var(--shape-disc),
var(--shape-disc),
var(--shape-disc),
var(--shape-semicircle--opaque),
var(--shape-plus--teal),
/* right */
var(--shape-ring--opaque),
var(--shape-arrow),
var(--shape-pentagon--teal)
;
--background-top-alternate-sizes:
/* left */
1.75%,
1.75%,
1.75%,
28%,
5%,
/* right */
18%,
10%,
20%
;
--background-top-alternate-start-positions:
/* left */
left 2vi top 60vb,
left 40vi top 15vb,
left 1vi top 90vb,
left -16vi top 5vb,
left 4vi top 70vb,
/* right */
right 30vi top 22vb,
right 2vi top 18vb,
right -13vi top 45vb
;
--background-top-alternate-end-positions:
/* left */
left -10vi top -10vb,
left -10vi top -10vb,
left -10vi top -10vb,
left -30vi top -10vb,
left -10vi top -10vb,
/* right */
right -10vi top -10vb,
right -10vi top -10vb,
right -30vi top -10vb
;
--background-top-homeage-images:
/* left */
var(--shape-steam),
var(--shape-disc--teal),
var(--shape-plus--rotated),
/* right */
var(--shape-plus--opaque),
var(--shape-disc),
var(--shape-disc),
var(--shape-ring--teal),
var(--shape-semicircle--opaque)
;
--background-top-homepage-sizes:
/* left */
43%,
1.75%,
7%,
/* right */
5%,
1.75%,
1.75%,
19%,
34%
;
--background-top-homepage-start-positions:
/* left */
left -34vi top 0vb,
left 2vi top 55vb,
left -4vi top 68vb,
/* right */
right 40vi top 12vb,
right 10vi top 15vb,
right 8vi top 55vb,
right -10vi top 15vb,
right -22vi top 55vb;
;
--background-top-homepage-end-positions:
/* left */
left -50vi top -10vb,
left -10vi top -10vb,
left -15vi top -10vb,
/* right */
right -10vi top -10vb,
right -10vi top -10vb,
right -10vi top -10vb,
right -40vi top -10vb,
right -60vi top -10vb
;
}
body::before {
content: ' ';
display: block;
position: absolute;
inline-size: 100%;
block-size: 100vb;
overflow: hidden;
background-repeat: no-repeat;
background-position: var(--background-top-default-start-positions);
background-image: var(--background-top-default-images);
background-size: var(--background-top-default-sizes);
z-index: -1;
@media (prefers-reduced-motion: no-preference) {
animation: top-default-go-out auto linear;
animation-timeline: scroll();
}
}
@keyframes top-default-go-out {
from {
background-position: var(--background-top-default-start-positions);
}
to {
background-position: var(--background-top-default-end-positions);
}
}
body:has(a[href*='venue'][aria-current*='page'])::before,
body:has(a[href*='tickets'][aria-current*='page'])::before {
background-position: var(--background-top-alternate-start-positions);
background-image: var(--background-top-alternate-images);
background-size: var(--background-top-alternate-sizes);
@media (prefers-reduced-motion: no-preference) {
animation: alternate-top-go-out auto linear;
animation-timeline: scroll();
}
}
@keyframes alternate-top-go-out {
from {
background-position: var(--background-top-alternate-start-positions);
}
to {
background-position: var(--background-top-alternate-end-positions);
}
}
body:not(:has(a[aria-current*='page']))::before {
background-position: var(--background-top-homepage-start-positions);
background-image: var(--background-top-homeage-images);
background-size: var(--background-top-homepage-sizes);
@media (prefers-reduced-motion: no-preference) {
animation: homepage-top-go-out auto linear;
animation-timeline: scroll();
}
}
@keyframes homepage-top-go-out {
from {
background-position: var(--background-top-homepage-start-positions);
}
to {
background-position: var(--background-top-homepage-end-positions);
}
}
body:has(h1 svg)::before {
@media (prefers-reduced-motion: no-preference) {
opacity: 1;
transform: scale(1) rotate(0);
transition:
opacity .75s var(--ease-confident),
transform .75s var(--ease-confident);
@starting-style {
opacity: 0;
transform: scale(1.75) rotate(5deg);
}
}
}
body > main {
min-block-size: 150vb;
background-position: var(--background-bottom-default-end-positions);
background-image: var(--background-bottom-default-images);
background-size: var(--background-bottom-default-sizes);
background-repeat: no-repeat;
z-index: -1;
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
min-block-size: auto;
animation: bottom-default-go-in auto linear;
animation-timeline: scroll();
}
}
}
@keyframes bottom-default-go-in {
from {
background-position: var(--background-bottom-default-start-positions);
}
to {
background-position: var(--background-bottom-default-end-positions);
}
}