/* =========================================================
   SKETCH CREATE — hero-desk.css
   トップページのヒーロー背景演出（物書きの机と窓から差す光）
   ・index.html だけで読み込む（css/style.css のあとに読み込む）
   ・影響範囲は ヒーロー内の .hero-desk と <body class="has-desk-hero"> に限定
   ・再生の制御は js/hero-desk.js
   ========================================================= */

/* ---------------------------------------------------------
   背景（既定：スマホ・縦長の画面）
   画像の中央（紙のまわり）を大きく見せ、左右は切り落とす。
   画像は「紙の幅 = 画面幅の約73%（最小288px・最大420px）」になる大きさで、画面の中央に置く。
   ロゴ・線・文字は、その紙の上に載せる。
   画像（3:2）の紙は、幅の約39%、高さの約15%〜86%（中心は約50%）にある。
   --------------------------------------------------------- */
.has-desk-hero .hero{
  --paper-w: min(88vw, max(73vw, 288px), 420px);   /* 393px幅の端末では、画像の幅の約53%を見せる（ダーマトグラフの先がかかる程度）。狭い画面では紙を大きめにして文字を保つ */
  --desk-w: calc(var(--paper-w) / .389);
  --desk-h: calc(var(--desk-w) / 1.5);
  min-height: var(--desk-h);
  padding: 0 20px;                 /* 文字の中心が紙の中心（画像の高さの約50%）にくる */
  overflow: hidden;
}
.hero-desk{
  position: absolute;
  top: 0;
  left: calc(50% - var(--desk-w) / 2);
  width: var(--desk-w);
  height: var(--desk-h);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;            /* クリック・タップ・スクロールを妨げない */
  background: #100e0c;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
/* ナビゲーションの文字を読みやすくする、上部だけの薄い影 */
.hero-desk::after{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: linear-gradient(rgba(16,14,12,.55), rgba(16,14,12,0));
}
.hero-desk__still,
.hero-desk__canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-desk__still{
  object-fit: cover;
  object-position: 50% 15%;        /* js/hero-desk.js の focusX / focusY と合わせる */
}
.hero-desk__canvas{
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-desk.is-live .hero-desk__canvas{ opacity: 1; }
/* 再生が終わったら、17:00 の静止画に切り替えてキャンバスを消す */
.hero-desk.is-done .hero-desk__canvas{
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}

.has-desk-hero .hero-inner{
  position: relative;
  z-index: 1;
  mix-blend-mode: multiply;        /* ロゴ・線・文字を「紙に刷られたインク」として重ねる */
}
.has-desk-hero .scroll-cue{ z-index: 1; display: none; }   /* 紙の下端と重なるため、スマホ・縦長では出さない */

/* ロゴ・線・文字は、紙の幅を基準に大きさを決める（紙からはみ出さないように） */
.has-desk-hero .hero-logo img{ width: min(420px, 72vw, calc(var(--paper-w) * .75)); }
.has-desk-hero .hero-line-wrap{ width: min(calc(var(--paper-w) * .85), 760px, 88vw); }
.has-desk-hero .hero-copy{ font-size: clamp(13px, calc(var(--paper-w) * .044), 27px); }
.has-desk-hero .hero-sub{
  color: var(--ink);
  font-weight: 500;                /* 影の帯と重なっても読めるよう、サブコピーは濃く・やや太くする */
  font-size: clamp(13px, calc(var(--paper-w) * .031), 17px);
  max-width: calc(var(--paper-w) * .86);   /* 紙の幅の中で折り返す */
  text-wrap: balance;              /* 行の長さをそろえ、最後の行に1〜2文字だけ残らないようにする */
}

/* 写真の上に重なるヘッダー（スクロール前）は、淡い色の文字にする */
.has-desk-hero .site-header:not(.is-scrolled) .header-nav a{
  color: #f6ead3;
  text-shadow: 0 1px 10px rgba(16,14,12,.6);
}
.has-desk-hero .site-header:not(.is-scrolled) .nav-toggle span{
  background: #f6ead3;
  box-shadow: 0 1px 6px rgba(16,14,12,.5);
}
.has-desk-hero .site-header:not(.is-scrolled) .header-nav a::after{
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 4' preserveAspectRatio='none'%3E%3Cpath d='M2,2.6 C20,1.4 55,3.2 78,1.8' fill='none' stroke='%23c9a75c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---------------------------------------------------------
   背景（横長の画面：PC・タブレット横）
   画像をヒーロー全体に敷き（cover）、紙の上にロゴと文字が載る構図にする。
   画像の紙は幅の約39%。紙の幅は画面の大きさから計算する。
   --------------------------------------------------------- */
@media (min-width: 721px) and (min-aspect-ratio: 4/5){
  .has-desk-hero .hero{
    min-height: 100svh;
    padding: 90px 20px 60px;
    overflow: visible;
  }
  .has-desk-hero .scroll-cue{ display: flex; }
  .has-desk-hero .hero-sub{
    max-width: calc(var(--paper-w) * .8);
    text-wrap: wrap;               /* PC・横長は従来どおり */
  }
  .hero-desk{
    left: 0; right: 0; bottom: 0;
    width: auto; height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }
}
@supports (width: 1svh) and (width: max(1px, 2px)){
  @media (min-width: 721px) and (min-aspect-ratio: 4/5){
    .has-desk-hero .hero{ --paper-w: calc(max(100vw, 150svh) * .389); }
  }
}

/* 動きを減らす設定：キャンバスは使わず、静止画だけにする */
@media (prefers-reduced-motion: reduce){
  .hero-desk__canvas{ display: none; }
}