/* MAIN CSS GOES HERE */

/* 
TABLE OF CONTENTS

# GLOBAL
    # DEFINE GLOBAL VARIABLES (CUSTOM PROPERTIES)
    # SET GLOBAL COLORS
    # GLOBAL TYPOGRAPHY
    # GLOBAL MEDIA (eg Images)
    # GLOBAL HELPERS
    # GLOBAL RESETS

# LAYOUT
    # CONTAINER
    # GRID (ROWS & COLUMNS)

# PAGE STRUCTURE (BASE TEMPLATE)
    # HEADER
        # SITE LOGO
        # SITE NAV
            # TOGGLE-NAV
    # MAIN
        # SECTIONS
    # FOOTER

# UI COMPONENTS
    #CARDS
    # BUTTONS
    # HR (HORIZONTAL RULES)
    # CODE BLOCKS
    # SWIPER SLIDER CAROUSEL

# ANIMATION
    # SMOOTH SCROLLING

# CUSTOM SITE STYLING (OPINIONATED)
    # BODY GRID LAYOUT SYSTEM (header, main, and footer)
    # CUSTOM TYPE BLOCK/SPECIMEN

# ANIMATIONS
    # SCALE AND FADE IN
    # SCROLL TRIGGER ANIMATIONS

*/



/* GLOBALS */

/* DEFINE GLOBAL VARIABLES */

:root{

    /* DEFINE COLORS */

    --color-white: #fff;
    --color-black: #000;

    --color-grey-200: rgb(0 0 0 / .2);

    --color-light-blue: hsl(201, 52%, 84%);

    --color-pink: #C1006F;
    --color-pink-50: hsl(340, 80%, 95%);
    --color-pink-100: hsl(340, 80%, 90%);
    --color-pink-400: hsl(340, 80%, 70%);
    --color-pink-900: hsl(340, 80%, 40%);
    --color-pink-about: #C1006F;

    --color-purple: hsl(262, 35%, 50%);
    --color-purple-100: hsl(262, 35%, 60%);
    --color-purple-400: hsl(262, 35%, 40%);
    --color-purple-900: hsl(262, 35%, 30%);
    --color-purple-bottom: #6A59CE;

    --color-orange: #F67C45;

    --color-teal: #288B74;

    --color-yellow: hsl(48, 100%, 50%);
    --color-yellow-button: #FDE100;

    /* SET SEMANTIC COLORS */
    --color-body-background: var(--color-yellow);
    --color-body-text: var(--color-purple);
    --color-body-text-dark: var(--color-purple-900);
    --color-background-main: var(--color-orange);
    --color-background-about: var(--color-pink-about);
    --color-background-merch: var(--color-teal);
    --color-background-bottom: var(--color-purple-bottom);
    --color-text: var(--color-yellow);


    --color-primary: var(--color-pink-900);
    --color-secondary: var(--color-purple-400);
    --color-secondary-hover: var(--color-purple-900);

    /* ACTION COLORS */
    --color-links: var(--color-purple-400);
    --color-links-hover: var(--color-purple-900);

    --color-hero-background: var(--color-pink-100);
    --color-header-background: var(--color-pink-400);
    --color-footer-background: var(--color-pink-100);

    --color-border: var(--color-grey-200);

    --color-button-default: var(--color-yellow-button);

    /* BORDER */
    --color-border: var(--color-grey-200);
    --border-radius: 10px;
    --border-thickness: .5px;

    /* SIZING UNITES */
    --unit-s: 1em;
    --unit-m: 2em;
    --unit-l: 3em;
    --unit-xl: 4em;
    --unit-xxl: 5em;
    --unit-huge: 8em;
    --unit-gutter: 1.5em;
    --container-width: 1200px;

    /* GLOBAL TYPOGRAPHY */
    --font-body: "Jersey 25", Helvetica, arial, sans-serif;
    --font-headings: "Jersey 25", Georgia, Times, serif;
}

/* SET GLOBAL COLORS */

body {
    background-color: var(--color-body-background);
    color: var(--color-body-text);
    cursor: url('../img/skg-cursor.png'), pointer;
}

main {
    background-color: var(--color-body-background);
}

h1, h2, h3{
    color: var(--color-body-text-dark);
    text-wrap: balance;
}

span {
    color: var(--color-black);
}

a:hover {
    cursor: url('../img/skg-cursor-hover.png'), pointer;
  }


/* REMOVES WIDOWS */
p{
    text-wrap: pretty;
}

/* LINKS */
a{
    color: var(--color-purple-100);
    text-decoration-color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover{
    color: var(--color-links-hover);
}
.skg-header a {
    color: var(--color-white);
}

/* GLOBAL TYPOGRAPHY */
body{
    font-family: var(--font-body);
    font-size: 100%;
    line-height: 1.4;
}

h1, h2, h3, h4{
    font-family: var(--font-headings);
}

.jersey-25-regular {
    font-family: "Jersey 25", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

li {
    list-style: none;
}
  


/* GLOBAL MEDIA */

/* IMAGES
    Responsive on small screens Do not stretch too large (beyond the original
    on large screens */

img {
    max-width: 100%;
    height: auto;
}

svg {
    max-width: 100%; /* Ensures the SVG doesn't exceed its container's width */
    height: auto;    /* Maintains the aspect ratio of the SVG */
    display: block;  /* Removes extra space below the SVG, treating it like a block element */
    margin: auto;
  }

/* GLOBAL HELPERS */

.text-center{
    text-align: center;
}

.img-center,
.div-center{
    margin-inline: auto;
    display: block;
}
.img-right{
    margin-left: auto;
    display: block;
}


/* CENTER PARAGRAPHS INSIDE CENTERED PARENTS */
.text-center p{
    margin-inline: auto;
    max-width: 600px;
}

/* HIDE CONTENT VISUALLY (BUT KEEP FOR SEO AND ACCESSIBILITY) */
.hide-visually,
.visually-hidden,
.screen-reader-only{
    position:absolute;
    top: -9999px;
    left: -9999px;
}

.about p{
    color: var(--color-black);
}

/* GLOBAL RESETS */

/* Remove the default 8pm margin on body */
body{
    margin: 0;
}

/* Set all elements to box sizing border box */
* {box-sizing: border-box;}

/* SMOOTH SCROLLING */
html {
    scroll-behavior: smooth;
}

/* ADD OFFSET TO ALL INLINE ANCHOR LINKS */
:target {
    scroll-margin-top: var(--unit-s);
}

/* LAYOUT */

.site-wrapper{
    max-width: 1920px;
    margin-inline: auto;
    /* padding-inline:var(--unit-s); */
    padding-left: 1em;
}

.skg-main {
    overflow-x: hidden;
}

/* CONTAINER */
.container {
    max-width: 1000px;
    margin-inline: auto;
    padding-inline:var(--unit-s);
}

/* ABOUT DIV CONTAINER */
.about-container{
    max-width: 900px;
    padding: 0 4em 4em 4em;
    margin: auto;
    display: flex;
}

.about-card {
    background-color: #fff;
    border: var(--color-border) 1px solid;
    display: inline-block;
    padding: var(--unit-s);
    border-radius: 5px;
}

.polaroid-card {
    border: 1px solid #ccc;
    background-color: #fff;
    margin: 20px;
    max-width: 500px; /* Adjust as needed */
    flex-wrap: wrap; /* Allows wrapping on smaller screens if necessary */
    border: var(--color-border) 1px solid;
    display: inline-block;
    padding: var(--unit-s);
    border-radius: 5px;
    transform: rotate(-3deg);
}

.card-image-container img {
    max-width: 100%; /* Ensures image fits within its container */
    height: auto;
    display: block; /* Helps with alignment */
}

.card-content {
    flex: 1; /* Takes up available space */
    padding-left: 10px; /* Space between image and text */
    transform: rotate(3deg);
}

.card-content h1{
    margin: 0;
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
}

.card-content p {
    color:#fff;
}

@media ( width < 768px ) {
    .about-container{
        flex-direction: column;
        padding: 1em;
    }

    

    .card-image-container {
        margin-bottom: 15px; /* Space between image and text */
    }
}

/* GRID SYSTEM (12 COLUMN) */

.row {
    --grid-gap: var(--unit-s);
}

.row > * {
    margin-block-end: var(--grid-gap);
}

/* NEW WIDTH SYNTAX */
@media ( width >= 768px) {
    .row{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--grid-gap);
    }

    /* SEMANTIC COLUMNS */
    .one-half {
        grid-column: auto / span 6;
    }

    .one-third {
        grid-column: auto / span 4;
    }
    .two-thirds {
        grid-column: auto / span 8;
    }
    .one-fourth {
        grid-column: auto / span 3;
    }
    .three-fourths {
        grid-column: auto / span 9;
    }

    /* SWAPS (REVERSE COLUMNS) - WORKS ONLY W/ 2 COLUMNS*/
    .row.swapped > *:first-child {order: 2;}
    .row.swapped > *:last-child {order: 1;}


    /* CENTERED COLUMNS */
    .one-half.centered{ grid-column-start: 4;}
    .two-thirds.centered{ grid-column-start: 3;}

    /* 12 COLUMN CLASS-BASED GRID SYSTEM */
    .col-1 {grid-column: auto / span 1;}
    .col-2 {grid-column: auto / span 2;}
    .col-3 {grid-column: auto / span 3;}
    .col-4 {grid-column: auto / span 4;}
    .col-5 {grid-column: auto / span 5;}
    .col-6 {grid-column: auto / span 6;}
    .col-7 {grid-column: auto / span 7;}
    .col-8 {grid-column: auto / span 8;}
    .col-9 {grid-column: auto / span 9;}
    .col-10 {grid-column: auto / span 10;}
    .col-11 {grid-column: auto / span 11;}
    .col-12 {grid-column: auto / span 12;}

    /* PUSHES */
    .push-1 { grid-column-start:1;}
    .push-2 { grid-column-start:2;}
    .push-3 { grid-column-start:3;}
    .push-4 { grid-column-start:4;}
    .push-5 { grid-column-start:5;}
    .push-6 { grid-column-start:6;}
    .push-7 { grid-column-start:7;}
    .push-8 { grid-column-start:8;}
    .push-9 { grid-column-start:9;}
    .push-10 { grid-column-start:10;}
    .push-11 { grid-column-start:11;}
    .push-12 { grid-column-start:12;}
}

/* FOR DEMO PURPOSES ONLY */
.row.demo > * {
    /* background-color: var(--color-light-blue); */
    text-align: center;
    /* padding: var(--unit-m); */
}

/* SITE STRUCTURE */

/* HEADER */
.site-header {
    background-color: var(--color-header-background);
    padding-block: var(--unit-s);
    padding-inline: var(--unit-s);

    /* DISPLAY LOGO ON LEFT AND NAV ON RIGHT */
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    flex-wrap: wrap;
}

/* LOGO STYLING */
.site-header .logo{
    display: flex;
    align-items: center;
    gap: var(--unit-s);
}

.site-header .logo img{
    max-height: 60px;
    min-width: 60px;
    vertical-align: middle;
}

.site-header .logo h1 {
    font-size: 1.3125rem;
    margin: 0;
}

.site-header .logo a{
    text-decoration: none;
}

/* SITE NAV */
.site-header {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: var(--unit-s);
    flex-wrap: wrap;
}

.site-header{
    text-decoration: none;
    font-weight: bold;
    padding: .5em;
    color: var(--color-purple-900);
}

.tabs img{
    transform: translateY(-5px);
}

/* MENU BUTTON */
.site-nav .menubutton{
    position: relative;
    z-index: 100;
    background-color: transparent;
    border: none;
    font-size: inherit;
    font-family: inherit;
    padding: .5em;
  }

  .site-nav a {
    display: block;
    padding: 1em;
    text-decoration: none;
  }

  .site-nav ul{
    display:flex;
    list-style:none;
    margin: 0;
    padding: 0;
  }

  /* SHOW MENU BUTTON ON SMALL SCREENS */
.site-menu .menubutton { display: block; }
.site-nav ul { display: none; }

/* BIG SCREENS:  HIDE MENU BUTTON, SHOW NAV*/
@media ( width >= 768px ) {
    .site-nav .menubutton { display: none; }
    .site-nav ul { 
        display: flex; 
        transform: translateY(10px);
    }
}

/* SMALL SCREENS ONLY: ENABLE OVERLAY NAV */
@media ( width < 768px ) {

    .site-nav[data-menustate] ul {
        display: grid;
        align-content: center;
        justify-content: center;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--color-purple-900);  
        transition: all 0.3s ease-out; 
    }
    .site-nav[data-menustate] a {
        color: var(--color-white);
    }

    .site-nav[data-menustate="open"] ul {
        translate: 0 0;
    }

    .site-nav[data-menustate="closed"] ul {
        translate: 100% 0;
    }
   
    /* ENABLE SVG ANIMATION */
    .site-nav[data-menustate] .simple-navicon rect {
        transition:  all 0.3s ease-out;
    }
    /* CHANGE COLOR OF SVG NAV ICON WHEN MENU IS OPEN */
    .site-nav[data-menustate="open"] .simple-navicon rect {
        fill: var(--color-white);
    }
    /* ANIMATE NAV ICON LINES TO AN X WHEN OPEN */
    .site-nav .simple-navicon{
        display: block;
    }
    .site-nav .simple-navicon rect{
        transform-origin: center;
        width: 100%;
    }
    
    .site-nav[data-menustate="open"] .simple-navicon-top {
        rotate: 45deg;
        translate: -21% 24%;
    }
    .site-nav[data-menustate="open"] .simple-navicon-middle {
        opacity: 0;
    }
    .site-nav[data-menustate="open"] .simple-navicon-bottom {
        rotate: -45deg;
        translate: -21% -24%;
    }
    
}

/* REMOVE WIDE SCROLLBAR WHEN DRAWER IS CLOSED */
/* .site-nav{
    overflow-x: hidden;
} */

/* MOVE THE CLOSED STATE OF THE NAV TO FIX RESIZE BUG */


/* SITE MAIN */
.site-main {
    /* EMPTY FOR NOW */
    background-color: transparent;
}

.hero{
    background-color: var(--color-hero-background);
    padding-block: var(--unit-xxl);
    padding-inline: var(--unit-s);
}

.hero:has(.container){
    padding-inline: 0;
}


/* FOOTER */

.footer{
    display: flex;
    justify-content: center;
    gap: var(--unit-huge);
}

.footer h1 {
    color: white;
}

.footer a{
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.site-footer{
    background-color: var(--color-footer-background);
    padding: var(--unit-s);

}

/* REMOVE FOOTER PADDING IF IT HAS A CONTAINER */
.site-footer:has(.container0){
    padding-inline: 0;
}

/* UI COMPONENTS */

/* CARDS */

.card {
    background-color: #fff;
    border: var(--color-border) 1px solid;
    display: inline-block;
    padding: var(--unit-s);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgb(0 0 0 / .1);
}

.color-swatch {
    --_swatch-color: grey;
    background-color: var(--_swatch-color);
    width: 150px;
    height: 150px;
}

/* BUTTONS */
.button{
    background-color: var(--color-links);
    color: var(--color-button-default);
    padding: var(--unit-s);
    text-decoration: none;
    display: inline-block;
    margin-block: var(--unit-s);
    border-radius: var(--border-radius);
}

.button:hover{
    background-color: var(--color-links-hover);
    color: var(--color-white);
}

button.col-3.push-8,
button.col-3.push-4{
    background-color: var(--color-yellow-button);
    color: var(--color-black);
    padding: var(--unit-s);
    text-decoration: none;
    display: inline-block;
    margin-block: var(--unit-s);
    border-radius: var(--border-radius);
}

button.col-3.push-8:hover,
button.col-3.push-4:hover{
    background-color: var(--color-links-hover);
    color: var(--color-white);
}

.button.rotate-right{
    rotate: 5deg;
}

.button.rotate-left{
    rotate: -7deg;
}

/* HR */

hr{
    border: none;
    border-top: var(--border-thickness) solid var(--color-border);
    margin: var(--unit-m) 0;
}

/* CODE BLOCKS */
pre:has(code){
    background-color: var(--color-pink-50);
    padding: var(--unit-s);
    overflow-x: auto;
    white-space: pre-wrap;
    border-radius: var(--border-radius);
}

/* SWIPER CSS CODING */
.swiper {
    padding-block-end: 2rem;
    text-align: center;
}

/* MOVE SWIPER ARROWS OUTSIDE OF SWIPER */
.swiper-button-prev, 
.swiper-button-next {
    background-color: var(--color-white);
    padding: var(--unit-xs);
    border-radius: 100%;
}

/* TEMP WAY TO MOVE ARROWS OUTSIDE OF SWIPER */
.swiper {
    padding-inline: 50px;
}
.swiper-button-prev {
    translate: -4px -50%;
    background-color: white;
    height: 100%;
    border-radius: 0;
    top: 0;
    left: 0;
}
.swiper-button-next {  
    translate: 4px -50%;
    background-color: white;
    height: 100%;
    border-radius: 0;
    top: 0;
    right: 0;
}

/* REMOVE COLOR CARD WIDTHS AND HEIGHTS WHEN INSIDE A SWIPER SLIDE */
.swiper-slide .card {
    display: block;
}
.swiper-slide .color-swatch {
    width: 100%;
    min-height: 150px;
}

/* CUSTOM SITE STYLING */

/* PUSH THE FOOTER TO THE BOTTOM BY DEFAULT */
/* body{
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
} */

/* TO FIX OVERFLOW WORD BREAK */
body > *{
    min-width: 0;
}

/* NUDGE THE NAV ITEMS DOWN TO ALIGN W IMAGE LOGO TEXT */
.site-header .site-nav a{
    padding-block-start: calc(var(--unit-xs) + .35em);
}

/* CUSTOM HERO STYLING */
.hero h1{
    font-size: 4em;
    font-size: clamp(2.5em, 5vw, 4em);
    margin-block: 0;
    overflow-wrap: break-word;
}

.hero p{
    text-wrap: pretty;
}

/* CUSTOME PAGE LAYOUT - 2COLUMNS WITH AN ASIDE + MAIN CONTENT */

@media ( width >= 768px) {
   
    .pagelayout-wrapper-twocolumn{
        display: flex;
        /* gap: var(--unit-l); */
    }

    .pagesection-aside{
        width: auto;
    }

    .pagesection-maincontent{
        width: calc(100% - 250px);
    }

}

/* STICKYBOX */
/* SET INSIDE OF A MEDIA QUERY SO IT ALLOWS THE OVERLAY MENU TO RENDER ON TOP OF SMALL SCREENS */
@media ( width >= 768px) {
    .stickybox{
        position: fixed;
        top: var(--unit-s);
    }
}

/* SKG TYPE BLOCK */
.skg-eyebrow{
    font-size: .875rem;
    font-weight: bold;
    text-transform: uppercase;
    opacity: .5;
}

.skg-headline{
    font-size: 2rem;
    margin-block: var(--unit-s);
}

.skg-subheadline{
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    margin-block: var(--unit-s);
    opacity: .8;
}

/* ANIMATIONS */

.slide-from-top-fade-in {
    animation-name: skg-slide-from-top-fade-in;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0,1,0,1);
    opacity: 1;
}

@keyframes skg-slide-from-top-fade-in {
  
    0% {
        opacity: 0;
        translate: 0 -20px;
    }
    100% {
        opacity: 1;
        translate: 0 0;
    }
}

.slide-from-left-and-fade-in {
    animation-name: skg-slide-from-left-and-fade-in;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0,1,0,1);
    opacity: 0;
    translate: -40px 0;
}

@keyframes skg-slide-from-left-and-fade-in {
  
    0% {
        opacity: 0;
        translate: -40px 0;
    }
    100% {
        opacity: 1;
        translate: 0 0;
    }
}

.delay-1{ animation-delay: .1s;}
.delay-2{ animation-delay: .2s;}
.delay-3{ animation-delay: .3s;}
.delay-4{ animation-delay: .4s;}
.delay-5{ animation-delay: .5s;}
.delay-6{ animation-delay: .6s;}

/* SCROLL TRIGGER ANIMATIONS */

/* FIX SCROLL BAR ON ALL ANIMATION SECTIONS */
section:has(observe-me){
    overflow-x: clip;
}

/* ONSCROLL FADE IN */
.observe-me.onscroll-slide-in-from-left {
    opacity: 0;
    translate: -40px 0;
    transition: all .5s ease-out;
}
  .observe-me[data-viewstate="active"].onscroll-slide-in-from-left {
    opacity: 1;
    translate: 0 0;
  }

/* RIGHT */
  .observe-me.onscroll-slide-in-from-right {
    opacity: 0;
    translate: 20px 0;
    transition: all .5s ease-out;
}
  .observe-me[data-viewstate="active"].onscroll-slide-in-from-right {
    opacity: 1;
    translate: 0 0;
  }

  .observe-me.delay-0{ transition-delay: 0s;}
    .observe-me.delay-1{ transition-delay: .1s;}
    .observe-me.delay-2{ transition-delay: .2s;}
    .observe-me.delay-3{ transition-delay: .3s;}
    .observe-me.delay-4{ transition-delay: .4s;}
    .observe-me.delay-5{ transition-delay: .5s;}

/* SKG CONTENT */

/* --MAIN FOLDER-- */
.main{
    background-image: url('../img/stars-skg-bg.gif');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}



/* --ABOUT FOLDER-- */
.about {
    background-image: url('../img/about-bg.svg');
    background-size: cover;
}

/* .about::before{
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 50%;
    height: 100%;
    background-image: url('../img/purple-star.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
} */

.about-content{
    position:relative;
}

.about-content img, p{
    position: relative;
}


/* --MERCH FOLDER-- */
.merch {
    background-image: url('../img/merch-bg.svg');
    background-size: cover;
}

.head-merch {
    padding: 3em 0 3em 0;
}

.breathing {
    animation: breathe 4s ease-in-out infinite;
  }
  
  @keyframes breathe {
    0%, 100% {
      transform: scale(0.8);
      opacity: 1;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
  }

.price-tag {
    background-color: rgb(239, 213, 177);
    padding: 2em;
    border-radius: var(--border-radius);

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

/* FOOTER FOLDER */

.location-imgs{
    display: grid;
    justify-content: center;
    padding-top: 2em;
    gap: 1.5em;
}

.location-container {
    padding: 3em;
    margin-inline: auto;
    display: block;
    max-width: 1000px;
    gap: var(--unit-s);
}
.beads {
    transform: rotate(15deg) translateY(-70px);
}

.location-imgs{
    transform: translateY(-100px);
}

.locationimg-2{
    transform: translateY(-50px);
}

.locationimg-3{
    transform: translateY(-140px);
}

/* FLIP CARD ANIMATION */
.flip-card {
    width: 300px;
    height: 200px;
    perspective: 1000px; /* Creates 3D perspective */
    rotate: -7deg;
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s; /* Smooth transition for the flip */
    transform-style: preserve-3d; /* Enables 3D transformations for children */
  }
  
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); /* Flips the card on hover */
  }

  /* Pause before flipping back */
.flip-card:not(:hover) .flip-card-inner {
    transition-delay: 1s; /* pause before unflipping */
}
  
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hides the back when facing away */
  }
  
  .flip-card-front {
    /* background-color: #bbb; */
    color: black;
  }
  
  .flip-card-back {
    /* background-color: #2980b9; */
    color: white;
    transform: rotateY(180deg); /* Initially rotated to be hidden */
  }

/* FLIP CARD CONTAINER */
.flip-card-container{
    display: flex;
    justify-content: center;
    gap: var(--unit-l);
    transform: translateY(-100px);
}

@media ( width < 768px ) {
    .flip-card-container{
        flex-direction: column;
        align-items: center;
    }
}
    

/* SKG Header */

.skg-header {
    position: fixed;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: flex-end;
    background: var(--color-yellow);
    rotate: -90deg;
    translate: 0 100svh;
    width: 100svh;
    height: 50px;
    transform-origin: left top;
  }
  
  .skg-header a {
    height: 20px;
    line-height: 1;
    padding: 25px;
    display: block;
    text-decoration: none;
  }
  
  .skg-header h1 {
    font-size: 1em;
    margin: 0;
  }
  
  .skg-header h1 a {
    background: white;
  }
  
  .skg-header nav ul {
    display: flex;
    flex-direction: row-reverse;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .skg-header nav li{
    /* border: 1px solid red; */
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    margin-left: -10px;
    
  }
  
  .skg-header li:nth-child(1),
  #section1 { background-color: var(--color-orange); }
  .skg-header li:nth-child(2),
  #section2 { background-color: var(--color-pink-about); }
  .skg-header li:nth-child(3),
  #section3 { background-color: var(--color-teal); }
  .skg-header li:nth-child(4),
  #section4 { background-color: var(--color-purple-bottom); }
  
  main {
    margin-left: 50px;
  }

/* POLAROID IMAGES */

.polaroid{
    display: grid;
    justify-content: center;
    gap: var(--unit-s);
}

#about1 {
    transform: rotate(5deg);
}

#about2 {
    transform: rotate(-5deg) translate(-50px, -40px);
}

#kewpie{
    transform: rotate(-5deg) translate(-50px, 10px);
}

#board{
    transform: rotate(-5deg) translate(-50px, -180px);
}

#lei{
    transform: rotate(5deg) translate(100px, -120px);
}

#bag{
    transform: rotate(5deg) translate(100px, -240px);
}


/* SPAN TEXT */

.socials span{
    position:absolute;
    font-size: .75rem;
    text-align: center;
    transform: translate(60px, 200px);
}

/* IMAGE ANIMATION */
.idle-image {
    --tilt-angle: 4deg;
    --tilt-duration: 3s;

    animation: idleTilt var(--tilt-duration) ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
}

@keyframes idleTilt {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(3deg); }
    55%  { transform: rotate(-2deg); }
    80%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .idle-image {
        animation: none;
    }
}

/* TEXT SPAN JUMP ANIMATION */
.jump-text span {
    display: inline-block;
    animation: jump 1.2s ease-in-out infinite;
}

/* Stagger the jumps */
.jump-text span:nth-child(1) { animation-delay: 0s; }
.jump-text span:nth-child(2) { animation-delay: 0.1s; }
.jump-text span:nth-child(3) { animation-delay: 0.2s; }
.jump-text span:nth-child(4) { animation-delay: 0.3s; }
.jump-text span:nth-child(5) { animation-delay: 0.4s; }

@keyframes jump {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* MERCH CARD */
.merch-card {
    background-color: #fff;
    border: var(--color-border) 1px solid;
    display: inline-block;
    padding: var(--unit-l);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 6px rgb(0 0 0 / .5);

}

.price-container{
    text-align: center;
}

/* MERCH CONATINER */
.merch-container{
    max-width: 1000px;
    margin: auto;
    padding: var(--unit-l);
}

/* MERCH GRID */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--unit-l);
    justify-items: center;
}

@media ( width < 768px ) {
    .merch-grid {
        grid-template-columns: 1fr;
    }
}

/* TILT ANIMATION ON HOVER */
.tilt-scale {
    transition: transform 0.35s ease;
}

.tilt-scale:hover {
    transform: scale(1.05) rotate(2deg);
}

.tilt-scale2 {
    transition: transform 0.35s ease;
}

.tilt-scale2:hover {
    transform: scale(1.05) rotate(-2deg);
}



/* FLOAT ANIMATION */
.float {
    animation: floatUpDown 4s ease-in-out infinite;
}

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

.float-2 {
    animation: floatUpDown 3s ease-in-out infinite;
    rotate: -2deg;
}

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

.float-3 {
    animation: floatUpDown 4s ease-in-out infinite;
    rotate: 3deg;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}

/* TV MAP ANIMATION */
.tv-container {
    position: relative;
    width: 600px;
    margin: 0 auto;
}

.tv-map {
    width: 100%;
    height: auto;
    display: block;
}

/* Bead rows */
.beads-row {
    display: flex;
    gap: 8px;
    padding-bottom: 20px;
}

.bead-frame{
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Adjust placement on TV */
.beads-row.top {
    top: 80px;
    left: 120px;
}

.beads-row.bottom {
    top: 150px;
    left: 180px;
}

/* Bead styling + animation */
.beads-row img {
    width: 50px;
    height: 50px;
    animation: float 3s ease-in-out infinite;
}

/* Slight stagger for natural movement */
.beads-row img:nth-child(odd) {
    animation-delay: 0.4s;
}

/* Floating animation */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* LEARN MORE */
.learn-more{
    padding: 5em;
}

.learn {
    background-image: url('../img/learn-more-bg.svg');
    background-size:cover;
}