/* ---------------------------------------------------- FONT STUFF */
@font-face {
    font-family: "Neonderthaw";
    src: url("../fonts/Neonderthaw-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope.ttf");
    font-weight: 200 800;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "TiltNeon";
    src: url("../fonts/TiltNeon.ttf");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/*
/ ----------------------------------------- RESPONSIVE LAYOUT VARS 
*/

:root {

    /* page wipe effect */
    --hero-background: url("../images/bg.jpg");
    --wipe-duration: 1400ms;

    /* static vars */
    --review-font-size: 14px;
    --review-note-font-size: 16px;
    --review-contact-font-size: 12px;
    --review-credential-font-size: 16px;

    --review-text-color: rgb(38, 67, 132);
    --review-bg-color: rgb(238, 210, 177);

    /* fluid resposive layout */
    --headline-font-size: max(4.5vw, 5.5vh);
    --sub-headline-font-size: max(1.75vw, 2.25vh);

    --review-link-font-size: max(1.5vw, 2vh);
    --review-button-inner-padding: max(0.5vw, 0.666vh);

    --space-above-hero-copy: max(4vw, 3vh);

    --pedicabber-size-height: min(66dvh, 75vw);
    /* This should exactly match the pedicab body space */
    --booking-link-container-size-height: min(16dvh, 16vw);
    /* There is a fixed pedicab<-->text-link size ratio */
    --booking-link-font-size: calc(var(--pedicabber-size-height) * 0.0606);

}

/*
/ ----------------------------------------- UNSET SEMANTIC PROPERTIES
*/

h1 {
  all: unset;
  display: block;
}

.headline_text,
.sub_headline_text {
    display: block;
}

/*
/ ----------------------------------------- MAIN "BILLBOARD"
*/

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    background-color: black;
}

/*
This is where we must use *** dvh *** in order
to solve mobile safari layout issue.
That is... pedicabber should always be bottom-aligned
with this container. (The "bottom of the screen" from user's
perspective).
If we did not do this, then scrolling or rotation
introduces a gap under the pedicabber... effectively
rising out of the water and revealing 
the 2D composition.
 */
.main_container {
    position: relative;
    height: 100dvh;
    background-image: var(--hero-background);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

/*
This container factors out some things and contains:
- Main title
- sub title
- review link
*/
.hero_copy_container {
    position: absolute;
    top: var(--space-above-hero-copy);
    right: 6vw;
    text-align: right;
}

.headline_text {
    max-width: 90vw;
    /* ensures title text doesn't wrap */
    font-family: "Neonderthaw";
    font-size: var(--headline-font-size);
    font-weight: 400;
    color: whitesmoke;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, transparent, whitesmoke) 1;
    /* important tweak due to <h1>span...<h1> seo decision */
    display: block;
}

.sub_headline_text {
    font-family: "Manrope";
    font-size: var(--sub-headline-font-size);
    color: whitesmoke;
    padding-top: 0.5vw;
    font-weight: 100;
    /* important tweak due to <h1>span...<h1> seo decision */
    display: block;
}

.review_link {
    appearance: none;
    background: none;
    cursor: pointer;
    /* end "de-buttoning" */
    text-decoration: none;
    display: inline-block;
    /* ...for top margin to work */
    font-family: "Manrope";
    font-size: var(--review-link-font-size);
    color: pink;
    margin-top: 20px;
    padding: var(--review-button-inner-padding);
    border: 1px solid pink;
    border-radius: var(--review-link-font-size);
}

.pedicabber {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: var(--pedicabber-size-height);
}

.tour_booking_link_container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);

    /* attempting to exactly match pedicab body dimensions */
    height: var(--booking-link-container-size-height);
    aspect-ratio: 3.3;

    /* This ensures booking link itself is
    both horizontally and vertically centered */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid pink; */

}

.tour_booking_link_container a {
    text-decoration: none;
    color: whitesmoke;
    font-family: "TiltNeon";
    font-size: var(--booking-link-font-size);
    font-weight: 800;
    animation: 
        neonStartup 5s linear 1,
        glowPulse 8s linear infinite;
}

/*
/ ----------------------------------------- REVIEW POPOVER
*/

.ntc {
    font-size: 12px;
    text-align: center;
    /* for centering */
    /* display: block;
    width: fit-content;
    margin-inline: auto; */
}

.review_header {

    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 1.5rem;
}

.review_photo {
    /* height: min(200px, 22vh); */
    height: auto;
    width: auto;
    min-width: 0;
    /* aspect-ratio: 1; */
    /* margin: 20px; */
    /* border-radius: 50%; */
    /* flex-shrink: 0; */
}

.credential_container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    /*
    margin-left: 1rem;
    margin-right: 1rem;*/

}

.credential {
    font-family: "Manrope";
    font-size: var(--review-credential-font-size);
    display: flex;
    /*justify-content: flex-end;*/
    align-items: center;
    gap: 0.35em;
    margin-top:0.35em;
    margin-bottom:0.35em;
}

.checkbox {
    min-width: calc(1.333 * var(--review-credential-font-size));
    aspect-ratio: 1;

    background-color: var(--review-text-color);

    mask: url("../images/index_checkbox.svg") center / contain no-repeat;
    -webkit-mask: url("../images/index_checkbox.svg") center / contain no-repeat;
}

.review_note {
    /* padding: ; */
    border: 2px solid var(--review-text-color);
    padding: 1rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.review_note * {
    margin: 0;
    font-size: 16px;
    text-align: center;
}

#asterisk {
    font-size:12px;
    text-align: center;
}

#book_link_from_review{
    text-align: center;
    text-decoration: none;
    color: var(--review-text-color);
    border: 3px solid var(--review-text-color);
    font-size: calc(2*var(--review-font-size));
    padding: calc(2/3 * var(--review-font-size));
    border-radius: calc(2*var(--review-font-size));
    /* for centering */
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.reviews_list {
    margin-bottom: 2rem;
}

#reviews {
    width: 66vw;
    height: 66dvh;

    margin: auto;
    padding: 1.5rem 1.5rem;
    /* box-sizing: border-box; */

    font-family: "Manrope";

    border: none;
    background: rgba(0, 0, 0, 0.9);
    color: var(--review-text-color);
    background-color: var(--review-bg-color);
    border-radius: 10px;

    /* initial state for transition porpoises */
    opacity: 0;
    transition:
        opacity 600ms ease,
        overlay 600ms allow-discrete,
        display 600ms allow-discrete;
}

#reviews {
    scrollbar-color: var(--review-text-color) var(--review-bg-color);
}

#reviews:popover-open {
    display: block;
    opacity: 1;
}

@starting-style {
    #reviews:popover-open {
        opacity: 0;
    }
}

/* the mask put on the main page wile the review modal is up */
#reviews::backdrop {
    background: rgba(0, 0, 0, 0.7);

}

/* every other review is slightly shaded*/
#reviews_list .single_review_container:nth-child(even) {
    background: rgba(255, 255, 255, 0.3);
}

/*----------------------------------------- individual reviews * * * */

.single_review_container {
    display: grid;

    grid-template-columns: auto 1fr;

    grid-template-areas:
        "review_img     review_text  "
        "review_img     review_text "
        "review_img     review_contact";

    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.review_item_rating_img {
    grid-area: review_img;
    width: min(50px, 20vw);
    flex-shrink: 0;
    aspect-ratio: 1;
    background-image: url("../images/index_smile.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.review_item_contact {
    grid-area: review_contact;
    font-size: 12px;
    text-align: right;
    font-style: italic;
}

.review_item_text {
    grid-area: review_text;
    font-size: 14px;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

/*
/ ----------------------------------------- QUICK UTILS
*/

.centered {
    text-align: center;
}



/* ---------------------------------------------------- PAGE WIPE */

.page_wipe {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.wipe_panel {
    position: absolute;
    inset: 0;

    background-image: var(--hero-background);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: clip-path var(--wipe-duration) cubic-bezier(.65, 0, .35, 1);
}

/* Completely hidden initially */

.wipe_left {
    clip-path: inset(0 100% 0 0);
}

.wipe_right {
    clip-path: inset(0 0 0 100%);
}

/* Reveal each half toward the center */

.page_wipe.is_wiping .wipe_left {
    clip-path: inset(0 50% 0 0);
}

.page_wipe.is_wiping .wipe_right {
    clip-path: inset(0 0 0 50%);
}


/* ---------------------------------------------------- RESPONSIVE EXCEPTIONS */

@media (max-width: 600px) and (orientation: portrait) {
    .hide_in_mobile_portrait {
        display: none;
    }

    /*
    .review_note * {
        font-size: 12px;
    }*/

    /*
    .credential_container {
        flex-direction: column;

    }*/
}


@media (max-width: 900px) and (orientation: landscape) {
    /* phone/tablet landscape */
}

@media (orientation: landscape) {
    /* GENERAL landscape */


}

/* ---------------------------------------------------- STUPID RATIO */

/*
Detect whether the device being used to view this page is either:
  - Narrower than 9:20 aspect ratio
  - Wider than 20:9 ascpect ratio
*/

@media (max-aspect-ratio: 8 / 20),
(min-aspect-ratio: 20 / 8) {

    /* !!! need to override everything and display break indication */
    /*
    body::after {
        content: "";
        position: fixed;
        inset: 0;
        background: pink;
        z-index: 3;
    }*/
    .main_container * {
        display: none;
    }

        .main_container::after {
        content: "Your aspect ratio has fallen into silly goose territory.";

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        padding: 1rem 2rem;

        border: 2px solid white;
        border-radius: 10px;

        color: white;
        background: rgba(0, 0, 0, 0.8);

        font-family: "Manrope";
        font-size: 1.2rem;
        text-align: center;

        z-index: 4;
    }
}

/*
/ -------------------------------------------------------------------------- ANIMATIONS
*/

/*
/ ----------------------------------------- NEON START UP
*/


@keyframes neonStartup {

    0% {
        opacity: 0;
        filter: none;
    }

    27.9% {
        opacity: 0;
    }

    /* first weak flash */
    28% {
        opacity: 1.00;
        filter:
            drop-shadow(0 0 4px white)
            drop-shadow(0 0 10px skyblue)
            drop-shadow(0 0 20px skyblue);
    }

    28.75% {
        opacity: 0;
        filter: none;
    }

    57.9% {
        opacity: 0;
        filter: none;
    }

    /* stronger flash */
    58% {
        opacity: 1.0;
        filter:
            drop-shadow(0 0 4px whitesmoke)
            drop-shadow(0 0 8px skyblue);
    }

    58.3% {
        opacity: 0;
    }

    59.9% {
        opacity: 0;
    }

    60% {
        opacity: 1;
        filter:
            drop-shadow(0 0 6px whitesmoke)
            drop-shadow(0 0 12px skyblue);
    }

    60.3% {
        opacity: 0;
        filter:
            drop-shadow(0 0 1px whitesmoke);
    }

    /* finally catches */
    84%,
    100% {
        opacity: 1;
        filter:
            drop-shadow(0 0 1px whitesmoke)
            drop-shadow(0 0 2px skyblue)
            drop-shadow(0 0 4px pink);
    }
}


/*
/ ----------------------------------------- BOOKING LINK GLOW
*/

@keyframes glowPulse {

    0%,
    100% {
        filter:
            drop-shadow(0 0 1px whitesmoke) drop-shadow(0 0 2px skyblue);
    }

    50% {
        filter:
            drop-shadow(0 0 12px whitesmoke) drop-shadow(0 0 24px skyblue);
    }
}