/* ==========================================================================
   LINOA ローディングアニメーション（組み込み用）

   流れ:
     1. 「LINOA」の文字が左から順に立ち上がる
     2. モチーフロゴが画面上から落ちてきて 2 回バウンドする
     3. ロゴ全体がこちらへズームインし、
        そのままモチーフの丸が大きくなって画面いっぱいの青になる
     4. 青がフェードして、下のページ（トップの1画面目）が現れる

   3 の青は別々の演出ではなく「ロゴの丸がそのまま広がったもの」です。
   途中で青が割り込まないよう、ズームと一続きの動きにしてあります。

   タイミングはすべて :root の --linoa-t-* にまとまっています。
   --linoa-speed を変えると全体の速さが一括で変わります（2 なら 2 倍ゆっくり）。

   既存サイトとぶつからないよう、id / class / @keyframes / CSS変数のすべてに
   linoa- を付けてあります。
   ========================================================================== */

:root {
  --linoa-brand: #062A6B;

  --linoa-speed: 1;                 /* 全体の速さ倍率 */

  --linoa-t-letter: 0.25s;          /* 1 文字目が出るタイミング */
  --linoa-t-letter-step: 0.10s;     /* 文字どうしの間隔 */
  --linoa-d-letter: 0.60s;          /* 文字 1 つ分の長さ */

  --linoa-t-motif: 1.15s;           /* モチーフが落ち始めるタイミング */
  --linoa-d-motif: 1.45s;           /* 落下＋バウンドの長さ */

  --linoa-t-zoom: 2.85s;            /* ズームインの開始（ここから青に変わっていく） */
  --linoa-d-zoom: 1.00s;            /* ズーム＝青が広がりきるまでの長さ */

  --linoa-d-exit: 0.55s;            /* 青がフェードして消えるまでの長さ */

  --linoa-t-end: 3.85s;             /* ズームが終わる時刻（保険のタイマー用） */

  --linoa-ease-out: cubic-bezier(.22, 1, .36, 1);
  /* 近づいてくる感じを出すため、ゆっくり始まって加速していきます */
  --linoa-ease-zoom: cubic-bezier(.5, 0, .8, .45);
}

/* --------------------------------------------------------------------------
   ローディング画面
   -------------------------------------------------------------------------- */
#linoa-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;

  /* 最後に青ごとフェードして、下のページを見せます。
     背景色は @keyframes 側で扱うので、こちらは opacity だけを担当します
     （同じ要素に animation と transition を分けて持たせるための作りです）*/
  opacity: 1;
  transition: opacity calc(var(--linoa-d-exit) * var(--linoa-speed)) ease;
}

#linoa-loader.is-exiting {
  opacity: 0;
  pointer-events: none;
}

#linoa-loader.is-hidden { display: none; }

.linoa-stage {
  /* ズームの中心をモチーフ（丸い顔）のど真ん中に置いてあるので、
     拡大すると丸がそのまま広がって画面を覆います */
  transform-origin: 49.75% 33.8%;
}

.linoa-logo {
  display: block;
  width: min(46vw, 380px);
  height: auto;
  color: var(--linoa-brand);   /* ロゴの塗りは currentColor 参照 */

  /* viewBox をロゴぴったりに切り出しているため、既定のままだと
     跳ね上がったモチーフの上側が枠で切られて直線になってしまいます。
     枠の外にもはみ出して描けるようにしておきます。
     （画面外にあふれる分は #linoa-loader 側の overflow:hidden が受け止めます） */
  overflow: visible;
}

/* 各パーツの初期状態（再生前は何も見えない） */
.linoa-ltr,
.linoa-motif { opacity: 0; }

.linoa-ltr {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.linoa-motif {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* ---- 再生中 ---- */
#linoa-loader.is-playing .linoa-ltr {
  animation: linoa-letter-in calc(var(--linoa-d-letter) * var(--linoa-speed)) var(--linoa-ease-out) both;
}
#linoa-loader.is-playing .linoa-ltr:nth-child(1) { animation-delay: calc((var(--linoa-t-letter) + var(--linoa-t-letter-step) * 0) * var(--linoa-speed)); }
#linoa-loader.is-playing .linoa-ltr:nth-child(2) { animation-delay: calc((var(--linoa-t-letter) + var(--linoa-t-letter-step) * 1) * var(--linoa-speed)); }
#linoa-loader.is-playing .linoa-ltr:nth-child(3) { animation-delay: calc((var(--linoa-t-letter) + var(--linoa-t-letter-step) * 2) * var(--linoa-speed)); }
#linoa-loader.is-playing .linoa-ltr:nth-child(4) { animation-delay: calc((var(--linoa-t-letter) + var(--linoa-t-letter-step) * 3) * var(--linoa-speed)); }
#linoa-loader.is-playing .linoa-ltr:nth-child(5) { animation-delay: calc((var(--linoa-t-letter) + var(--linoa-t-letter-step) * 4) * var(--linoa-speed)); }
#linoa-loader.is-playing .linoa-ltr:nth-child(6) { animation-delay: calc((var(--linoa-t-letter) + var(--linoa-t-letter-step) * 5) * var(--linoa-speed)); }

#linoa-loader.is-playing .linoa-motif {
  animation: linoa-motif-drop calc(var(--linoa-d-motif) * var(--linoa-speed)) both;
  animation-delay: calc(var(--linoa-t-motif) * var(--linoa-speed));
}

/* ロゴ全体が近づいてくる。--linoa-zoom-scale は「丸が画面を覆いきる倍率」で、
   画面サイズから JS が計算して入れます */
#linoa-loader.is-playing .linoa-stage {
  animation: linoa-logo-zoom calc(var(--linoa-d-zoom) * var(--linoa-speed)) var(--linoa-ease-zoom) both;
  animation-delay: calc(var(--linoa-t-zoom) * var(--linoa-speed));
}

/* 文字と、丸の中の白い顔は、青に飲み込まれる前に静かに消えます。
   （残したままだと巨大な白い線が画面を横切ってしまうため） */
#linoa-loader.is-playing .linoa-wordmark,
#linoa-loader.is-playing .linoa-motif-face {
  animation: linoa-fade-into-blue calc(var(--linoa-d-zoom) * var(--linoa-speed)) linear both;
  animation-delay: calc(var(--linoa-t-zoom) * var(--linoa-speed));
}

/* 保険。丸が画面を覆いきったあと（92%）に背景も青へ入れ替えます。
   その時点ではすでに丸で覆われているので、見た目には何も起きません。 */
#linoa-loader.is-playing {
  animation: linoa-loader-bg calc(var(--linoa-d-zoom) * var(--linoa-speed)) step-end both;
  animation-delay: calc(var(--linoa-t-zoom) * var(--linoa-speed));
}

/* 文字：下からすっと立ち上がる */
@keyframes linoa-letter-in {
  from { opacity: 0; transform: translateY(48px) scale(.92); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* モチーフ：上から落ちて 2 回弾み、最後に少し揺れて止まる。

   やわらかく見せるコツは「つぶれるタイミングをずらす」ことです。
   接地したその瞬間に最大までつぶすと硬いゴムのように見えるので、
   　　接地（26%）→ 少し遅れて最大までつぶれる（31%）→ 伸びながら跳ね上がる（37%）
   という順に分けています。
   最後も、止まる前に軽く伸び縮みさせて余韻を残しています（92〜100%）。 */
@keyframes linoa-motif-drop {
  /* 落下：縦に伸びながら加速して落ちてくる */
  0%   { opacity: 0; transform: translateY(-1200px) scale(.90, 1.12); animation-timing-function: cubic-bezier(.4,0,.7,.45); }
  5%   { opacity: 1; }
  26%  { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.3,0,.4,1); }
  /* 1 回目の接地。ワンテンポ遅れてつぶれ、伸びながら跳ね上がる */
  31%  { transform: translateY(0) scale(1.13, .87); animation-timing-function: cubic-bezier(.25,0,.3,1); }
  37%  { transform: translateY(-42px) scale(.94, 1.08); animation-timing-function: cubic-bezier(.25,.6,.4,1); }
  50%  { transform: translateY(-155px) scale(1, 1.02); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  /* 2 回目の接地。つぶれ方は控えめに */
  62%  { transform: translateY(0) scale(.97, 1.05); animation-timing-function: cubic-bezier(.3,0,.4,1); }
  66%  { transform: translateY(0) scale(1.08, .92); animation-timing-function: cubic-bezier(.25,0,.3,1); }
  71%  { transform: translateY(-20px) scale(.96, 1.05); animation-timing-function: cubic-bezier(.25,.6,.4,1); }
  79%  { transform: translateY(-52px) scale(1, 1.01); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  /* 3 回目の接地。ここからは跳ねずに、その場で揺れて収まる */
  87%  { transform: translateY(0) scale(1.06, .94); animation-timing-function: cubic-bezier(.3,0,.35,1); }
  92%  { transform: translateY(0) scale(.975, 1.025); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  96%  { transform: translateY(0) scale(1.014, .986); animation-timing-function: var(--linoa-ease-out); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ロゴ全体：加速しながらこちらへ近づき、丸が画面いっぱいの青になる */
@keyframes linoa-logo-zoom {
  from { transform: scale(1); }
  to   { transform: scale(var(--linoa-zoom-scale, 14)); }
}

@keyframes linoa-fade-into-blue {
  0%, 20%   { opacity: 1; }
  52%, 100% { opacity: 0; }
}

@keyframes linoa-loader-bg {
  0%  { background-color: #fff; }
  92% { background-color: var(--linoa-brand); }
}

/* --------------------------------------------------------------------------
   ページ側の要素を、青が引いていくのに合わせて出したいとき（任意）

     <h1 class="linoa-reveal" style="--linoa-delay:.15s">…</h1>

   のように付けると、順に立ち上がってきます。使わなくても構いません。
   -------------------------------------------------------------------------- */
.linoa-reveal { opacity: 0; }

body.linoa-intro-done .linoa-reveal {
  animation: linoa-rise-in .8s var(--linoa-ease-out) both;
  animation-delay: var(--linoa-delay, 0s);
}

@keyframes linoa-rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   「視差効果を減らす」設定のときは、演出を出さずにページだけ表示します
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #linoa-loader { display: none; }
  .linoa-reveal { opacity: 1; }
  body.linoa-intro-done .linoa-reveal { animation: none; }
}