/* ============================================
   Hero Header - Vanilla CSS
   ============================================ */

/* --- Base Section --- */
.hero {
  position: relative;
  width: 100%;
  min-height: clamp(400px, 50vw, 713px);
  background: #fff;
  overflow: hidden;
}

/* --- Background Shapes Container --- */
.hero__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Animated Shape Base --- */
.hero__shape {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.hero__shape svg {
  display: block;
}

/* --- Spring-like easing --- */
@keyframes slideIn {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Each shape gets its own initial transform + delay via inline style + data attributes.
   We define a common animation and override per-shape via CSS custom properties. */
.hero__shape.is-animated {
  animation-name: slideIn;
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  animation-fill-mode: forwards;
  animation-delay: var(--delay, 0s);
  transform: var(--from, translate(0, 0));
}

/* --- Individual Shape Positions --- */

/* Top-left blue-to-purple */
.shape-topleft {
  top: 0;
  left: 0;
  width: 22%;
  max-width: 327px;
}
.shape-topleft svg {
  width: 100%;
  height: auto;
  transform: translateX(-0.5%);
}

/* Top center-left teal-green */
.shape-topcl {
  top: 0;
  left: 12%;
  width: 17%;
  max-width: 243px;
}
.shape-topcl svg { width: 100%; height: auto; }

/* Top small pink-yellow */
.shape-pinksmall {
  top: 12%;
  left: 33%;
  width: 6%;
  max-width: 90px;
}
.shape-pinksmall svg { width: 100%; height: auto; }

/* Top center pink-gradient */
.shape-topcenter {
  top: 0;
  left: 40%;
  width: 13%;
  max-width: 182px;
}
.shape-topcenter svg { width: 100%; height: auto; }

/* Top teal-green small */
.shape-tealsmall {
  top: 0;
  left: 43%;
  width: 7%;
  max-width: 100px;
}
.shape-tealsmall svg { width: 100%; height: auto; }

/* Top-right red-yellow */
.shape-topright {
  top: 0;
  right: 0;
  width: 32%;
  max-width: 461px;
}
.shape-topright svg { width: 100%; height: auto; }

/* Dot teal */
.shape-dot1 {
  top: 9%;
  left: 58%;
}
.shape-dot1 svg { width: 10px; height: 10px; }

/* Dot pink */
.shape-dot2 {
  top: 17%;
  left: 50%;
}
.shape-dot2 svg { width: 10px; height: 10px; }

/* Triangle teal */
.shape-tri {
  top: 8%;
  left: 65%;
}
.shape-tri svg { width: 35px; height: 44px; transform: rotate(81deg); }

/* Bottom-center ocean blue */
.shape-ocean {
  bottom: 2%;
  left: 15%;
  width: 35%;
  max-width: 507px;
}
.shape-ocean svg { width: 100%; height: auto; }

/* Bottom-center red-yellow */
.shape-redbtm {
  bottom: 2%;
  left: 18%;
  width: 16%;
  max-width: 234px;
}
.shape-redbtm svg { width: 100%; height: auto; }

/* Bottom-left purple */
.shape-purple {
  bottom: 0;
  left: 0;
  width: 27%;
  max-width: 396px;
}
.shape-purple svg { width: 100%; height: auto; transform: translateX(-1.5%); }

/* Bottom-right red-yellow large */
.shape-redright {
  bottom: 3%;
  left: 48%;
  width: 24%;
  max-width: 344px;
}
.shape-redright svg { width: 100%; height: auto; }

/* Bottom-right ocean-blue */
.shape-oceanbtm {
  bottom: 2%;
  left: 42%;
  width: 13%;
  max-width: 189px;
}
.shape-oceanbtm svg { width: 100%; height: auto; }

/* Bottom-right teal-green */
.shape-tealbtm {
  bottom: 0;
  right: 0;
  width: 28%;
  max-width: 401px;
}
.shape-tealbtm svg { width: 100%; height: auto; }

/* Bottom-right purple small */
.shape-purplesmall {
  bottom: 0;
  left: 53%;
  width: 6.5%;
  max-width: 93px;
}
.shape-purplesmall svg { width: 100%; height: auto; }

/* Far bottom-right purple */
.shape-purplefar {
  bottom: 7%;
  right: 2%;
  width: 6%;
  max-width: 83px;
}
.shape-purplefar svg { width: 100%; height: auto; }

/* Small dot bottom */
.shape-dot3 {
  bottom: 4%;
  left: 74%;
}
.shape-dot3 svg { width: 11px; height: 11px; }

/* Small dot bottom-left */
.shape-dot4 {
  bottom: 0;
  left: 0;
}
.shape-dot4 svg { width: 18px; height: 18px; transform: translateX(-50%); }


/* ============================================
   Content Layout
   ============================================ */
.hero__content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  min-height: clamp(400px, 50vw, 713px);
  box-sizing: border-box;
}

/* --- Text Area --- */
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 2rem;
  font-family: 'Noto Sans JP', sans-serif;
  opacity: 0;
  transform: translateY(30px);
}

.hero__text.is-animated {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.8s;
}

.hero__heading {
  color: #111827;
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
  -webkit-text-stroke: 0.5px currentColor;
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin: 0;
}
@media (min-width: 1400px) {
  .hero__heading {
    font-size: clamp(2.25rem, 5.5vw, 4.3rem);
  }
}

.hero__subtext {
  color: #374151;
  font-size: clamp(0.875rem, 1.8vw, 1.25rem);
  font-weight: 400;
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

.hero__subtext-accent {
  color: #111827;
}

/* --- Banner Area --- */
.hero__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(30px);
}

.hero__banner.is-animated {
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 1.0s;
}

.hero__banner img {
  width: 100%;
  max-width: 902px;
  height: auto;
}

/* --- Fade-up keyframes --- */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================
   Responsive - Desktop (1024px+)
   ============================================ */
@media (min-width: 1024px) {
  .hero__content {
    flex-direction: row;
    align-items: flex-start;
  }

  .hero__text {
    width: 38%;
    padding-top: 180px;
    padding-bottom: 120px;
    margin-bottom: 0;
  }

  .hero__subtext {
    margin-top: 1.25rem;
  }

  .hero__banner {
    width: 62%;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 60px;
  }
}

/* --- Tablet (768px+) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content {
    padding: 4rem 3rem;
  }
}

@media (max-width: 1023px) {
.hero__text {
  text-align: center;
  padding-top: 10px;
}
.hero__shapes {
  opacity: .3;
}
.hero__content {
  padding: 2.3rem 1rem;
}
}