.dummy-section.main-first {
    position: relative;
    display: flex;
    width:100%;
    max-width:1920px;
    justify-content: flex-start;
    align-items: center;
    min-height:100vh;
    background:url(/images/fullscreen/main_visual_04.png) no-repeat;
    background-position:center;
    background-size:cover;
}
.dummy-section.main-first .text-area {
  padding:clamp(2vw, 3vw, 40px);
}
.dummy-section.main-first .img-area {

}
.dummy-section.main-first .img-area img {
  width: 100%;
  height: 500px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)),
        radial-gradient(circle at center, rgba(0,0,0,0), rgba(0,0,0,0.4));
    pointer-events: none;
}

.dummy-section {
    width:90%;
    max-width: 1900px;
    margin:0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3vw 2vw;
    text-align: left;
    /* background: #111; */
    /* border-bottom: 1px solid rgba(255,255,255,0.06); */
}

.dummy-section h2 {
  /* font-size: clamp(1.5rem, 5vw, 3.7rem); */
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  margin-bottom: 16px;
  line-height:1.3
}

.dummy-section p {
  font-size: clamp(1rem, 2vw, 1.7rem);
  opacity: 0.8;
  /* max-width: 760px;
  margin: 0 auto; */
}

/* story section */
.story-wrap {
  position: relative;
  height: 100svh;
  overflow:hidden;
}

.story-stage {
  position: relative;
  width: min(56vw, 980px);
  height: 56vh;
  margin: 0 auto;
  top: 0;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
  will-change: width, height, border-radius, transform;
}

.story-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  height:100%;
}

.story-panel.is-active {
  opacity: 1;
  visibility: visible;
}



.panel-outer,
.panel-inner,
.panel-bg {
  width: 100%;
  height: 100%;
}

.panel-outer,
.panel-inner {
  overflow: hidden;
}

.panel-bg {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(24px, 4vw, 70px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index:0;
}

.panel-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(to top, rgba(0,0,0,0.58), rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.18));
  z-index:1;
  pointer-events: none;
}

/* .panel-4 .panel-bg::before {
  background:linear-gradient(to top, rgba(255,255,255,0.58), rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.18));
} */
.panel-4 .panel-bg {
  background-position: center bottom;
}
.panel-5 .panel-bg {
  background-position: center 36%;
}

.panel-content {
  position: relative;
  max-width: 1050px;
  margin-bottom:100px;
  z-index: 2;
}
/* .story-panel.is-active .panel-content {
    opacity: 1;
    transform: translateY(0);
} */

.panel-kicker {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 12px;
}

.panel-title {
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  line-height: 1.23;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.panel-desc {
  font-size: clamp(0.98rem, 1.6vw, 1.7rem);
  opacity: 0.88;
  max-width: 52ch;
}

.panel-kicker,
.panel-title,
.panel-desc {
    will-change: transform, opacity, filter;
}



.story-nav {
  position: absolute;
  left: 3vw;
  bottom: 50%;
  /* transform: translateX(-50%); */
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.story-dot {
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.28);
  transition: transform 0.25s ease, width 0.25s ease;
}

.story-dot.active {
  width:3px;
  background: #fff;
  /* transform: scale(1.3); */
}


/* scroll animation */
.fullscreen-section {
  position:relative;
  /* min-height:100svh; */
}
.scroll-area {
    position:fixed;
    left:50%;
    bottom:10%;
    margin-left:-30px;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 33;
}
/* .scroll-icon {
  width: 60px;
  height: 60px;
}

.scroll-icon * {
  stroke-width: 1; 
} */

.scroll-icon {
  width: 60px;
  height: 80px;
}

.scroll-icon * {
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arrow {
  opacity: 0.15;
  transform-box: fill-box;
  transform-origin: center;
  animation: arrowFlow 1.8s infinite;
}

.arrow1 { animation-delay: 0s; }
.arrow2 { animation-delay: 0.25s; }
.arrow3 { animation-delay: 0.5s; }

@keyframes arrowFlow {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.45;
    transform: translateY(2px);
  }
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (max-width: 1024px) {
  .story-stage {
    width: 70vw;
    height: 50vh;
  }
}

@media (max-width: 768px) {
    .dummy-section.main-first {
        /* align-items: flex-start; */
    }
    .dummy-section.main-first .text-area {
        margin-top: -180px;
    }
    .story-wrap {
        height: 100svh;
    }

    .story-stage {
        width: calc(100% - 28px);
        height: 52vh;
        min-height:360px;
        border-radius: 24px;
    }

    .panel-bg {
        align-items: flex-end;
        padding: 24px 20px 54px;
    }

    .panel-desc {
        max-width: 100%;
    }
    .story-nav {
        display:none
    }
    .scroll-area {
      margin-left:-20px;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .scroll-area.hide {
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
    }
    .scroll-icon {
      width:40px;
      height:60px;
    }
}