/**
 * Hero scallop + portfolio image sequence (Free ideas / Free Video Ideas)
 */
.hero-curve-band {
  --hc: clamp(72px, 12vw, 128px);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.hero-curve {
  display: block;
  width: 100%;
  height: var(--hc);
  margin: 0;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
  position: relative;
  pointer-events: none;
}
.hero-curve path {
  fill: #F5F5F5;
}

.portfolio-seq-section {
  background: var(--vf-black, #141414);
  padding: 0;
  position: relative;
  z-index: 14;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(64px, min(11vw, 13vh), 136px));
}

.portfolio-seq-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1500 / 1000;
  flex-shrink: 0;
  isolation: isolate;
  transform: translateZ(0);
}

.portfolio-seq-bg {
  position: absolute;
  inset: 0;
  background-color: var(--vf-black, #141414);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.portfolio-seq-bg--front {
  z-index: 2;
  opacity: 1;
}
.portfolio-seq-bg--under {
  z-index: 1;
  opacity: 0;
}

.portfolio-seq-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 3;
}

@supports (width: 100svw) {
  @media (max-width: 768px) {
    .portfolio-seq-section {
      width: 100svw;
      max-width: 100svw;
      margin-left: calc(50% - 50svw);
    }
  }
}

.portfolio-seq-curve {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: clamp(56px, 10vw, 84px);
  flex-shrink: 0;
  margin-top: calc(-1 * clamp(40px, 7.5vw, 72px));
}
.portfolio-seq-curve path {
  fill: #F5F5F5;
}

@media (min-width: 901px) {
  .hero-curve-band {
    --hc: clamp(104px, min(20vh, 16vw), 200px);
  }
  .portfolio-seq-section {
    margin-top: calc(-1 * clamp(88px, min(13vw, 17vh), 180px));
  }
  .portfolio-seq-curve {
    height: clamp(72px, min(14vh, 12vw), 160px);
    margin-top: calc(-1 * clamp(52px, min(11vh, 10vw), 96px));
  }
}
@media (min-width: 1400px) {
  .hero-curve-band {
    --hc: clamp(108px, min(20vh, 16vw), 220px);
  }
  .portfolio-seq-section {
    margin-top: calc(-1 * clamp(96px, min(14vw, 19vh), 196px));
  }
  .portfolio-seq-curve {
    height: clamp(80px, min(15vh, 13vw), 180px);
    margin-top: calc(-1 * clamp(60px, min(12vh, 11vw), 112px));
  }
}
@media (max-width: 900px) {
  .hero-curve-band {
    --hc: clamp(64px, 14vw, 112px);
  }
}
@media (max-width: 720px) {
  .hero-curve-band {
    --hc: clamp(52px, 15vw, 88px);
  }
}