@layer page {
  /* ============================================================
     top/hero.css — トップページ ヒーローセクション のレイアウト
     アニメーション・表示切替は animations.css を参照
     ============================================================ */

  .hero {
    display: grid;
    place-items: center;
    padding-block-start: var(--header-block-size);
    padding-block-end: 5svw;
    text-align: center;
    background: var(--theme-color-surface-primary);
    /* .hero-title / .hero-bottom-glitch の absolute 基準として必須 */
    position: relative;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    z-index: 1;
  }

  .hero-title {
    aspect-ratio: 1 / var(--hero-title-ratio);
    margin: 0;
    position: absolute;
    top: 1svw;
    left: 1svw;
    width: min(var(--hero-title-inline-size), var(--max-title-inline-size));

    svg {
      inline-size: 100%;
      block-size: auto;
      width: 100%;
    }
  }

  .hero-body {
    aspect-ratio: 1 / 0.54;
    width: 100%;
    position: relative;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    /* .hero-event-title の cqh 算定基準として高さをコンテナー化 */
    container-type: size;
  }

  .hero-sub {
    margin: 0;
    font-size: 1.25rem;
  }

  .hero-event-bg {
    display: block;
    width: 100%;
    block-size: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;

    img {
      inline-size: 90%;
      block-size: 100%;
      margin-inline: auto;
      -o-object-fit: contain;
         object-fit: contain;
    }
  }

  .hero-event-mv {
    display: block;
    width: 100%;
    block-size: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;

    img {
      inline-size: 100%;
      block-size: 100%;
      -o-object-fit: contain;
         object-fit: contain;
    }
  }

  .hero-event-logo {
    display: block;
    width: 36svw;
    block-size: auto;
    position: absolute;
    bottom: -5.2svw;
    right: 2svw;
  }

  .hero-event-title {
    /* 外枠は回転後の視覚サイズ（縦長）で定義して右端から 1svw 内側に寄せる */
    block-size: 30cqh;
    inline-size: calc(30cqh * var(--hero-title-ratio));
    position: absolute;
    right: 1svw;
    top: 50%;
    translate: 0 -50%;

    svg {
      /* SVG は本来の向き（横長）で明示サイズを指定、absolute で外枠中央に固定してから rotate。
         中央固定なので回転後の視覚は外枠にピッタリ収まる。
         global の svg { max-width: 100% } が外枠幅で頭打ちにするので上書き必須。 */
      display: block;
      width: 30cqh;
      height: calc(30cqh * var(--hero-title-ratio));
      max-width: none;
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      transform: rotate(90deg);
    }
  }

  .hero-foot {
    inline-size: 100%;
  }

  .hero-foot-button {
    padding-inline: 2rem;
  }

  .hero-foot-button .button-link {
    inline-size: min(100%, 595px);
    margin-inline: auto;
  }

  .hero-foot-info {
    display: flex;
    inline-size: 100%;
    padding-block-start: 2.5svw;
    padding-block-end: 2.5svw;

    .hero-foot-info-location {
      inline-size: 42%;
      display: block;
      /* ヘッダ高さと揃えたいが、SP では --header-block-size の clamp 下限（42px）を超えて
         小さくしたいので、clamp なしの生の計算式（タイトル高さと同じ）を使う */
      block-size: calc(var(--hero-title-inline-size) * var(--hero-title-ratio));
      padding-inline-start: 1svw;

      img {
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: left center;
           object-position: left center;
      }
    }

    .hero-foot-info-date {
      inline-size: 58%;
      /* 1400px 幅で約 30px になる比例スケール。SP/超ワイドは clamp で頭打ち。 */
      font-size: clamp(12px, calc(30 / 1400 * 100svw), 36px);
      font-weight: var(--font-weight-bold);
      color: #222;
      align-self: center;
    }
  }

}
@layer page {
  /* ============================================================
     top/archive.css — トップページ アーカイブセクション
     ============================================================ */

  .archive {
    padding-block: 4rem;
  }

  .archive-inner {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }

  .archive-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-block-end: 2rem;
  }

  .archive-title {
    margin: 0;
    font-size: clamp(1rem, 4vw, 1.5rem);
    white-space: nowrap;
  }

  .archive-head-image {
    flex: 0 1 auto;
    max-inline-size: clamp(140px, 40vw, 420px);
  }

  .archive-head-image img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* PC: 2列 / SP: 1列（暫定） */
  .archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
    gap: 1.5rem;
  }

  .archive-card {
    display: grid;
    grid-template-rows: auto 1fr;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
  }

  .archive-card:hover {
    opacity: 0.8;
  }

  .archive-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eee;
  }

  .archive-card-thumb img {
    inline-size: 100%;
    block-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .archive-card-thumb-placeholder {
    display: grid;
    place-items: center;
    block-size: 100%;
    color: #999;
    font-size: 0.875rem;
  }

  .archive-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
  }

  .archive-card-location {
    font-weight: var(--font-weight-bold);
    font-size: 1.125rem;
    color: #737373;
  }

  .archive-card-date {
    font-size: 0.875rem;
    color: #a2a2a2;
  }
}
@layer page {
  /* ============================================================
     top/animations.css — トップページ ヒーローの段階表示 & 蛍光灯フリッカー
     imgLoadTrigger で .hero に .is-ready が付与された時点で発火する。
     ============================================================ */

  /* 段階表示対象の子要素は初期非表示にしておき、.hero.is-ready から順次見せる */
  .hero-event-bg,
  .hero-event-mv,
  .hero-event-title,
  .hero-event-logo,
  .hero-foot-info {
    opacity: 0;
  }

  /* Stage 1 (0s): bg + 装飾グリッチ画像 — 蛍光灯フリッカーで登場 */
  .hero.is-ready .hero-event-bg {
    opacity: 1;
    transition: opacity 0.5s ease-out 0.1s;
  }

  /* Stage 2 (0.7s): メインビジュアル + 縦タイトル */
  .hero.is-ready .hero-event-mv,
  .hero.is-ready .hero-event-title {
    opacity: 1;
    transition: opacity 0.5s ease 0.7s;
  }

  /* Stage 3 (1.35s): ロゴ */
  .hero.is-ready .hero-event-logo {
    opacity: 1;
    transition: opacity 0.5s ease 1.35s;
  }

  /* Stage 3 (1.35s): 開催地/日付情報 */
  .hero.is-ready .hero-foot-info {
    opacity: 1;
    transition: opacity 0.5s ease 1.35s;
  }

  /* 切れかけ蛍光灯風フリッカー: opacity のみで点滅させる */
  @keyframes hero-bg-flicker-in {
    0%   { opacity: 0; }
    6%   { opacity: 1; }
    10%  { opacity: 0.2; }
    16%  { opacity: 1; }
    22%  { opacity: 0.5; }
    28%  { opacity: 1; }
    36%  { opacity: 0.25; }
    44%  { opacity: 1; }
    58%  { opacity: 0.7; }
    64%  { opacity: 1; }
    82%  { opacity: 0.9; }
    86%  { opacity: 1; }
    100% { opacity: 1; }
  }
}