:root {
  --wave: url('/static/portfolio/img/wave3.png');
}


/* ✅ Only style inside .energy-scene so navbar & page remain unaffected */
.energy-scene {
  /* optional: a subtle backdrop only for this section */
  background: #000;
  filter: brightness(1) sepia(1) saturate(9) hue-rotate(95deg);
  overflow: hidden; /* contained to this section */
}

/* Responsive square: scales with viewport, capped for large screens */
.energy-scene .scene {
  --w: min(90vw, 480px);            /* responsive width */
  position: relative;
  width: var(--w);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-inline: auto;
  background-image: var(--wave);    /* optional image via inline style or CSS */
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 740px;
  animation: wave 2.5s linear infinite;
}

.energy-scene .move {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  animation: move 10s linear infinite;
  mix-blend-mode: difference;
}

/* Only target the dots within the scene */
.energy-scene .scene i {
  --w: min(90vw, 480px);            /* responsive width */
  position: relative;
  width: var(--w);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-inline: auto;
  background-image: var(--wave);    /* optional image via inline style or CSS */
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 740px;
  animation: wave 2.5s linear infinite;
}

.energy-scene .move {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  animation: move 10s linear infinite;
  mix-blend-mode: difference;
}

/* Only target the dots within the scene */
.energy-scene .scene i {
  --degree: 130px;
  --deg: 360deg;
  --cos: cos(calc(var(--i) * var(--deg) / var(--total)));
  --sin: sin(calc(var(--i) * var(--deg) / var(--total)));
  position: absolute;
  width: 8px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #fff;
  transform: translate(
    calc(var(--cos) * var(--degree)),
    calc(var(--sin) * var(--degree))
  );
}

@keyframes wave {
  0%   { background-position-x: 740px; }
  100% { background-position-x: 0px; }
}

@keyframes move {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1turn); }
}

.maincover {
  background: url('/static/portfolio/img/Background12.jpg') no-repeat;
  background-size:cover ;
  min-height: calc(85vh + 10px);
  position: relative;

}

.clickcenter {
  /* leave space above & below so it visually lands near center */
  scroll-margin: 40vh 0 20vh;  /* top right bottom left */
}

.crop-img {
  max-width: 100%;
  height: 250px;     /* fixed height, auto width */
  object-fit: cover; /* will crop but scale correctly */
}

/* Container that will be revealed */
.genie-panel {
  overflow: hidden;              /* during animation */
  max-height: 0;                 /* closed state */
  transition: max-height 650ms ease;
  scroll-margin-top: 12px;
}

.genie-panel.open {
  /* When open, we’ll set max-height via JS to content height,
     but make sure it can scroll if content exceeds the viewport */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* a safety cap for desktop so it never grows off screen */
  max-height: min(90vh, 99999px);
}

/* On small screens, use dynamic viewport to account for browser chrome */
@media (max-width: 576px) {
  .genie-panel.open {
    max-height: calc(100dvh - 24px); /* 24px top/bottom breathing room */
  }
}

/* Optional: smooth scroll when opening */
html { scroll-behavior: smooth; }

.reveal-section {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.reveal-section.open {
  max-height: 600px;  /* Adjust depending on content */
  opacity: 1;
}

.video-wrapper { overflow: hidden; }
.video-fill,
.video-wrapper img.video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop while filling */
  object-position: center;
  display: block;
}


.video-wrapper video,
.video-wrapper img {
  object-fit: cover;
}

.image-container {
    
    overflow: hidden; /* Hides content outside the container */
}

.image-container img {
    display: block; /* Removes extra space below image */
    margin-left: -50px; /* Adjust to show a different part of the image */
    margin-top: -20px; /* Adjust to show a different part of the image */