@font-face { font-family: "SF Pro Display Light"; src: url("../fonts/sf-pro-display-light.woff2"); }
@font-face { font-family: "SF Pro Display Regular"; src: url("../fonts/sf-pro-display-regular.woff2"); }
@font-face { font-family: "SF Pro Display Semibold"; src: url("../fonts/sf-pro-display-semibold.woff2"); }

@keyframes scroll-left {
    from { background-position: 0 0; }
    to { background-position: calc(var(--flashpass-width) * -1) 0; }
}
@keyframes scroll-right {
    from { background-position: 0 0; }
    to { background-position: calc(var(--flashpass-width) * 1) 0; }
}
@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* disable default input styling, text selection, & scrolling */
* { overflow: hidden; overscroll-behavior: none; }
select, input { border: none; outline: none; background: none; }

:root {
    --device-height: 100vh;
    --device-width: 100vw;
    --flashpass-width: unset;
    --ticket-height: unset;
    --ticket-width: unset;
    --ticket-top: unset;
    --ticket-color: #111;
    --ticket-service-origin-width: unset;
    --animation-duration: 10s;
    --ticket-expiration-animation-duration: calc(var(--animation-duration) * 0.4);
    --ticket-qr-code-animation-duration: calc(var(--animation-duration) * 1.2);
    --clouds-animation-duration: calc(var(--animation-duration) * 2.5);
    --skyline-animation-duration: calc(var(--animation-duration) * 2);
    --bus-animation-duration: var(--animation-duration);
    --metro-animation-duration: calc(var(--animation-duration) * 1.3);
    --train-animation-duration: calc(var(--animation-duration) * 0.6);
    --treeline-animation-duration: calc(var(--animation-duration) * 1.5);
}

.animation {
    left: 0;
    background-size: auto var(--device-height);
    background-repeat: repeat-x;
    background-position: 0 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#background {
    z-index: 1;
    background-image: url("../images/background-light.svg");
    background-size: auto var(--device-height);
}
#clouds {
    z-index: 2;
    background-image: url("../images/clouds-light.svg");
    animation-duration: var(--clouds-animation-duration);
}
#skyline {
    z-index: 3;
    background-image: url("../images/skyline.svg");
    animation-duration: var(--skyline-animation-duration);
}
#bus {
    z-index: 4;
    background-image: url("../images/bus.svg");
    animation-duration: var(--bus-animation-duration);
}
#metro {
    z-index: 5;
    background-image: url("../images/metro.svg");
    animation-duration: var(--metro-animation-duration);
}
#train {
    z-index: 6;
    background-image: url("../images/train.svg");
    animation-duration: var(--train-animation-duration);
}
#treeline {
    z-index: 7;
    background-image: url("../images/treeline.svg");
    animation-duration: var(--treeline-animation-duration);
}
#interaction-layer {
    z-index: 8;
}
#ticket-and-padding {
    z-index: 9;
}
#service-identifier {
    font-size: 14vh;
}
#service-name {
    font-size: 1.35vh;
    letter-spacing: .05vh;
}
#ticket-details {
    z-index: 10;
    height: var(--ticket-height);
    width: var(--ticket-width);
    top: var(--ticket-top);
    color: var(--ticket-color);
    box-sizing: border-box;
}
#ticket-details::after {
    content: "CLOSE";
    position: absolute;
    top: -8.44vh;
    right: -3.19vh;
    font-family: 'SF Pro Display Regular';
    font-size: 1.4vh;
    color: #fff;
    letter-spacing: .05vh;
}
#expiration-time,
#expiration-date {
    font-size: 1.85vh;
    margin-bottom: 2.7vh;
    animation: blink var(--ticket-expiration-animation-duration) infinite both;
}
#daily-code {
    height: 5.19vh;
    width: 7.4vh;
    font-size: 4.5vh;
    color: #fff;
    border-radius: .5vh;
    background-color: #912e3b;
    text-align: center;
    text-transform: uppercase;
}
#qr-code {
    height: 7.4vh;
    width: 7.4vh;
    animation-duration: var(--ticket-qr-code-animation-duration);
}
.service-route-option-placeholder {
    width: fit-content;
    font-size: 2.5vh;
}
#service-origin,
#service-destination {
    font-size: 2.5vh;
    color: var(--ticket-color);
    letter-spacing: .05vh;
}
#service-origin {
    width: var(--ticket-service-origin-width);
}
#service-route-arrow {
    font-size: 2vh;
    margin: 0 .35vh 0 .45vh;
    color: #8e8f9b;
}
#service-zone {
    font-size: 1.85vh;
    margin-bottom: .2vh;
    letter-spacing: .05vh;
}

/* dark theme variant images */
[data-theme='dark'] > #background { background-image: url("../images/background-dark.svg"); }
[data-theme='dark'] > #clouds { background-image: url("../images/clouds-dark.svg"); }

/* utility classes */
.h-device { height: var(--device-height); }
.h-100 { height: 100%; }
.w-device { width: var(--device-width); }
.w-100 { width: 100%; }
.w-auto { width: auto; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.content-center { justify-content: center; }
.content-between { justify-content: space-between; }
.items-center { align-items: center; }
.font-light { font-family: "SF Pro Display Light"; }
.font-regular { font-family: "SF Pro Display Regular"; }
.font-semibold { font-family: "SF Pro Display Semibold"; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2vh; }
.mb-0 { margin-bottom: 0; }
.p-0 { padding: 0; }
.p-2 { padding: 2vh; }
.animation-scroll-left { animation-name: scroll-left; }
.animation-scroll-right { animation-name: scroll-right; }
.select-none { user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.visibility-hidden { visibility: hidden; }
.appearance-none { appearance: none; -webkit-appearance: none; -moz-appearance: none; }