@charset "UTF-8";

/* ==========================================================================
   モーション・インタラクション
   すべて自前実装（外部ライブラリ不使用）。
   prefers-reduced-motion では全て無効化される（reset.css で transition/animation を止め、
   さらにJS側でも動きのある処理をスキップしている）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. スクロールで現れる（方向つき）
   -------------------------------------------------------------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.js-reveal--left  { transform: translateX(-40px); }
.js-reveal--right { transform: translateX(40px); }
.js-reveal--zoom  { transform: scale(0.94); }

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   2. 見出しの文字送り
   JSが1文字ずつ <span class="letter"> に分割する
   -------------------------------------------------------------------------- */
.letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-lettered .letter {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   3. ボタンの光沢が走る
   -------------------------------------------------------------------------- */
.button--primary,
.button--white {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button--primary::before,
.button--white::before {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  z-index: -1;
  width: 60%;
  height: 100%;
  transform: skewX(-22deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.button--white::before {
  background: linear-gradient(
    90deg,
    rgba(23, 181, 232, 0) 0%,
    rgba(23, 181, 232, 0.20) 50%,
    rgba(23, 181, 232, 0) 100%
  );
}

.button--primary:hover::before,
.button--white:hover::before {
  left: 140%;
}

/* --------------------------------------------------------------------------
   5. VTuberカードの自動マーキー
   JSがカードを複製し、-50% までを無限ループさせる
   -------------------------------------------------------------------------- */
.vtubers__scroller.is-marquee {
  padding-left: 0;
  overflow: hidden;
}

.vtubers__scroller.is-marquee .vtubers__track {
  gap: 0;
  padding-right: 0;
  animation: marquee 40s linear infinite;
}

/* ホバー・フォーカス中は止めて読ませる */
.vtubers__scroller.is-marquee:hover .vtubers__track,
.vtubers__scroller.is-marquee:focus-within .vtubers__track {
  animation-play-state: paused;
}

.vtubers__scroller.is-marquee .vtuber-card {
  margin-right: 16px;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   6. 背景装飾のパララックス（JSが --parallax を更新）
   -------------------------------------------------------------------------- */
.js-parallax {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   7. 浮遊パーティクル
   -------------------------------------------------------------------------- */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particles__dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  12% { opacity: 0.85; }
  88% { opacity: 0.6; }
  100% {
    transform: translateY(-260px) scale(0.55);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   8. 初回のローディング
   -------------------------------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  transition: opacity 0.7s ease, visibility 0.7s;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
}

/* 白背景に載せるため、ロゴは支給データの色そのままで出す */
.loader__logo {
  width: 190px;
  height: auto;
  animation: loaderIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 768px) {
  .loader__logo { width: 240px; }
}

@keyframes loaderIn {
  0%   { opacity: 0; transform: translateY(14px) scale(0.94); }
  55%  { opacity: 1; transform: none; }
  100% { opacity: 1; transform: none; }
}

.loader__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--gradient-main);
  animation: loaderBar 1.1s ease-out both;
}

@keyframes loaderBar {
  to { width: 100%; }
}

/* --------------------------------------------------------------------------
   9. 手書き風の英字アクセント
   -------------------------------------------------------------------------- */
.script-accent {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-cyan);
  transform: rotate(-3deg);
}

@media (min-width: 768px) {
  .script-accent { font-size: 32px; }
}

.script-accent--purple { color: var(--color-purple); }
.script-accent--pink   { color: var(--color-pink); }
.script-accent--light  { color: #7fd9f5; }

/* --------------------------------------------------------------------------
   10. ホバーの微調整
   -------------------------------------------------------------------------- */
.news__link {
  position: relative;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .news__link:hover { padding-left: 14px; }
}

.news__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  transform: translateY(-50%);
  background: var(--gradient-main);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .news__link:hover::before { width: 8px; }
}

.works__logo {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.works__logo:hover {
  transform: translateY(-4px);
  border-color: #bcdcf0;
  box-shadow: 0 10px 22px rgba(40, 90, 160, 0.10);
}

/* ヘッダーはスクロールで少し縮む */
.header {
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .header--solid { height: 72px; }
}