/* ========================================================================
   アニメーション強め版の追加分
   top-base.css のあとに読み込みます。
   控えめ版との違いは、このファイルと、ヒーローに置いたロゴだけです。

   ■ 常に動き続ける装飾を止めたいとき
     index-anime.html の1行目 <html lang="ja" class="motion-rich"> から
     class="motion-rich" を消してください。
     背景の輪・点・葉の揺れが止まります。開いたときの演出は残ります。
   ======================================================================== */

/* --- 1. ヒーローのロゴ --------------------------------------------------
   見出しの上に置きます。開いたときに最初に出るのがロゴになるので、
   「どこの事業所か」が真っ先に伝わります。 */
.hero-logo {
  position: relative;
  display: block;
  line-height: 0;
  width: 84px; height: 84px;
  margin: 0 0 22px;
}
@media (min-width: 1024px) {
  .hero-logo { width: 104px; height: 104px; margin-bottom: 26px; }
}

/* --- 1b. ロゴを「順番に描く」演出 ---------------------------------------
   ロゴをSVGに描き起こしてはいません。**本物のロゴ画像そのまま**を、
   扇形のマスク12枚で時計回りに少しずつ見せています。
   同時に主色の線が円周を1周し、線が通ったところから手が現れて見えます。
   形は本物なので、写し取りによるズレが起きません。

   ＜大事な仕掛け＞
   既定では12枚すべて opacity:1（＝ロゴは最初から全部見える）にしてあります。
   アニメーションは「動きを減らす設定ではない場合」だけ有効になります。
   そのため、古いブラウザや動きを止めた環境でも、ロゴが欠けることはありません。 */
.logo-draw { display: block; width: 100%; height: 100%; overflow: visible; }
.sw { fill: #fff; opacity: 1; }
.logo-trace {
  fill: none;
  stroke: var(--green, #BE4074);      /* 主色（ローズ） */
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 240.5px 244px;
  transform: rotate(-90deg);          /* 円の一番上から描き始めます */
  stroke-dasharray: 1458;             /* 円周 2πr（r=232）の長さ */
  stroke-dashoffset: 1458;
}

/* ヘッダーのロゴも少し大きくします */
@media (min-width: 1024px) {
  .brand-mark { width: 72px; height: 72px; }
}

/* 写真の上を走る光の演出は、安っぽく見えたため削除しました（2026-09-17）。 */

/* --- 2. 開いたときの順番 ------------------------------------------------
   ロゴ → 見出し1行目 → 2行目 → 本文、と左側が上から順に出て、
   そのあいだに右の写真が寄ってきます。 */

@keyframes logoIn {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: none; }
}
/* 扇形が1枚ずつ点く。12枚を少しずつずらすと、なめらかな一周に見えます */
@keyframes swIn { from { opacity: 0; } to { opacity: 1; } }

/* 描く線。円周の長さぶんずらした破線を、0まで戻して1周描きます */
@keyframes traceDraw {
  from { stroke-dashoffset: 1458; opacity: 1; }
  to   { stroke-dashoffset: 0;    opacity: 1; }
}
/* 描き終わったら、わずかに広がって消えます */
@keyframes traceOut {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: 1.13; }
}
/* 行き過ぎて戻る動き。参考サイトと同じ考え方です */
@keyframes lineIn {
  0%   { opacity: 0; translate: 0 38px; }
  60%  { opacity: 1; translate: 0 -4px; }
  100% { opacity: 1; translate: none; }
}
@keyframes textIn {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: none; }
}
/* --- 写真の登場 ---------------------------------------------------------
   参考サイトの curtainReveal（clip-path で右端から斜めに開く）を取り入れています。

   参考サイトは写真そのものに clip-path をかけていますが、うちの写真は
   白い枠・影・1.4度の傾きが付いているので、同じように切ると枠と影まで消えます。
   そこで「枠はそのまま／中身だけ切り開く」に分けています。

   ＜2026-09-17 作り直し＞
   はじめは「枠が動く＋写真が開く＋光が走る」の3つを重ねていましたが、
   ・枠が8px行き過ぎて戻る動きと、開く動きが同時に走るため、
     開いている最中に写真が左右に揺れて見える
   ・光が斜めに走る演出は、バナー広告によくある見え方で安っぽい
   という2つの問題がありました。

   参考サイトが上品に見えるのは、**動きを1つだけ、ゆっくり確実にやっている**からです。
   同じ方針にして、次の形に直しました。

   ・枠は動かさない（静かに現れるだけ）
   ・**写真が右端から斜めに開く動きだけ**を、ゆっくり大きく見せる
   ・光の演出は削除

   横から現れる感じは、開く向き（右→左）が受け持ちます。 */

/* 1. 枠は動かさず、静かに現れます */
@keyframes photoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. 主役。中の写真が右端から斜めに開きます。
      左の辺が「上は右寄り・下は左寄り」に傾いたまま、まっすぐ横切ります */
@keyframes curtainIn {
  from { clip-path: polygon(118% 0%, 100% 0%, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(  0% 0%, 100% 0%, 100% 100%, -18% 100%); }
}
/* 参考サイトの kenBurns にあたる、写真のゆっくりした動き。
   22秒かけて拡大縮小と左右の移動を繰り返します。
   開く動きが終わる 1.8秒のあと、2.2秒から始めます。 */
@keyframes heroZoom {
  0%, 100% { scale: 1.06; translate: 1% -.6%; }
  50%      { scale: 1.12; translate: -1% .6%; }
}

@media (prefers-reduced-motion: no-preference) {

  .hero-logo { opacity: 0; animation: logoIn .62s cubic-bezier(.22,.61,.36,1) .10s forwards; }

  /* ロゴを順番に描く。12枚の扇形を 0.085秒ずつずらして点けます */
  .sw    { opacity: 0; animation: swIn .26s ease-out forwards; }
  .sw1   { animation-delay: .18s; }
  .sw2   { animation-delay: .265s; }
  .sw3   { animation-delay: .35s; }
  .sw4   { animation-delay: .435s; }
  .sw5   { animation-delay: .52s; }
  .sw6   { animation-delay: .605s; }
  .sw7   { animation-delay: .69s; }
  .sw8   { animation-delay: .775s; }
  .sw9   { animation-delay: .86s; }
  .sw10  { animation-delay: .945s; }
  .sw11  { animation-delay: 1.03s; }
  .sw12  { animation-delay: 1.115s; }

  /* 描く線。1周したあと、少し広がって消えます */
  .logo-trace {
    animation: traceDraw 1.15s cubic-bezier(.35,.0,.25,1) .14s forwards,
               traceOut  .55s ease-out 1.30s forwards;
  }

  /* top-base.css の控えめな出方を、こちらで上書きします */
  .hero h1 span:nth-child(1) { animation: lineIn .78s cubic-bezier(.22,.61,.36,1) .30s forwards; }
  .hero h1 span:nth-child(2) { animation: lineIn .78s cubic-bezier(.22,.61,.36,1) .50s forwards; }
  .hero p                    { animation: textIn .80s cubic-bezier(.22,.61,.36,1) .74s forwards; }

  .hero-photo     { animation: photoIn .5s ease-out .38s forwards; }
  .hero-photo img { animation: curtainIn 1.3s cubic-bezier(.16,1,.3,1) .5s both; }
}

/* --- 3. 背景の装飾（常に動きます）---------------------------------------
   .motion-rich が付いているあいだだけ動きます。
   破線の輪はゆっくり回り、点はゆっくり明滅します。
   回転は見た目のわりに負荷が軽い動きですが、電池は使い続けます。 */
.geo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.geo-ring {
  position: absolute;
  right: 46%; top: -110px;
  width: 340px; height: 340px;
  border: 2px dashed var(--wave-soft);
  border-radius: 50%;
  opacity: .62;
}
.geo-ring-2 {
  position: absolute;
  left: 6%; bottom: -70px;
  width: 190px; height: 190px;
  border: 2px dashed var(--wave-accent-b);
  border-radius: 50%;
  opacity: .44;
}
.geo-dot { position: absolute; border-radius: 50%; }
.geo-dot-1 { width: 9px; height: 9px; top: 24%; left: 43%; background: var(--wave-main); opacity: .5; }
.geo-dot-2 { width: 6px; height: 6px; top: 58%; left: 35%; background: var(--wave-accent-b); opacity: .45; }
.geo-dot-3 { width: 7px; height: 7px; top: 14%; left: 27%; background: var(--wave-accent-a); opacity: .5; }

@media (max-width: 767px) {
  .geo-ring   { width: 220px; height: 220px; right: 62%; top: -80px; }
  .geo-ring-2 { display: none; }
  .geo-dot-1  { left: 78%; }
  .geo-dot-2  { left: 12%; }
  .geo-dot-3  { display: none; }
}

@keyframes geoSpin  { to { rotate: 360deg; } }
@keyframes geoPulse { 0%,100% { opacity: .28; scale: 1; } 50% { opacity: .62; scale: 1.5; } }
@keyframes drift    { 0%,100% { translate: 0 0; }  50% { translate: 0 -11px; } }
@keyframes drift2   { 0%,100% { translate: 0 0; }  50% { translate: 0 9px; } }

@media (prefers-reduced-motion: no-preference) {
  .motion-rich .geo-ring   { animation: geoSpin 44s linear infinite; }
  .motion-rich .geo-ring-2 { animation: geoSpin 34s linear infinite reverse; }
  .motion-rich .geo-dot-1  { animation: geoPulse 3.4s ease-in-out infinite; }
  .motion-rich .geo-dot-2  { animation: geoPulse 4.2s ease-in-out 1s infinite; }
  .motion-rich .geo-dot-3  { animation: geoPulse 3.8s ease-in-out .5s infinite; }

  /* 葉がゆっくり漂います。rotate は元のCSSの傾きなので translate で動かします */
  .motion-rich .decor-hero .leaf-left  { animation: drift  13s ease-in-out infinite; }
  .motion-rich .decor-hero .leaf-right { animation: drift2 16s ease-in-out infinite; }

  /* トップの写真がゆっくり動き続けます（参考サイトの kenBurns にあたる部分）。
     開く動きが終わったあとから始めます。
     class="motion-rich" を外すと、最初の演出だけ残って、これが止まります。 */
  .motion-rich .hero-photo img {
    /* heroZoom の開始時の値と同じ位置で待たせます。
       こうしないと 2.2秒の時点で写真がカクッと飛びます */
    scale: 1.06;
    translate: 1% -.6%;
    animation: curtainIn 1.3s cubic-bezier(.16,1,.3,1) .5s both,
               heroZoom  22s  ease-in-out 2.2s infinite;
  }
}

/* --- 4. 動きを減らす設定の方には、すべて止めます ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero h1 span, .hero p, .hero-photo, .hero-photo img {
    opacity: 1; animation: none; translate: none; scale: none;
    clip-path: none;
  }

  .sw { opacity: 1; animation: none; }      /* ロゴは最初から全部見せます */
  .logo-trace { display: none; }
  .geo { display: none; }
  .motion-rich .hero-photo img { scale: none; translate: none; }
}

@media print {
  .geo { display: none; }
  .hero-logo { opacity: 1 !important; animation: none !important; }
}