/* 案名: 四半回転・水色
   形:   一点（左上）
   色:   #6c92ac（ヒーロー波線の光パルス .wpulse と同色。緑版との違いは色だけで、幾何・動き・周期は一切変えていない）
   モーション: 周期5.4sのほとんどを静止で過ごし、頭の約0.5sで90°だけ回る（正方形の4回対称性で元の形に戻る＝ループの継ぎ目なし）。僅かなオーバーシュートで「カクッ」と止まる拍
   狙い: 明滅でも伸縮でもない「向きを変える」動き。時計の秒針のような機械的な一拍が、静かなモノクロ画面に精度の高さの気配を足す
*/
.sec-en{position:relative}
.sec-en::before{
  content:"";position:absolute;
  width:.19em;height:.19em;
  left:-.305em;   /* 右辺 = 文字の左端から .115em 左 */
  top:.09em;     /* 四角の中央が cap top(.164em) を跨ぐ高さ（round3 採用値・不変） */
  background:#6c92ac;
}
/* リビール連動は data-rv="title" 付き（TOP）のみ。下層ページの .sec-en には data-rv が無いので常時表示に倒す */
@media (prefers-reduced-motion: no-preference){
  .r-ready .sec-en[data-rv="title"]::before{
    opacity:0;transform:scale(.2);transform-origin:100% 100%;
    transition:opacity .45s cubic-bezier(.16,1,.3,1) .3s,
               transform .55s cubic-bezier(.16,1,.3,1) .3s}
  .r-ready .sec-en[data-rv="title"].in::before{opacity:1;transform:none}

  /* ===== 表示中ループ：四半回転 ===== */
  @keyframes kimiTurn{
    0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.34,1.55,.64,1)}
    9%,100%{transform:rotate(90deg)}
  }
  /* 下層ページ（data-rv 無し）は即ループ開始 */
  .sec-en::before{transform-origin:50% 50%;animation:kimiTurn 5.4s linear infinite}
  /* TOP は登場ポップ（.3s遅延+.55s）を優先し、終わってからループに入る */
  .r-ready .sec-en[data-rv="title"]::before{animation:none}
  .r-ready .sec-en[data-rv="title"].in::before{
    transform-origin:50% 50%;
    animation:kimiTurn 5.4s linear infinite;
    animation-delay:1.1s}
  /* TOPの5見出しが同じ拍で回らないよう、周期の1/5(1.08s)刻みで位相をずらす */
  .bs-sec     .sec-en[data-rv="title"].in::before{animation-delay:1.10s}
  .sv-sec     .sec-en[data-rv="title"].in::before{animation-delay:2.18s}
  .works-wrap .sec-en[data-rv="title"].in::before{animation-delay:3.26s}
  .news-wrap  .sec-en[data-rv="title"].in::before{animation-delay:4.34s}
  .flow-wrap  .sec-en[data-rv="title"].in::before{animation-delay:5.42s}
}
@media (prefers-reduced-motion: reduce){
  .sec-en::before{animation:none!important;opacity:1;transform:none}
}