.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1.75rem;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

html,
body {
    font-family: 'Nunito', 'Noto Sans', 'Noto Sans SC', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 4.27vw;
    color: #283135;
    background: white;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background: transparent;
}


#content {
    padding: 8vw;
    padding-bottom: 2vh;
    height: calc(100% - 12vh);
    overflow-y: auto;
    box-sizing: border-box;
    background: transparent;
}

#header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 95%;
    color: black;
}

#header div {
    line-height: 2.5em;
}

#header img {
    display: block;
    width: 18vw;
}

#header a {
    max-height: 1em;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 12vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#footer a {
    width: 100%;
    height: 100%;
}

.footer-button {
    height: 100%;
    width: 100%;
    background: #283135;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border: none;
}

.footer-button .text {
    margin-right: auto;
    margin-bottom: 0;
}

.footer-button .arrow {
    position: relative;
    top: 0.4rem;
}


.title {
    font-weight: 700;
    font-size: 2.125rem;
    line-height: 2.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.15rem;
}

.sub-title {
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
}

.text {
    line-height: 1.375rem;
    margin-bottom: 1.75rem;
}

.back-arrow {
    position: relative;
    padding-left: 1.5em;
    line-height: 1;
    color: #005c6b;
    text-decoration: none;
}

.back-arrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('/static/scan/images/back_arrow.png');
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
    width: 1.2em;
    height: 1.2em;
}


.line {
    background: #FFDF43;
    height: 0.25rem;
    width: 22vw;
    border-radius: 0.1rem;
    margin-bottom: 0.4rem;
}

.background-image {
    position: absolute;
    z-index: -1;
    top: 6.7rem;
    left: 0;
    height: 80vh;
    width: 100%;
    background-image: url('/static/scan/images/map.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.2;
}




/* ================================================ */
/* Check Page Animation Classes (used for both YOUP & Pillowwise */
/* ================================================ */


:root {
    /* How long after page loads to start animations */
    --animation-delay: 0.4s;
    /* How long the scanning sweep (plain image hide + mask reveal) lasts */
    --scan-animation-duration: 2s;
    /* How long to wait AFTER the laser finishes before wiping away the mask */
    --scan-delay: 2s;
}

/* Container for our layered images/animations */
.image-animation-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    /* space above check-container */
}

.overlay-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}


/* ------------------------------------- */
/* Keyframes for each phase of animation */
/* ------------------------------------- */

/**
   * 1) plainImageAnim (No Longer used):
   *    Hide the plain image top→bottom over --scan-animation-duration.
   *    - 0%: fully visible
   *    - 100%: fully hidden (top clipped at 100%)
   */
@keyframes plainImageAnim {
    0% {
        clip-path: inset(0% 0 0% 0);
        /* fully visible */
    }

    100% {
        clip-path: inset(100% 0 0 0);
        /* fully hidden top→bottom */
    }
}

/**
   * 2) laserAnim:
   *    A consistent 'thin line' sweeping from top→bottom. No fade.
   *    - 0%: near top (2% thickness)
   *    - 100%: near or off the bottom
   */
@keyframes laserAnim {
    0% {
        /* top=0%, bottom=98% => ~2% horizontal line at the top */
        clip-path: inset(0% 0 99.5% 0);
    }

    50% {
        /* halfway => top=50%, bottom=48% => still ~2% thickness */
        clip-path: inset(50% 0 49.5% 0);
    }

    100% {
        /* fully down => top=100%, bottom=0 => line is off bottom */
        clip-path: inset(99.5% 0 0 0);
    }
}

/**
   * 3) maskReveal:
   */
@keyframes maskReveal {
    0% {
        clip-path: inset(0 0 100% 0);
        /* Start hidden */
    }

    100% {
        clip-path: inset(0 0 0 0);
        /* Reveal downward */
    }
}

/**
   * 4) maskHold:
   */
@keyframes maskHold {

    0%,
    100% {
        clip-path: inset(0 0 0 0);
        /* fully revealed */
    }
}

/* ----------------------------------------- */
/* Apply animations with the correct delays  */
/* ----------------------------------------- */

.plain-image {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 1;
    /* Initially visible */
    animation-delay: var(--animation-delay);
}

.image-box {
    width: 45%;
    display: flex;
    align-items: center;
  }
  
  .image-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

.laser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 4;
    opacity: 0;
    /* Initially hidden */
    animation:
        fadeIn 0.1s linear forwards var(--animation-delay),
        laserAnim var(--scan-animation-duration) linear forwards var(--animation-delay);
}

.animation-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    /* lower than dots overlay */
    opacity: 0;
    /* Initially hidden */
    animation:
        fadeIn 0.1s linear forwards var(--animation-delay),
        maskReveal var(--scan-animation-duration) linear forwards var(--animation-delay),
        maskHold 9999s linear forwards calc(var(--animation-delay) + var(--scan-animation-duration));
}

.dots-overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    border-radius: 0.3rem;
    margin-bottom: 1.25em;
    display: block;
    z-index: 3;
    opacity: 0;
    /* Start hidden */
    animation: fadeIn 0.1s linear forwards calc(var(--animation-delay) + var(--scan-animation-duration));
}

.dots-overlay.flash {
    /* The fadeIn animation still runs first */
    animation: fadeIn 0.1s linear forwards calc(var(--animation-delay) + var(--scan-animation-duration)),
        flashDots 2s ease-in-out forwards calc(var(--animation-delay) + var(--scan-animation-duration) + 0.1s);
}





@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flashDots {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}