/*
 * Ember at the anvil: the desk-wide loader (EmberLoader.tsx) and the boot splash (index.html).
 * Layers are cut from ember-levelup at 572x720; every layer fills the frame, so pivots are plain percentages.
 * One beat is 1.5s. The hammer lands at 76%, and the blade, burst, flash and sparks key off that moment.
 */
.forge { position: relative; display: inline-block; flex-shrink: 0; --beat: 1.5s; --g: calc(var(--u, 1px) * 34); }
.forge-l { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
img.forge-l { object-fit: contain; }

.forge-glow {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 120, 42, 0.5), rgba(232, 120, 42, 0) 70%);
  filter: blur(calc(var(--u, 1px) * 12));
  animation: forge-glow var(--beat) ease-in-out infinite;
}
.forge-shadow {
  position: absolute; bottom: 0; left: 50%; width: 70%; height: 5%; transform: translateX(-50%);
  border-radius: 50%; background: rgba(0, 0, 0, 0.45); filter: blur(3px); pointer-events: none;
}

/*
 * Arm: shoulder > elbow > wrist, all nested so each joint carries the next. The forearm hangs from under
 * the shoulder pad (the cap layer sits on top), and the hammer turns in the fist.
 * Swing: lift the forearm up past the head with the hammer cocked overhead, hold, then drive it down onto the blade.
 */
.forge-arm { transform-origin: 70.63% 39.44%; animation: forge-shoulder var(--beat) infinite; }
.forge-fore { transform-origin: 73.43% 43.61%; animation: forge-elbow var(--beat) infinite; }
.forge-wrist { transform-origin: 79.55% 58.47%; animation: forge-wrist var(--beat) infinite; }

/* Blade: cools to a dull red while the hammer rises, flares white-hot on the hit, then a glint runs to the tip. */
.forge-blade {
  -webkit-mask-image: url(/brand/forge/blade.webp); mask-image: url(/brand/forge/blade.webp);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  overflow: hidden;
}
.forge-cool { background: rgb(150, 34, 8); mix-blend-mode: multiply; opacity: 0; animation: forge-cool var(--beat) infinite; }
.forge-heat {
  background: linear-gradient(113deg, rgba(255, 214, 120, 0.7) 30%, rgba(255, 252, 230, 1) 62%, rgba(255, 236, 170, 0.9) 80%);
  mix-blend-mode: screen; opacity: 0; animation: forge-heat var(--beat) infinite;
}
.forge-glint { opacity: 0; animation: forge-glint-o var(--beat) infinite; }
.forge-glint > span {
  position: absolute; inset: 0;
  background: linear-gradient(113deg, transparent 44%, rgba(255, 255, 240, 0.95) 50%, transparent 56%);
  animation: forge-glint-x var(--beat) infinite;
}
.forge-burst { opacity: 1; animation: forge-burst var(--beat) infinite; }

.forge-heart {
  position: absolute; left: 42.8%; top: 47.9%; width: 18%; height: 14%; transform: translate(-50%, -50%);
  border-radius: 50%; mix-blend-mode: screen; pointer-events: none; opacity: 0.35;
  background: radial-gradient(circle, rgba(253, 186, 116, 0.9), rgba(232, 120, 42, 0) 70%);
  animation: forge-heart var(--beat) ease-in-out infinite;
}
.forge-flash {
  position: absolute; left: 71%; top: 66.4%; width: 40%; height: 32%; border-radius: 50%;
  mix-blend-mode: screen; pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 250, 220, 1), rgba(253, 186, 60, 0.55) 35%, rgba(232, 120, 42, 0) 70%);
  animation: forge-flash var(--beat) ease-out infinite;
}
.forge-spark {
  position: absolute; left: 71%; top: 66.4%; border-radius: 50%; pointer-events: none; opacity: 0;
  width: max(2px, calc(var(--u, 1px) * 2.6)); height: max(2px, calc(var(--u, 1px) * 2.6));
  background: #fde68a; box-shadow: 0 0 calc(var(--u, 1px) * 5) calc(var(--u, 1px) * 1.5) rgba(251, 191, 36, 0.9);
  animation: forge-spark var(--beat) infinite;
}

/* Same stops and easing on all three joints so they stay in lockstep: rest, lift, cocked hold, strike at 76%, rebound. */
@keyframes forge-shoulder {
  0%, 4% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  48% { transform: rotate(-8deg); animation-timing-function: ease-out; }
  60% { transform: rotate(-10deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.5); }
  76% { transform: rotate(0deg); animation-timing-function: ease-out; }
  82% { transform: rotate(-2deg); animation-timing-function: ease-in-out; }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes forge-elbow {
  0%, 4% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  48% { transform: rotate(-150deg); animation-timing-function: ease-out; }
  60% { transform: rotate(-157deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.5); }
  76% { transform: rotate(0deg); animation-timing-function: ease-out; }
  82% { transform: rotate(-14deg); animation-timing-function: ease-in-out; }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes forge-wrist {
  0%, 4% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  48% { transform: rotate(250deg); animation-timing-function: ease-out; }
  60% { transform: rotate(262deg); animation-timing-function: cubic-bezier(0.7, 0, 1, 0.5); }
  76% { transform: rotate(0deg); animation-timing-function: ease-out; }
  82% { transform: rotate(18deg); animation-timing-function: ease-in-out; }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes forge-cool {
  0% { opacity: 0.15; }
  70% { opacity: 0.55; }
  76% { opacity: 0; }
  86% { opacity: 0.04; }
  100% { opacity: 0.15; }
}
@keyframes forge-heat {
  0%, 75% { opacity: 0; }
  77% { opacity: 1; }
  90% { opacity: 0.35; }
  100% { opacity: 0; }
}
@keyframes forge-glint-o {
  0%, 76% { opacity: 0; }
  79% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
@keyframes forge-glint-x {
  0%, 76% { transform: translateX(-34%); }
  94%, 100% { transform: translateX(40%); }
}
@keyframes forge-burst {
  0% { opacity: 0.2; }
  58%, 75.5% { opacity: 0; }
  77% { opacity: 1; }
  100% { opacity: 0.2; }
}
@keyframes forge-heart {
  0%, 70%, 100% { opacity: 0.3; }
  79% { opacity: 1; }
}
@keyframes forge-glow {
  0%, 70%, 100% { opacity: 0.5; transform: scale(0.95); }
  79% { opacity: 1; transform: scale(1.05); }
}
@keyframes forge-flash {
  0%, 75% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  77% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes forge-spark {
  0%, 75.5% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  76.5% { opacity: 1; transform: translate(0, 0) scale(1); }
  84% { opacity: 1; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5 + var(--g) * 0.1)); }
  92% { opacity: 0.8; transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * 0.8 + var(--g) * 0.45)) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + var(--g))) scale(0.4); }
}

.forge-dot { display: inline-block; animation: forge-dot 1.2s ease-in-out infinite; }
@keyframes forge-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .forge *, .forge-dot { animation: none !important; }
}

/* Boot splash until React mounts. */
.boot { min-height: 100vh; display: grid; place-items: center; background: #0a0705; color: #a8a29e; font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.boot p { margin: 0; }
.boot-label { letter-spacing: 0.02em; }
.boot-sub { font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.2em; text-transform: uppercase; color: #78716c; }