/* ==========================================================================
   Hero Section - Rich Visual
   White bg, animated decorations, sparkles, floating bg text
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* WP管理バーの余白を吸収 */
.admin-bar .hero {
  margin-top: -32px;
  height: calc(100dvh + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .hero {
    margin-top: -46px;
    height: calc(100dvh + 46px);
  }
}

/* フロントページの管理バー隙間の背景色を合わせる */
.admin-bar.home {
  background: var(--color-primary);
}


/* ==========================================================================
   Background Logo Text - subtle floating animation
   ========================================================================== */

.hero__bg-text {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 22rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  user-select: none;
  animation: bgTextFloat 8s ease-in-out infinite;
}

@keyframes bgTextFloat {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    -webkit-text-stroke-color: rgba(200, 160, 230, 0.15);
  }
  25% {
    transform: translate(-50.5%, -49%) scale(1.01);
    -webkit-text-stroke-color: rgba(232, 123, 197, 0.12);
  }
  50% {
    transform: translate(-49.5%, -51%) scale(1);
    -webkit-text-stroke-color: rgba(94, 208, 213, 0.12);
  }
  75% {
    transform: translate(-50.3%, -49.5%) scale(1.005);
    -webkit-text-stroke-color: rgba(111, 163, 247, 0.12);
  }
}


/* ==========================================================================
   Decorative Geometric Shapes - floating & rotating animations
   ========================================================================== */

.hero__deco {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  border-radius: 4px;
  display: none;
}

/* Pink diagonal stripe - top right */
.hero__deco--1 {
  width: 120px;
  height: 18px;
  background: var(--color-accent-pink);
  top: 12%;
  right: 5%;
  transform: rotate(-35deg);
  opacity: 0.85;
  animation: decoFloat1 6s ease-in-out infinite;
}

/* Purple/blue diagonal block - top left */
.hero__deco--2 {
  width: 80px;
  height: 140px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent-blue));
  top: 5%;
  left: 8%;
  transform: rotate(-15deg);
  border-radius: 8px;
  opacity: 0.7;
  animation: decoFloat2 7s ease-in-out infinite;
}

/* Pink stripe - bottom left */
.hero__deco--3 {
  width: 100px;
  height: 14px;
  background: var(--color-accent-pink);
  bottom: 18%;
  left: 3%;
  transform: rotate(-35deg);
  opacity: 0.75;
  animation: decoFloat3 5.5s ease-in-out infinite;
}

/* Small pink accent - mid right */
.hero__deco--4 {
  width: 60px;
  height: 10px;
  background: var(--color-accent-pink);
  top: 45%;
  right: 2%;
  transform: rotate(-35deg);
  opacity: 0.6;
  animation: decoFloat4 8s ease-in-out infinite;
}

/* Blue angular shape - bottom right */
.hero__deco--5 {
  width: 50px;
  height: 90px;
  background: linear-gradient(135deg, var(--color-accent-blue), var(--color-primary));
  bottom: 8%;
  right: 6%;
  transform: rotate(15deg);
  border-radius: 6px;
  opacity: 0.6;
  animation: decoFloat5 9s ease-in-out infinite;
}

/* New: Small pink dot - center left */
.hero__deco--6 {
  width: 30px;
  height: 30px;
  background: var(--color-accent-pink);
  top: 30%;
  left: 15%;
  border-radius: 50%;
  opacity: 0.3;
  animation: decoFloat6 10s ease-in-out infinite;
}

/* New: Cyan stripe - top center */
.hero__deco--7 {
  width: 70px;
  height: 10px;
  background: var(--color-accent-cyan);
  top: 8%;
  left: 55%;
  transform: rotate(-25deg);
  opacity: 0.5;
  animation: decoFloat7 7.5s ease-in-out infinite;
}


/* ── Decoration Floating Keyframes ── */
@keyframes decoFloat1 {
  0%, 100% { transform: rotate(-35deg) translate(0, 0); }
  33% { transform: rotate(-33deg) translate(8px, -12px); }
  66% { transform: rotate(-37deg) translate(-5px, 6px); }
}

@keyframes decoFloat2 {
  0%, 100% { transform: rotate(-15deg) translate(0, 0); }
  25% { transform: rotate(-12deg) translate(6px, 10px); }
  50% { transform: rotate(-17deg) translate(-4px, -8px); }
  75% { transform: rotate(-14deg) translate(3px, 5px); }
}

@keyframes decoFloat3 {
  0%, 100% { transform: rotate(-35deg) translate(0, 0); }
  50% { transform: rotate(-32deg) translate(10px, -8px); }
}

@keyframes decoFloat4 {
  0%, 100% { transform: rotate(-35deg) translate(0, 0); opacity: 0.6; }
  30% { transform: rotate(-30deg) translate(-6px, 8px); opacity: 0.8; }
  70% { transform: rotate(-38deg) translate(4px, -5px); opacity: 0.5; }
}

@keyframes decoFloat5 {
  0%, 100% { transform: rotate(15deg) translate(0, 0); }
  40% { transform: rotate(18deg) translate(-8px, -10px); }
  80% { transform: rotate(12deg) translate(5px, 6px); }
}

@keyframes decoFloat6 {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.3; }
  50% { transform: scale(1.3) translate(10px, -15px); opacity: 0.5; }
}

@keyframes decoFloat7 {
  0%, 100% { transform: rotate(-25deg) translate(0, 0); opacity: 0.5; }
  50% { transform: rotate(-20deg) translate(-8px, 10px); opacity: 0.7; }
}

/* ── Additional Decorative Shapes (doubled) ── */

/* Large cyan circle - bottom center-left */
.hero__deco--8 {
  width: 45px;
  height: 45px;
  background: var(--color-accent-cyan);
  bottom: 25%;
  left: 22%;
  border-radius: 50%;
  opacity: 0.25;
  animation: decoFloat8 11s ease-in-out infinite;
}

/* Purple stripe - mid left */
.hero__deco--9 {
  width: 90px;
  height: 12px;
  background: var(--color-primary);
  top: 60%;
  left: 2%;
  transform: rotate(-40deg);
  opacity: 0.5;
  animation: decoFloat9 6.5s ease-in-out infinite;
}

/* Small blue block - top center-right */
.hero__deco--10 {
  width: 35px;
  height: 60px;
  background: linear-gradient(180deg, var(--color-accent-blue), var(--color-accent-cyan));
  top: 18%;
  right: 18%;
  transform: rotate(20deg);
  border-radius: 6px;
  opacity: 0.4;
  animation: decoFloat10 8.5s ease-in-out infinite;
}

/* Pink dot - bottom right corner */
.hero__deco--11 {
  width: 25px;
  height: 25px;
  background: var(--color-accent-pink);
  bottom: 12%;
  right: 20%;
  border-radius: 50%;
  opacity: 0.35;
  animation: decoFloat11 9.5s ease-in-out infinite;
}

/* Cyan diagonal stripe - center */
.hero__deco--12 {
  width: 70px;
  height: 8px;
  background: var(--color-accent-cyan);
  top: 35%;
  right: 8%;
  transform: rotate(-30deg);
  opacity: 0.4;
  animation: decoFloat12 7s ease-in-out infinite;
}

/* Purple circle - top right area */
.hero__deco--13 {
  width: 55px;
  height: 55px;
  background: var(--color-primary-light);
  top: 20%;
  right: 35%;
  border-radius: 50%;
  opacity: 0.15;
  animation: decoFloat13 12s ease-in-out infinite;
}

/* Small pink stripe - bottom center */
.hero__deco--14 {
  width: 50px;
  height: 8px;
  background: var(--color-accent-pink);
  bottom: 30%;
  left: 42%;
  transform: rotate(-20deg);
  opacity: 0.45;
  animation: decoFloat14 6s ease-in-out infinite;
}

@keyframes decoFloat8 {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.25; }
  50% { transform: scale(1.4) translate(-12px, 10px); opacity: 0.4; }
}

@keyframes decoFloat9 {
  0%, 100% { transform: rotate(-40deg) translate(0, 0); }
  50% { transform: rotate(-35deg) translate(12px, -8px); }
}

@keyframes decoFloat10 {
  0%, 100% { transform: rotate(20deg) translate(0, 0); }
  33% { transform: rotate(25deg) translate(-5px, 8px); }
  66% { transform: rotate(15deg) translate(6px, -6px); }
}

@keyframes decoFloat11 {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.35; }
  50% { transform: scale(1.5) translate(8px, -10px); opacity: 0.5; }
}

@keyframes decoFloat12 {
  0%, 100% { transform: rotate(-30deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(-25deg) translate(-10px, 6px); opacity: 0.6; }
}

@keyframes decoFloat13 {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.15; }
  50% { transform: scale(1.2) translate(15px, -12px); opacity: 0.25; }
}

@keyframes decoFloat14 {
  0%, 100% { transform: rotate(-20deg) translate(0, 0); }
  50% { transform: rotate(-15deg) translate(8px, -10px); }
}


/* ==========================================================================
   Sparkle Particles - twinkling star effects
   ========================================================================== */

.hero__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.hero__sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.5px);
}

/* Each sparkle as a 4-point star with glow */
.hero__sparkle::before,
.hero__sparkle::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
}

.hero__sparkle::before {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.hero__sparkle::after {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.hero__sparkle--1 {
  top: 15%;
  left: 20%;
  color: rgba(255, 200, 255, 0.9);
  animation: sparkle 3s ease-in-out 0s infinite;
}

.hero__sparkle--2 {
  top: 25%;
  right: 15%;
  color: rgba(200, 220, 255, 0.9);
  width: 12px;
  height: 12px;
  animation: sparkle 4s ease-in-out 0.5s infinite;
}

.hero__sparkle--3 {
  bottom: 30%;
  left: 10%;
  color: var(--color-accent-cyan);
  width: 5px;
  height: 5px;
  animation: sparkle 3.5s ease-in-out 1s infinite;
}

.hero__sparkle--4 {
  top: 40%;
  left: 45%;
  color: var(--color-accent-pink);
  width: 4px;
  height: 4px;
  animation: sparkle 5s ease-in-out 1.5s infinite;
}

.hero__sparkle--5 {
  top: 10%;
  right: 30%;
  color: var(--color-primary-light);
  width: 7px;
  height: 7px;
  animation: sparkle 3.8s ease-in-out 2s infinite;
}

.hero__sparkle--6 {
  bottom: 20%;
  right: 25%;
  color: var(--color-accent-blue);
  width: 5px;
  height: 5px;
  animation: sparkle 4.5s ease-in-out 0.8s infinite;
}

.hero__sparkle--7 {
  top: 55%;
  left: 30%;
  color: var(--color-accent-pink);
  width: 6px;
  height: 6px;
  animation: sparkle 3.2s ease-in-out 2.5s infinite;
}

.hero__sparkle--8 {
  bottom: 40%;
  right: 10%;
  color: var(--color-primary);
  width: 8px;
  height: 8px;
  animation: sparkle 4.2s ease-in-out 1.2s infinite;
}

.hero__sparkle--9 {
  top: 8%;
  left: 40%;
  color: var(--color-accent-cyan);
  width: 5px;
  height: 5px;
  animation: sparkle 4.8s ease-in-out 0.3s infinite;
}

.hero__sparkle--10 {
  top: 65%;
  right: 35%;
  color: var(--color-primary);
  width: 7px;
  height: 7px;
  animation: sparkle 3.6s ease-in-out 1.8s infinite;
}

.hero__sparkle--11 {
  bottom: 15%;
  left: 35%;
  color: var(--color-accent-pink);
  width: 4px;
  height: 4px;
  animation: sparkle 5.2s ease-in-out 0.6s infinite;
}

.hero__sparkle--12 {
  top: 35%;
  right: 40%;
  color: var(--color-accent-blue);
  width: 6px;
  height: 6px;
  animation: sparkle 3.4s ease-in-out 2.2s infinite;
}

.hero__sparkle--13 {
  bottom: 50%;
  left: 55%;
  color: var(--color-primary-light);
  width: 5px;
  height: 5px;
  animation: sparkle 4.6s ease-in-out 1.0s infinite;
}

.hero__sparkle--14 {
  top: 75%;
  left: 15%;
  color: var(--color-accent-cyan);
  width: 7px;
  height: 7px;
  animation: sparkle 3.9s ease-in-out 1.5s infinite;
}

.hero__sparkle--15 {
  top: 20%;
  left: 60%;
  color: var(--color-accent-pink);
  width: 4px;
  height: 4px;
  animation: sparkle 4.3s ease-in-out 2.8s infinite;
}

.hero__sparkle--16 {
  bottom: 25%;
  right: 45%;
  color: var(--color-primary);
  width: 6px;
  height: 6px;
  animation: sparkle 3.7s ease-in-out 0.2s infinite;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
  40% {
    opacity: 0.7;
    transform: scale(1.2) rotate(90deg);
  }
  60% {
    opacity: 1;
    transform: scale(0.8) rotate(135deg);
  }
  80% {
    opacity: 0.3;
    transform: scale(0.5) rotate(180deg);
  }
}


/* ==========================================================================
   Stage Spotlights - diagonal light beams from above
   ========================================================================== */

.hero__spotlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hero__spotlights.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.hero__spotlight {
  position: absolute;
  top: -10%;
  width: 120px;
  height: 130%;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 70%
  );
  clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
  animation: spotlight-sweep 6s ease-in-out infinite;
  mix-blend-mode: overlay;
}

.hero__spotlight--1 {
  left: 5%;
  width: 100px;
  animation-delay: 0s;
  animation-duration: 5.5s;
  transform: rotate(-8deg);
  background: linear-gradient(
    180deg,
    rgba(200, 160, 255, 0.35) 0%,
    rgba(200, 160, 255, 0.06) 40%,
    transparent 75%
  );
}

.hero__spotlight--2 {
  left: 25%;
  width: 140px;
  animation-delay: 1.2s;
  animation-duration: 6.5s;
  transform: rotate(-3deg);
  background: linear-gradient(
    180deg,
    rgba(100, 200, 255, 0.3) 0%,
    rgba(100, 200, 255, 0.06) 35%,
    transparent 70%
  );
}

.hero__spotlight--3 {
  left: 48%;
  width: 110px;
  animation-delay: 0.5s;
  animation-duration: 5s;
  transform: rotate(2deg);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 65%
  );
}

.hero__spotlight--4 {
  left: 68%;
  width: 130px;
  animation-delay: 2s;
  animation-duration: 7s;
  transform: rotate(5deg);
  background: linear-gradient(
    180deg,
    rgba(255, 130, 200, 0.3) 0%,
    rgba(255, 130, 200, 0.06) 35%,
    transparent 70%
  );
}

.hero__spotlight--5 {
  left: 88%;
  width: 100px;
  animation-delay: 0.8s;
  animation-duration: 5.8s;
  transform: rotate(10deg);
  background: linear-gradient(
    180deg,
    rgba(160, 200, 255, 0.35) 0%,
    rgba(160, 200, 255, 0.06) 40%,
    transparent 75%
  );
}

@keyframes spotlight-sweep {
  0% {
    opacity: 0;
    transform: rotate(var(--r, -5deg)) translateX(-20px);
  }
  20% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
    transform: rotate(var(--r, 3deg)) translateX(20px);
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--r, -5deg)) translateX(-20px);
  }
}

/* ==========================================================================
   Penlight Effects - concert penlight waving
   ========================================================================== */

.hero__penlights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 1枚目以外ではペンライト非表示 */
.hero__penlights.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.hero__penlight {
  position: absolute;
  bottom: 15%;
  width: 6px;
  height: 70px;
  opacity: 0;
  transform-origin: bottom center;
  animation: penlight-wave 3s ease-in-out infinite;
  /* 持ち手部分 */
  background: linear-gradient(
    to top,
    #555 0%,
    #888 15%,
    #aaa 20%,
    currentColor 22%,
    currentColor 100%
  );
  border-radius: 3px 3px 2px 2px;
}

/* 光る先端のグロー */
.hero__penlight::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, white 20%, currentColor 60%, transparent 100%);
  box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 50px currentColor, 0 0 80px currentColor;
  filter: blur(1.5px);
}

/* 上方向への光線ビーム */
.hero__penlight::after {
  content: '';
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 120px solid currentColor;
  opacity: 0.15;
  filter: blur(4px);
}

/* Pink penlights */
.hero__penlight--1 { left: 5%; color: #ff69b4; height: 55px; animation-delay: 0s; animation-duration: 2.8s; }
.hero__penlight--2 { left: 15%; color: #ff85c8; height: 50px; animation-delay: 0.3s; animation-duration: 3.2s; }
.hero__penlight--3 { left: 25%; color: #ff69b4; height: 60px; animation-delay: 0.7s; animation-duration: 2.6s; }

/* Blue penlights */
.hero__penlight--4 { left: 35%; color: #69d4ff; height: 52px; animation-delay: 0.2s; animation-duration: 3.0s; }
.hero__penlight--5 { left: 45%; color: #85dfff; height: 58px; animation-delay: 0.5s; animation-duration: 2.9s; }
.hero__penlight--6 { left: 55%; color: #69d4ff; height: 48px; animation-delay: 0.9s; animation-duration: 3.3s; }

/* Purple penlights */
.hero__penlight--7 { left: 65%; color: #c88fff; height: 56px; animation-delay: 0.1s; animation-duration: 2.7s; }
.hero__penlight--8 { left: 75%; color: #d4a5ff; height: 53px; animation-delay: 0.6s; animation-duration: 3.1s; }
.hero__penlight--9 { left: 85%; color: #c88fff; height: 62px; animation-delay: 0.4s; animation-duration: 2.5s; }

/* Mixed colors */
.hero__penlight--10 { left: 10%; color: #ffb86c; height: 50px; animation-delay: 0.8s; animation-duration: 3.4s; }
.hero__penlight--11 { left: 50%; color: #50fa7b; height: 54px; animation-delay: 1.1s; animation-duration: 2.8s; }
.hero__penlight--12 { left: 90%; color: #ff79c6; height: 57px; animation-delay: 0.15s; animation-duration: 3.0s; }

@keyframes penlight-wave {
  0% {
    opacity: 0;
    transform: rotate(-15deg) translateY(10px);
  }
  15% {
    opacity: 0.8;
  }
  30% {
    transform: rotate(12deg) translateY(-5px);
  }
  50% {
    opacity: 0.9;
    transform: rotate(-10deg) translateY(0);
  }
  70% {
    transform: rotate(15deg) translateY(-3px);
  }
  85% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: rotate(-15deg) translateY(10px);
  }
}

/* ==========================================================================
   Swiper Container & Slides
   ========================================================================== */

/* ── Single KV (1枚表示) ── */
.hero__kv-single {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.hero__swiper {
  position: relative;
  width: 100%;
  height: 100svh;
  z-index: 3;
}

.hero__slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── Slide 1: Key Visual Image ── */
.hero__slide--kv {
  align-items: center;
}

/* Full cover KV — PC画像をスマホでも全画面カバー表示 */
.hero__kv-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* スマホ：16:9画像を縦画面でカバー → 横が両端切られる。
   さくらの顔は画像中央〜やや左にあるため、X位置を 40% に左寄せして顔が画面中央に来るよう調整 */
@media (max-width: 768px) {
  .hero__kv-cover {
    object-position: 42% 35%;
  }
}

@media (max-width: 479px) {
  .hero__kv-cover {
    object-position: 38% 32%;
  }
}

/* 極小機（細長い画面）はさらに左寄せ */
@media (max-width: 360px) {
  .hero__kv-cover {
    object-position: 35% 30%;
  }
}

/* KVスライドの上にライトエフェクト */
.hero__slide--kv::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(200, 160, 255, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 120, 200, 0.1) 0%, transparent 50%),
    linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.3) 100%);
}

/* Legacy slide-img (kept for backward compat) */
.hero__slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__slide-img--sp {
  object-position: center bottom;
}

.hero__slide-img--pc {
  display: none;
  object-position: center bottom;
}

/* ── Slide 2-3: Talent Row ── */
.hero__slide--talents {
  background: transparent;
  align-items: flex-end;
  justify-content: center;
}

.hero__talents-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 0;
  overflow: hidden;
  transform: scale(1.65) translateY(6%);
  transform-origin: center bottom;
}

.hero__talent-item {
  position: relative;
  flex: 0 0 auto;
  width: 36%;
  display: block;
  text-decoration: none;
  margin-right: -12%;
  margin-bottom: -12%;
  z-index: 1;
}

/* Center character gets highest z-index and is slightly larger */
.hero__talent-item:nth-child(3) {
  z-index: 5;
  width: 40%;
}

.hero__talent-item:nth-child(2),
.hero__talent-item:nth-child(4) {
  z-index: 3;
  width: 38%;
}

.hero__talent-item:first-child,
.hero__talent-item:last-child {
  z-index: 1;
}

.hero__talent-item:last-child {
  margin-right: 0;
}

.hero__talent-item:hover {
  z-index: 10;
}

.hero__talent-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__talent-item:hover .hero__talent-img {
  transform: scale(1.04) translateY(-4px);
}

/* Scale up characters with smaller proportions to match others */
.hero__talent-img--scale-up {
  transform: scale(1.15) translateY(0%);
  transform-origin: center bottom;
}

.hero__talent-item:hover .hero__talent-img--scale-up {
  transform: scale(1.19) translateY(-2%);
}

/* Push talent behind neighbors (hide tail etc.) */
.hero__talent-item:has(.hero__talent-img--scale-up) {
  z-index: 0 !important;
}

/* Hide talent name labels */
.hero__talent-name {
  display: none;
}


/* ==========================================================================
   Vertical Pagination
   ========================================================================== */

.hero__pagination-wrap {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hero__pag-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  color: var(--color-accent-pink);
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}

.hero__pag-arrow:hover {
  transform: scale(1.3);
}

.hero__pagination {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2);
  width: auto !important;
}

.hero__pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 2px solid var(--color-accent-pink);
  opacity: 1;
  margin: 0 !important;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.hero__pagination .swiper-pagination-bullet-active {
  background: var(--color-accent-pink);
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(232, 123, 197, 0.5);
}


/* ==========================================================================
   Scroll Indicator (bottom center)
   ========================================================================== */

.hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
}

.hero__scroll-text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  animation: scrollTextPulse 2.5s ease-in-out infinite;
}

.hero__scroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  animation: heroScrollBounce 2s ease-in-out infinite;
  position: relative;
}

/* Ripple ring around scroll icon */
.hero__scroll-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--color-accent-pink);
  border-radius: 50%;
  opacity: 0;
  animation: scrollRipple 2.5s ease-out infinite;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes scrollTextPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes scrollRipple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero__bg-text,
  .hero__deco,
  .hero__sparkle,
  .hero__scroll-text,
  .hero__scroll-icon,
  .hero__scroll-icon::before {
    animation: none;
  }

  .hero__sparkle {
    display: none;
  }
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* ── スマホ共通 (max 839px) — タレント3人表示 ── */
@media (max-width: 839px) {
  /* 4番目・5番目を完全に非表示 */
  .hero__talent-item:nth-child(4),
  .hero__talent-item:nth-child(5) {
    display: none !important;
  }

  /* スライド自体を中央寄せに変更 */
  .hero__slide--talents {
    align-items: center !important;
    justify-content: center !important;
  }

  /* 3人用レイアウト — 画面中央に大きく配置 */
  .hero__talents-row {
    transform: scale(1.65) translateY(6%);
    transform-origin: center bottom;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    padding: 0;
  }

  /* 全アイテム共通リセット */
  .hero__talent-item,
  .hero__talent-item:first-child,
  .hero__talent-item:nth-child(2),
  .hero__talent-item:nth-child(3),
  .hero__talent-item:last-child {
    flex: 0 0 auto;
    margin-right: -12%;
    margin-bottom: 0;
  }

  /* 左 (1番目) */
  .hero__talent-item:nth-child(1) {
    width: 36% !important;
    z-index: 2 !important;
  }

  /* 中央 (2番目) — 一番大きく・手前に */
  .hero__talent-item:nth-child(2) {
    width: 40% !important;
    z-index: 5 !important;
  }

  /* 右 (3番目) */
  .hero__talent-item:nth-child(3) {
    width: 36% !important;
    z-index: 2 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 480px) {
  .hero__talent-name {
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-3);
  }
}

@media (min-width: 840px) {
  .hero {
    height: 100svh;
    max-height: 100svh;
  }

  .hero__swiper {
    width: 100%;
    height: 100%;
    max-height: 100svh;
  }

  .hero__slide-img--sp {
    display: none;
  }

  .hero__slide-img--pc {
    display: block;
  }

  .hero__bg-text {
    -webkit-text-stroke: 3px rgba(200, 160, 230, 0.12);
  }

  /* Larger decorations on tablet */
  .hero__deco--1 { width: 180px; height: 22px; }
  .hero__deco--2 { width: 110px; height: 200px; }
  .hero__deco--3 { width: 150px; height: 18px; }
  .hero__deco--6 { width: 40px; height: 40px; }
  .hero__deco--7 { width: 100px; height: 12px; }

  .hero__talents-row {
    padding: 0 var(--space-8);
  }

  .hero__talent-item {
    max-width: 320px;
  }

  .hero__talent-name {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
  }

  .hero__pagination-wrap {
    left: var(--space-6);
  }

  .hero__scroll {
    bottom: var(--space-3);
  }

  .hero__scroll-text {
    font-size: 0.7rem;
  }

  .hero__scroll-icon {
    width: 36px;
    height: 36px;
  }

  /* Larger sparkles on tablet */
  .hero__sparkle--2 { width: 10px; height: 10px; }
  .hero__sparkle--5 { width: 9px; height: 9px; }
  .hero__sparkle--8 { width: 10px; height: 10px; }
}

/* ── iPad / Tablet (840px〜1279px) ── */
@media (min-width: 840px) and (max-width: 1279px) {
  /* タレントをもっと大きく表示 */
  .hero__talents-row {
    transform: scale(1.45) translateY(4%);
    transform-origin: center bottom;
    padding: 0 var(--space-4);
  }

  .hero__talent-item {
    max-width: 260px;
    margin-right: -10%;
    margin-bottom: -8%;
  }

  .hero__talent-item:nth-child(3) {
    width: 38%;
  }

  .hero__talent-item:nth-child(2),
  .hero__talent-item:nth-child(4) {
    width: 36%;
  }

  .hero__talent-item:first-child,
  .hero__talent-item:last-child {
    width: 34%;
  }

  /* デコレーションを少し小さく */
  .hero__deco--2 { width: 80px; height: 140px; }
  .hero__deco--1 { width: 140px; height: 18px; }
  .hero__deco--3 { width: 110px; height: 14px; }
  .hero__deco--5 { width: 40px; height: 70px; }
  .hero__deco--10 { width: 28px; height: 48px; }
  .hero__deco--13 { width: 40px; height: 40px; }

  /* 背景テキストを少し小さく */
  .hero__bg-text {
    font-size: clamp(5rem, 14vw, 12rem);
  }
}

/* ── PC (1280px+) ── */
@media (min-width: 1280px) {
  .hero__swiper {
    max-height: 92svh;
  }

  .hero__bg-text {
    -webkit-text-stroke: 3px rgba(200, 160, 230, 0.1);
  }

  /* Even larger decorations */
  .hero__deco--1 { width: 220px; height: 26px; top: 10%; right: 8%; }
  .hero__deco--2 { width: 140px; height: 260px; top: 3%; left: 6%; }
  .hero__deco--3 { width: 180px; height: 20px; bottom: 15%; }
  .hero__deco--4 { width: 80px; height: 14px; right: 4%; }
  .hero__deco--5 { width: 70px; height: 130px; right: 8%; }
  .hero__deco--6 { width: 50px; height: 50px; }
  .hero__deco--7 { width: 120px; height: 14px; }

  .hero__talents-row {
    padding: 0 var(--space-12);
    gap: 0;
  }

  .hero__talent-item {
    max-width: 360px;
  }

  .hero__talent-name {
    font-size: var(--text-lg);
    padding: var(--space-4) var(--space-5);
  }

  .hero__pagination-wrap {
    left: var(--space-8);
    gap: var(--space-3);
  }

  .hero__pag-arrow {
    width: 32px;
    height: 32px;
  }

  .hero__pagination .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
  }

  .hero__scroll-text {
    font-size: 0.75rem;
  }

  .hero__scroll-icon {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1600px) {
  .hero__swiper {
    max-height: 94svh;
  }

  .hero__talent-item {
    max-width: 400px;
  }
}


/* ==========================================================================
   Hero Catchphrase - Bold statement text at bottom
   ========================================================================== */

.hero__catchphrase {
  position: absolute;
  bottom: 7rem;
  left: 0;
  right: 0;
  z-index: 15;
  padding: 0 var(--space-6);
  pointer-events: none;
}

.hero__catchphrase-main {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  padding-bottom: 0;
  opacity: 0; /* Hidden until JS animation reveals */
}

@media (min-width: 840px) {
  .hero__catchphrase {
    padding: 0 var(--space-8);
  }

  .hero__catchphrase-main {
    font-size: clamp(2rem, 4vw, 3.5rem);
    padding-bottom: var(--space-12);
  }
}

@media (min-width: 1280px) {
  .hero__catchphrase {
    padding: 0 var(--space-12);
  }

  .hero__catchphrase-main {
    font-size: clamp(2.5rem, 3.5vw, 4rem);
  }
}


/* ==========================================================================
   Glitch Noise Overlay
   ========================================================================== */

.hero__glitch-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  .hero__glitch-canvas {
    display: none;
  }
}

/* ============================================================
   桜の花びら / 雪 / 妖精の光 - パーティクルエフェクト
   (AOI SAKURA: 桜の妖精×雪女のハーフ)
   ============================================================ */

/* ── 共通コンテナ ── */
.hero__petals,
.hero__snows,
.hero__fairies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero__petals  { z-index: 4; }
.hero__snows   { z-index: 5; }
.hero__fairies { z-index: 6; }

/* ============================================================
   ① 桜の花びら
   ============================================================ */
.hero__petal {
  position: absolute;
  top: -40px;
  width: 14px;
  height: 14px;
  background: radial-gradient(ellipse at 30% 30%, #ffe4ec 0%, #f8bbd0 55%, rgba(248,187,208,0) 100%);
  border-radius: 50% 10% 50% 50%;
  opacity: 0;
  animation: petalFall 14s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(244, 143, 177, 0.25));
}

@keyframes petalFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.85; }
  50%  { transform: translate3d(40px, 50vh, 0) rotate(280deg); }
  92%  { opacity: 0.85; }
  100% { transform: translate3d(-30px, 115vh, 0) rotate(540deg); opacity: 0; }
}

.hero__petal:nth-child(1)  { left:  5%; animation-delay:  0s;  animation-duration: 13s; width: 16px; height: 16px; }
.hero__petal:nth-child(2)  { left: 12%; animation-delay:  3s;  animation-duration: 17s; width: 11px; height: 11px; }
.hero__petal:nth-child(3)  { left: 22%; animation-delay:  6s;  animation-duration: 14s; width: 15px; height: 15px; }
.hero__petal:nth-child(4)  { left: 32%; animation-delay:  1s;  animation-duration: 19s; width: 12px; height: 12px; }
.hero__petal:nth-child(5)  { left: 42%; animation-delay:  9s;  animation-duration: 12s; width: 17px; height: 17px; }
.hero__petal:nth-child(6)  { left: 52%; animation-delay:  4s;  animation-duration: 16s; width: 13px; height: 13px; }
.hero__petal:nth-child(7)  { left: 62%; animation-delay:  7s;  animation-duration: 15s; width: 14px; height: 14px; }
.hero__petal:nth-child(8)  { left: 72%; animation-delay:  2s;  animation-duration: 18s; width: 11px; height: 11px; }
.hero__petal:nth-child(9)  { left: 80%; animation-delay: 11s;  animation-duration: 13s; width: 16px; height: 16px; }
.hero__petal:nth-child(10) { left: 88%; animation-delay:  5s;  animation-duration: 17s; width: 12px; height: 12px; }
.hero__petal:nth-child(11) { left: 38%; animation-delay: 10s;  animation-duration: 14s; width: 14px; height: 14px; }
.hero__petal:nth-child(12) { left: 65%; animation-delay:  8s;  animation-duration: 16s; width: 13px; height: 13px; }

/* ============================================================
   ② 雪の結晶
   ============================================================ */
.hero__snow {
  position: absolute;
  top: -20px;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #ffffff 25%, rgba(220,235,255,0.6) 65%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
  opacity: 0;
  animation: snowFall 16s linear infinite;
  box-shadow: 0 0 6px rgba(255,255,255,0.7), 0 0 12px rgba(180,210,255,0.4);
}

@keyframes snowFall {
  0%   { transform: translate3d(0, -5vh, 0); opacity: 0; }
  10%  { opacity: 0.95; }
  50%  { transform: translate3d(20px, 55vh, 0); }
  90%  { opacity: 0.95; }
  100% { transform: translate3d(-15px, 115vh, 0); opacity: 0; }
}

.hero__snow:nth-child(1)  { left:  3%; animation-delay:  0s;   animation-duration: 15s; width: 7px; height: 7px; }
.hero__snow:nth-child(2)  { left: 10%; animation-delay:  2.5s; animation-duration: 18s; width: 4px; height: 4px; }
.hero__snow:nth-child(3)  { left: 16%; animation-delay:  5s;   animation-duration: 14s; width: 6px; height: 6px; }
.hero__snow:nth-child(4)  { left: 24%; animation-delay:  1.5s; animation-duration: 17s; width: 5px; height: 5px; }
.hero__snow:nth-child(5)  { left: 30%; animation-delay:  7s;   animation-duration: 16s; width: 8px; height: 8px; }
.hero__snow:nth-child(6)  { left: 38%; animation-delay:  4s;   animation-duration: 19s; width: 5px; height: 5px; }
.hero__snow:nth-child(7)  { left: 46%; animation-delay:  9s;   animation-duration: 13s; width: 6px; height: 6px; }
.hero__snow:nth-child(8)  { left: 54%; animation-delay:  3s;   animation-duration: 15s; width: 4px; height: 4px; }
.hero__snow:nth-child(9)  { left: 60%; animation-delay: 11s;   animation-duration: 18s; width: 7px; height: 7px; }
.hero__snow:nth-child(10) { left: 68%; animation-delay:  6s;   animation-duration: 14s; width: 5px; height: 5px; }
.hero__snow:nth-child(11) { left: 74%; animation-delay:  8s;   animation-duration: 16s; width: 6px; height: 6px; }
.hero__snow:nth-child(12) { left: 82%; animation-delay:  0.5s; animation-duration: 19s; width: 4px; height: 4px; }
.hero__snow:nth-child(13) { left: 88%; animation-delay: 10s;   animation-duration: 15s; width: 7px; height: 7px; }
.hero__snow:nth-child(14) { left: 95%; animation-delay:  4.5s; animation-duration: 17s; width: 5px; height: 5px; }
.hero__snow:nth-child(15) { left: 20%; animation-delay: 13s;   animation-duration: 14s; width: 6px; height: 6px; }
.hero__snow:nth-child(16) { left: 50%; animation-delay: 12s;   animation-duration: 18s; width: 5px; height: 5px; }

/* ============================================================
   ③ 妖精の光（浮遊する光球・キラめき）
   ============================================================ */
.hero__fairy {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(173,216,255,0.85) 40%, rgba(120,180,240,0) 100%);
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.3px);
  animation: fairyFloat 9s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(255,255,255,0.9),
    0 0 20px rgba(173,216,255,0.6),
    0 0 32px rgba(173,216,255,0.3);
}

@keyframes fairyFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.6);            opacity: 0; }
  15%      { opacity: 1; }
  35%      { transform: translate3d(20px, -25px, 0) scale(1.1);     opacity: 1; }
  55%      { transform: translate3d(-15px, -45px, 0) scale(1.3);    opacity: 1; }
  80%      { transform: translate3d(10px, -20px, 0) scale(0.9);     opacity: 0.6; }
}

.hero__fairy:nth-child(1) { left: 15%; top: 32%; animation-delay:  0s;   animation-duration:  8s; }
.hero__fairy:nth-child(2) { left: 28%; top: 55%; animation-delay:  2s;   animation-duration: 10s; }
.hero__fairy:nth-child(3) { left: 40%; top: 28%; animation-delay:  4s;   animation-duration:  9s; }
.hero__fairy:nth-child(4) { left: 55%; top: 48%; animation-delay:  1.5s; animation-duration: 11s; }
.hero__fairy:nth-child(5) { left: 68%; top: 35%; animation-delay:  3s;   animation-duration:  8s; }
.hero__fairy:nth-child(6) { left: 78%; top: 60%; animation-delay:  5s;   animation-duration: 10s; }
.hero__fairy:nth-child(7) { left: 88%; top: 25%; animation-delay:  6.5s; animation-duration:  9s; }
.hero__fairy:nth-child(8) { left: 22%; top: 70%; animation-delay:  4.5s; animation-duration: 11s; }

/* SP（スマホ）では花びら・雪を間引き */
@media (max-width: 640px) {
  .hero__petal:nth-child(n+8),
  .hero__snow:nth-child(n+11),
  .hero__fairy:nth-child(n+6) {
    display: none;
  }
}

/* アクセシビリティ: アニメ削減設定でパーティクル停止 */
@media (prefers-reduced-motion: reduce) {
  .hero__petal,
  .hero__snow,
  .hero__fairy {
    animation: none;
    opacity: 0;
  }
}