@import "../css/variables.css";


/* Font Styles */



.goldman-regular {
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.goldman-bold {
  font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.agdasima-regular {
  font-family: "Agdasima", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.agdasima-bold {
  font-family: "Agdasima", sans-serif;
  font-weight: 700;
  font-style: normal;
}

[data-theme="dark"]{
  --Brand__PrimaryGrey1: var(--Primitives__Grey-500);
  --Brand__PrimaryGrey2: var(--Primitives__Grey-300);
  --Brand__PrimaryGrey3: var(--Primitives__Grey-400);
  --Brand__SurfaceColor: var(--Primitives__Grey-600);
  --Brand__TextColor: var(--Primitives__Grey-100);
  --Brand__BrandAccent: var(--Colors__PrimaryBlue-50);
}

[data-theme="light"]{
  --Brand__PrimaryGrey1: var(--Primitives__Grey-300);
  --Brand__PrimaryGrey2: var(--Primitives__Grey-400);
  --Brand__PrimaryGrey3: var(--Primitives__Grey-500);
  --Brand__SurfaceColor: var(--Primitives__Grey-100);
  --Brand__TextColor: var(--Primitives__Grey-700);
  --Brand__BrandAccent: var(--Colors__PrimaryBlue-10);
}


html{
  scroll-behavior: smooth;
}



/* Main styles */

body{
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--SpacingM);
  overflow-x: hidden;
  background-color: var(--Brand__SurfaceColor); 
  width: 100%;
  justify-content: flex-end;

}

header{
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: visible;


}


.nav-button{
  background-color: var(--Brand__BrandAccent);
  color: var(--Brand__TextColor);
  border: none;
  font-size: var(--Sizes__L);
  cursor: pointer;
  font-family: var(--FontFamilyHeading);
  padding: var(--SpacingS);
  border-radius: var(--Sizes__S);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
}

.dropdown{
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 25%;
  margin-left: 68%;
  
  
}


a{
  text-decoration: none;
  color: var(--Brand__TextColor);
}


.dropdown-content{
  display: none;
  position: absolute;
  background-color: var(--Brand__BrandAccent);

}
.dropdown-content.active {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--SpacingM);
  margin: auto;
  padding: 0;
  justify-content: flex-start;
  font-family: var(--FontFamilyHeading);
  cursor: pointer;
  font-size: var(--Sizes__M);
  color: var(--Brand__TextColor);
  padding: var(--Sizes__L);
  text-align: center ;
  border-radius: var(--Sizes__S);
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
}

/* headings */



h1{
  position: relative;
  text-align: center;
  color: var(--Brand__TextColor);
  font-size: var(--Sizes__3XL);
  margin-bottom: var(--SpacingL);
  font-family: var(--FontFamilyHeading);
  top: 25%;
  z-index: 10;
}

.subhead{
  text-align: center;
  color: var(--Brand__TextColor);
  font-size: var(--Sizes__XL);
  margin-bottom: var(--SpacingL);
  font-family: var(--FontFamilyHeading);
  position: relative;
  top: 25%;
}

h2{
  font-family: var(--FontFamilyHeading);
}


/* sections */


#intro-section{
  display: relative;
  width: 100%;
  overflow: hidden;
  height: 120vh;
}

#parallax-container{
  position: relative; 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--SpacingM);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parallax-element{
  position: absolute;
  overflow: hidden;
  margin: auto;
  
}

#parallax-element-5{
  top: 60%;
  left: 0%;
  width: 100%;
  z-index: 1;
}

#parallax-element-3{
  top: 30%;
  left: 10%;
  width: 100%;
  z-index: 2;
}

#parallax-element-1{
  top: 32%;
  left: 20%;
  width: 100%;
  z-index: 3;
}

#parallax-element-6{
   top: 60%;
  left: 75%;
  width: 100%;
  z-index: 1;
}

#parallax-element-4{
  top: 30%;
  left: 65%;
  width: 100%;
  z-index: 2;
}

#parallax-element-2{
  top: 32%;
  left: 55%;
  width: 100%;
  z-index: 3;
}


/* section 1 */



#section-1{
  width: 100%;
  height: 100vh;
  margin: var(--SpacingL);
}

#svg-container-1{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--Spacing2XL);
  width: 100%;
  justify-content: center;
  

}

#section-1 p{
  color: var(--Brand__TextColor);
  font-size: var(--Sizes__XL);
  margin-bottom: var(--SpacingL);
  font-family: var(--FontFamilyBody);
  margin: var(--Spacing2XL);
  width: 40%;
  
}



/* Section 2 */


/* #section-2{
  width: 100%;
  height: 100vh;
  margin: var(--SpacingL);
}

#svg-container-2{
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--Spacing2XL);
  width: 100%;
  justify-content: center;
  

}


#section-2 p{
  color: var(--Brand__TextColor);
  font-size: var(--Sizes__L);
  margin-bottom: var(--SpacingL);
  font-family: var(--FontFamilyBody);
  margin: var(--Spacing2XL);
  width: 40%;
} */

#section-2 {
  width: 100%;
  min-height: 100vh; /* Changed from height: 100vh */
  position: relative;
  display: flex;
  justify-content: center;
}

#svg-container-2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* Keeps items at the top */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}










/* Adjust the Motherboard Wrapper scale */
#motherboard-wrapper {
  position: relative;
  width: 90%;          /* Scale the SVG container to fit the left column */
  max-width: 600px;
  display: flex;
  justify-content: flex-start;
}

/* THE LEFT SIDE (The Motherboard) */
.sticky-visual {
  flex: 1;             /* Takes up 50% of the space */
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;             /* Anchors it to the left */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;          /* Ensures it only takes up half the width */
}

/* Ensure the motherboard doesn't move */
#motherboard {
  top: 0;  /* Make the SVG responsive to the container */
  left: 0;
  position:relative;
}


#case-cover{
  position: absolute;
  top: 20%;
  left: 17%;
  
}

#light-indicator{
  position: absolute;
  top: 33%;
  left: 57%;
  fill: red;
  
}

#ram{
  position: absolute;
  top: 25%;
  left: 66%;
}


.circle{
  position: absolute;
  top: 230px;
  left: 652px;
  stroke: gold;
}


#scrolly-container {
  display: flex;
  flex-direction: column; /* Align columns side-by-side */
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.section-2-p {
  flex: 1;
  padding: 50vh 20px; /* Gives space for the text to actually "scroll" past the image */
  font-size: var(--Sizes__L);
  z-index: 5;
}


/* THE RIGHT SIDE (The Text) */
.scrolling-content {
  flex: 1;             /* Takes up the other 50% */
  padding: 0 10%;      /* Adds breathing room for the text */
  display: flex;
  flex-direction: column;
}

.step {
  height: 100vh; 
  display: flex;
  flex-direction: column; /* This forces the h2 and p to stack vertically! */
  justify-content: center; /* Centers them vertically within the 100vh space */
  align-items: flex-start; /* Aligns the text to the left */
  margin-left: auto;
  width: 50%;
  opacity: 0.3; 
  transition: opacity 0.5s;
  color: var(--Brand__TextColor);
  font-family: var(--FontFamilyBody);
  font-size: var(--Sizes__XL);
}

.step.is-active {
  opacity: 1;
}

.psu-wrapper{
  position: fixed;
  left: 15%;
  opacity: 1;
  z-index: 1;
}
.rest-wrapper{
  position: fixed;
  left: 5%;
  opacity: 1;
  z-index: 1;
}

#step-9{
  width:100%;
  margin: auto;
  position: relative;
  z-index: 10;
}

#nine-content{
  width:50%;
  margin: auto;
}

#monitor{
position: absolute;
z-index: -1;
top:15%;
left: 30vh;
}

#cable{
  position: absolute;
  top: 70%;
  left:15%;
  z-index: -10;

}

.circle{
top:29%;
left:73%;
}

.circle svg {
  overflow: visible !important; 
}