/* ===== 固定ヘッダー ===== */
.fixed-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 37px;
  pointer-events: none;
}
.fixed-header__date,
.fixed-header__place {
  position: absolute;
  top: -2px; /* 2行目(11.29SUN / TOKYO)の文字の下端が罫線にぴったり付く位置 */
  left: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 21px;
  color: var(--c-red);
}
/* 右上の「SHIBUYA, TOKYO」(Figma 82:67)。画面の右端に寄せる */
.fixed-header__place {
  left: auto;
  right: 0;
}
/* iPhone の横向きでノッチの下に入らないように(縦向きでは 0) */
.fixed-header__date {
  left: env(safe-area-inset-left, 0px);
}
.fixed-header__place {
  right: env(safe-area-inset-right, 0px);
}
.fixed-header__logo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
}
.fixed-header__logo img {
  width: 100%;
  height: 100%;
}
/* 回転はなし(2026-10-21 PARCO戻し①: 百軒店のシックな雰囲気に合わせる)。
   回転を戻す場合は 3D(rotateY)ではなく 2D で作る(iOS で 3D 回転がちらつくため) */
.fixed-header__line {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-red);
  box-shadow: 0 0 10px 1px var(--c-red);
}
/* ネオンのゆらぎ: 罫線のにじみの上にもう1枚にじみを重ね、その濃さだけを不規則にゆっくり変える
   (気づくか気づかないか程度。濃さだけの変化なので描き直しが起きず軽い) */
.fixed-header__line::after,
.scroll-indicator__line::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 16px 2px var(--glow);
  opacity: 0.2;
  animation: neon-breathe var(--glow-dur) ease-in-out infinite;
  will-change: opacity;
}
.fixed-header__line::after {
  --glow: var(--c-red);
  --glow-dur: 7.3s;
}
@keyframes neon-breathe {
  0% { opacity: 0.2; }
  14% { opacity: 0.42; }
  23% { opacity: 0.3; }
  29% { opacity: 0.38; }
  47% { opacity: 0.14; }
  63% { opacity: 0.46; }
  71% { opacity: 0.34; }
  86% { opacity: 0.12; }
  100% { opacity: 0.2; }
}

/* PAGE TOP の暗幕(js/ui.js)。固定の罫線・日付・SCROLL より下、ページの内容より上 */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--c-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.page-veil.is-on {
  opacity: 1;
}

/* ===== SCROLL / PAGE TOP ===== */
.scroll-indicator {
  position: fixed;
  left: 0;
  right: 0;
  /* 緑線が画面下から36px(上部の赤線と同じマージン)。線はこの枠の上から4px、枠の高さ20px → 36-(20-5)=21px */
  bottom: calc(21px + env(safe-area-inset-bottom));
  z-index: 100;
  height: 20px;
  pointer-events: none;
}
.scroll-indicator__line {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-green);
  box-shadow: 0 0 10px 1px var(--c-green);
}
/* ページの一番下: 緑線がずっと一定の間隔でチカチカ点滅する(js/ui.js が .is-end を付け外し。2026-10-26 えびな: もっとずっと・一定間隔で)。
   1秒で1回(0.36 → 0.7 → 1。2026-10-26 えびな)。パッと消えるのではなく、少し暗くなってまた明るくなる、やさしい明滅(2026-10-26 えびな)。
   表示時の line-draw を置き換えるので、線の伸び縮みは起きない */
.scroll-indicator.is-end .scroll-indicator__line {
  animation: line-blink 1s ease-in-out infinite;
}
/* PAGE TOP にマウスを乗せている間は、点滅を少し速く(1秒 → 0.6秒。2026-10-28 えびな) */
@media (hover: hover) {
  .scroll-indicator.is-end:has(.scroll-indicator__label:hover) .scroll-indicator__line {
    animation-duration: 0.6s;
  }
}
@keyframes line-blink {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator.is-end .scroll-indicator__line {
    animation: none;
  }
}
.scroll-indicator__line::after {
  --glow: var(--c-green);
  --glow-dur: 9.1s; /* 赤とずらして、上下が同時に明滅しないように */
  animation-delay: -3.4s;
}
.scroll-indicator__label {
  position: relative;
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: var(--c-green);
  text-align: center;
}
/* SCROLL のロールアップ(js/ui.js が一定間隔で .is-roll を付ける)
   各文字は text-shadow で真下に同じ文字を持ち、1行分上へずらすと下の文字が入ってくる */
.scroll-indicator__roll {
  display: inline-block;
  height: 20px;
  overflow: hidden;
  vertical-align: top;
  /* 文字の箱の上 5px は緑の線(箱の上端から 4〜5px)にかかるので切り落とす。
     ロールアップで上へ抜ける文字が線より上にはみ出さず、線のところで消えて見える(PC・SP 共通。2026-10-26) */
  clip-path: inset(5px -2px 0 -2px);
}
.scroll-indicator__ch {
  display: inline-block;
  text-shadow: 0 20px 0 currentColor;
  transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); /* 単語ごと一緒に動かす(文字ごとの時間差なし) */
}
.scroll-indicator.is-roll .scroll-indicator__ch {
  transform: translateY(-20px);
}
.scroll-indicator.is-roll-reset .scroll-indicator__ch {
  transition: none;
}
/* SCROLL ⇄ PAGE TOP の切り替え(js/ui.js): 2行を縦に並べ、1行分上へ送る */
.scroll-indicator__swap {
  display: inline-block;
  height: 20px;
  overflow: hidden;
  vertical-align: top;
  clip-path: inset(5px -2px 0 -2px); /* 上と同じく、緑の線より上は見せない */
}
.scroll-indicator__swap-inner {
  display: block;
  transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
.scroll-indicator__swap-inner > span {
  display: block;
  height: 20px;
  text-align: center;
  white-space: nowrap;
}
.scroll-indicator__swap-inner.is-go {
  transform: translateY(-20px);
}
/* PAGE TOP の押せる範囲(2026-10-28 iPhone 実機で押しづらかった):
   ボタンは高さ 20px・画面の一番下に近く、iPhone Safari ではツールバーが縮んでいるとき画面下端付近のタップが
   ツールバーを出す操作に取られて、ボタンまで届かないことがある。
   押せる範囲を文字のまわり(上に 24px・左右に 32px・下に 8px)まで広げ、画面の端から離れたところでも押せるようにする。
   画面幅いっぱいの帯は押せないままにする(帯の上のリンクや本文のタップを邪魔しない) */
.scroll-indicator[data-state="pagetop"] .scroll-indicator__label {
  pointer-events: auto;
  cursor: pointer;
  width: max-content;
  margin: 0 auto;
  touch-action: manipulation; /* ダブルタップ拡大の判定を待たずに反応させる */
  -webkit-tap-highlight-color: transparent;
}
.scroll-indicator[data-state="pagetop"] .scroll-indicator__label::before {
  content: "";
  position: absolute;
  inset: -24px -32px -8px;
}
/* タッチ端末はさらに上へ広げる(2026-10-28 それでも押しづらかった):
   iOS 26 の Safari は、画面の下に浮かぶツールバー(タブバー)が PAGE TOP の文字の近くに重なり、
   そのあたりのタップは Safari 側に取られる。緑線の上 56px までを押せる範囲にして、指が自然に触れる高さで反応させる */
@media (hover: none) {
  .scroll-indicator[data-state="pagetop"] .scroll-indicator__label::before {
    inset: -56px -64px -6px;
  }
}
/* PC: 緑線から下の帯全体(画面幅いっぱい・画面の下端まで)を、PAGE TOP のホバー・クリックの範囲にする(2026-10-30 えびな)。
   帯のどこに乗せても、文字のロールアップと線の点滅の速まり(下の :hover / :has)が効く */
@media (min-width: 768px) {
  .scroll-indicator[data-state="pagetop"] .scroll-indicator__label {
    width: 100%;
  }
  .scroll-indicator[data-state="pagetop"] .scroll-indicator__label::before {
    inset: 5px 0 calc(-21px - env(safe-area-inset-bottom)) 0; /* 線の下端(枠の上から 5px)〜 画面の下端 */
  }
}
/* PAGE TOP: ホバーで文字が1字ずつ上へ抜け、同じ文字が下から上がってくる(MORE INFO と同じ動き。2026-10-26) */
.scroll-indicator__ch {
  white-space: pre; /* 「PAGE TOP」の間のスペースを保つ */
}
.scroll-indicator[data-state="pagetop"] .scroll-indicator__ch {
  transition-delay: calc(var(--i) * 0.025s);
}
@media (hover: hover) {
  .scroll-indicator[data-state="pagetop"]:hover .scroll-indicator__ch {
    transform: translateY(-20px);
  }
}
.scroll-indicator[data-state="pagetop"]:focus-visible .scroll-indicator__ch {
  transform: translateY(-20px);
}
.scroll-indicator:focus-visible {
  outline: 1px solid var(--c-green);
  outline-offset: 4px;
}



/* ===== 表示時の演出 =====
   1. 上の赤線が左から、下の緑線が右から伸びる(速く伸びて、最後はゆっくり止まる)
   2. 線が引ききる少し手前から、日付・印鑑・SCROLL がふわっと出る
   (写真は js/stream.js の OPEN_DELAY、タイトルは js/title.js の FIRST_DELAY でこの後に続く) */
.fixed-header__line,
.scroll-indicator__line {
  animation: line-draw 1.4s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.fixed-header__line {
  transform-origin: left center;
  animation-delay: 0.1s;
}
.scroll-indicator__line {
  transform-origin: right center;
  animation-delay: 0.25s;
}
@keyframes line-draw {
  from {
    transform: scaleX(0);
  }
}
.fixed-header__date,
.fixed-header__place {
  animation: intro-fade 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}
/* 赤いロゴ: FV の間は隠しておき、FV の DOMMUNE / PARCO ロゴが上へ抜ける頃に、枠の下から1回せり上がって(ロールアップ)現れる。
   上へ戻って FV に入ったら、下へ沈んで消える(js/ui.js が .is-shown を付け外し。2026-10-26) */
.fixed-header__logo {
  overflow: hidden; /* 枠(36×36 / SP 25×25)の外は見せない = 下から上がってくるように見える */
}
/* 2026-10-26 えびな: 日の出のようにまっすぐ上がるのではなく、くるんと半回転しながらロールアップして収まる
   (下から転がり上がってくるように。iOS のちらつきを避けて 2D の回転で) */
.fixed-header__logo img {
  transform: translateY(105%) rotate(-180deg);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.fixed-header__logo.is-shown img {
  transform: none;
  transition-duration: 1s; /* 出るときは、くるっと上がってゆっくり止まる */
}
/* SCROLL: 文字が下からロールアップして現れる(js/ui.js が少し待ってから .is-enter を外す) */
.scroll-indicator.is-enter .scroll-indicator__ch {
  transform: translateY(20px);
  transition: none;
}
@keyframes intro-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fixed-header__logo img {
    animation: none;
  }
  .fixed-header__line,
  .scroll-indicator__line,
  .fixed-header__date,
  .fixed-header__place,
  .fixed-header__logo {
    animation: none;
  }
  .fixed-header__line::after,
  .scroll-indicator__line::after {
    animation: none;
  }
}