:root {
    --event-pink: #db2777;
    --event-light-pink: #ff71d4;
    --event-slide-time: 850ms;
    --event-slide-ease: cubic-bezier(.76, 0, .24, 1);
}

* {
    box-sizing: border-box;
}

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

body {
    position: relative;
    color: #fff;
    background: var(--event-pink);
    font-family: Oswald, Arial, sans-serif;
}

html.event-leaving-for-home body,
html.event-leaving-for-event body {
    pointer-events: none;
}

html.event-entering-from-home .event-design-viewport {
    animation: eventEnterFromHome 760ms var(--event-slide-ease) forwards;
}

html.event-leaving-for-home .event-design-viewport {
    animation: eventExitToHome 720ms var(--event-slide-ease) forwards;
}

html.event-leaving-for-event .event-design-viewport {
    animation: eventExitToEvent 720ms var(--event-slide-ease) forwards;
}

@keyframes eventExitToEvent {
    from {
        top: var(--event-canvas-top);
    }
    to {
        top: calc(var(--event-canvas-top) - 100dvh);
    }
}

@keyframes eventEnterFromHome {
    from {
        top: calc(var(--event-canvas-top) + 100dvh);
    }
    to {
        top: var(--event-canvas-top);
    }
}

@keyframes eventExitToHome {
    from {
        top: var(--event-canvas-top);
    }
    to {
        top: calc(var(--event-canvas-top) + 100dvh);
    }
}

button,
input {
    font: inherit;
}

button,
a {
    color: inherit;
}

.event-design-viewport {
    position: fixed;
    left: var(--event-canvas-left, calc((100vw - 1280px) / 2));
    top: var(--event-canvas-top, calc((100dvh - 720px) / 2));
    width: var(--event-canvas-width, 1280px);
    height: var(--event-canvas-height, 720px);
    overflow: hidden;
    transform: none;
}

.event-presentation {
    position: relative;
    width: 1280px;
    height: 720px;
    overflow: hidden;
    zoom: var(--event-canvas-scale);
}


html.event-entering-from-home .event-design-viewport,
html.event-leaving-for-home .event-design-viewport,
html.event-leaving-for-event .event-design-viewport {
    will-change: top;
}

.event-presentation {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.event-presentation img {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

@supports not (zoom: 1) {
    .event-design-viewport {
        width: 1280px;
        height: 720px;
        transform: scale(var(--event-canvas-scale, 1));
        transform-origin: left top;
    }

    .event-presentation {
        zoom: 1;
    }
}

.event-track {
    display: flex;
    width: 3540px;
    height: 720px;
    transform: translate3d(-1280px, 0, 0);
    transition: transform var(--event-slide-time) var(--event-slide-ease);
    will-change: transform;
}

.event-presentation[data-view="services"] .event-track {
    transform: translate3d(-770px, 0, 0);
}

.event-presentation[data-view="download"] .event-track {
    transform: translate3d(-1460px, 0, 0);
}

.event-panel {
    position: relative;
    flex: 0 0 1000px;
    width: 1000px;
    height: 720px;
    overflow: hidden;
    background: var(--event-pink);
    margin: 0 95px;
}

.event-services-panel,
.event-download-panel {
    z-index: 1;
}

.event-services-panel {
    overflow: visible;
}

.event-presentation[data-view="services"] .event-services-panel {
    z-index: 4;
}

.event-download-panel {
    overflow: visible;
}

.event-presentation[data-view="download"] .event-download-panel {
    z-index: 4;
}

.event-main-panel {
    z-index: 2;
    overflow: visible;
}

.event-logo {
    position: relative;
    z-index: 5;
    left: 10%;
    top: 0;
    display: block;
    width: 100px;
    height: 80px;
    transform: translateX(-50%);
}

.event-logo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 180ms ease;
}

.event-logo-hover {
    opacity: 0;
}

.event-logo:hover .event-logo-hover {
    opacity: 1;
}

.event-logo:hover .event-logo-base {
    opacity: 0;
}

.event-main-copy {
    position: absolute;
    z-index: 2;
    left: 0%;
    top: 16.5%;
    width: 72%;
    transform: translateX(7%);
}

.event-main-copy h1 {
    margin: 0;
    color: var(--event-light-pink);
    font-size: 58px;
    font-weight: 300;
    line-height: .95;
    letter-spacing: .055em;
}

.event-main-copy h2 {
    margin: .45em 0 1em;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .075em;
}

.event-main-copy p {
    margin: 0;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .055em;
}

.event-actions {
    position: absolute;
    z-index: 6;
    left: 2%;
    top: 34.3%;
    width: 200px;
    transform: translateX(15%);
}

.event-action {
    position: relative;
    display: flex;
    width: 180px;
    height: 34px;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid var(--event-light-pink);
    align-items: center;
    justify-content: center;
    color: var(--event-light-pink);
    background: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .16em;
    transition: color 180ms ease, background-color 180ms ease;
}

.event-action b {
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-54%);
}

.event-action-services b {
    left: -28px;
}

.event-action-download {
    color: #fff;
    border-color: #fff;
    background: var(--event-light-pink);
}

.event-action-download b {
    right: -25px;
    color: var(--event-light-pink);
}

.event-action:hover {
    color: #fff;
    background: var(--event-light-pink);
}

.event-action-download:hover {
    color: var(--event-light-pink);
    background: #fff;
}

.event-team {
    position: absolute;
    z-index: 2;
    left: 80%;
    bottom: -5%;
    display: flex;
    width: 723px;
    height: 691px;
    align-items: flex-end;
    justify-content: center;
    transform: translateX(5%) scale(.36);
    transform-origin: left bottom;
}

.event-team .person-card {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 35%;
    height: 100%;
    margin: 0 -9.9%;
    pointer-events: none;
}

.event-team .person-card > img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
}

.event-team .person-card > .person-hover-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 220ms ease;
}

.event-team .person-card:has(.person-hover-target:hover) > .person-hover-image,
.event-team .person-hover-target:hover ~ .person-hover-image {
    opacity: 1;
}

.event-team .person-card.is-active > .person-hover-image {
    opacity: 1;
}

.event-team .person-card.is-active .person-hover-label {
    transform: scale(1.8);
}
.event-team .person-card:nth-child(1) { z-index: 1; }
.event-team .person-card:nth-child(2) { z-index: 2; transform: translateX(-1.2%); }
.event-team .person-card:nth-child(3) { z-index: 4; transform: translateX(-15.4%); }
.event-team .person-card:nth-child(4) { z-index: 3; transform: translateX(-3.5%); }
.event-team .person-card:nth-child(5) { z-index: 2; transform: translateX(-12.4%); }
.event-team .person-card:nth-child(6) { z-index: 3; transform: translateX(-21%); }

.event-team .person-hover-target {
    position: absolute;
    z-index: 19;
    top: 36%;
    height: 60%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.event-team .person-hover-label {
    position: absolute;
    z-index: 20;
    padding: 1px 14px 2px 8px;
    color: #fff;
    font-family: 'Caveat Brush', cursive;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .025em;
    white-space: nowrap;
    pointer-events: none;
    transform: scale(1);
    transform-origin: left center;
    transition: transform 220ms ease;
}

.event-team .person-hover-target:hover ~ .person-hover-label {
    transform: scale(1.8);
}

.event-team .person-maintenance .person-hover-target { left: 24%; width: 50%; }
.event-team .person-maintenance .person-hover-label {
    left: auto;
    right: 31%;
    top: 26.5%;
    text-align: right;
    transform-origin: right center;
}

.event-team .person-media .person-hover-target { left: 24%; width: 50%; }
.event-team .person-media .person-hover-label { left: 44%; top: 24%; }

.event-team .person-event .person-hover-target { left: 47%; width: 42%; }
.event-team .person-event .person-hover-label {
    left: auto;
    right: 11%;
    top: 18.9%;
    text-align: right;
    transform-origin: right center;
}

.event-team .person-online .person-hover-target { left: 18%; width: 50%; }
.event-team .person-online .person-hover-label { left: 53%; top: 23%; }

.event-team .person-radio .person-hover-target { left: 29%; width: 45%; }
.event-team .person-radio .person-hover-label { left: 64%; top: 27.9%; }

.event-team .person-renovate .person-hover-target { left: 34%; width: 51%; }
.event-team .person-renovate .person-hover-label { left: 74%; top: 22.6%; }

.event-media-frame {
    position: absolute;
    left: 31.5%;
    top: 0;
    width: 37.5%;
    height: 100%;
    overflow: hidden;
    background: #030303;
    opacity: 0;
    transition:
        opacity 420ms ease 160ms,
        transform 620ms var(--event-slide-ease) 100ms;
}

.event-media-frame::after {

}

.event-media-frame span {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.event-gallery-slides {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: transform 760ms var(--event-slide-ease);
}

.event-gallery-slide {
    display: block;
    width: 100%;
    height: 33.3333%;
    aspect-ratio: 1 / .64;
    object-fit: cover;
    object-position: center;
    border-bottom: 2px solid #030303;
}

.event-tools {
    position: absolute;
    z-index: 2;
    left: 11.5%;
    top: 16%;
    width: 220px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition:
        opacity 420ms ease 180ms,
        transform 620ms var(--event-slide-ease) 120ms;
}

.event-service-copy {
    position: absolute;
    z-index: 2;
    left: 71.5%;
    top: 45%;
    width: 27%;
    opacity: 0;
    transition:
        opacity 420ms ease 220ms,
        transform 620ms var(--event-slide-ease) 160ms;
}

.event-presentation[data-view="services"] .event-media-frame,
.event-presentation[data-view="services"] .event-tools,
.event-presentation[data-view="services"] .event-service-copy {
    opacity: 1;
    transform: translateX(320px);
}

.event-service-copy h2,
.event-download-form h2 {
    margin: 0 0 .7em;
    color: var(--event-light-pink);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .08em;
}

.event-service-copy ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 9px;
    line-height: 1.65;
    letter-spacing: .045em;
}

.event-edge-button {
    position: absolute;
    z-index: 10;
    top: 36%;
    width: 28px;
    height: 48px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.event-edge-button span {
    display: block;
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
}

.event-services-close {
    right: 0;
}

.event-services-close::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid #fff;
}

.event-services-close span {
    opacity: 0;
}

.event-person {
    position: absolute;
    z-index: 4;
    right: -5%;
    bottom: 0%;
    width: 35%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-15%);
}

.event-download-close {
    right: -52px;
    top: 47%;
    opacity: .75;
}

.event-download-form {
    position: absolute;
    z-index: 8;
    left: 0;
    top: 17%;
    width: 180px;
    opacity: 1;
    pointer-events: none;
    transform: translateX(-230px);
    will-change: opacity, transform;
    transition: transform var(--event-slide-time) var(--event-slide-ease);
}

.event-presentation[data-view="download"] .event-download-form {
    pointer-events: auto;
    transform: translateX(58px);
}

.event-download-form h2 {
    position: relative;
    display: block;
    width: 270px;
    height: 51px;
    margin-bottom: 15px;
    font-size: 15px;
    white-space: nowrap;
}

.event-download-form h2 img {
    position: absolute;
    left: -17px;
    top: 0;
    display: block;
    width: 38px;
    height: 49px;
    object-fit: contain;
}

.event-download-form h2 span {
    position: absolute;
    left: 0;
    top: 36px;
    display: block;
    line-height: 1;
}

.event-download-form label {
    display: flex;
    margin-bottom: 7px;
    flex-direction: column;
}

.event-download-form input {
    width: 100%;
    height: 34px;
    padding: 5px 8px;
    border: 1px solid #f3c5df;
    border-radius: 0;
    outline: none;
    color: #442034;
    background: #fff;
    font-size: 12px;
}

.event-download-form input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .3);
}

.event-download-form label span {
    margin-top: 0px;
    color: #fff;
    font-size: 9px;
    letter-spacing: .08em;
}

.event-download-form button {
    width: 100%;
    height: 35px;
    margin-top: 6px;
    border: 1px solid #fff;
    color: #fff;
    background: var(--event-light-pink);
    cursor: pointer;
    font-size: 10px;
    letter-spacing: .18em;
    transition: color 180ms ease, background-color 180ms ease;
}

.event-download-form button:hover {
    color: var(--event-light-pink);
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --event-slide-time: 1ms;
    }

    html.event-entering-from-home .event-design-viewport {
        animation: none;
    }

    html.event-leaving-for-home .event-design-viewport,
    html.event-leaving-for-event .event-design-viewport {
        animation: none;
    }
}

:root {
    --event-pink: #07d5ff;
    --event-light-pink: #00a6e7;
}

.event-main-copy {
    left: 50%;
    top: 16.5%;
    width: 47%;
    transform: none;
}

.event-actions {
    left: 50%;
    top: 36%;
    transform: none;
}

.event-action {
    width: 210px;
}

.event-action-services b {
    left: auto;
    right: -25px;
}

.event-action-download b {
    left: -28px;
    right: auto;
}

.event-person {
    left: 0%;
    right: auto;
    bottom: -2%;
    width: 46%;
    transform: none;
}

.event-presentation[data-view="download"] .event-track {
    transform: translate3d(-1200px, 0, 0);
}

.event-presentation[data-view="services"] .event-track {
    transform: translate3d(-1750px, 0, 0);
}

.event-presentation[data-view="download"] .event-download-panel,
.event-presentation[data-view="services"] .event-services-panel {
    z-index: 4;
}

.event-presentation[data-view="services"] .event-media-frame,
.event-presentation[data-view="services"] .event-tools,
.event-presentation[data-view="services"] .event-service-copy {
    opacity: 1;
    transform: translateX(-200px);
}

.event-media-frame {
    left: 38%;
}

.event-media-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to bottom, transparent 0 26%, rgba(255, 255, 255, .08) 26% calc(26% + 1px), transparent calc(26% + 1px) 100%),
        linear-gradient(to bottom, transparent 0 52%, rgba(255, 255, 255, .08) 52% calc(52% + 1px), transparent calc(52% + 1px) 100%),
        linear-gradient(to bottom, transparent 0 78%, rgba(255, 255, 255, .08) 78% calc(78% + 1px), transparent calc(78% + 1px) 100%);
    pointer-events: none;
}

.event-service-copy {
    left: 14%;
    top: 45%;
    width: 20%;
    text-align: right;
}