/* ==================================================
  ROLE : bareframe/archive.css
--------------------------------------------------
  役割：
  - archive（一覧）専用の可読性レイヤー
  - レイアウトは作らず、「一覧が読める状態」に整えることだけを担う
  - front（100vh完結・flex支配）の世界観を archive に侵入させないための
    セーフティオーバーライドを含む

  前提・依存：
  - `.archive` は `.main` の幅・位置に完全追従する
  - `base.css` のトークン（--fg, --muted, --line-2, --mono 等）に依存
  - 一覧カード（.plate）は別CSS（components/plate等）で成立済み想定

  方針の固定：
  - 演出しない／意味を足さない（装飾は最小限）
  - 余白・文字サイズ・行間で可読性のみを確保
  - transform / アニメーション / 背景演出は行わない
================================================== */


/* =========================================================
   archive : safety base
   ========================================================= */

.archive{
  width: 100%;
  max-width: none;
  margin: 0;

  position: relative;
  z-index: 2;
  overflow: visible;
}

/* archive内要素は背景より前に */
.archive > *{
  position: relative;
  z-index: 1;
}




/* 正規構成として残すが、主役にしない（疑似topの下で脇役） */
.archive__title{
   font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  font-weight: 600;
  color: var(--text-main, #e6f0f2);
  border-left: 3px solid var(--accent, #6fb3a8);

  line-height: 1.4;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
  margin-top: 1.2em;
  margin-bottom: 1em;
  padding-left: 0.2em;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.archive__desc{
  font-size: 28px;
  color: var(--muted);
  line-height: 1.8;
}


.archive .monolith-cn__grid {
    padding: 30px 0px 10px;

}


.archive .plate {
    min-height: 200px;
}

.archive .plate__title {
    font-size: 18px;
  
}

/* 基本（あなたのやつを拡張） */
.wp-block-image.tv-vision{
  position: relative;
  display: inline-block;          /* 画像ブロックのサイズに追随 */
  overflow: hidden;               /* 揺らぎ膜をはみ出させない */
  opacity: 0.7;
  filter: blur(0.5px);
  transition: transform .6s ease, box-shadow 1s ease, filter .5s ease, opacity 1s ease;
  will-change: transform, filter, opacity, box-shadow;
}

/* 炎の“ゆらぎ膜” */
.wp-block-image.tv-vision::after{
  content: "";
  position: absolute;
  inset: -12%;                    /* 端の揺れを隠すため少し大きく */
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;         /* 光が乗る感じ */
  background:
    radial-gradient(60% 70% at 20% 30%, rgba(255,120,0,.22), transparent 60%),
    radial-gradient(70% 80% at 70% 60%, rgba(255,200,120,.10), transparent 62%),
    linear-gradient(115deg, rgba(255,80,0,.10), rgba(255,255,255,.05), rgba(255,80,0,.08));
  filter: blur(10px);
  transform: translate3d(0,0,0) scale(1.03);
  animation: tvFlicker 2.4s ease-in-out infinite;
  transition: opacity .5s ease;
}

/* hover状態 */
.wp-block-image.tv-vision:hover{
  opacity: 1;
  filter: blur(0px) brightness(1.05);
  transform: scale(1.01);
  box-shadow:
    0 0 14px 2px rgba(255,80,0,.25),
    0 0 50px 20px rgba(255,120,0,.12),
    0 0 90px 40px rgba(255,255,255,.06);
}

.wp-block-image.tv-vision:hover::after{
  opacity: 1;
}

/* ゆらぎ：位置と回転を小刻みに変える（炎っぽい） */
@keyframes tvFlicker{
  0%   { transform: translate3d(-1.5%, -1.0%, 0) rotate(-0.4deg) scale(1.03); }
  20%  { transform: translate3d( 1.2%, -0.3%, 0) rotate( 0.2deg) scale(1.04); }
  45%  { transform: translate3d(-0.8%,  1.1%, 0) rotate(-0.2deg) scale(1.02); }
  70%  { transform: translate3d( 1.6%,  0.2%, 0) rotate( 0.5deg) scale(1.05); }
  100% { transform: translate3d(-1.5%, -1.0%, 0) rotate(-0.4deg) scale(1.03); }
}

/* 動きが苦手な人向け（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  .wp-block-image.tv-vision::after{ animation: none; }
}




/* =======================================================
   archive : scroll safety override (PC)
   - frontの「100vh完結」を archive に持ち込まない
======================================================= */
@media (min-width: 1024px){
  body.archive .main{
    height: auto;
    overflow: visible;
    display: block;
    padding: 14px;
  }

  body.archive .grid{
    overflow: visible;
	padding-bottom:30px;
	border-bottom: 3px solid var(--line-2);
  }
}