@charset "utf-8";

/*----------------------------------------------------
	header 2026
----------------------------------------------------*/

/* ==========================================================================
   OC キャラクターバナー
   - 各アニメーション周期は :root の --oc-* で調整
   ========================================================================== */

:root {
  /* キャラクター反転（9s）: 待機3 + 通常1 + 反転1 + 通常1 + 待機3 */
  --oc-char-cycle: 9s;

  /* 黄色い効果・点滅（7s）: 表示1 + 非表示1 ×2 + 表示待機3 */
  --oc-light-flicker-cycle: 5s;

  /* ピンク記号（7s）: 待機2 + 角度保持2 + 待機3 */
  --oc-pink-cycle: 7s;
  --oc-pink-delay: -2.4s;

  /* 水色記号（7.5s）: 待機2.5 + 角度保持2 + 待機3 */
  --oc-blue-cycle: 7.5s;
  --oc-blue-delay: -4.1s;

  /* 回転量 */
  --oc-pink-rotate: -6deg;
  --oc-blue-rotate: 6deg;

  /* z-index */
  --oc-z-character: 1;
  --oc-z-light: 2;
  --oc-z-blue: 3;
  --oc-z-pink: 4;
  --oc-z-ribbon: 5;

  /* 画像の元サイズ */
  --oc-width: 270;
  --oc-height: 220;

  /* キャラクター hover（1回再生・ぴょんぴょん2段） */
  --oc-hover-duration: 0.95s;
  --oc-hover-squat: 2px;
  --oc-hover-jump-1: -7px;
  --oc-hover-jump-2: -4px;
}

/* --------------------------------------------------------------------------
   コンテナ
   -------------------------------------------------------------------------- */

.oc-banner__link {
  display: block;
  max-width: 270px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.oc-banner__link:focus-visible {
  outline: 2px solid #3a8fb7;
  outline-offset: 4px;
  border-radius: 4px;
}

.oc-banner {
  display: block;
  width: 100%;
}

.oc-banner__stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--oc-width) / var(--oc-height);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   共通レイヤー
   -------------------------------------------------------------------------- */

.oc-banner__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center center;
}

/* 記号レイヤー（回転はラッパー、反転は画像切替） */
.oc-banner__symbol {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  pointer-events: none;
}

.oc-banner__symbol--blue {
  z-index: var(--oc-z-blue);
  will-change: transform;
  animation: oc-blue-rotate var(--oc-blue-cycle) linear infinite;
  animation-delay: var(--oc-blue-delay);
}

.oc-banner__symbol--pink {
  z-index: var(--oc-z-pink);
  will-change: transform;
  animation: oc-pink-rotate var(--oc-pink-cycle) linear infinite;
  animation-delay: var(--oc-pink-delay);
}

/* キャラ反転タイミング（9s）で通常/反転画像を切替 */
.oc-banner__layer--blue-normal,
.oc-banner__layer--pink-normal {
  animation: oc-symbol-show-normal var(--oc-char-cycle) linear infinite;
}

.oc-banner__layer--blue-reversed,
.oc-banner__layer--pink-reversed {
  animation: oc-symbol-show-reversed var(--oc-char-cycle) linear infinite;
}

/* キャラクター: 反転（ラッパー）と hover バウンス（img）を分離 */
.oc-banner__character {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--oc-z-character);
  pointer-events: none;
}

.oc-banner__character-flip {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
  animation: oc-layer-flip var(--oc-char-cycle) linear infinite;
}

.oc-banner__layer--character {
  transform-origin: center bottom;
}

.oc-banner__link:hover .oc-banner__layer--character,
.oc-banner__link:focus-visible .oc-banner__layer--character {
  animation: oc-character-hover var(--oc-hover-duration) linear;
}

.oc-banner__layer--light {
  z-index: var(--oc-z-light);
  will-change: transform, opacity;
  animation:
    oc-layer-flip var(--oc-char-cycle) linear infinite,
    oc-light-flicker var(--oc-light-flicker-cycle) linear infinite;
}

.oc-banner__layer--ribbon {
  z-index: var(--oc-z-ribbon);
}

/* --------------------------------------------------------------------------
   キャラクター（9s）
   待機3s → 通常1s → 反転1s → 通常1s → 待機3s
   -------------------------------------------------------------------------- */

@keyframes oc-layer-flip {
  0%,
  33.32% {
    transform: scaleX(1);
  }

  33.333%,
  44.43% {
    transform: scaleX(1);
  }

  44.444%,
  55.54% {
    transform: scaleX(-1);
  }

  55.555%,
  66.65% {
    transform: scaleX(1);
  }

  66.666%,
  100% {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   黄色い効果
   反転: キャラクターと同期（9s）
   点滅: 表示1s → 非表示1s → 表示1s → 非表示1s → 表示+待機3s（7s）
   -------------------------------------------------------------------------- */

@keyframes oc-symbol-show-normal {
  0%,
  44.43%,
  55.555%,
  100% {
    opacity: 1;
  }

  44.444%,
  55.54% {
    opacity: 0;
  }
}

@keyframes oc-symbol-show-reversed {
  0%,
  44.43%,
  55.555%,
  100% {
    opacity: 0;
  }

  44.444%,
  55.54% {
    opacity: 1;
  }
}

@keyframes oc-light-flicker {
  0%,
  14.27% {
    opacity: 1;
  }

  14.286%,
  28.56% {
    opacity: 0;
  }

  28.571%,
  42.84% {
    opacity: 1;
  }

  42.857%,
  57.13% {
    opacity: 0;
  }

  57.143%,
  100% {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   ピンク記号（7s）反時計回り
   -------------------------------------------------------------------------- */

@keyframes oc-pink-rotate {
  0%,
  28.56% {
    transform: rotate(0deg);
  }

  28.571%,
  57.13% {
    transform: rotate(var(--oc-pink-rotate));
  }

  57.143%,
  99.99% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* --------------------------------------------------------------------------
   水色記号（7.5s）時計回り
   -------------------------------------------------------------------------- */

@keyframes oc-blue-rotate {
  0%,
  33.32% {
    transform: rotate(0deg);
  }

  33.333%,
  60% {
    transform: rotate(var(--oc-blue-rotate));
  }

  60.01%,
  99.99% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* --------------------------------------------------------------------------
   キャラクター hover（1回のみ・しゃがみ→ジャンプ×2）
   -------------------------------------------------------------------------- */

@keyframes oc-character-hover {
  /* 待機 */
  0% {
    transform: translateY(0) scale(1);
  }

  /* しゃがみ */
  8% {
    transform: translateY(var(--oc-hover-squat)) scale(1.012, 0.988);
  }

  /* 1回目ジャンプ（頂点） */
  22% {
    transform: translateY(var(--oc-hover-jump-1)) scale(1.035);
  }

  /* 1回目着地 */
  32% {
    transform: translateY(0) scale(1.008, 0.992);
  }

  /* 少し間 */
  42% {
    transform: translateY(0) scale(1);
  }

  /* 2回目 軽くしゃがみ */
  50% {
    transform: translateY(1px) scale(1.008, 0.994);
  }

  /* 2回目ジャンプ（弱め） */
  62% {
    transform: translateY(var(--oc-hover-jump-2)) scale(1.022);
  }

  /* 2回目着地 */
  72% {
    transform: translateY(0) scale(1.004, 0.996);
  }

  /* 自然に戻る */
  88%,
  100% {
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   アクセシビリティ
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .oc-banner__character-flip,
  .oc-banner__symbol,
  .oc-banner__layer--light,
  .oc-banner__layer--blue-normal,
  .oc-banner__layer--blue-reversed,
  .oc-banner__layer--pink-normal,
  .oc-banner__layer--pink-reversed {
    animation: none;
  }

  .oc-banner__layer--blue-reversed,
  .oc-banner__layer--pink-reversed {
    opacity: 0;
  }

  .oc-banner__link:hover .oc-banner__layer--character,
  .oc-banner__link:focus-visible .oc-banner__layer--character {
    animation: none;
  }
}