/* ============================================
   ACJ2026 add.css 最適化版（2026 KV 専用）
   - 重複削除
   - 競合解消
   - ロゴ演出固定
   - シャドウ / Heat / パーティクル 最適化
============================================ */

/* --------------------------------------------
  Navigation
--------------------------------------------- */
.wrapper_navigation {
  background: linear-gradient(
    to right,
    rgba(50, 4, 71, 1) 1%,
    rgba(180, 22, 230, 1) 48%,
    rgba(170, 41, 231, 1) 73%,
    rgba(60, 8, 81, 1) 100%
  );
  color: #fff;
  padding: 10px 20px;
}

@media (max-width: 991px) {
  .nc_navigations {
    background-color: rgba(26, 5, 36);
  }
}

/* --------------------------------------------
  KV Wrapper
--------------------------------------------- */
.kv-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ------------------------------
   共通（背景レイヤー）
------------------------------ */
.kv-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.8s ease, transform 6s ease;
}

.kv-bg.active {
  opacity: 1;
  transform: scale(1);
}


/* ------------------------------
   PC デフォルト（最上位）
------------------------------ */
.bg-1 { background-image: url("../images/ACJ2026_KV_Oji_PC.webp"); }
.bg-2 { background-image: url("../images/ACJ2026_KV_Mayuka_PC.webp"); }
.bg-3 { background-image: url("../images/ACJ2026_KV_Okami_PC.webp"); }
.bg-4 { background-image: url("../images/ACJ2026_KV_Riku_PC.webp"); }
.bg-5 { background-image: url("../images/ACJ2026_KV_Ryuki_PC.webp"); }
.bg-6 { background-image: url("../images/ACJ2026_KV_Sake_PC.webp"); }
.bg-7 { background-image: url("../images/ACJ2026_KV_Wat_PC.webp"); }


/* ------------------------------
   タブレット（768px〜1024px）
------------------------------ */
@media (max-width: 1024px) {
  .bg-1 { background-image: url("../images/ACJ2026_KV_Oji_TB.webp"); }
  .bg-2 { background-image: url("../images/ACJ2026_KV_Mayuka_TB.webp"); }
  .bg-3 { background-image: url("../images/ACJ2026_KV_Okami_TB.webp"); }
  .bg-4 { background-image: url("../images/ACJ2026_KV_Riku_TB.webp"); }
  .bg-5 { background-image: url("../images/ACJ2026_KV_Ryuki_TB.webp"); }
  .bg-6 { background-image: url("../images/ACJ2026_KV_Sake_TB.webp"); }
  .bg-7 { background-image: url("../images/ACJ2026_KV_Wat_TB.webp"); }
}


/* ------------------------------
   スマホ（〜767px）
------------------------------ */
@media (max-width: 767px) {
  .bg-1 { background-image: url("../images/ACJ2026_KV_Oji_SP.webp"); }
  .bg-2 { background-image: url("../images/ACJ2026_KV_Mayuka_SP.webp"); }
  .bg-3 { background-image: url("../images/ACJ2026_KV_Okami_SP.webp"); }
  .bg-4 { background-image: url("../images/ACJ2026_KV_Riku_SP.webp"); }
  .bg-5 { background-image: url("../images/ACJ2026_KV_Ryuki_SP.webp"); }
  .bg-6 { background-image: url("../images/ACJ2026_KV_Sake_SP.webp"); }
  .bg-7 { background-image: url("../images/ACJ2026_KV_Wat_SP.webp"); }
}


/* 紫オーバーレイ */
.kv-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(182, 0, 128, 0.36), #000);
  pointer-events: none;
  z-index: 8;
}

/* --------------------------------------------
  Logo Sequence（最適化版）
--------------------------------------------- */
.kv-content {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 20;
  width: 100%;
  height: 100vh;
}

/* 初期状態：非表示＋下からフェードイン */
.kv-mark,
.kv-title {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* フェードイン */
.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) translateY(0) !important;
}

/* 設定：画像100%で収める */
.kv-mark img,
.kv-title img {
  width: 100%;
}

/* PC（デフォルト）--------------------------- */
.kv-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
}

.kv-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
}

/* フェードアウト */
.fade-out {
  opacity: 0 !important;
  transform: translate(-50%, -50%) translateY(-20px) !important;
  transition: opacity .8s ease, transform .8s ease;
}


/* --------------------------------------------
   ★ タブレット専用（768〜1024px）
   → ロゴを大きく（50%〜60%）
--------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {

  .kv-mark {
    width: 55%;         /* ← PCよりはっきり大きく */
    top: 48%;
  }

  .kv-title {
    width: 55%;         /* ← 同じく大きく */
    top: calc(50% + 90px);
  }
}


/* --------------------------------------------
   ★ スマホ専用（〜768px）
--------------------------------------------- */
@media (max-width: 768px) {

  .kv-mark {
    width: 85%;
    top: 43%;
    left: 50%;
  }

  .kv-title {
    width: 85%;
    top: calc(50% + 50px);
    left: 50%;
  }
}

/* --------------------------------------------
  Particle Burst Logo Canvas
--------------------------------------------- */
.kv-particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}
.kv-particle-canvas.is-hidden {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* --------------------------------------------
  仕上げパーティクル Canvas
--------------------------------------------- */
.kv-particle-finish {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* --------------------------------------------
  Heat Particle Field（集中 / 拡散）
--------------------------------------------- */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 12;
}

.heat-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(200, 100, 255, 0.7);
}

.heat-particle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 400%;
  transform: translate(-50%, -50%) rotate(var(--angle));
  background: linear-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  border-radius: 50%;
  opacity: 0.25;
  filter: blur(8px);
}

/* 熱上昇アニメ */
@keyframes heatRise {
  0% { opacity: 0; transform: translate(0,0) scale(0.6); }
  20% { opacity: 1; transform: translate(0,-40px) scale(1); }
  50% { transform: translate(0,-90px) scale(0.7); }
  80% { opacity:.8; transform: translate(0,-150px) scale(0.5); }
  100% { opacity:0; transform: translate(0,-220px) scale(0.3); }
}

/* 集中 */
@keyframes particleFocus {
  0% { transform: translate(0,-120px) scale(0.4); opacity:1; }
  100% { transform: translate(0,-200px) scale(0.05); opacity:0; }
}

/* 拡散 */
@keyframes particleSpread {
  0% { transform: translate(0,-120px) scale(0.4); opacity:1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0.05); opacity:0; }
}

/* --------------------------------------------
  Heat Noise Canvas（熱揺らぎ）
--------------------------------------------- */
.kv-heat-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.35;
  z-index: 6;
}

/* --------------------------------------------
  Shadow Motion（type5 スペシャル影演出）
--------------------------------------------- */
.kv-shadow-overlay {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(1.1);

  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.55), rgba(0,0,0,0.2) 60%, rgba(0,0,0,0)),
    linear-gradient(110deg, rgba(0,0,0,0.65), rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 80%);
}

.kv-wrapper[data-kv-type="shadow"] .kv-shadow-overlay {
  opacity: 1;
  animation:
    kvShadowRollStrong 9s ease-in-out infinite,
    kvShadowPulse 4.5s ease-in-out infinite;
}

@keyframes kvShadowRollStrong {
  0% { transform: translateX(-18%) translateY(-6%) rotate(-6deg) scale(1.1); }
  25% { transform: translateX(6%) translateY(4%) rotate(8deg) scale(1.1); }
  50% { transform: translateX(20%) translateY(-2%) rotate(-10deg) scale(1.1); }
  75% { transform: translateX(5%) translateY(8%) rotate(6deg) scale(1.1); }
  100% { transform: translateX(-18%) translateY(-6%) rotate(-6deg) scale(1.1); }
}

@keyframes kvShadowPulse {
  0%,100% { opacity:0.55; }
  50% { opacity:0.72; }
}

/* --------------------------------------------
  風ストローク（今回削除 → 無効化）
--------------------------------------------- */
.wind-layer,
.wind-stroke-svg,
.wind-line {
  display: none !important;
}



@keyframes aromaRise {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(2px);
  }
  40% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.aromaRise {
  opacity: 0;
}

.aromaRise[data-animated="true"] {
  opacity: 1;
  animation: aromaRise 1.6s ease-out forwards;
}


@keyframes softFade {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.softFade {
  opacity: 0;
}

.softFade[data-animated="true"] {
  opacity: 1;
  animation: softFade 1.2s ease-out forwards;
}