/* ==========================================================================
   POTOMAK 2026 — アニメーションするロゴマーク
   鯨のSVGでマスク(型抜き)し、その内側で色の玉をゆっくり動かす。
   色と座標は JS が毎フレーム書き込むため、ここでは持たない。

   使い方:
     <div class="logo-mark" style="--logo-mark-scale: 0.36"> … </div>
   基準サイズは幅300px。--logo-mark-scale で拡大縮小する。
   ぼかし(blur)も一緒に拡大されるよう、内側をtransformで縮めている。
   ========================================================================== */

.logo-mark {
  --logo-mark-scale: 1;
  /* 鯨マークの縦横比(SVGのviewBoxと一致させる) */
  --logo-mark-ratio: 283.46 / 120.58;

  /*
   * --logo-mark-scale は置く場所ごとの倍率(テンプレート側から指定)。
   * --logo-mark-shrink は画面幅に応じた追加の縮小率(CSS側から指定)。
   * 親要素に shrink を書けば、inline指定の scale を保ったまま縮められる。
   */
  position: relative;
  width: calc(300px * var(--logo-mark-scale) * var(--logo-mark-shrink, 1));
  aspect-ratio: var(--logo-mark-ratio);
}

.logo-mark__stage {
  position: absolute;
  inset: 0;
  width: 300px;
  aspect-ratio: var(--logo-mark-ratio);
  overflow: hidden;
  isolation: isolate;

  transform: scale(calc(var(--logo-mark-scale) * var(--logo-mark-shrink, 1)));
  transform-origin: 0 0;

  -webkit-mask-image: url("../images/mark-whale.svg");
          mask-image: url("../images/mark-whale.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.logo-mark__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(29.5px);
  will-change: transform;
}

.logo-mark__blob--0 { width: 159px; height: 159px; left:  56px; top: -28px; }
.logo-mark__blob--1 { width: 141px; height: 141px; left:   9px; top:   9px; }
.logo-mark__blob--2 { width: 131px; height: 131px; left: 155px; top:  19px; }
.logo-mark__blob--3 { width: 150px; height: 150px; left: 108px; top:  -9px; }

/*
 * ざらつき(フィルムグレイン)の重ね。
 * 現在は 0 = 無効。質感を足したくなったら --logo-mark-grain を 0.1〜0.6 程度に。
 */
.logo-mark__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--logo-mark-grain, 0);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}