/*I chose cool/light colors for this page & high impact*/
/*variables*/
/*
Assignment 5: Cutting Edge Implementation

I originally found the "Sliding 3D Image Frames" article and the "An Introduction to CSS Scroll-Driven Animations" article. I wanted to use them to revisit my card stacking idea from Experiment 2 (the commented-out experiment).
The initial idea was to stack the cards and then make it so that when you scrolled down, the cards would fan out into the original repeat(3, 1fr) grid I had them in. But while I got them to fan out on scroll, they wouldn't stay that way when you got to the lower cards, and hovering over them would ruin the effect, either pulling them out of their location or moving them out from under the mouse, which caused the hover effect to fail.
Because of that, I decided to try a different approach and instead explore my original idea of having them slide out when you hovered over them. But again, they would move out from under your mouse and break the hover effect.
So instead, I started looking for a "click"-based solution to pull out and put back the card, using Claude AI and Grok to debug the implementation as you suggested. Ultimately, it worked, though I had to implement javascript (which I am unfamiliar with) into my HTML and rewrite the entire card section on my SCSS. Unfortunately, I feel I may have deviated too far from the modern SCSS assignment. As such, I went back and implemented the scroll animation on the cards for mobile so the text and image would fade in as you scrolled. Using the resource found at https://www.smashingmagazine.com/2024/12/introduction-css-scroll-driven-animations/


/*fonts*/
/*colors*/
/*also default background color color*/
/*images*/
/*offer images*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  font-family: Georgia, "Times New Roman", Times, serif;
  min-height: 100vh;
  background-color: #525252;
  background-image: url(../../Images/stairs.jpg);
  background-size: cover;
  background-position: center center;
  margin-bottom: 50px;
}

/*===========================
    Radial Frost Experiment

    I attempted to make a frost overlay that would that when you entered the page.
    For the longest time I tried to use the "fill" pen (see choese codepen in teams)
    but couldnt get it to work, so I asked Grok.

    Initially what grok told me didn't work either, but it did tell me about 
    "webkit-mask-image", "mask-image" and the circle property for gradients
    so I started trying to uset that with animation.

    I had to ask Grok a few more times to troublshoot what I was working on, 
    and ended up changing the valuses a lot once I got the animation down,
    but in the end I think it worked out. 
    Not sure if I'll keep it or not though.

============================*/
.frost_overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: url(../../Images/frost.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.7;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 0%, black 20%, black 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 20%, black 100% black 100%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 20%, black 100% black 100%);
  mask-size: 100% 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  transition: -webkit-mask-size 10s ease-in-out, mask-size 10s ease-in-out;
  animation: thaw 4s ease-in-out forwards;
}

/*===============================
    lightbox accent overlays
===============================*/
.lightbox, .lightbox2 {
  position: absolute;
  top: 0;
  pointer-events: none; /*Had to use AI to figure this one out*/
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.lightbox.lightbox, .lightbox2.lightbox {
  top: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 90%, #f8f8ff);
}
.lightbox.lightbox2, .lightbox2.lightbox2 {
  bottom: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 90%, #f8f8ff);
}

/*===============================
    header box

Experiment 2: first I wanted to make a sticky header. 
This turned out to be pretty easy so I tried something harder.
I tried to make a stacked card effect where you would "draw" 
one to look at it on mobile. See @media card section for details.
===============================*/
header {
  position: sticky;
  top: 0;
  box-shadow: 0px 2px 2px #f8f8ff;
  background-color: #0380d9;
  background-image: url(../../Images/parchment.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  align-items: center;
  z-index: 98;
  transition: padding 0.3s ease;
  overflow: hidden;
  /*=========================================================================
  experiment 3

  collapsing header to only display nav on scroll
  Required the Use of AI. the original script I tried didn't work 
  without making a seperate nav bar,which I didnt like because I 
  couldnt get the background image to fit correctly under both the 
  header and the nav, it also ruined the lightbox effect and I ended 
  up having to crtl Z my way back to my previous code. 
  I then asked Claude code what I did wrong, and it 
  suggested a javascript solution, which I then implimented.
  It was interesting learning a bit about javascript, though I don't
  understand everything, it looks like the 

    window.addEventListener('scroll', function() {

  tells it to look for the scroll function to become active, and when it is
  it selects the header 

    const header = document.querySelector('header');

  followed by an if/then statement 

     if (window.scrollY > 0) {
  		header.classList.add('scrolled');
  		} 
      else {
  		header.classList.remove('scrolled');
  		}

  that tells the code to add the ".scrolled" elements it had me add. */
}
header h1 {
  -webkit-text-stroke: 1px #525252;
  color: #f8f8ff;
  font-size: 3.5em;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  text-shadow: 0px 2px 15px #f8f8ff;
  -webkit-text-decoration: underline #f8f8ff;
          text-decoration: underline #f8f8ff;
  max-height: 150px;
  transition: all 0.3s ease;
  opacity: 1;
}
header h2 {
  text-shadow: 1px 1px 1px #f8f8ff;
  max-height: 100px;
  transition: all 0.3s ease;
  opacity: 1;
}
header nav ul {
  padding-top: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 50px;
  list-style: none;
  z-index: 10;
  transition: padding 0.3s ease;
}
header.scrolled {
  padding: 10px 20px;
}
header.scrolled h1 {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
header.scrolled h2 {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
header.scrolled nav ul {
  padding: 10px;
}

section[id] {
  scroll-margin-top: 200px;
}

/*===============================
        Main page content
===============================*/
main {
  margin: 8px;
}

.hero_div {
  display: flex;
  flex-flow: row wrap;
  gap: 40px;
  justify-content: center;
}

/*sidebar*/
.sidebar_nav {
  text-align: center;
  border: 2px solid #525252;
  border-radius: 5%;
  padding: 20px;
  min-height: 74vh;
  flex-shrink: 0;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 16px;
  background-color: #525252;
  background-image: url(../../Images/parchment.jpg);
  background-size: cover;
}
.sidebar_nav div {
  margin: 30px;
}
.sidebar_nav h2 {
  -webkit-text-stroke: 1px #525252;
  font-size: 1.2em;
  color: #f8f8ff;
  text-shadow: 0px 2px 10px #f8f8ff;
  margin-bottom: 12px;
  margin-top: 12px;
  -webkit-text-decoration: underline solid #525252;
          text-decoration: underline solid #525252;
  background-color: rgba(0, 0, 0, 0);
}
.sidebar_nav ul li {
  background-color: rgba(0, 0, 0, 0);
  list-style-type: none;
  padding: 6%;
  margin: 6px;
}

/*===============
    Hero content 
=================*/
.hero {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-between;
  background-image: linear-gradient(#c0c0c0, #f8f8ff);
  margin: 60px 40px 40px 6px;
  position: sticky;
  text-align: left;
  box-shadow: 0px 0px 15px #f8f8ff;
}
.hero .txt {
  flex: 1;
  max-width: 35%;
  text-align: center;
  min-width: 200px;
  background-color: rgba(0, 0, 0, 0);
}
.hero .txt h2 {
  color: black;
  padding-top: 20px;
  font-size: 1.25em;
  background-color: rgba(0, 0, 0, 0);
}
.hero .txt h2 span {
  -webkit-text-stroke: 1px #525252;
  color: #f8f8ff;
  font-weight: bolder;
  text-shadow: 0px 2px 15px #f8f8ff;
  -webkit-text-decoration: underline #f8f8ff;
          text-decoration: underline #f8f8ff;
  font-size: 1.5em;
  background-color: rgba(0, 0, 0, 0);
}
.hero .txt h3 {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 0.75em;
  background-color: rgba(0, 0, 0, 0);
}
.hero .txt a {
  padding: 6px 25px;
}
.hero p {
  justify-content: center;
  padding-top: 20% 0 10%;
  padding-bottom: 10%;
  background-color: rgba(0, 0, 0, 0);
}
.hero .hero_img {
  background-image: url(../../Images/silverscroll.png);
  background-size: cover;
  flex: 1;
  max-width: 65%;
  min-height: 400px;
  background-position: center;
  background-repeat: no-repeat;
}

/*==================
    link buttons 
===================*/
a {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  text-decoration: none;
  color: #f8f8ff;
  background: radial-gradient(#0380d9, #000d87);
  padding: 6px 10px;
  border: 4px ridge #c0c0c0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-radius: 50px;
  transition: all 0.5s ease;
}
a:hover {
  text-shadow: 0px 0px 6px #00ffff;
  box-shadow: 0px 0px 8px #00ffff;
  background-image: radial-gradient(#00ffff, #0380d9, #000d87);
  animation: bpulse 1s ease-out forwards, spulse 2.3s 1s ease-in-out infinite;
}
a:focus {
  outline: 3px solid #00ffff;
  outline-offset: 3px;
  text-shadow: 0px 0px 6px #00ffff;
  box-shadow: 0px 0px 8px #00ffff;
}
a:active {
  background-image: radial-gradient(#00ffff, #0380d9, #000d87, #000000);
}

/*================
"About" text block 
=================*/
.textblock {
  margin: 3%;
  background-image: linear-gradient(#f8f8ff, #c0c0c0);
  box-shadow: 0px 0px 15px #f8f8ff;
  text-align: center;
  border-radius: 10px;
}
.textblock h2 {
  padding-top: 20px;
  color: #800080;
  font-weight: 800;
}
.textblock p {
  text-align: left;
  padding: 20px;
}

/*==============
     Offers
    Showcase
===============*/
.products {
  margin: 5% 3%;
  background-color: #525252;
  background-image: url(../../Images/parchment.jpg);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #f8f8ff;
}
.products h2 {
  color: #f8f8ff;
  font-size: 2.5em;
  font-weight: 800;
  margin-bottom: 60px;
  text-shadow: 0px 2px 10px #f8f8ff;
  -webkit-text-stroke: 1px #525252;
  -webkit-text-decoration: underline #525252;
          text-decoration: underline #525252;
}

/*==================
    Card Section
====================*/
.card-container {
  position: relative;
  min-height: 460px;
  width: 100%;
  max-width: 1100px;
  margin: 30px;
  box-sizing: border-box;
}

.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 20px;
  top: 0;
  left: 0;
  width: 340px;
  min-height: 400px;
  background: linear-gradient(#f8f8ff, #c0c0c0);
  border: 2px solid #525252;
  border-radius: 14px;
  padding: 20px;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.55s ease, box-shadow 0.55s;
  cursor: pointer;
  box-sizing: border-box;
}
.card:nth-child(1) {
  transform: translateX(0px) rotate(-8deg);
  z-index: 6;
}
.card:nth-child(2) {
  transform: translateX(12px) rotate(-4deg);
  z-index: 5;
}
.card:nth-child(3) {
  transform: translateX(24px) rotate(0deg);
  z-index: 4;
}
.card:nth-child(4) {
  transform: translateX(36px) rotate(4deg);
  z-index: 3;
}
.card:nth-child(5) {
  transform: translateX(48px) rotate(8deg);
  z-index: 2;
}
.card:nth-child(6) {
  transform: translateX(60px) rotate(12deg);
  z-index: 1;
}
.card .cardimg1, .card .cardimg2, .card .cardimg3, .card .cardimg4, .card .cardimg5, .card .cardimg6 {
  border: 2px solid #525252;
  width: 100%;
  border-radius: 8px;
  background-size: cover;
  height: 200px;
  padding: 20px;
  max-width: 380px;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.card .cardimg1 {
  background-image: url(../../Images/diceset.jpg);
}
.card .cardimg2 {
  background-image: url(../../Images/castle2.jpg);
}
.card .cardimg3 {
  background-image: url(../../Images/ranger.jpg);
}
.card .cardimg4 {
  background-image: url(../../Images/encounters.jpg);
}
.card .cardimg5 {
  background-image: url(../../Images/potion.jpg);
}
.card .cardimg6 {
  background-image: url(../../Images/maps.jpg);
}
.card p {
  display: none;
  transition: opacity 0.4s ease 0.15s;
}
.card a {
  max-width: 280px;
  display: block;
  margin: 0 auto;
  padding: 6px 25px;
}
.card:hover {
  box-shadow: 0px 0px 20px #00ffff;
}
.card.active {
  transform: translateX(calc(34vw - 60px)) translateY(-40px);
  z-index: 10;
  width: 440px;
  box-shadow: 0px 0px 20px #00ffff;
}
.card.active p {
  display: inline-block;
}
.card.focused-by-tab {
  outline-offset: 2px;
}
.card:focus-visible {
  outline-offset: 4px;
}

/*===========
    footer
=============*/
footer {
  display: flex;
  justify-content: center;
  flex-flow: column wrap;
  gap: 4px;
  text-align: center;
  font-family: times;
  font-size: 12px;
  padding: 10px;
  background-color: #525252;
  color: #f8f8ff;
  bottom: 0px;
  left: 0px;
  width: 100%;
  line-height: 1;
  letter-spacing: 0.1ex;
  font-family: Georgia, "Times New Roman", Times, serif;
  position: fixed;
  min-height: 80px;
  z-index: 15;
}

/*===============
    Animations
=================*/
@keyframes bpulse {
  100% {
    box-shadow: 0px 0px 6px #00ffff;
  }
  50% {
    box-shadow: 0 0 1em #00ffff;
  }
  0% {
    box-shadow: 0 0 0 1em rgba(0, 0, 0, 0);
  }
}
@keyframes spulse {
  0%, 100% {
    box-shadow: 0px 0px 6px #00ffff;
  }
  50% {
    box-shadow: 0 0 14px #00ffff;
  }
}
@keyframes thaw {
  from {
    opacity: 0.7;
  }
  to {
    mask-size: 220vw 1000vw;
    -webkit-mask-size: 100vw 1000vw;
    opacity: 0.1;
  }
}
/*================
    Media Query
=================*/
@media (max-width: 768px) {
  body {
    margin-bottom: auto;
  }
  header {
    position: relative;
    padding: 20px 15px;
    gap: 10px;
    /*I really wanted to add a silver scroll background to the heading
    but the image size was off so I had to settle for the subheading*/
  }
  header .lscroll {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 240px;
    height: 80px;
    background-image: url(../../Images/scroll_banner2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
  }
  header h1 {
    font-size: 2em;
  }
  header h2 {
    font-size: 1em;
  }
  header nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    justify-content: center;
    padding: 15px 0;
  }
  header nav ul li a {
    display: block;
    padding: 6px 20px;
    text-align: center;
  }
  .hero_div {
    flex-direction: column;
    gap: 30px;
  }
  .hero_div .sidebar_nav {
    margin-bottom: 0px;
    margin-left: 0px;
  }
  .hero_div .sidebar_nav ul li {
    list-style-type: none;
    padding: 4%;
    margin: 0px;
    align-items: center;
  }
  .hero_div .hero {
    margin: 2%;
    margin-bottom: 30px;
    border-radius: 15px;
  }
  .hero_div .hero_img {
    border-radius: 0px 15px 15px 0px;
  }
  .sidebar_nav {
    min-height: auto;
    width: 100%;
  }
  .card-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%;
    max-width: 100%;
  }
  .card {
    position: relative;
    width: 100%;
    min-width: none;
    max-width: 420px;
    margin: 0 auto;
    transform: none !important;
    min-height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card p {
    display: inline-block;
    margin: 0%;
    transform: top center;
  }
  footer {
    position: relative;
  }
  @supports (animation-timeline: view()) {
    @media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
      .cardimg1, .cardimg2, .cardimg3, .cardimg4, .cardimg5, .cardimg6 {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: top center;
        animation: img-reveal linear forwards;
        animation-timeline: view();
        animation-range: entry 20% cover 40%;
      }
      .card p, h3 {
        opacity: 0;
        color: rgba(0, 0, 0, 0);
        transform: scaleY(0.5);
        transform-origin: center;
        animation: text-reveal linear forwards;
        animation-timeline: view();
        animation-range: entry 45% cover 50%;
        animation-duration: 3.5s;
      }
      @keyframes text-reveal {
        to {
          opacity: 1;
          color: #000000;
          transform: scaleY(1);
        }
      }
      @keyframes img-reveal {
        to {
          opacity: 1;
          transform: scaleY(1);
          color: #000000;
          transform: scaleY(1);
        }
      }
    }
  }
  @supports not (animation-timeline: view()) {
    .card {
      transform: none;
      opacity: 1;
    }
    .card p {
      opacity: 1;
      transform: none;
      color: inherit;
    }
  }
}
/*=======================================================
experiment 2: I wanted to see if I could make a kind of 
"Card draw" effect for the small screen I wanted to tilt 
the cards somehow so they looked 3D, which I tried to do
with transform,but it didn't work. So I abandoned the tilt 
idea and instead make it like a stack of cards. However I 
never figured out how to get them to stick after you click 
on them, and for some reason it doesnt work on mobile.


values for experiment below were commented out as they 
broke when I tried to use them on mobile. For some reason 
I couldn't select a card on a touch screen.


  .card-container {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 15px;
    position: relative;
    min-height: 720px;
  }


  .card {
    min-height: auto;  
    position: absolute;
    margin: 2%; 
    height: 560px; 
    transition: all 0.6s ease;
    transform-origin: center center; 

        &:nth-child(1) { 
            transform: translateX(8px) translateY(-40px); 
            z-index: 1;
        }

        &:nth-child(2) { 
            transform: translateX(4px) translateY(-10px); 
            z-index: 2; 
        }

        &:nth-child(3) { 
            transform: translateY(20px);
            z-index: 3; 
        }

        &:nth-child(4) { 
            transform: translateX(-4px) translateY(50px); 
            z-index: 4; 
        }

        &:nth-child(5) { 
            transform: translateX(-8px) translateY(80px); 
            z-index: 5; 
        }

        &:nth-child(6) { 
            transform: translateX(-12px) translateY(110px); 
            z-index: 6; }

        &:hover {
            box-shadow: 0px 0px 8px $glow-clr;
        }

        &:active {
            z-index: 10;
        }
    }
====================================================*//*# sourceMappingURL=bs_style.css.map */