/* ==========================================================================
   Hero Section (Vintage Poster Style)
   ========================================================================== */

/* ヒーローコンテナ全体 */
.p-hero--vintage {
  position: relative;
  height: calc(100svh - var(--header-height-pc));
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #ede6d6; /* 添付画像に近いクリームベージュ */
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* 2トーン背景 (上部ティールグリーン) */
.p-hero__bg-split {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* 画面の半分くらいまでをティールに */
  background-color: #03a3a8; /* 添付画像に近い明るい青緑 */
  z-index: 0;
}

/* 粒状感（ノイズテクスチャ）を疑似要素で被せる */
.p-hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 10; /* 最前面にかけてビンテージ感を出す */
}

/* 既存コンセプト：右側の画像 */
.p-hero__image-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%; /* 右側60%程度 */
  height: 80%; /* 縦幅の80% */
  background-image: url('/assets/images/hero-section_background-img03.png');
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* ポスター風の装飾テキスト */
.p-hero__meta {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #111;
  z-index: 2;
  text-transform: uppercase;
}
.p-hero__meta--top-right {
  top: 40px;
  right: 40px;
  text-align: right;
}
.p-hero__meta--bottom-left {
  bottom: 40px;
  left: 40px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
}
.p-hero__meta--bottom-right {
  bottom: 40px;
  right: 40px;
  text-align: right;
}

/* 幾何学図形：オレンジの三角形 */
.p-hero__deco-triangle {
  position: absolute;
  left: 15%;
  bottom: 10%;
  width: 250px;
  height: 250px;
  background-color: #ea5025; /* 添付画像に近いバーミリオンオレンジ */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 2;
  mix-blend-mode: multiply;
}

/* 幾何学図形：ティールグリーンのグリッド模様 */
.p-hero__deco-grid {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 200px;
  height: 200px;
  background-size: 20px 20px;
  background-image: 
    linear-gradient(to right, #03a3a8 2px, transparent 2px),
    linear-gradient(to bottom, #03a3a8 2px, transparent 2px);
  z-index: 0;
}


/* インナーコンテナ */
.p-hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5; /* 画像や背景よりも手前 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(20px, 4svh, 80px);
  padding-bottom: clamp(20px, 4svh, 80px);
}

/* メインコンテンツ（左側配置） */
.p-hero__content {
  position: relative;
  width: 100%;
}

/* 極太タイポグラフィ (INNOVATE NOW) */
.p-hero__headline {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, min(12vw, 18svh), 18rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  margin-bottom: clamp(16px, 3svh, 40px);
  text-transform: uppercase;
}

.p-hero__headline-top {
  color: #111; /* ティール背景の上に黒 */
  display: block;
}

.p-hero__headline-bottom {
  /* クリーム色背景の上でティール色で表示、またはアウトライン */
  color: #ede6d6; 
  -webkit-text-stroke: 3px #111; /* 文字色を背景と同じにし、黒の縁取り */
  text-shadow: 4px 4px 0 #03a3a8; /* ティールの影 */
  display: block;
}

/* テキストボックス（説明文とボタン） */
.p-hero__text-box {
  background-color: #ede6d6; /* クリーム色のボックスで視認性確保 */
  padding: 24px;
  border: 2px solid #111;
  max-width: 500px;
  box-shadow: 8px 8px 0 var(--color-shadow);
}

.p-hero__lead {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* ビンテージ風ボタン */
.c-button--vintage {
  display: inline-block;
  background-color: #111;
  color: #ede6d6;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid #111;
  transition: all 0.3s ease;
  text-decoration: none;
}
.c-button--vintage:hover {
  background-color: #ea5025;
  color: #111;
  box-shadow: 4px 4px 0 var(--color-shadow);
  transform: translate(-4px, -4px);
}


/* ==========================================================================
   Hero Entrance Animations
   ========================================================================== */

/* --- Keyframes --- */
@keyframes heroWipeDown {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}

@keyframes heroSlideLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroSlideRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroScaleRotate {
  from { opacity: 0; transform: scale(0) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes heroGridFade {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes heroMetaFade {
  from { opacity: 0; letter-spacing: 0.3em; }
  to   { opacity: 1; letter-spacing: 0.1em; }
}

@keyframes heroImageReveal {
  from { opacity: 0; clip-path: inset(0 0 0 100%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0%); }
}

@keyframes heroKenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.05) translate(-1%, -1%); }
  100% { transform: scale(1) translate(0, 0); }
}

@keyframes heroPulseNoise {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1.0; }
}

/* --- 各要素のアニメーション適用 --- */

/* 背景スプリット：上からワイプダウン */
.p-hero__bg-split {
  animation: heroWipeDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s both;
}

/* 背景画像：右からスライドイン + Ken Burns ループ */
.p-hero__image-bg {
  animation: heroImageReveal 1.0s cubic-bezier(0.25, 1, 0.5, 1) 0.3s both,
             heroKenBurns 20s ease-in-out 2s infinite;
}

/* 見出し上段「INNOVATE」：左からスライドイン */
.p-hero__headline-top {
  animation: heroSlideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* 見出し下段「NOW」：右からスライドイン（少し遅延） */
.p-hero__headline-bottom {
  animation: heroSlideRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

/* テキストボックス：下からフェードアップ */
.p-hero__text-box {
  animation: heroFadeUp 0.7s cubic-bezier(0.25, 1, 0.5, 1) 1.0s both;
}

/* 装飾三角形：スピンしながらスケールイン */
.p-hero__deco-triangle {
  animation: heroScaleRotate 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
}

/* 装飾グリッド：スケールしながらフェードイン */
.p-hero__deco-grid {
  animation: heroGridFade 0.8s ease-out 1.4s both;
}

/* メタテキスト：タイプライター風にレタースペーシングを縮めながらフェードイン */
.p-hero__meta--top-right {
  animation: heroMetaFade 0.6s ease-out 1.5s both;
}
.p-hero__meta--bottom-left {
  animation: heroMetaFade 0.6s ease-out 1.7s both;
}
.p-hero__meta--bottom-right {
  animation: heroMetaFade 0.6s ease-out 1.9s both;
}

/* ノイズ：微かな脈動ループ */
.p-hero__noise {
  animation: heroPulseNoise 6s ease-in-out infinite;
}


/* レスポンシブ (スマホ) */
@media (max-width: 900px) {
  .p-hero--vintage {
    height: calc(100svh - var(--header-height-sp));
    min-height: auto;
    padding: 0;
  }
  
  .p-hero__bg-split {
    height: 40%;
  }

  .p-hero__image-bg {
    width: 90%;
    height: 45%;
    top: auto;
    bottom: clamp(180px, 25svh, 280px); /* テキストボックスの領域を確保 */
    right: 0;
    opacity: 1; /* 不透明に戻してポスター感を維持 */
  }

  .p-hero__headline {
    font-size: clamp(5rem, 15vw, 8rem);
  }

  .p-hero__headline-bottom {
    -webkit-text-stroke: 1px #111; /* スマホでは縁取りを更に細く */
    text-shadow: 3px 3px 0 #03a3a8;
  }

  .p-hero__meta {
    /* 隠さずにサイズを小さくして残す */
    display: block;
    font-size: 0.85rem;
  }
  .p-hero__meta--top-right {
    top: 20px;
    right: 20px;
  }
  .p-hero__meta--bottom-left {
    bottom: 20px;
    left: 20px;
  }
  .p-hero__meta--bottom-right {
    bottom: 20px;
    right: 20px;
  }

  .p-hero__deco-triangle {
    width: 120px;
    height: 120px;
    bottom: clamp(180px, 25svh, 280px);
    left: 2%;
  }
  
  .p-hero__deco-grid {
    /* 隠さずに小さくして残す */
    display: block;
    width: 120px;
    height: 120px;
    bottom: clamp(200px, 28svh, 300px);
    right: 5%;
  }

  .p-hero__content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .p-hero__text-box {
    margin-top: auto; /* ヒーローセクションの最下部に配置 */
    max-width: 100%;
    box-shadow: 4px 4px 0 var(--color-shadow);
  }
}