/*
* ayushsplaining index V1.0
* Copyright 2022, Ayush Mukherjee
* Free to use under the MIT license.
* 9/29/2022
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Variables
- Typography
- Components
- Layout
- Utilities
- Media Queries
*/


/* Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.poster {
    --transform-origin: 0 0;
    --scale-factor: 2;
}

.concepts {
    --left: 50%;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.concept h3 {
    font-family: var(--ff-heading);
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: var(--ff-bolder);
    filter: drop-shadow(0 0 1rem var(--color-accent-muted))
        drop-shadow(0 0 2rem var(--color-accent));
}

.concept p {
    font-family: var(--ff-text);
    font-size: 0.5rem;
    color: var(--color-primary-light);
    text-align: justify;
}

.concept a{
    color: var(--color-primary-light);
    text-decoration: none;
    text-transform: uppercase;
}


/* Components
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.poster-container {
    overflow: hidden;
}

.poster {
    width: var(--max-viewport-width);
    transform-origin: var(--transform-origin);
    transition: scale var(--transition-delay-short) ease-in,
        opacity var(--transition-delay-short) ease-in-out;
}

.poster[scaled] {
    scale: var(--scale-factor);
    opacity: 0.5;
}

.overlay {
    width: var(--max-viewport-width);
    height: 100%;
    z-index: 10;
    cursor: zoom-in;
}

.poster[scaled]+.overlay {
    cursor: zoom-out;
}

.concept {
    opacity: 0;
    visibility: hidden;
    width: calc(var(--max-viewport-width) / 4);
    padding: 1ch;
    box-shadow: var(--color-primary-light) 0 0 1px 10px;
    border-radius: 1.2em;
    background-color: hsl(var(--color-black));
    transition: opacity var(--transition-delay-short) ease-in-out;
}

.concept[active] {
    opacity: 1;
    visibility: visible;
}

.concept a:hover,
.concept a:focus-within {
    color: var(--color-primary);
}


/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.poster-container {
    position: relative;
    display: grid;
    align-items: center;
    justify-content: center;
}

.poster,
.overlay {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

.concept {
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    z-index: 20;
}

.concept[data-direction="left"] {
    left: 1rem;
}

.concept[data-direction="right"] {
    right: 1rem;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media(min-height: 675px) {
    .poster {
        --scale-factor: 1.2
    }

    .concept h3 {
        font-size: 1.5rem;
    }

    .concept p {
        font-size: 0.8rem;
    }

    .concept {
        width: calc(var(--max-viewport-width) / 2.5);
        padding: 3ch;
        top: 50%;
    }
}

@media(min-width: 1600px) {
    .poster {
        --scale-factor: 1.5;
    }
}

@media(min-width: 2400px) {
    :root {
        --scale-factor: 1.2;
    }
}