/* ====================BASIC UNIVERSAL STYLING & CLEAN UP======================= */

/* div outlines */
div {
    outline:#d33571;
    outline-width: 2px;
}


/* loading fonts */   
@font-face {
    font-family: "greatwarrior";
    src: url("../fonts/Greatwarrior.ttf"); 
    /* Dibaca, Mohon. 2023. “Great Warrior”. Letterara. https://www.dafont.com/great-warrior.font?text=NECTAR+nectar&back=theme */
}


/* some basic css resetting */
body {
    margin: 0;
    box-sizing: border-box;
    z-index: 5;
    max-width: 100vw;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: var(--pagepad);
    padding-right: var(--pagepad);
}
  
a { text-decoration: none; color: var(--lightcream); }
  
  
ul {
    margin: 0;
    padding: 0; 
    list-style: none;
}
  
/* ==================== NAVIGATION ======================= */
/* nav now lives inside the hero top bar, see HERO section below */
nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
}

nav ul li {
    display: flex;
}

/* Tussilago is shipped as discrete static weights (300/400/500/700), not a variable font,
   so font-weight itself can't be transitioned smoothly - it would just snap between the
   static instances. Instead we crossfade two stacked copies of the label via opacity,
   which animates smoothly regardless. The real anchor text stays for accessibility but is
   made invisible and sets the box's resting size. */
nav ul li a {
    position: relative;
    font-family: "tussilago", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: transparent;
    padding: 8px 16px;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
    transition-duration: 0.3s;
}

nav ul li a::before,
nav ul li a::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "tussilago", sans-serif;
    font-style: normal;
    color: var(--lightcream);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

nav ul li a::before {
    font-weight: 300;
    opacity: 1;
}

nav ul li a::after {
    font-weight: 700;
    opacity: 0;
}

nav ul li a:hover::before {
    opacity: 0;
}

nav ul li a:hover::after {
    opacity: 1;
}

nav ul li a.navcta {
    font-weight: 700;
}

nav ul li a.navcta::before {
    opacity: 0;
}

nav ul li a.navcta::after {
    opacity: 1;
}

nav ul li a.navcta:hover::before {
    opacity: 1;
}

nav ul li a.navcta:hover::after {
    opacity: 0;
}


/* ==================== MAIN BODY CONTENT ======================= */

:root { /* allows me to access these variables through out the whole document */
    --sectionheight: 1152px; /* calc(768px*1.5) */
    /* 
      becuase the animation scrolling is based on percentages of the body height I decided to base the section on a specific variable
      originally it was because I thought that I couldnt use the vh in transforms (which was a problem for the parallax) but I found out afterwards that you can and
      in hindsight if I based the whole website on viewheight it would have done the same thing.
    */
    /* update from elusive james, this is fully outdated and should def remove using a section height asap */
  
    /* colour palette */
    --red: #990525; /* accent color */
    --lightcream: #ebf1e9; /* off white #f7eee9 */
    --black: #181a19; /* off black */

    --darkgray: #1c1c1c; /* premium dark mode section background */
    --navgray: #2b2b2b; /* nav bar background, slightly lighter than --darkgray */
    --footerdark: #121212; /* darker than --darkgray so the footer separates from the page background */

    --darkgreen25: #506b6252;       /* color-mix(in srgb, var(--darkgreen),#0000 25%); /* mixes colour to make it transparent */
    --lightblue100:  #95d4c900;     /*color-mix(in srgb, var(--lightblue), #0000 100%);*/

    --herofontsize: 16vw; /* ECALOS title size */
    --heropad: 16px; /* spacing between the hero image and the tagline / title around it */
    --pagepad: 4vw; /* shared left/right inset so the hero image, title and nav all share one edge */
}

.display {
    font-family: "Helvetica";
    font-weight: bold;
    font-size: large;
    max-width: 1000px;
}

html {
    background-color: var(--darkgray); /* fills notch and bottom bar safe areas on iOS */
    overscroll-behavior: none; /* prevents bounce revealing white on iOS */
}

body {
    background-color: var(--darkgray);
    overscroll-behavior: none;
}

p {
    font-family: "neulis-neue", "helvetica", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: white;
}

a {
    font-family: "neulis-neue", "helvetica", sans-serif;
    font-weight: 700;
    font-style: normal;
}


/* ==================== HEADER ======================= */
h1, h2, h3, h4, h5, h6 {
    font-family: "helvetica";
    font-weight: bold;
}

/* Tussilago Bold (Adobe Fonts) with Helvetica fallback, used for the main title and footer title */
.tussilago {
    font-family: "tussilago", "Helvetica", sans-serif;
    font-weight: 700;
}

/* Tussilago Regular, used for the shop / about us section headings */
h2, h3 {
    font-family: "tussilago", sans-serif;
    font-weight: 500;
    font-style: normal;
}

/* brand wordmark instances only - the tagline keeps its natural sentence case */
.hero-title, .footertitle, .hero-logo {
    text-transform: uppercase;
}

/* ==================== ANIMATION ======================= */

/* #region ==================== text bobbing ======================= */

@keyframes textbob { /* this is for the TITLE animation */
    0% {
      transform: translateY(7px);
    }
    50% {
      transform: translateY(-7px);
    }
    100% {
      transform: translateY(7px);
    }
}

@keyframes textbobhover {
    0% {
      transform: translateY(7px);
    }
    100% {
      transform: translateY(-28px);
    }
}


.textbob {
    counter-reset: child-counter;
}

.textbob span {
    counter-increment: child-counter;
    transform: translateY(7px); /* had to ajust starting position because the animation started at 7px it was jumping at the start */
    animation: textbob 4s infinite cubic-bezier(0.6, 0, 0.7, 1); /* the inspect tool is useful to ajust this curve */
}
/* Animation delays for each span */
/* #region for Animation Delays */
/* omg this is so useful */
.textbob span:nth-child(1) {
    animation-delay: 0s; /* I found out about the delay after I made 2 different keyframes for the waves */
}
  
.textbob span:nth-child(2) {
    animation-delay: 0.2s;
}
  
.textbob span:nth-child(3) {
    animation-delay: 0.4s;
}
  
.textbob span:nth-child(4) {
    animation-delay: 0.6s;
}
  
.textbob span:nth-child(5) {
    animation-delay: 0.8s;
}
  
.textbob span:nth-child(6) {
    animation-delay: 1s;
}
  
.textbob span:nth-child(7) {
    animation-delay: 1.2s;
}
  
.textbob span:nth-child(8) {
    animation-delay: 1.4s;
}
  
.textbob span:nth-child(9) {
    animation-delay: 1.6s;
}
  
.textbob span:nth-child(10) {
    animation-delay: 1.8s;
}

.textbob span:nth-child(11) {
    animation-delay: 2s;
}

.textbob span:nth-child(12) {
    animation-delay: 2.2s;
}

.textbob span:nth-child(13) {
    animation-delay: 2.4s;
}

.textbob span:nth-child(14) {
    animation-delay: 2.6s;
}

.textbob span:nth-child(15) {
    animation-delay: 2.8s;
}

.textbob span:nth-child(16) {
    animation-delay: 3s;
}

.textbob span:nth-child(17) {
    animation-delay: 3.2s;
}

.textbob span:nth-child(18) {
    animation-delay: 3.4s; /* I feel like this should be illegal, why cant I make a function to do this without using extra software */
}
/* #endregion */
/* #endregion */

/* #region ==================== SECTION HOME STYLING ==================== */
#home {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  min-height: 100vh;
  background-color: var(--darkgray);
}

/* top third: logo + nav, with the tagline sitting just above the image */
.hero-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 3;
}

.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 0;
  box-sizing: border-box;
}

.hero-logo {
  font-size: 1.5rem;
  color: white;
}

.hero-tagline {
  color: white;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 4% var(--heropad) 4%;
  box-sizing: border-box;
}

/* middle third: the campaign image, as wide as the hero and a third of the viewport tall */
.hero-image {
  width: 100%;
  height: calc(100vh / 3);
  overflow: hidden;
  z-index: 3;
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home h1 span {
  display: flex;
  align-items: center;
  transition: translate 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* smooth return */
}

/* Hovered letter springs up */
#home h1 span:hover {
  translate: 0 -28px;
  transition: translate 0.35s cubic-bezier(0.2, 0, 0, 1.6); /* springy launch */
}

/* Ripple: adjacent letters (±1) */
#home h1 span:hover + span,
#home h1 span:has(+ span:hover) {
  translate: 0 -14px;
  transition: translate 0.4s 0.05s cubic-bezier(0.2, 0, 0, 1.4);
}

/* Ripple: 2nd neighbours (±2) */
#home h1 span:hover + span + span,
#home h1 span:has(+ span + span:hover) {
  translate: 0 -6px;
  transition: translate 0.45s 0.1s cubic-bezier(0.2, 0, 0, 1.3);
}

/* bottom third: the ECALOS title, spanning the full width of the hero, just under the image */
#home h1 {
  font-size: var(--herofontsize);
  line-height: 1;
  width: 100%;
  margin: 0;
  padding: var(--heropad) 0 0 0;
  box-sizing: border-box;
  color: white;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
/* #endregion */

/* #region ==================== SHOP - SECTION 2 STYLING ======================= */
#shop {
    display:flex;
    flex-direction: column;
    position:relative;
    min-height: 105vh;
    top:0px;
    z-index: 3;
    margin: 0px auto 10vh auto;
    background-color: var(--darkgray);
}
  
h2 {
    text-align:left;
    font-size:3.6vh;
    padding:100px 0;
    margin-top:-1px;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    z-index: 4;
    color: white;
    /* background: linear-gradient(to top, transparent 50%, #d33571 90%, var(--red) 100%); */
}

.shoplist { /* lists of garments */
    width:45%;
    margin:0px auto;
    display: flex;
    flex-direction: column;
    gap:10px;
    margin-left: 15%;
}

.shopsignup { /* email sign up */
    width: 70%;
    max-width: 500px;
    margin:0px auto;
    display: flex;
    flex-direction: column;
    gap:10px;
    
}

/* shop text styling */
a.garmenttitle {
    display:flex;
    font-size: medium;
    line-height: 2;
    cursor: pointer; /* shows that you intereacted with something. It was hard to see the animation if you didnt know it was there*/
}
  
  
  
a.garmenttitle p { /* body text */
    flex: 1 1 300px;
    font-weight: lighter;
    text-align: left;
    margin:0px;
}
  
a.garmenttitle span { /* bold body text */
    flex: 1 1 150px;
    font-family: "greatwarrior";
    font-weight: bold;
    text-align: right;
    margin:0px;
    margin-top: -6px;
}

/* Shop section sender form */
.home-signup {
  position: relative;
  width: 400px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  background-image: url("../images/SignUpV2.svg");
  background-size: 380px;
  background-repeat: no-repeat;
  background-position: center 0px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-margin-top: 30vh;
}

.home-signup .sender-form-field {
  width: 100%;
}


/* email signup form */
.emailsignup {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.emailsignup input[type="email"] {
    flex: 1 1 auto;
    padding: 14px 18px;
    font-family: "neulis-neue", "helvetica", sans-serif;
    font-size: medium;
    border: 2px solid white;
    background-color: transparent;
    color: white;
    outline: none;
}

.emailsignup input[type="email"]::placeholder {
    color: white;
    opacity: 0.5;
}

.emailsignup input[type="email"]:focus {
    border-color: var(--red);
}

.emailsignup button {
    padding: 14px 24px;
    font-family: "neulis-neue", "helvetica", sans-serif;
    font-size: medium;
    font-weight: 700;
    background-color: white;
    color: #0a050f;
    border: 2px solid white;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.emailsignup button:hover {
    background-color: var(--red);
    border-color: var(--red);
    color: white;
}

/* #endregion */

/* #region ==================== ABOUT US - SECTION 3 STYLING======================= */
#aboutus {
    scroll-margin-top: 100px;
    flex-direction: column;
    position:relative;
    min-height: 105vh;
    top:0px;
    z-index: 3;
    padding-bottom: 8vh;
    background-color: var(--darkgray);
}
  
h3 {
    text-align:left;
    font-size:3.6vh;
    margin-top:0px;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    z-index: 4;
    color: white;
}

#aboutus p {
    position:relative;
    width: 70%;
    max-width: 500px;
    margin: auto;
    text-align: left;
    color: white;
}
/* #endregion */

/* #region ====================FOOTER STYLIING======================= */
footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: calc(var(--sectionheight)*0.5);
    position:relative;
    z-index: 3;
    background-color: var(--footerdark);
    margin-left: calc(-1 * var(--pagepad));
    margin-right: calc(-1 * var(--pagepad));
    padding: 0px 4%;
}
  
footer p, footer a {
    color: var(--lightcream);
    font-size: xx-small;
}
  
p.footertitle {
    flex: 1 6 40%;
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    flex-wrap: nowrap;
    font-size: 12vw;
    margin: 10% 5px 5px 5px;
    font-weight: bold;
    min-height: 10vw;
    height: auto;
}

p.footertitle span {
    flex: 1 1 10%;
    flex-direction: row;
}

.socials, .footernav {
    flex: 1 1 50px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    padding:5px;
    min-height: 10vw;
    height: auto;
    margin:10% 5px 5px 5px;
    letter-spacing: .2rem;
}

.footernav a {
    flex: 1 1 auto;
    text-align: left;
}

.socials a {
    flex: 1 1 auto;
    text-align: right;
}

.copyright {
    flex: 1 1 100%;
    font-size:xx-small;
    text-align: center;
    padding:5px;
}

.footerspacer {
    flex: 1 10 100%;
    height:10vh;
}

.footcover {
    position: absolute;
    height:50px;
    width: 100%;
    background-color: var(--darkgray);
    bottom:-49px;
    left:0px;
}
/* #endregion */

/* ====================RESPONSIVE DESIGN======================= */
/* ===== 5K RETINA MAC LABS: Media queries for Curtin Uni mac lab testing only ===== */
@media only screen and (min-width: 5120px) {
  
        
}

/* ===== DESKTOP HD: Media queries for most HD desktops ===== */
@media only screen and (min-width: 1920px) {
  :root { /* allows me to access these variables through out the whole document */
    --sectionheight: 1536px; /* calc(768px*2) */
}
    
    
}

/* ===== SMALL DESKTOP: Media queries for laptop/small desktop ===== */
@media only screen and (min-width: 1366px) { /* desktop for assignment 1366px x 768px */

        
}

/* ===== TABLET: Media queries for verticle and horizontal ===== */
@media only screen and (max-width: 1024px) {  /* tablet for assignment 1024px x 768px */

  
}

@media only screen and (max-width: 768px) {
/* reformatting for the hero top bar / nav */

    :root {
        --herofontsize: 13vw;
        --heropad: 10px;
    }

    #home {
        min-height: 100vh;
    }

    .hero-topbar {
        align-items: flex-start;
        gap: 10px;
        padding: 16px 0;
    }

    nav ul {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 6px;
        width: auto;
    }

    nav ul li a {
        padding: 6px 10px;
        font-size: small;
    }

    .hero-tagline {
        font-size: 0.85rem;
    }

    h2 {
        background: none;
    }
}

/* ===== footer mobile layout ===== */
@media only screen and (max-width: 1300px) {
    footer {
      padding: 0px 5%;

    }
    p.footertitle {
      margin: 5px;
    }

    footer p, footer a, .copyright {
      color: var(--lightcream);
      font-size: small;
    }

    .socials, .footernav {
      flex: 1 1 40%;
      height: calc((var(--sectionheight)*0.2));
      padding:5px;
      margin:10% 5px 5px 5px;
    }

    .footernav    {order:1;}
    .socials      {order:2;}
    .footertitle  {order:3;}
    .copyright    {order:4;}
    .footerspacer {order:5;}
}


/* ===== MOBILE: Media queries for small mobile resolution. ===== */
@media only screen and (max-width: 640px) {
    :root {
      --sectionheight: 1536px; /* calc(768px*2) */
    }

    h2 {
        font-size: 4.8vw;
        padding: 60px 20px;
    }

    /* shop section */



    .garmentlist {
      gap: 30px;
    }
  
    .garmentlist a {
      background-color: var(--lightcream);
      border-radius: 5px;
      padding:5px;
    }
}


@media only screen and (max-width: 420px) { /* sign up changes */
    .home-signup {
        width: 100%;
    }
}

@media only screen and (max-width: 360px) { /* moblie for assignment 360px x 640px */

    :root { /* allows me to access these variables through out the whole document */
      --sectionheight: 1536px; /* calc(768px*2) */
    }
    
    /* about us section */
    #flavours p {
      width: 80%;
      line-height: 1.2;
    }
  
    #flavours p.bgflavour {
      font-weight: bold;
    }
    
  
    /* shop text styling */
    .garmentlist {
      margin-left: 5%;
    }
    a.garmenttitle {
      display:flex;
      font-size: large;
      line-height: 1;
      flex-direction: column;
    }
  
  
  
    a.garmenttitle p {
      flex: 1 1 auto;
      margin:0px;
    }
  
    a.garmenttitle span {
      flex: 1 1 auto;
      font-weight: bold;
      text-align: left;
      margin:0px;
      margin-top: 0px;
    }      
  
  
          
}