/*
    Name:   Lailee Bowman
    Course: ITWP 1050 
    Assignment: Homework 4 (Hooks and Loops Page - Animated)
*/

/*variables to set primary text and border color, and background gradient colors*/
:root {
    --primary-color:rgb(245, 255, 247);
    --secondary-color: rgb(245, 255, 221);
    --gradient-color-1: #212121;
    --gradient-color-2: #081e08;
}

/*load decorative webfont before anything tries to use it*/
@font-face {
    font-family: 'Fleur De Leah';
    src: url(fonts/Fleur_De_Leah/FleurDeLeah-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

/*universal selector sets all text on the page to the primary color variable*/
* {
    color: var(--primary-color);    
}

/*body style adds outer margin, sets font and size, centers text, and applies a soft gradient background using gradient variables*/
body {
    margin: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    line-height: 1.5;
    background: linear-gradient(to bottom,var(--gradient-color-1) 5%, var(--gradient-color-2) 50%, var(--gradient-color-1) 95%);
}

/*centers content within the header element. adds background image and styling.*/
header {
    background-image: url(images/header4.jpg);
    background-position: center;
    background-size: cover;
    background-clip:border-box;
    border:8px dashed var(--secondary-color);
    border-radius: 20px;
}

/*styles the main page title using my webfont, fallbacks, and a text shadow to improve readability. overflow hidden with ellipses shortens the header and adds ... if the header becomes too narrow on smaller screens.*/
h1 {
    font-family: "Fleur De Leah", "Brush Script MT", cursive;
    font-weight: 400;
    font-size: 4.5em;
    font-style: normal;
    text-align: center;
    color: var(--secondary-color);
    text-shadow: 2px 2px 3px #000000;
    letter-spacing: normal;
    font-variant: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*underlines all h2 section headings*/
h2 {
    color: var(--secondary-color);
}

/*main container width*/
main {
    width: 100%;
}

/*creates the framed content boxes with translucent background, border, border color using primary color variable, padding, and centered layout*/
div {
    background-color: rgba(255,255,255,0.10);
    background-position: center;
    border:6px dashed var(--secondary-color);
    width: 95%;
    border-radius: 20px; 
    padding: 20px;
    margin: 10px auto;
    box-sizing: border-box;
}

/*creates grid for new layout*/
.layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c c" "d e";
    gap: 1rem;
}

/*assigns areas for grid layout and adds margins in a,b,d,e to override gap. adds left text align for e.*/
.a {
    grid-area: a;
    margin-right: 5px;
}
.b {
    grid-area: b;
    margin-left: 5px;
}
.c {
    grid-area: c;
}
.d {
    grid-area: d;
    margin-right: 5px;
}
.e {
    grid-area: e;
    margin-left: 5px;
    text-align: left;
}


/* I created this class to make the h2 subtitle small caps because when I made the h1 title small caps with the webfont it looked atrocious */
.small-caps {
    font-variant: small-caps;
}
/*adds spacing above and below the footer area*/
footer {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*makes figure captions slightly smaller than normal text*/
figcaption {
    font-size: 0.8rem;
    margin-top: 10px;
}

/************************************************************/
/************ REQUIREMENTS FOR HOMEWORK 4 *******************/
/****************** (PART 1 OF 2) ***************************/
/************************************************************/

/*****Requirement 1 *****/
/*Triggers the sway motion animation on hover. This animation uses rotate to create a gentle rocking effect. */
.sway:hover {
    animation: swayMotion 4s ease-in-out infinite;
}

/*****Requirement 1 and 4 *****/
/*Activates the flipMotion animation on hover. The animation uses rotateY and combines rotateY with scale in the same transform declaration. */

.flip:hover {
    animation: flipMotion 5s ease-in-out;
}

/*****Requirement 2 *****/
/*Applies the scaleBreathe animation on hover, which enlarges the image using the scale transform. */
.scale:hover {
    animation: scaleBreathe 4s ease-in-out;
}

/*****Requirements 3 and 4 *****/
/*Applies a skew transform to the right historical image to create an inward book opening effect. Also includes a scale transform in the same shorthand. */
.right-img {
    transform-origin: left center;
    transform: skewY(-3deg) scale(.95);
}

/*****Requirements 3, 4 *****/
/*Applies a skew transform to the left historical image to create an inward book opening effect. Also includes a scale transform in the same shorthand. */
.left-img {
    transform-origin: right center;
    transform: skewY(3deg) scale(.95);
}

/*****Requirement 5 *****/
/* Creates a reusable class that applies a soft glowing color transition using transition-property, transition-duration, and transition-delay. The background color and text color shift gently when the element becomes hovered or active. */
.glowUp {
    display: inline-block;
    transition-property: color, text-shadow, background-color;
    transition-duration: 1s;
    transition-delay: 0.2s;
}
.glowUp:hover {
    width: auto;
    color: var(--gradient-color-1);
    background-color: var(--primary-color);
    padding: 1px 12px;
    border-radius: 10px;
    text-shadow: 1px 1px whitesmoke;
}
/*******************************************************/
/****** REQUIREMENTS CONTINUED abt. LINE 214 *************/
/*******************************************************/

/*image styling adds dashed border using primary color variable, rounded corners, margin, responsive scaling, and centers images on page*/
img {
    border: 2px dashed var(--primary-color);
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px;
}

/*styles the two historical images so they sit side-by-side with even spacing*/
.image-row img {
    width: 45%;
    display:inline-block;
    margin: 18px 1px 0;
}
/*adds the word (external) after any link with this class. the text is styled in pink and italicized*/
.external-link::after {
    content: " (external)";
    color: pink;
    font-style: italic;
}



/************************************************************/
/************ REQUIREMENTS FOR HOMEWORK 4 *******************/
/****************** (PART 2 OF 2) ***************************/
/************************************************************/

/*****Requirement 2 *****/
/*Defines a scale animation that gently enlarges the image on hover. */
@keyframes scaleBreathe {
    0%      { transform: scale(1);}
    20%     { transform: scale(1.25);}
    80%     { transform: scale(1.25);}
    100%    { transform: scale(1);}
}

/*****Requirement 1 *****/
/*Uses the rotate transform to create a subtle swaying motion on hover. */
@keyframes swayMotion {
    0%      { rotate: 0deg;}
    33%     { rotate: 2deg;}
    67%     { rotate: -2deg;}
    100%    { rotate: 0deg;}
}

/*****Requirements 1, 4 *****/
/*Combines rotateY with scale in the same transform declaration. */
@keyframes flipMotion {
    0%      { transform: rotateY(0deg) scale(1);}
    40%     { transform: rotateY(180deg) scale(.9);}
    60%     { transform: rotateY(180deg) scale(.9);}
    100%    { transform: rotateY(0deg) scale(1);}
}


/*******************************************************/
/************** END OF HW4 REQUIREMENTS ****************/
/*******************************************************/


/* media query that stacks the grid vertically when the screen size is @ 550 pixels or lower */
@media only all and (max-width: 550px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-areas: "a" "b" "c" "d" "e";
    }
}

/* media query that hides the images and image-row images when the screen size is @ 350 pixels or lower */
@media only all and (max-width: 350px) {

    img {
        display: none;
    }
    .image-row img {
        display: none;
    }
}