/* ==========================================================================
   Seiryu-Theme — Hero Styles (全7タイプ共通・個別)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 共通ベース
   -------------------------------------------------------------------------- */
.seiryu-hero {
  --hero-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 高さバリエーション */
.seiryu-hero--fullscreen { min-height: 100vh; min-height: 100svh; }
.seiryu-hero--large      { min-height: 80vh;  min-height: 80svh;  }
.seiryu-hero--medium     { min-height: 60vh;  min-height: 60svh;  }
.seiryu-hero--custom     { min-height: var(--hero-height); }

/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--overlay-opacity, 0.4);
  pointer-events: none;
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--seiryu-space-6);
  padding-block: var(--seiryu-space-16);
}

/* 水平位置 */
.hero-content--left   { text-align: left; }
.hero-content--center { text-align: center; }
.hero-content--right  { text-align: right; }

/* 垂直位置 */
.seiryu-hero--fullscreen.has-content-top,
.hero-content--v-top    { align-self: flex-start; }
.hero-content--v-center { /* default */ }
.hero-content--v-bottom { align-self: flex-end; }

/* Hero Typography */
.hero-sublabel {
  display: inline-block;
  font-size: var(--seiryu-text-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--seiryu-hero-sublabel-color, var(--seiryu-color-secondary));
  margin-bottom: var(--seiryu-space-4);
  background: rgba(232,93,38,0.12);
  padding: var(--seiryu-space-1) var(--seiryu-space-4);
  border-radius: var(--seiryu-radius-full);
}

.hero-heading {
  font-family: var(--seiryu-font-heading);
  font-size: clamp(var(--seiryu-text-4xl), 6vw, var(--seiryu-text-7xl));
  font-weight: 700;
  line-height: 1.15;
  color: var(--seiryu-hero-heading-color, var(--seiryu-color-text-inverse));
  margin-bottom: var(--seiryu-space-6);
}

.hero-description {
  font-size: clamp(var(--seiryu-text-base), 2vw, var(--seiryu-text-xl));
  color: var(--seiryu-hero-description-color, rgba(255,255,255,0.88));
  max-width: 60ch;
  margin-bottom: var(--seiryu-space-8);
  line-height: 1.7;
}

.hero-content--center .hero-description {
  margin-inline: auto;
}

.hero-content--right .hero-description {
  margin-left: auto;
}

.hero-actions {
  display: flex;
  gap: var(--seiryu-space-4);
  flex-wrap: wrap;
}

.hero-content--center .hero-actions { justify-content: center; }
.hero-content--right  .hero-actions { justify-content: flex-end; }

/* Text direction */
.hero-content--text-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: auto;
  max-width: none;
  min-height: min(70vh, 720px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-content--text-vertical.hero-content--left {
  margin-left: 0;
  margin-right: auto;
}

.hero-content--text-vertical.hero-content--center {
  margin-inline: auto;
  align-items: center;
}

.hero-content--text-vertical.hero-content--right {
  margin-left: auto;
  margin-right: 0;
  align-items: flex-end;
}

.hero-content--text-vertical .hero-sublabel {
  margin-bottom: 0;
  margin-left: var(--seiryu-space-4);
  letter-spacing: 0.08em;
}

.hero-content--text-vertical .hero-heading {
  margin-bottom: 0;
  margin-left: var(--seiryu-space-6);
  line-height: 1.35;
}

.hero-content--text-vertical .hero-description {
  max-width: none;
  max-height: 28em;
  margin-bottom: 0;
  margin-left: var(--seiryu-space-8);
  line-height: 1.9;
}

.hero-content--text-vertical .hero-actions {
  writing-mode: horizontal-tb;
  margin-left: var(--seiryu-space-8);
  align-self: flex-end;
}

.hero-content--text-vertical .hero-heading--typing {
  display: block;
}

/* Scroll Down Indicator — 回転円形スクロールインジケーター */
.scrolldown-indicator {
  position: absolute;
  bottom: 2.5%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  pointer-events: none;
}

.scrolldown-indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/scrolldown_outer.svg') center / contain no-repeat;
  animation: scrolldown-rotate 10s linear infinite;
}

.scrolldown-indicator::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  background: url('../images/scrolldown_arrow.svg') center / contain no-repeat;
}

@keyframes scrolldown-rotate {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

.scrolldown-indicator--simple::before {
  display: none;
}

.scrolldown-indicator--simple {
  width: 44px;
  height: 44px;
  animation: scrolldown-bounce 1.6s ease-in-out infinite;
}

.scrolldown-indicator--simple::after {
  width: 20px;
  height: 20px;
}

@keyframes scrolldown-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

/* --------------------------------------------------------------------------
   2. Static — 背景静止画
   -------------------------------------------------------------------------- */
.seiryu-hero--static .hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-desktop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Ken Burns */
.seiryu-hero--static.has-ken-burns .hero-bg {
  animation: kenBurns 15s ease-in-out infinite alternate;
}

@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* --------------------------------------------------------------------------
   3. Video — 背景動画
   -------------------------------------------------------------------------- */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-video,
.hero-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* prefers-reduced-motion: video is paused via JS */

/* --------------------------------------------------------------------------
   4. Slider — スライダー
   -------------------------------------------------------------------------- */
.seiryu-hero--slider {
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s var(--seiryu-easing-default);
}

.hero-slide.is-active {
  opacity: 1;
}

.seiryu-hero--slider.hero-transition--slide .hero-slide {
  transform: translateX(100%);
  transition: transform 0.8s var(--seiryu-easing-default), opacity 0.1s;
  opacity: 1;
}

.seiryu-hero--slider.hero-transition--slide .hero-slide.is-active {
  transform: translateX(0);
}

.seiryu-hero--slider.hero-transition--slide .hero-slide.is-prev {
  transform: translateX(-100%);
}

.hero-slide .hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-slide-bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-slide .hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-slide .hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-slide .hero-content--text-vertical {
  width: auto;
  min-height: auto;
}

/* Slider arrows */
.slider-nav {}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--seiryu-duration-fast) var(--seiryu-easing-default);
}

.slider-arrow:hover {
  background: rgba(255,255,255,0.35);
}

.slider-arrow--prev { left: var(--seiryu-space-6); }
.slider-arrow--next { right: var(--seiryu-space-6); }

/* Slider dots */
.slider-dots {
  position: absolute;
  bottom: var(--seiryu-space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--seiryu-space-2);
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color var(--seiryu-duration-fast) var(--seiryu-easing-default),
              transform var(--seiryu-duration-fast) var(--seiryu-easing-default);
}

.slider-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}

/* --------------------------------------------------------------------------
   5. Split — 分割スクリーン
   -------------------------------------------------------------------------- */
.seiryu-hero--split {
  flex-direction: row;
  min-height: 70vh;
}

.hero-split__text,
.hero-split__image {
  flex: 1;
  min-height: 400px;
}

.hero-split__text {
  display: flex;
  align-items: center;
  background-color: var(--seiryu-color-bg-dark);
  padding: var(--seiryu-space-12) var(--seiryu-space-8);
}

.hero-split__text .hero-content {
  padding: 0;
  max-width: none;
}

.hero-split__image {
  position: relative;
  overflow: hidden;
}

.hero-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* image right: text left */
.seiryu-hero--split-right .hero-split__text  { order: 1; }
.seiryu-hero--split-right .hero-split__image { order: 2; }

/* image left: image first */
.seiryu-hero--split-left .hero-split__text  { order: 2; }
.seiryu-hero--split-left .hero-split__image { order: 1; }

/* Proportions handled by flex */
.seiryu-hero--split-right .hero-split__text,
.seiryu-hero--split-left  .hero-split__text  { flex: 1 1 50%; }

.seiryu-hero--split-right .hero-split__image,
.seiryu-hero--split-left  .hero-split__image { flex: 1 1 50%; }

@media (max-width: 767px) {
  .seiryu-hero--split {
    flex-direction: column;
  }
  .hero-split__text  { order: 1 !important; min-height: auto; }
  .hero-split__image { order: 2 !important; min-height: 300px; }
}

/* --------------------------------------------------------------------------
   6. Typing — タイピングアニメーション
   -------------------------------------------------------------------------- */
.hero-heading--typing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15em;
  justify-content: center;
}

.hero-content--left .hero-heading--typing  { justify-content: flex-start; }
.hero-content--right .hero-heading--typing { justify-content: flex-end; }

.typing-target {
  display: inline-flex;
  align-items: center;
}

.typing-text {
  color: var(--seiryu-color-secondary);
}

.typing-cursor {
  display: inline-block;
  color: var(--seiryu-color-secondary);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* prefers-reduced-motion: cursor hidden, no blink */
@media (prefers-reduced-motion: reduce) {
  .typing-cursor { animation: none; opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. Gradient — グラデーションアニメーション
   -------------------------------------------------------------------------- */
.seiryu-hero--gradient {
  --gradient-c1: #1a3a5c;
  --gradient-c2: #2563a8;
  --gradient-c3: #e85d26;
  --gradient-duration: 10s;
}

.hero-gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--gradient-c1) 0%,
    var(--gradient-c2) 50%,
    var(--gradient-c3) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift var(--gradient-duration) ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gradient-bg { animation: none; background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   8. Parallax — パララックス視差背景
   -------------------------------------------------------------------------- */
.seiryu-hero--parallax { overflow: hidden; }

.hero-parallax-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--parallax-inset, 20%));
  bottom: calc(-1 * var(--parallax-inset, 20%));
  will-change: transform;
}

.hero-parallax-bg--image {
  background-image: var(--hero-bg-desktop);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.hero-parallax-bg--video {
  overflow: hidden;
}

.hero-parallax-bg--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero-parallax-bg { inset: 0; will-change: auto; }
  .scrolldown-indicator::before { animation: none; }
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* スマホ用背景画像（--hero-bg-mobile が未設定の場合はデスクトップ画像にフォールバック） */
  .seiryu-hero--static .hero-bg,
  .hero-parallax-bg--image {
    background-image: var(--hero-bg-mobile, var(--hero-bg-desktop));
  }

  .hero-slide .hero-bg {
    background-image: var(--hero-slide-bg-mobile, var(--hero-slide-bg-desktop));
  }

  .hero-content {
    padding-block: var(--seiryu-space-8);
  }

  .hero-heading {
    font-size: clamp(var(--seiryu-text-3xl), 8vw, var(--seiryu-text-5xl));
  }

  .hero-description {
    font-size: var(--seiryu-text-base);
  }

  .hero-content--text-vertical {
    writing-mode: horizontal-tb;
    width: 100%;
    max-width: 1200px;
    min-height: auto;
    display: block;
  }

  .hero-content--text-vertical .hero-sublabel,
  .hero-content--text-vertical .hero-heading,
  .hero-content--text-vertical .hero-description,
  .hero-content--text-vertical .hero-actions {
    margin-left: 0;
  }

  .hero-content--text-vertical .hero-sublabel {
    margin-bottom: var(--seiryu-space-4);
  }

  .hero-content--text-vertical .hero-heading {
    margin-bottom: var(--seiryu-space-6);
    line-height: 1.15;
  }

  .hero-content--text-vertical .hero-description {
    max-width: 60ch;
    max-height: none;
    margin-bottom: var(--seiryu-space-8);
    line-height: 1.7;
  }

  .hero-content--center.hero-content--text-vertical .hero-description {
    margin-inline: auto;
  }

  .hero-content--right.hero-content--text-vertical .hero-description {
    margin-left: auto;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-content--center .hero-actions { align-items: center; }

  .slider-arrow {
    width: 36px;
    height: 36px;
  }

  .slider-arrow--prev { left: var(--seiryu-space-3); }
  .slider-arrow--next { right: var(--seiryu-space-3); }

  .scrolldown-indicator {
    width: 90px;
    height: 90px;
  }
  .scrolldown-indicator::after {
    width: 24px;
    height: 24px;
  }

  .scrolldown-indicator--simple {
    width: 36px;
    height: 36px;
  }
  .scrolldown-indicator--simple::after {
    width: 16px;
    height: 16px;
  }
}