/* css/stuff.css */

body, html {
  margin: 0;
  padding: 0;
  height: 100%; /* Make sure html and body take full height */
  font-family: 'VT323', monospace;
  background-image: url('../assets/images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
  overflow: hidden; /* Prevent the whole page from scrolling */
}

.stuff-container {
  display: flex;
  width: 100%;
  height: 100vh; /* Make container take full viewport height */
  max-height: 100vh; /* Explicitly cap height */
}

.content-grid {
  flex-grow: 1;
  flex-basis: 70%; /* Or your preferred width ratio */
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-content: flex-start; /* Important for wrapped items */
  overflow-y: auto; /* ALLOW THIS SECTION TO SCROLL INTERNALLY */
  height: 100%; /* Make it try to fill the parent's height (which is 100vh) */
                /* This, combined with overflow-y: auto, is key */
}

.grid-item { /* This is the <a> tag */
  display: block; /* Default display state */
  max-width: 250px;
  max-height: 300px;
  margin: 10px;
  opacity: 1; /* Start fully visible */
  transition: opacity 0.3s ease-out; /* <<< CHANGE: Only transition opacity */
  pointer-events: auto; /* Start interactive */
  /* nth-child messy transforms apply here */
}

/* Make the improv-on-demand thumbnail a little smaller than the rest */
.grid-item[href="pages/content/pictures/improv_on_demand.html"] {
  max-width: 200px;
  max-height: 240px;
}

/* NEW Class for hidden state */
.grid-item.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.grid-item.is-gone {
  display: none;
}

.grid-item-bob-wrapper { /* Wrapper ONLY handles bob */
  width: 100%;
  height: 100%;
  animation-name: gentleBob;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  /* <<< REMOVE transform, transform-origin, and transition properties from here */
}

/* Your nth-child rules for async bobbing delay */
.grid-item:nth-child(3n+2) .grid-item-bob-wrapper {
  animation-delay: -0.5s;
}
.grid-item:nth-child(3n+3) .grid-item-bob-wrapper {
  animation-delay: -1.0s;
}

.grid-item img { /* Image handles scale animation AND hover */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center; /* <<< ADD THIS */
  transform: scale(1);            /* <<< ADD THIS (default scale) */
  /* Update transition to include transform */
  transition: transform 0.3s ease-out, filter 0.3s ease-out;
}

.grid-item.is-hidden img {
  transform: scale(0.95); /* Scaled-down state */
}

.grid-item:hover .grid-item-bob-wrapper img {
  transform: scale(1.07); /* Hover scale */
  filter: drop-shadow(0 0 12px rgba(230, 200, 255, 0.5));
}

/* Hover effects applied to image when PARENT <a> is hovered */
.grid-item:hover .grid-item-bob-wrapper img {
  transform: scale(1.07);
  filter: drop-shadow(0 0 12px rgba(230, 200, 255, 0.5));
}

.grid-item:hover {
  z-index: 10;
}

/* Keyframes gentleBob - REMAINS THE SAME */
@keyframes gentleBob {
  from { transform: translateY(0px); }
  to { transform: translateY(-16px); }
}

/* Messy Placement rules for .grid-item - REMAINS THE SAME */
.grid-item:nth-child(even) {
  transform: translate(40px, 23px) rotate(7deg);
}

.grid-item:nth-child(odd) {
transform: translate(-23px, 46px) rotate(-5deg);
}

.grid-item:nth-child(3n) {
transform: translate(0px, 22px) rotate(-11deg);
}

.grid-item:nth-child(4n) {
transform: translate(-10px, -15px) rotate(5deg);
}



.scrolling-divider-column {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 10%; /* Or your preferred width */
  padding: 0 10px;
  overflow-y: hidden; /* This column's scroll is animated, so hide overflow */
  height: 100vh;      /* Ensure it spans full viewport height */
  display: flex;      /* Added to help manage its children if necessary */
  flex-direction: column; /* Added */
  align-items: center;    /* Added */
}

.scrolling-text-content {
  width: 100%;
  text-align: center;
}

.scrolling-text-content p {
  font-family: 'VT323', monospace;
  margin: 5px 0;
  font-size: 1em;
  opacity: 0.6;
  line-height: 1.1;
  color: white;
  word-wrap: break-word;
}

#dividerScroll { /* Specific ID for the divider's scrolling animation */
  animation: scrollDownDivider 30s linear infinite; /* Slower speed maybe? Changed to scrollDownDivider */
}

/* Renamed and adjusted for downward scroll */
@keyframes scrollDownDivider {
  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 */
  }
}

.filter-sidebar {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20%; /* Or your preferred width ratio */
  padding: 20px;
  color: white;
  overflow-y: auto; /* ALLOW THIS SECTION TO SCROLL INTERNALLY */
  height: 100%; /* Make it try to fill the parent's height */
                /* This, combined with overflow-y: auto, is key */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.filter-sidebar h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.8em;
}

.filter-sidebar button {
  display: block;
  width: 100%;
  padding: 12px 10px;
  margin-bottom: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: inherit;
  font-size: 0.9em;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.filter-sidebar button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255,255,255,0.4);
}

.filter-sidebar button.active {
  background-color: rgba(220, 180, 255, 0.3);
  border-color: rgba(220, 180, 255, 0.6);
  font-weight: bold;
}

.homepage-link-icon {
  position: fixed; /* Fixed position relative to the viewport */
  bottom: 20px;    /* 20px from the bottom */
  right: 20px;     /* 20px from the right */
  width: 80px;     /* Adjust size as needed */
  height: 80px;    /* Adjust size as needed */
  z-index: 1000;   /* Ensure it's on top of other content */
  display: block;
  border-radius: 50%; /* Optional: if you want a circular frame or effect */
  /* background-color: rgba(0,0,0,0.3); */ /* Optional: slight background for visibility */
  /* box-shadow: 0 0 10px rgba(255,255,255,0.3); */ /* Optional: subtle glow */
  transition: transform 0.2s ease-in-out;
}

.homepage-link-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Or 'cover' if you prefer and image is square */
  border-radius: 50%; /* If the image itself should be circular and has transparency */
}

.homepage-link-icon:hover {
  transform: scale(1.1); /* Slight zoom on hover */
}

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

  /* allow the page to scroll; fixed 100 vh is too tight on phones */
  body, html{
    height:auto;
    overflow-y:auto;
  }

  /* stack the three columns:   filter  |  grid  |  (hide divider)   */
  .stuff-container{
    flex-direction:column;
    height:auto;              /* let it grow naturally */
  }

  /* 1 — filter panel goes to the top and stretches full‑width */
  .filter-sidebar{
    order:-1;                 /* comes first in the column flow */
    flex-basis:auto;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 15px;
    background:rgba(0,0,0,.35);   /* translucent strip behind buttons */
  }

  .filter-sidebar h2{
    flex-basis:100%;
    margin:0 0 6px;
    font-size:1.4em;
    text-align:center;
  }

  .filter-sidebar button{
    flex:1 1 42%;            /* two buttons per row */
    max-width:160px;
    margin:0;
  }

  /* 2 — hide the scrolling “JULIAN BEE” divider column */
  .scrolling-divider-column{
    display:none;
  }

  /* 3 — grid fills the screen, centred */
  .content-grid{
    flex-basis:auto;
    width:100%;
    justify-content:center;
    gap:16px;
    padding:16px;
  }

  .grid-item{
    max-width:45vw;          /* two posters side‑by‑side */
    max-height:none;
    margin:0;
  }

  /* 4 — resize fixed home icon */
  .homepage-link-icon{
    width:60px;
    height:60px;
    bottom:12px;
    right:12px;
  }
}

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

  /* 1 — restore vertical scrolling */
  html, body{
    height:auto !important;      /* cancel any 100 vh */
    overflow-y:auto !important;  /* allow page to scroll */
  }

  /* 2 — reduce top/bottom padding and inter‑section gaps */
  .main-container{
    padding-top:20px;            /* was larger on desktop */
    gap:20px;                    /* space between face & buttons */
  }

  /* 3 — hero image a touch smaller so it shares the screen */
  #faceImage{
    width:60vw;                  /* ~60 % of viewport width */
    max-width:280px;
    margin-bottom:0;             /* remove extra bottom margin */
  }

  /* 4 — buttons tighter & centred */
  .buttons-container{
    gap:16px;                    /* shrink space between ME/STUFF */
    margin-top:0;                /* cut empty gap */
  }

  .big-button{                   /* actual class from file */
    width:70vw;                  /* fluid width */
    max-width:320px;
  }
}