/* ============================================================
   装飾（アニメーション・演出）の定義元
   - このファイルのマスターは _base/design/decor.css
   - tools/sync_partials.py 実行で public/assets/css/decor.css へ複製される
   - 色・余白は tokens.css の変数のみを使う（数値ベタ書き禁止）

   【重要】アニメーションの「開始前の状態」はここに書かない。
   外部CSSは到着が一瞬遅れるため、.reveal の opacity:0 などをここに置くと
   「一瞬見えてから消えて再表示される」ちらつき（FOUC）が起きる。
   開始前の状態と prefers-reduced-motion の停止指定は
   _base/partials/head-common.html の <style> に直書きしてある。
   ============================================================ */

/* ---- 基本のあしらい ---- */
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 3px solid var(--color-orange-dark); outline-offset: 2px; border-radius: 4px; }

/* ---- 水玉背景 ---- */
.bg-dots {
  background-image: radial-gradient(rgba(240, 132, 25, 0.14) 12%, transparent 13%);
  background-size: 22px 22px;
}
.bg-dots-sky {
  background-image: radial-gradient(rgba(70, 184, 224, 0.16) 12%, transparent 13%);
  background-size: 22px 22px;
}

/* ---- ふわふわ浮遊（ヒーローの丸・ロゴ） ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-floaty { animation: floaty 3.6s ease-in-out infinite; }
.animate-floaty-slow { animation: floaty 5s ease-in-out 0.8s infinite; }

/* ============================================================
   A-2 スクロール進捗バー
   JSが body 直下に生成する。scaleX だけを動かすのでレイアウト再計算が起きない
   ============================================================ */
.js-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  background: linear-gradient(
    90deg,
    var(--color-orange) 0%,
    var(--color-sun) 20%,
    var(--color-leaf) 40%,
    var(--color-sky) 60%,
    var(--color-violet) 80%,
    var(--color-berry) 100%
  );
}

/* ============================================================
   A-2 現在地ハイライト（ScrollSpy）
   属性セレクタ＋クラスで詳細度(0,2,0)にし、Tailwindの単一クラス(0,1,0)に勝たせる。
   これにより読み込み順に依存せず確実に適用される
   ============================================================ */
[data-spy] { position: relative; }
.is-current[data-spy]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 16%;
  right: 16%;
  height: 3px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.9;
}
/* 下部固定タブ（CTA以外）は文字色も現在地色に変える */
.is-current[data-spy="tab"] { color: var(--color-orange-dark); }
/* メニュー内の項目は内側リングで示す（背景色が項目ごとに違うため） */
.is-current[data-spy="menu"] { box-shadow: inset 0 0 0 2px var(--color-orange-dark); }
.is-current[data-spy="menu"]::before { content: none; }

/* ============================================================
   A-3 段差表示（stagger）の遅延
   初期状態は head-common の <style> 側。ここは遅延の割り当てのみ。
   万一このファイルが届かなくても「同時に現れる」だけで破綻しない
   ============================================================ */
[data-reveal-stagger] > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger] > *:nth-child(2) { transition-delay: 0.055s; }
[data-reveal-stagger] > *:nth-child(3) { transition-delay: 0.11s; }
[data-reveal-stagger] > *:nth-child(4) { transition-delay: 0.165s; }
[data-reveal-stagger] > *:nth-child(5) { transition-delay: 0.22s; }
[data-reveal-stagger] > *:nth-child(6) { transition-delay: 0.275s; }
[data-reveal-stagger] > *:nth-child(7) { transition-delay: 0.33s; }
[data-reveal-stagger] > *:nth-child(n + 8) { transition-delay: 0.385s; }

/* ============================================================
   A-4 見出しの手描き風アンダーライン
   波線SVGをマスクにして背景色を抜くことで、線の色をトークン変数で切り替えられる
   ============================================================ */
.deco-underline { position: relative; display: inline-block; }
.deco-underline::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -0.3em;
  height: 0.32em;
  background-color: var(--deco-color, var(--color-orange));
  opacity: 0.85;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M0 8 Q 12 1 24 8 T 48 8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M0 8 Q 12 1 24 8 T 48 8' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
}
.deco-underline.is-in::after { clip-path: inset(0 0 0 0); }
/* JSが無い環境では線を最初から出す（装飾が永久に欠けるのを防ぐ） */
html:not(.has-js) .deco-underline::after { clip-path: inset(0 0 0 0); }

.deco-orange { --deco-color: var(--color-orange); }
.deco-sun    { --deco-color: var(--color-sun); }
.deco-leaf   { --deco-color: var(--color-leaf); }
.deco-sky    { --deco-color: var(--color-sky); }
.deco-violet { --deco-color: var(--color-violet); }
.deco-berry  { --deco-color: var(--color-berry); }

/* ============================================================
   A-1 開催カウントダウン（ヒーロー）
   3状態（開催前／当日／終了後）を状態クラスで切り替える
   ============================================================ */
[data-countdown].is-today {
  border-color: var(--color-berry);
  color: var(--color-berry-dark);
  background-color: var(--color-berry-soft);
}
[data-countdown].is-past {
  border-color: var(--color-line);
  color: var(--color-text-weak);
  background-color: var(--color-cream);
}
[data-countdown] .countdown-num {
  font-size: 1.6em;
  line-height: 1;
  padding: 0 0.12em;
  vertical-align: -0.06em;
}

/* ============================================================
   A-5 タイムスケジュールの「いまここ」マーカー（開催日のみ）
   ============================================================ */
[data-prog].is-now {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
@keyframes now-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}
.now-badge { animation: now-pulse 2s ease-in-out infinite; }

/* ============================================================
   A-7 ヘッダーお知らせティッカー（電光掲示板風）
   内容の組み立ては public/assets/js/page/index.js（TICKER_ITEMS）。
   #header-ticker.js-ticker-ready は index.js が表示対象を見つけたときだけ付く。
   ID+クラスの詳細度(1,1,0)でTailwindの .hidden（0,1,0）に勝たせているので、
   .js-ticker-ready が付かない他ページ（program/centers/privacy）では
   確実に非表示のまま（SP／PCどちらも表示する）
   ============================================================ */
@keyframes header-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.header-ticker-track {
  animation-name: header-ticker-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#header-ticker.js-ticker-ready { display: flex; }
#header-ticker.js-ticker-ready:hover .header-ticker-track {
  animation-play-state: paused;
}

/* ============================================================
   A-8 昨年の様子（写真スライダー）
   左→右へゆるやかに流す。1周ぶんの距離は public/assets/js/page/index.js が
   実測して --slide-distance に入れる（gap込みの実際の1セット幅に正確に合わせ、
   継ぎ目のジャンプを防ぐため。50%固定にしないのはそのため）
   ============================================================ */
@keyframes photo-slider-scroll {
  from { transform: translateX(calc(-1 * var(--slide-distance, 50%))); }
  to   { transform: translateX(0); }
}
.photo-slider-track {
  animation-name: photo-slider-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#photo-slider:hover .photo-slider-track {
  animation-play-state: paused;
}

/* ============================================================
   A-9 Instagram ピックアップ投稿（公式埋め込み：PC4列 / SP2列）
   embed.js が blockquote へインラインで min-width:326px 等を書き込むため、
   4列・2列の幅に収めるには !important で上書きする必要がある
   ============================================================ */
#instagram .instagram-media,
#instagram .instagram-media-rendered,
#instagram iframe.instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ============================================================
   A-10 フッターロゴのホワイトグロー（視認性向上・自然な白光彩強化）
   ============================================================ */
.logo-glow {
  filter: drop-shadow(0 0 1px #ffffff)
          drop-shadow(0 0 2.5px #ffffff)
          drop-shadow(0 0 8px rgba(255, 255, 255, 0.95))
          drop-shadow(0 0 18px rgba(255, 255, 255, 0.85));
}

/* ============================================================
   A-11 ヒーロー・エントランス演出（ファーストビューの心地よい浮き上がり）
   待ち時間ゼロで、ページ到着時に各要素がリズムよくふわっと出現する
   ============================================================ */
@keyframes heroEntrance {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroLogoPop {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.92);
  }
  65% {
    transform: translateY(-3px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-enter {
  animation: heroEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-enter-logo {
  animation: heroLogoPop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}

.hero-delay-1 { animation-delay: 0.05s; }
.hero-delay-2 { animation-delay: 0.26s; }
.hero-delay-3 { animation-delay: 0.40s; }
.hero-delay-4 { animation-delay: 0.52s; }
.hero-delay-5 { animation-delay: 0.64s; }
.hero-delay-6 { animation-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  .hero-enter,
  .hero-enter-logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}