/* FONT */
@font-face {
  font-family: myFont;
  src: url("../assets/fonts/myfont.ttf");
}

/* SECTION */
.portfolio {
  min-height: 80;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: visible;
  color: white;
  padding-top: 5px;
}

/* TITLE */
.portfolio-title {
  font-family: myFont;
  font-size: 60px;
  letter-spacing: 4px;
  margin-bottom: 80px;
  margin-top: 290px;
  position: relative;
  z-index: 1; /* changed */
}

/* GRID */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  z-index: 2;
}

.portfolio-grid img {
  width: 500px;
  transition: 0.4s ease;
  cursor: pointer;
}

.portfolio-grid img:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* CLOUD BASE */
.cloud-p {
  position: absolute;
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}

/* POSITIONS + FLOAT */
.cloud-p1 {
  top: -4%;
  left: -25%;
  width: 1100px;
  animation: float1 7s ease-in-out infinite;
}

.cloud-p2 {
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 1300px;
  animation: float2 9s ease-in-out infinite;
}

.cloud-p3 {
  top: -3%;
  right: -25%;
  width: 1100px;
  animation: float3 8s ease-in-out infinite;
}

/* FLOAT KEYFRAMES */
@keyframes float1 {
  0% { transform: translateY(0); }
  50% { transform: translateY(25px); }
  100% { transform: translateY(0); }
}

@keyframes float2 {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(25px); }
  100% { transform: translateX(-50%) translateY(0); }
}

@keyframes float3 {
  0% { transform: translateY(0); }
  50% { transform: translateY(25px); }
  100% { transform: translateY(0); }
}

/* ===== PORTFOLIO FRAMES ===== */

.portfolio-frames {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  z-index: 5;
  pointer-events: none;
}

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: none;
  z-index: 3;
}