/* 東洋鍛工 ローディング：鍛造プレス（Refined Press）。front-page.php の .loader で使用。
   変数はテーマを汚さないよう .loader にスコープ。背景 #0a0908 / ロゴブルー #0081ff。 */
.loader { --black:#0a0908; --white:#fff; --blue:#0081ff; --cycle:2.25s; position:fixed; z-index:99999; inset:0; display:grid; place-items:center; overflow:hidden; background:var(--black); color:var(--white); }
.press { width:min(188px,46vw); height:auto; transform:translateY(-14px); filter:drop-shadow(0 14px 22px rgba(0,0,0,.34)); }

.press__head { transform-box:fill-box; transform-origin:center; animation:head var(--cycle) cubic-bezier(.7,0,.3,1) infinite; }
.press__tool { fill:url(#steel); stroke:rgba(255,255,255,.3); stroke-width:.8; }
.press__tool-top { fill:#d9dde1; stroke:rgba(255,255,255,.45); stroke-width:.8; }
.press__tool-highlight { fill:none; stroke:rgba(255,255,255,.22); stroke-width:.8; }
.press__tool-face { fill:#777e86; stroke:rgba(255,255,255,.5); stroke-width:1; }
.press__tool-mold-wall { fill:#111519; stroke:rgba(255,255,255,.18); stroke-width:.7; }
.press__tool-mold { fill:#080a0c; stroke:rgba(0,129,255,.52); stroke-width:1; }
.press__tool-mold-lip { fill:none; stroke:rgba(255,255,255,.32); stroke-width:1; }

.press__billet-body { fill:#0057ae; stroke:var(--blue); stroke-width:1; animation:billet-body var(--cycle) cubic-bezier(.65,0,.35,1) infinite; }
.press__billet-top { fill:url(#blueSteel); transform-box:fill-box; transform-origin:center; animation:billet-top var(--cycle) cubic-bezier(.65,0,.35,1) infinite; }
.press__product-side { fill:#003c78; stroke:#238fff; stroke-width:1.2; opacity:0; animation:product var(--cycle) cubic-bezier(.2,.8,.2,1) infinite; }
.press__product-ring { fill:#0075e8; stroke:#238fff; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:product var(--cycle) cubic-bezier(.2,.8,.2,1) infinite; }
.press__product-hole { fill:var(--black); stroke:rgba(255,255,255,.7); stroke-width:1; opacity:0; transform-box:fill-box; transform-origin:center; animation:product var(--cycle) cubic-bezier(.2,.8,.2,1) infinite; }
.press__anvil-top { fill:#252a30; stroke:rgba(255,255,255,.42); stroke-width:1; }
.press__mold { fill:#080a0c; stroke:rgba(255,255,255,.22); stroke-width:1; }
.press__mold-inner { fill:#14181c; stroke:rgba(255,255,255,.16); stroke-width:.7; }
.press__anvil-front { fill:url(#darkSteel); stroke:rgba(255,255,255,.24); stroke-width:.8; }
.press__anvil-lip { fill:none; stroke:rgba(255,255,255,.48); stroke-width:1.1; }
.press__anvil-highlight { fill:none; stroke:rgba(255,255,255,.17); stroke-width:.8; }

.loader__progress { position:absolute; top:calc(50% + 84px); left:50%; display:grid; grid-template-columns:auto 66px 3ch; align-items:center; gap:11px; width:198px; transform:translateX(-50%); font:500 8px/1 sans-serif; letter-spacing:.22em; }
.loader__line { height:1px; overflow:hidden; background:rgba(255,255,255,.18); }
.loader__line i { display:block; width:100%; height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; }
.loader__number { text-align:right; }
.loader.is-loading .loader__line i { animation:progress 3.9s cubic-bezier(.65,0,.35,1) forwards; }
.loader.is-exiting { animation:exit .8s cubic-bezier(.76,0,.24,1) forwards; }
.loader.is-exiting .press * { animation-play-state:paused; }

@keyframes head {
  0%,22% { transform:translate3d(0,-58px,0); }
  48%,57% { transform:translate3d(0,60px,0); }
  74%,100% { transform:translate3d(0,-58px,0); }
}
@keyframes billet-body {
  0%,34% {
    opacity:1;
    d:path("M100 163C100 160 109 158 120 158S140 160 140 163L140 176C140 179 131 181 120 181S100 179 100 176Z");
  }
  42% {
    opacity:1;
    d:path("M82 166C82 162 99 159 120 159S158 162 158 166L158 176C158 180 141 183 120 183S82 180 82 176Z");
  }
  48%,58% {
    opacity:0;
    d:path("M73 166C73 161 94 157 120 157S167 161 167 166L167 176C167 181 146 185 120 185S73 181 73 176Z");
  }
  64%,100% {
    opacity:0;
    d:path("M73 166C73 161 94 157 120 157S167 161 167 166L167 176C167 181 146 185 120 185S73 181 73 176Z");
  }
}
@keyframes billet-top {
  0%,34% { opacity:1; transform:translate3d(0,0,0) scaleX(1); }
  42% { opacity:1; transform:translate3d(0,3px,0) scaleX(1.9); }
  48%,58% { opacity:0; transform:translate3d(0,3px,0) scaleX(2.35); }
  64%,100% { opacity:0; transform:translate3d(0,3px,0) scaleX(2.35); }
}
@keyframes product {
  0%,60% { opacity:0; transform:scaleX(.94) scaleY(.9); }
  68%,92% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1); }
}
@keyframes progress { to { transform:scaleX(1); } }
@keyframes exit { to { opacity:0; transform:translate3d(0,-100%,0); visibility:hidden; } }

@media (prefers-reduced-motion:reduce) {
  .press * { animation:none; }
  .press__billet-top,.press__billet-body { opacity:0; }
  .press__product-side,.press__product-ring,.press__product-hole { opacity:1; }
  .loader.is-exiting { animation-duration:.01ms; }
}