/* Scoped styles for the Projects section to avoid global conflicts */

/* ============ Moving_card =========== */

#Projects .projects-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.0rem;
  padding: 2rem 1rem 0.1rem;
}

#Projects .figure {
  max-width: 100%;
  position: sticky;
  top: 15rem; /* lock below heading + nav */ /*VERY IMPORTANT AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA */
  width: clamp(14rem, 30vw, 18rem); /* smaller, responsive width */
}

#Projects .figure img {
  filter: drop-shadow(0 0 1.25rem rgba(0, 0, 0, 0.25));
  object-fit: cover;
  width: 100%;
  max-height: 60vh; /* cap height so card stays on-screen */
  height: auto;
}

/* ============ Picture.png =========== */


/* Mirrored hint image on the right side, similar to Hobbies' hover hint But diffrent picture called click on any :) */
#Projects .figure .click-hint {
  position: absolute;
  right: -170px; /* opposite side of Hobbies' left hint */
  top: 50%; /* center anchor */
  transform: translateY(-85%); /* stronger upward nudge */
  width: 140px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35));
}

@media (max-width: 1024px) {
  #Projects .figure .click-hint { display: none; }
}

#Projects .figure:first-of-type img:not(.click-hint) {
  animation: img1 10ms linear;
  animation-timeline: scroll(block root);
}

#Projects .figure:nth-of-type(2) img:not(.click-hint) {
  animation: img2 10ms linear;
  animation-timeline: scroll(block root);
}

#Projects .figure:last-of-type img {
  margin-bottom: 0;
}

@keyframes img1 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(5.27deg); }
}

@keyframes img2 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-5.67deg); }
}


/* (Removed duplicate rule below to prevent overrides once I'm done later) */