/* css/homepage.css */

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif; /* Basic font, can be changed */
  overflow: hidden; /* Prevents scrollbars from full-page background if content overflows slightly */
}

.main-container {
  display: flex;
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  background-image: url('../assets/images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white; /* Default text color, adjust as needed based on your background */
}

.side-column {
  flex: 1;
  padding: 20px; /* Or your preferred padding */
  display: flex; /* This can stay if you want to align the scrolling container itself */
  flex-direction: column; /* Aligns children (like the p tags or text container) */
  align-items: center; /* Centers the text horizontally */
  overflow-y: hidden; /* Crucial: hides the text that scrolls out of view */
  /* Remove any temporary background colors if you had them */
}

/* New styles for the scrolling text containers */
.scrolling-text-content {
  width: 100%; /* Ensure it takes the full width of the column */
  text-align: center; /* Center the <p> tags if their width is less than container */
}

.scrolling-text-content p {
  font-family: 'VT323', monospace;
  margin: 5px 0; /* Adjust vertical spacing between "The Julian Bee" lines */
  font-size: 1.5em; /* Same as your previous placeholder */
  opacity: 0.7;     /* Same as your previous placeholder */
  line-height: 1.2; /* Adjust for tighter/looser line spacing */
  /* Add any specific text styling from your mockup, e.g., font family, color if different */
}

/* Animation for the left column (scrolling up) */
#leftScroll {
  animation: scrollUp 20s linear infinite; /* Adjust 20s for speed */
}

/* Animation for the right column (scrolling down) */
#rightScroll {
  animation: scrollDown 20s linear infinite; /* Adjust 20s for speed */
}

@keyframes scrollUp {
  0% {
      transform: translateY(0%);
  }
  100% {
      transform: translateY(-50%); /* Scrolls up by the height of one text block */
  }
}

@keyframes scrollDown {
  0% {
      transform: translateY(-50%); /* Start with the second block in view, first block above */
  }
  100% {
      transform: translateY(0%);   /* Scrolls down to show the first block again */
  }
}

.central-content {
  flex: 2; /* Make central column wider, adjust ratio as needed e.g., flex-basis: 70%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center face and buttons vertically */
  padding: 20px;
  /* background-color: rgba(0, 0, 0, 0.1); */ /* Optional: slight dimming for central area */
}

.face-container {
  /* Placeholder for styling the face area */
  margin-bottom: 140px; /* Space between face and buttons */
  text-align: center; /* Helps if the image is smaller than its container */
}

/* Style for the face image */
#faceImage {
  width: 450px; /* Example size - adjust as needed */
  /* height: auto; */ /* Keep aspect ratio if only width is set */
  /* Or you could set a max-width: */
  /* max-width: 80%; */ /* Example: take up 80% of its container's width */
  filter: drop-shadow(0 0 15px rgba(220, 180, 255, 0.7));

  /* --- Bobbing Animation --- */
  animation-name: bobbingFace;
  animation-duration: 2s;         /* How long one full up-and-down cycle takes */
  animation-iteration-count: infinite; /* Loop forever */
  animation-timing-function: ease-in-out; /* Makes the motion smooth */
  animation-direction: alternate; /* Goes up, then down, then up, etc. */
}

.buttons-container {
  /* Placeholder for styling the buttons area */
  display: flex; /* To lay out ME/STUFF buttons side-by-side if needed */
  justify-content: center; /* Center buttons horizontally if they don't fill the space */
  align-items: center; /* Align items vertically */
  gap: 60px; /* Space between ME/STUFF buttons */
}

.buttons-container a {
  display: inline-block; /* Allows sizing and for pseudo-elements to align properly */
  position: relative;    /* Establishes a positioning context for ::before */
  line-height: 0;        /* Helps remove any extra space if <a> wraps <img> tightly */
}

/* Add the scanline pseudo-element */
.buttons-container a::before {
  content: "";            /* Necessary for pseudo-elements to show up */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Create the scanlines */
  background-image: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2) 0px,  /* Very faint dark line */
      rgba(0, 0, 0, 0.2) 1px,  /* Line thickness: 1px */
      transparent 1px,          /* Space after line */
      transparent 3px           /* Space thickness: 2px (3px - 1px) */
                                /* Total pattern height: 3px */
  );
  background-size: 100% 3px; /* Width 100%, Height of one pattern repetition */

  opacity: 0; /* Hidden by default */
  transition: opacity 0.2s ease-in-out; /* Smooth fade in/out */
  pointer-events: none; /* Allows clicks to go through to the button image */
  z-index: 1; /* Ensures it's on top of the image if there's any stacking issue */
}

/* Show scanlines on hover */
.buttons-container a:hover::before {
  opacity: 0.7; /* Adjust for desired faintness (0.0 to 1.0) */
}

/* Previous hover effect for the button images (we'll keep the transition on the image itself) */
#meButton, #stuffButton {
  width: 300px; /* Or your preferred size */
  /* Remove any previous filter/transform transitions if they conflict, or adjust */
  /* transition: transform 0.2s ease-out, filter 0.2s ease-out; */ /* From previous example */
  /* If you want the image to still scale/brighten a bit underneath the scanlines, keep its transition */
  transition: transform 0.2s ease-out; /* Example: just transition transform */
}

/* Optional: if you still want a slight visual cue on the image itself underneath scanlines */
.buttons-container a:hover #meButton,
.buttons-container a:hover #stuffButton {
   transform: scale(1.02); /* A very subtle scale, optional */
  /* filter: brightness(1.1); */ /* Optional: slight brightness */
}

/* If the buttons themselves (the <a> tags) need sizing or styling: */
/*
.buttons-container a {
  display: inline-block; // Good for sizing link areas if needed
}
*/

/* Placeholder text styling (can be removed later) */
.side-column p {
  font-size: 1.5em;
  opacity: 0.7;
}

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}


@keyframes bobbingFace {
  from {
      transform: translateY(0px); /* Start at its normal position */
  }
  to {
      transform: translateY(-20px); /* Move up by 10 pixels (adjust as needed) */
  }
}

/* ---------- mobile tweaks (< 600 px) ---------- */
@media (max-width: 600px){

  /* hide both scrolling‑text side columns */
  .side-column{
    display:none;
  }

  /* let the main container stack vertically */
  .main-container{
    flex-direction:column;      /* was row */
    align-items:center;
    height:auto;                /* allow natural height */
    overflow-y:auto;            /* body can scroll */
  }

  /* resize the hero face */
  #faceImage{
    width:70vw;                 /* 70 % of viewport width */
    max-width:320px;            /* cap on larger phones */
    height:auto;
  }

  /* stack ME / STUFF buttons and make them fluid */
  .buttons-container{
    flex-direction:column;      /* was row */
    gap:24px;                   /* space between tiles */
    width:100%;
    align-items:center;         /* keep them centred */
  }

  /* scale button images */
  #meButton,
  #stuffButton{
    width:70vw;
    max-width:320px;
  }
}

/* ---------- extra mobile fixes (≤ 600 px) ---------- */
@media (max-width: 600px){

  /* force the page to scroll */
  html, body{
    height:auto !important;      /* override earlier 100% / 100vh */
    overflow-y:auto !important;  /* cancel overflow:hidden          */
  }

  /* give the stacked layout tighter spacing */
  .main-container{
    padding-top:20px;
    gap:20px;
  }

  .face-container{
    margin-bottom:0;             /* remove the big desktop gap */
  }

  /* slightly smaller face so both buttons fit sooner */
  #faceImage{
    width:60vw;                  /* 60 % of viewport width */
    max-width:280px;
  }

  /* buttons still stack but closer together */
  .buttons-container{
    gap:16px;
  }

  #meButton,
  #stuffButton{
    width:70vw;                  /* scale fluidly */
    max-width:320px;
  }
}

/* ---------- final mobile patch (≤ 600 px) ---------- */
@media (max-width: 600px){

  /* make sure the swirl covers full viewport
     even when content is short */
  .main-container{
    min-height:100vh;    /* at least one full screen tall */
  }

  /* tighten spacing so face + 2 buttons sit closer */
  .main-container{
    gap:14px;            /* was 20px */
  }

  /* optional: a little smaller face for small iPhones */
  #faceImage{
    width:55vw;
    max-width:260px;
  }
}