/* ------ SPECIFIC IMPROVEMENTS MADE FROM LAST ASSIGNMENT FEEDBACK:
1.  CSS nesting for better readability and organization
    reminded from https://typography-interaction-2526.github.io/topic/css/#oh-also-nesting
2.  Created CSS spacing variables for layout consistency including --gutter, --spacing, and --negative-spacing, not just variables for color, and transition behaviors
3.  Used appropriate semantic HTML tags like <address>, <nav>, <strong> etc. by avoiding divs, spans, and classes.
*/


/* ------ IMPORTING FONTS ------ */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Paytone+One&display=swap');


/* ------ SETTING VARIABLES ------ */
:root{
    --spacing: 1.5rem;
    --font-head: "Paytone One", sans-serif;
    --font-body: "Mona Sans", sans-serif;

    --black: #2b2b2b;
    --background: #FBF0E5;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

    --transition: 0.4s ease-in-out;
    --gutter: calc(0.5*var(--spacing));
    --negative-spacing: calc(2.5*var(--spacing));
}

html{scroll-behavior: smooth;}


/* ------ ASSIGNING COLORS ON EACH SECTION BACKGROUND AND CORRESPONDING TITLES ------ */
#section-all header { color: #ff431d; }
#section-all .box   { background: #1472FF; }

#section-image header { color: #37d6a4; }
#section-image .box   { background: #d497e0; }

#section-embed header { color: #ffc117; }
#section-embed .box   { background: #ff8fa7; }

#section-text header { color: #36a8ff; }
#section-text .box   { background: #d6f094; }

#section-link header { color: #b379ff; }
#section-link .box   { background: #ffb296; }

#section-attachment header { color: #ff6c6c; }
#section-attachment .box   { background: #5cecdd; }

/* ------ SETTING EACH BUTTON COLORS ------ */
/* ATTRIBUTION: The use of "data-target" concept has been attributed in HTML Code Line 200*/
[data-target="section-all"] { background: #1472FF; }
[data-target="section-image"] { background: #d497e0; }
[data-target="section-embed"] { background: #ff8fa7; }
[data-target="section-text"] { background: #d6f094; }
[data-target="section-link"] { background: #ffb296; }
[data-target="section-attachment"] { background: #5cecdd; }


/* ------ BASE STYLING ------ */
body {
    font-family: var(--font-body);
    font-size: calc(0.7*var(--spacing));
    font-weight: 400;
    color: var(--black);
    background: var(--background);
    line-height: var(--spacing);
    text-align: center;
    justify-items: center;
}

/* ------ TEXT SIZES AND STYLES FOR TYPOGRAPHY */
h1,
h2 {
    font-family: var(--font-head);
    text-transform: uppercase;
}

h1 { font-size: calc(2.8*var(--spacing)); }
h2 { font-size: calc(2.5*var(--spacing)); }

p { max-inline-size: 60ch; }

strong { font-weight: 600; }

p:has(strong) { 
    padding-inline: var(--gutter);
    max-inline-size: 42ch;
}

a { 
    transition: color var(--transition);

    &:hover {
        color: #ff431d;
    }
}


/* ------ LAYOUT ITEMS */
.box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-block-size: 80vh;
    inline-size: 100vw;
    padding-block: var(--negative-spacing);
    overflow: hidden;
    text-align: left;
}

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gutter);
    margin-inline: auto;
    padding: var(--spacing);
}

/* li is representing each block of arena */
li {
    transition: all 1s ease-in-out;
    transform: rotate(var(--rotation))
               translateY(var(--translation));

    &.rotate {
        transform: rotate(calc(-0.3*var(--rotation))) 
                   translateY(calc(-0.1*var(--translation)));
        transition: all 1.2s ease-in-out;
    }

    &:hover {
        z-index: 2;
        transform: scale(1.2);
        transition: var(--transition);
    }
}

/* ------ ARENA BLOCKS: EACH CONTENT TYPE/BLOCK STYLING */

/* Images */
.image-controller {
    block-size: calc(6.5*var(--spacing));
    border: calc(2*var(--gutter))solid var(--background);
    aspect-ratio: 1/1;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);

    &:hover {
        border: 0.2em solid #37d6a4;
        transform: scale(1.5);
        transition: var(--transition);
    }
}

img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
}

/* Texts */
.text-controller {
    padding: var(--gutter);
    padding-block-start: var(--negative-spacing);
    /* max-inline-size: calc(26*var(--spacing)); */
    position: relative;
    background: var(--background);
    box-shadow: var(--shadow);
    overflow: hidden;

    /* quotation mark symbol */
    &::before {
        content: "“”";
        font-family: var(--font-head);
        letter-spacing: calc(0.3*var(--spacing));
        color: #36a8ff;
        font-size: calc(2.5*var(--spacing));
        position: absolute;
        top: 0.5em;
        left: 0.2em;
    }
}

/* Embeds */
.embed-controller {
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    justify-self: center;
    align-items: center;
    inline-size: calc(5.5*var(--spacing));
    box-shadow: var(--shadow);
    background: var(--background);
    border: var(--gutter) solid var(--background);
    transition: var(--transition);

    img {
        /* inline-size: calc(3.5*var(--spacing));
        block-size: calc(3.5*var(--spacing)); */
        inline-size: 100%;
        block-size: 100%;
        border-radius: 50%;
        overflow: hidden;
        aspect-ratio: 1/1;
        object-fit: cover;
        object-position: center;
        border: 0.3em solid #ffc117;
        transition: var(--transition);
    }

    &:hover img {
        transform: scale(1.1) rotate(20deg);
    }
}

/* Links */
.link-controller {
    padding: var(--gutter);
    max-inline-size: calc(8*var(--spacing));
    background: var(--background);
    border-left: 0.3em solid #b379ff;
    box-shadow: var(--shadow);
    display: inline-block;
    box-sizing: border-box;
    inline-size: auto;
}

/* Attachments */
.pdf-controller {
    inline-size: calc(10*var(--spacing));
    block-size: calc(6*var(--spacing));
    background: var(--background);
    padding: var(--gutter);
    padding-block-start: var(--negative-spacing);
    align-self: center;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        display: block;
        inline-size: 60%;
        block-size: calc(1.5*var(--spacing));
        background: #ff6c6c;
        clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 0% 100%);
        top: -2.13em;
        left: 0;
    }

    &::after {
        content: "PDF";
        position: absolute;
        top: -2em;
        left: 1em;
        font-family: var(--font-body);
        color: var(--background);
        font-weight: 600;
        font-size: calc(0.6*var(--spacing));
        }
}

.attachment-block {
    box-shadow: var(--shadow);
    margin-block: var(--spacing);
}

/* ------ ADDITIONAL STYLING ------ */

/* wobbly text container of h1 and h2 */
header {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-block-start: var(--negative-spacing);
    padding-block-end: var(--spacing);
    gap: var(--gutter);

    ul {
        gap: calc(0.15*var(--spacing));
    }
}


section,
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    inline-size: 100%;
    gap: calc(2.5*var(--gutter));
}

footer {
    margin-block-start: calc(10*var(--spacing));
    padding-block: var(--spacing);
}

/* ------ CREATING THE CLUTTER IN LANDING SECTION */
.clutter {
    gap: calc(-1*var(--spacing));
    overflow: initial;

    li { 
        margin: calc(-1*var(--spacing)); 
        transform: translateY(var(--translation));

        &.rotate {
            transform: rotate(calc(-1*var(--rotation))) translateY(var(--translation));
        }

        &:hover {
            transform: scale(1.2);
            transition: var(--transition);
        }
    }
}

#channel-blocks {
    padding-block: var(--negative-spacing);
}


button {
    padding-inline: calc(0.7*var(--spacing));
    padding-block: calc(0.4*var(--spacing));

    &:hover {
        transition: var(--transition);
        transform: rotate(-15deg);
        box-shadow: var(--shadow);
    }
}

nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--gutter);
    justify-content: center;
    align-items: center;
    padding-block-start: var(--negative-spacing);
    padding-block-end: var(--gutter);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* hiding all sections initially */
.content-section {
    display: none;
    width: 100%;

    &.active {
        display: flex; 
        flex-direction: column;
        align-items: center;
        transition: var(--transition);
    }
}

/* animation on text under the title */
.dance {
    animation: dance 1s ease-in-out 1s backwards;
}

@keyframes dance {
    0% { transform: scale(0.95);}
    30% { transform: scale(1) rotate(3deg); }
    60% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* scroll-me nudge on the landing section */
.scroll-me {
    animation: scroll 1s ease-in-out 2s backwards;
    repeat: no-repeat;
}

@keyframes scroll {
    0% { transform: translateY(0); }
    50% { transform: translateY(-60px); }
    100% { transform: translateY(0); }
}


/* ------ MEDIA QUERIES ------ */
@media (width > 900px) {
    :root {
        font-size: 110%;
        --gutter: calc(0.6*var(--spacing));
    }

    header {
        flex-direction: row;
        gap: calc(3.5*var(--gutter))
    }

    footer {
        flex-direction: row;
        padding-inline: var(--spacing);
        justify-content: space-between;
    }

    h1,
    h2 { transform: scale(1.25); }

    nav {
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(1, auto);
        padding-block: var(--spacing);
    }

    .box {
        padding-block: calc(1.5*var(--negative-spacing));
        padding-inline: calc(1*var(--spacing));
    }

    #image-blocks,
    #text-blocks,
    #link-blocks {
        max-inline-size: calc(40*var(--spacing));
    }

    #embed-blocks,
    #attachment-blocks {
        max-inline-size: calc(30*var(--spacing));
        gap: var(--negative-spacing);
    }
}


@media (width > 1400px) {
    
    header {
        padding-block: var(--negative-spacing);
        gap: calc(8*var(--gutter))
    }

    h1,
    h2 { transform: scale(1.5); }

    .box { 
        padding-block: calc(2*var(--negative-spacing));
        padding-inline: calc(2*var(--spacing));
    }
}