/*csslint bulletproof-font-face: false*/


/* #region CSS PROPERTY ORDER GUIDE */

/* ==================================================
FORMAT FOR CSS

keep stuff in this order:

.example {

    1. positioning
    position:
    top:
    right:
    bottom:
    left:
    z-index:

    2. layout
    display:
    flex-direction:
    justify-content:
    align-items:
    gap:
    overflow:

    3. size
    width:
    min-width:
    max-width:
    height:
    min-height:
    max-height:

    4. spacing
    margin:
    padding:

    5. text
    font-family:
    font-size:
    font-weight:
    line-height:
    letter-spacing:
    word-spacing:
    text-align:
    text-decoration:
    color:

    6. appearance
    background:
    border:
    border-radius:
    box-shadow:
    opacity:
    filter:

    7. transformations
    transform:
    transform-origin:

    8. interaction + animation
    cursor:
    pointer-events:
    visibility:
    transition:
    animation:
}

================================================== */

/* #endregion */


/* #region CUSTOM HANDWRITING FONT */

/* ==================================================
custom handwriting font
================================================== */

/*
loads my custom handwriting font

../ means go BACK one folder

corazon/
    corazon.css

../fonts/
    O4tolo-Regular.ttf
*/

@font-face {
    font-family: "Bela Handwriting";
    src: url("../fonts/O4tolo-Regular.ttf") format("truetype");

    font-weight: normal;
    font-style: normal;
}

/* #endregion */


/* #region CORAZON PAGE SETUP */

/* ==================================================
corazon page setup
================================================== */

/*
body of /corazon/ page

[margin: 0] = removes default browser space
[height: 100vh] = fills browser window
[overflow: hidden] = prevents scrollbars

flex centers everything on screen
*/

.corazon-page {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    height: 100vh;

    margin: 0;

    font-family: "Bela Handwriting", sans-serif;

    background-color: black;
}

/* #endregion */


/* #region CORAZON STAGE */

/* ==================================================
corazon stage
================================================== */

/*
full-screen container holding interactive heart

[width / height: 100%] = fills corazon page

flex centers the heart
*/

.corazon-stage {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}

/* #endregion */


/* #region CORAZON MAP */

/* ==================================================
corazon map
================================================== */

/*
holds:
- red heart
- clickable hotspots
- white highlights

[position: relative] = makes this the positioning
reference for everything inside

width and height match original heart image
*/

.corazon-map {
    position: relative;

    width: 460px;
    height: 543px;

    transform: scale(1.35);
}

/* #endregion */


/* #region HEART IMAGES */

/* ==================================================
heart images
================================================== */


/* red heart and white highlight use same position */

/*
both images are placed directly on top of each other

[position: absolute] = removes image from normal layout
and lets it sit inside .corazon-map

top: 0 + left: 0 = starts in top-left corner
of corazon-map
*/

.corazon-map-base,
.corazon-map-highlight {
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* #region red base heart */

/* red heart stays underneath everything */

.corazon-map-base {
    z-index: 1;
}

/* #endregion */


/* #region white highlight */

/*
white ventricle starts hidden

[z-index: 2] = sits above red heart
[opacity: 0] = invisible until hotspot is hovered
[pointer-events: none] = highlight cannot block mouse
*/

.corazon-map-highlight {
    z-index: 2;

    opacity: 0;

    filter: blur(2px);

    transform: translateX(-2px);

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease;
}

/* #endregion */


/* #endregion */


/* #region HEART REGION HOTSPOTS */

/* ==================================================
heart region hotspots
================================================== */


/* invisible clickable hotspot */

/*
shared class for clickable heart areas

[z-index: 3] = hotspot sits ABOVE heart images

later more heart areas can use:
class="heart-region"
*/

.heart-region {
    position: absolute;
    z-index: 3;

    display: block;

    cursor: pointer;
}


/* #region left ventricle hotspot */

/* position and size of left ventricle clickable area */

.hotspot-left-ventricle {
    top: 56%;
    left: 55%;

    width: 22%;
    height: 26%;
}

/* #endregion */

/* #region aorta hotspot */

/* clickable area for aorta */

.hotspot-aorta {
    top: 6%;
    left: 38%;

    width: 20%;
    height: 25%;
}

/* #endregion */

/* #endregion */


/* #region HEART HOVER HIGHLIGHT */

/* ==================================================
heart hover highlight
================================================== */

/*
shows white ventricle when hotspot is hovered

+ means:
select the element DIRECTLY AFTER .heart-region

HTML must stay:

<a class="heart-region ..."></a>

<img class="corazon-map-highlight" ...>

do NOT put another element between those two stuffs
*/

.heart-region:hover + .corazon-map-highlight,
.heart-region:focus-visible + .corazon-map-highlight {
    opacity: 1;

    filter: blur(0px);

    transform: translateX(0px);
}

/* right atrium clickable area */
.hotspot-right-atrium {
    position: absolute;

    top: 40%;
    left: 20%;

    width: 20%;
    height: 25%;
}

/* #endregion */


/* #region MOBILE CORAZON PAGE */

/* ==================================================
mobile corazon page
================================================== */

/*
changes corazon layout on smaller screens

@media = these rules only apply when browser
is 768px wide or smaller

desktop version stays exactly the same
*/

@media (max-width: 768px) {


    /* #region mobile corazon page setup */

    /* ==================================================
    mobile corazon page setup
    ================================================== */

    /*
    keeps page centered on small screens

    overflow stays hidden so heart does not
    create accidental scrollbars
    */

    .corazon-page {
        overflow: hidden;

        width: 100%;
        min-height: 100vh;
    }

    /* #endregion */




    /* #region mobile corazon stage */

    /* ==================================================
    mobile corazon stage
    ================================================== */

    /*
    keeps interactive heart centered
    inside phone screen
    */

    .corazon-stage {
        width: 100%;
        min-height: 100vh;
        height: auto;
    }

    /* #endregion */




    /* #region mobile corazon map */

    /* ==================================================
    mobile corazon map
    ================================================== */

    /*
    keeps original heart proportions

    desktop map is 460px x 543px
    mobile version shrinks the whole map
    while keeping hotspots attached correctly

    because hotspots use percentages,
    they stay aligned with the heart
    */

    .corazon-map {
        width: 320px;
        height: 378px;

        transform: scale(1);
    }

    /* #endregion */


}

/* #endregion */