/* =============================================================================
   hero.css — トップページ「遠隔握手」ヒーロー専用スタイル
   -----------------------------------------------------------------------------
   値はすべて tokens.css の意味トークンを参照（css.md 準拠・論理プロパティ）。
   canvas 内の描画は assets/js/hero.js（色はトークンと同値で管理）。
   ============================================================================= */

@layer reset, base, tokens, components, utilities;

@layer components {
  .sync-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-block-size: 100svh;
    overflow: hidden;
    background:
      radial-gradient(70rem 34rem at 15% -12%, oklch(62% 0.19 260deg / 16%), transparent 60%),
      radial-gradient(56rem 30rem at 88% 112%, oklch(68% 0.23 335deg / 10%), transparent 62%),
      radial-gradient(40rem 22rem at 82% -8%, oklch(88% 0.1 205deg / 8%), transparent 60%),
      var(--color-bg);
  }

  /* 走査線（CRT風）と走査光 */
  .sync-hero__scanlines {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    pointer-events: none;
    opacity: 50%;
    background: repeating-linear-gradient(
      to bottom,
      oklch(100% 0 0deg / 2.8%) 0 1px,
      transparent 1px 3px
    );
  }

  /* 性能戦略: 常時アニメーションは置かない。最初の操作で hero.js が
     .sync-hero--live を付与し、走査光・点滅・フリッカーはそこから動き出す
     （canvas と同じ起動規約）。無操作の環境では完全静止＝CPU 静穏を保つ。 */
  .sync-hero__sweep {
    position: absolute;
    inset-inline: 0;
    block-size: 120px;
    z-index: var(--z-base);
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, oklch(88% 0.1 205deg / 5.5%), transparent);
    opacity: 0%;
  }

  .sync-hero--live .sync-hero__sweep {
    opacity: 100%;
    animation: sync-sweep 7s linear infinite;
  }

  @keyframes sync-sweep {
    0% {
      transform: translateY(-140px);
    }

    100% {
      transform: translateY(110svh);
    }
  }

  /* 縦書きのサイドラベル */
  .sync-hero__side-label {
    position: absolute;
    inset-inline-end: var(--space-sm);
    inset-block-start: 50%;
    transform: translateY(-50%);
    z-index: var(--z-dropdown);
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.5em;
    color: var(--color-text-muted);
    opacity: 60%;
    pointer-events: none;
  }

  .sync-hero__side-label b {
    color: var(--color-accent);
    font-weight: 400;
  }

  /* コピー（アイブロウ・見出し・リード） */
  .sync-hero__copy {
    position: relative;
    z-index: var(--z-dropdown);
    text-align: center;
    padding-block-start: clamp(0.4rem, 1.6vh, 1.6rem);
    padding-inline: var(--space-sm);
  }

  .sync-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: var(--tracking-hud);
    color: var(--color-accent);
    text-transform: uppercase;
    margin-block-end: var(--space-sm);
    min-block-size: 1.2em;
    text-shadow: 0 0 14px oklch(88% 0.1 205deg / 60%);
  }

  .sync-hero__cursor {
    display: inline-block;
    inline-size: 0.55em;
    block-size: 1em;
    vertical-align: -0.12em;
    background: var(--color-accent);
    margin-inline-start: 0.3em;
  }

  .sync-hero--live .sync-hero__cursor {
    animation: sync-blink 1.05s steps(1) infinite;
  }

  @keyframes sync-blink {
    50% {
      opacity: 0%;
    }
  }

  .sync-hero__title {
    font-size: var(--text-hero);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.01em;
    color: var(--color-text-strong);
    text-shadow: 0 0 40px oklch(62% 0.19 260deg / 25%);
  }

  .sync-hero__sync {
    color: transparent;
    background: var(--gradient-sync);
    /* stylelint-disable-next-line property-no-vendor-prefix -- Safari は background-clip:text に接頭辞が必須 */
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 28px oklch(88% 0.1 205deg / 35%);
  }

  .sync-hero--live .sync-hero__sync {
    animation: sync-flick 3.2s linear 0.35s 1;
  }

  @keyframes sync-flick {
    0%,
    100% {
      opacity: 100%;
    }

    6% {
      opacity: 25%;
    }

    8% {
      opacity: 100%;
    }

    11% {
      opacity: 45%;
    }

    12% {
      opacity: 100%;
    }

    54% {
      opacity: 100%;
    }

    56% {
      opacity: 60%;
    }

    57% {
      opacity: 100%;
    }
  }

  .sync-hero__lead {
    color: var(--color-text-muted);
    font-size: clamp(0.92rem, 1.4vw, 1.06rem);
    margin-block-start: var(--space-sm);
    padding-inline: var(--space-sm);
  }

  /* デモの舞台 */
  .sync-hero__stage-wrap {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-block-size: 46svh;
    margin-inline: clamp(0.6rem, 2vw, 1.6rem);
  }

  /* 四隅のブラケット */
  .sync-hero__stage-wrap::before,
  .sync-hero__stage-wrap::after,
  .sync-hero__brackets::before,
  .sync-hero__brackets::after {
    content: "";
    position: absolute;
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid oklch(88% 0.1 205deg / 50%);
    z-index: var(--z-base);
    pointer-events: none;
  }

  .sync-hero__stage-wrap::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    border-inline-end: 0;
    border-block-end: 0;
  }

  .sync-hero__stage-wrap::after {
    inset-block-start: 0;
    inset-inline-end: 0;
    border-inline-start: 0;
    border-block-end: 0;
  }

  .sync-hero__brackets::before {
    inset-block-end: 0;
    inset-inline-start: 0;
    border-inline-end: 0;
    border-block-start: 0;
  }

  .sync-hero__brackets::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    border-inline-start: 0;
    border-block-start: 0;
  }

  /* canvas は絶対配置でレイアウトフローから切り離す。フロー内に置くと
     内在サイズ（width/height 属性）がレイアウト高さへ波及し、DPR>1 の端末で
     「レイアウト拡大 → バッキングストア拡大 → さらに拡大」の無限ループになる。 */
  .sync-hero__stage {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    touch-action: none;
    cursor: grab;
    outline-offset: 6px;
  }

  .sync-hero__stage:focus-visible {
    outline: 3px solid var(--color-focus);
  }

  .sync-hero__stage.grabbing {
    cursor: grabbing;
  }

  .sync-hero__hint {
    position: relative;
    z-index: var(--z-dropdown);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.84rem;
    padding-inline: var(--space-sm);
  }

  .sync-hero__hint b {
    color: var(--color-text);
    font-weight: 600;
  }

  /* CTA */
  .sync-hero__ctas {
    position: relative;
    z-index: var(--z-dropdown);
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    padding-block: 1.05rem calc(1.5rem + env(safe-area-inset-bottom));
    padding-inline: var(--space-sm);
  }

  .sync-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding-block: 0.55rem;
    padding-inline: 1.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
      transform var(--motion-fast) var(--ease-standard),
      box-shadow var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard);
  }

  .sync-hero__btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  .sync-hero__btn--cta {
    background: var(--gradient-cta);
    color: var(--color-text-on-cta);
    box-shadow: var(--glow-cta);
  }

  .sync-hero__btn--cta:hover {
    transform: translateY(-2px);
  }

  .sync-hero__btn--ghost {
    border-color: oklch(88% 0.1 205deg / 35%);
    color: var(--color-text);
  }

  .sync-hero__btn--ghost:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 24px -6px oklch(88% 0.1 205deg / 60%);
  }

  /* FX 切替チップ */
  .sync-hero__fx {
    position: absolute;
    inset-inline-start: 0.9rem;
    inset-block-end: 0.8rem;
    z-index: var(--z-sticky);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    color: var(--color-accent);
    background: oklch(8% 0.01 265deg / 50%);
    border: 1px solid oklch(88% 0.1 205deg / 40%);
    border-radius: var(--radius-pill);
    padding-block: 0.34rem;
    padding-inline: 0.85rem;
    cursor: pointer;
  }

  .sync-hero__fx:hover {
    border-color: var(--color-accent);
  }

  .sync-hero__fx:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* プレスリリース一覧（トップの器。件数が増えたら press/ ページへ拡張） */
  .press-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .press-list li {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-border-weak);
  }

  .press-list time {
    font-family: var(--font-mono);
    color: var(--color-primary);
    flex-shrink: 0;
  }

  @media (width <= 640px) {
    .sync-hero__stage-wrap {
      min-block-size: 30svh;
    }

    .sync-hero__side-label {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sync-hero__sweep,
    .sync-hero--live .sync-hero__sweep {
      animation: none;
      opacity: 0%;
    }

    .sync-hero__sync,
    .sync-hero--live .sync-hero__sync {
      animation: none;
    }

    .sync-hero__cursor,
    .sync-hero--live .sync-hero__cursor {
      animation: none;
    }

    .sync-hero__btn {
      transition: none;
    }
  }
}