/* First-paint site loader. Plain CSS so it shows before the app bundle.
   Animations touch only transform, opacity and filter.
   The dark backdrop covers the unstyled server HTML from the first paint, but the artwork,
   ring and percentage stay hidden for the first half second: a page that is ready by then
   never shows them, and boot.js removes the backdrop at once (see .is-skip). */
#ft-loader {
  --ftl-size: min(62vmin, 260px);
  --ftl-fire: #ff6a1a;
  --ftl-ember: #ffb347;
  --ftl-deep: #c4161c;
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #030102; color: #ffd9b0;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  overflow: hidden; contain: strict; user-select: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
#ft-loader::before, #ft-loader::after {
  content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none;
  width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
}
/* Slow breathing fire glow behind everything. */
#ft-loader::before {
  background: radial-gradient(circle, rgba(255,96,24,.20) 0, rgba(196,22,28,.10) 14%, rgba(0,0,0,0) 34%);
  visibility: hidden;
  animation: ftl-reveal .01s linear .5s forwards, ftl-breathe 3.2s ease-in-out infinite;
}
/* Shown only once loading has taken half a second (boot.js reads this through the stage). */
.ftl-stage, .ftl-pct { visibility: hidden; animation: ftl-reveal .01s linear .5s forwards; }
@keyframes ftl-reveal { to { visibility: visible; } }
/* Ready before the artwork appeared: it never appears, and the backdrop fades out quickly. */
#ft-loader.is-skip::before, #ft-loader.is-skip .ftl-stage, #ft-loader.is-skip .ftl-pct { visibility: hidden; animation: none; }
#ft-loader.is-skip { transition: opacity .2s ease; }
#ft-loader.is-skip.is-out { transform: none; filter: none; }
#ft-loader::after {
  background: radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 62%);
}
.ftl-stage { position: relative; width: var(--ftl-size); height: var(--ftl-size); z-index: 1; }
.ftl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ftl-track { fill: none; stroke: rgba(255,120,60,.12); stroke-width: 2; }
.ftl-bar {
  fill: none; stroke: url(#ftl-grad); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 301.6; stroke-dashoffset: 301.6;
  filter: drop-shadow(0 0 3px rgba(255,110,30,.9)) drop-shadow(0 0 8px rgba(255,60,20,.55));
}
/* The glowing head that rides the end of the bar (rotated by script). */
.ftl-head { position: absolute; inset: 0; pointer-events: none; transform: rotate(0deg); }
.ftl-head::after {
  content: ""; position: absolute; left: 50%; top: 2%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff3d6; box-shadow: 0 0 6px 2px #ffb347, 0 0 16px 6px rgba(255,90,20,.7);
  animation: ftl-flicker .9s ease-in-out infinite alternate;
}
.ftl-orb { position: absolute; inset: 11%; border-radius: 50%; perspective: 700px; }
.ftl-orb::before { /* Inner heat glow under the art. */
  content: ""; position: absolute; inset: -6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,20,.35), rgba(255,60,20,0) 68%);
  animation: ftl-breathe 2.4s ease-in-out infinite;
}
.ftl-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  opacity: 0; backface-visibility: hidden; will-change: transform, opacity, filter;
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 71%);
          mask-image: radial-gradient(circle, #000 62%, transparent 71%);
}
.ftl-img.is-on { opacity: 1; animation: ftl-idle 4s ease-in-out infinite; }
.ftl-img.is-first { animation: ftl-rise .9s cubic-bezier(.2,.8,.2,1) both, ftl-idle 4s ease-in-out .9s infinite; }
/* 1 -> 2: vortex (rotate + scale + blur dissolve). */
.ftl-img.in-vortex { animation: ftl-vortex-in .75s cubic-bezier(.2,.8,.2,1) both; }
.ftl-img.out-vortex { animation: ftl-vortex-out .6s ease-in both; }
/* 2 -> 3: ember (heat flash, glow pulse). */
.ftl-img.in-ember { animation: ftl-ember-in .8s ease-out both; }
.ftl-img.out-ember { animation: ftl-ember-out .55s ease-in both; }
/* 3 -> 4: flip. */
.ftl-img.in-flip { animation: ftl-flip-in .7s cubic-bezier(.2,.8,.2,1) .18s both; }
.ftl-img.out-flip { animation: ftl-flip-out .36s ease-in both; }
.ftl-pulse { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgba(255,180,90,.9), 0 0 24px 8px rgba(255,90,20,.65), inset 0 0 30px 10px rgba(255,110,30,.5); }
.ftl-pulse.is-go { animation: ftl-pulse .8s ease-out both; }
.ftl-flash { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,240,200,.95), rgba(255,140,40,.5) 35%, rgba(255,60,20,0) 70%); }
.ftl-flash.is-go { animation: ftl-flash .6s ease-out both; }
.ftl-embers { position: absolute; inset: 0; pointer-events: none; }
.ftl-embers i { position: absolute; left: 50%; bottom: 8%; width: 4px; height: 4px; border-radius: 50%; opacity: 0;
  background: #ffcf8a; box-shadow: 0 0 6px 2px rgba(255,110,30,.8); animation: ftl-ember-rise 3.6s linear infinite; }
.ftl-embers i:nth-child(1) { --x: -90px; --d: 120px; animation-delay: 0s; }
.ftl-embers i:nth-child(2) { --x: -40px; --d: -60px; animation-delay: .7s; }
.ftl-embers i:nth-child(3) { --x: 10px; --d: 80px; animation-delay: 1.4s; animation-duration: 4.2s; }
.ftl-embers i:nth-child(4) { --x: 60px; --d: -110px; animation-delay: 2.1s; }
.ftl-embers i:nth-child(5) { --x: 110px; --d: 40px; animation-delay: 2.8s; animation-duration: 3.1s; }
.ftl-embers i:nth-child(6) { --x: -130px; --d: -30px; animation-delay: 1.1s; animation-duration: 4.6s; }
.ftl-embers i:nth-child(7) { --x: 140px; --d: -70px; animation-delay: .3s; animation-duration: 4s; }
.ftl-pct { position: relative; z-index: 1; font-size: 15px; font-weight: 700; letter-spacing: .18em; font-variant-numeric: tabular-nums;
  color: #ffd9b0; text-shadow: 0 0 8px rgba(255,110,30,.8), 0 0 18px rgba(255,60,20,.5); min-width: 5ch; text-align: center; }
/* 100%: glow burst, then the whole screen lifts away. */
#ft-loader.is-done .ftl-img.is-on { animation: ftl-burst .7s cubic-bezier(.2,.8,.2,1) both; }
#ft-loader.is-done .ftl-ring { animation: ftl-ring-out .7s cubic-bezier(.2,.8,.2,1) both; }
#ft-loader.is-done .ftl-head, #ft-loader.is-done .ftl-embers { opacity: 0; transition: opacity .3s; }
#ft-loader.is-done .ftl-flash { animation: ftl-flash .8s ease-out both; }
#ft-loader.is-out { opacity: 0; transform: scale(1.06); filter: blur(6px); pointer-events: none; }
#ft-loader.is-quick.is-out { transform: none; filter: none; transition-duration: .3s; }

@keyframes ftl-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ftl-flicker { from { opacity: .75; transform: scale(.85); } to { opacity: 1; transform: scale(1.15); } }
@keyframes ftl-idle { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.025); filter: brightness(1.12); } }
@keyframes ftl-rise { from { opacity: 0; transform: scale(.82); filter: blur(10px) brightness(1.6); } to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } }
@keyframes ftl-vortex-in { from { opacity: 0; transform: rotate(-140deg) scale(1.45); filter: blur(12px) brightness(1.8); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(0) scale(1); filter: blur(0) brightness(1); } }
@keyframes ftl-vortex-out { to { opacity: 0; transform: rotate(160deg) scale(.45); filter: blur(10px); } }
@keyframes ftl-ember-in { 0% { opacity: 0; transform: scale(.9); filter: brightness(2.6) saturate(1.6) blur(6px); } 45% { opacity: 1; filter: brightness(1.8) saturate(1.4) blur(1px); } 100% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1) blur(0); } }
@keyframes ftl-ember-out { to { opacity: 0; transform: scale(1.18); filter: brightness(2.4) blur(8px); } }
@keyframes ftl-flip-in { from { opacity: 0; transform: rotateY(-90deg) scale(.9); filter: brightness(1.8); } to { opacity: 1; transform: rotateY(0) scale(1); filter: brightness(1); } }
@keyframes ftl-flip-out { to { opacity: 0; transform: rotateY(90deg) scale(.9); filter: brightness(1.6); } }
@keyframes ftl-pulse { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ftl-flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes ftl-ember-rise {
  0% { opacity: 0; transform: translate(var(--x), 0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--d) * .4), -300px) scale(.3); }
}
@keyframes ftl-burst { 0% { opacity: 1; transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.12); filter: brightness(1.9) saturate(1.3); } 100% { opacity: 1; transform: scale(1.22); filter: brightness(1.3); } }
@keyframes ftl-ring-out { to { opacity: 0; transform: rotate(-90deg) scale(1.35); } }

@media (prefers-reduced-motion: reduce) {
  #ft-loader::before, .ftl-orb::before, .ftl-head::after { animation: none; }
  .ftl-embers, .ftl-pulse, .ftl-flash, .ftl-head { display: none; }
  .ftl-img.is-on, .ftl-img.is-first, .ftl-img[class*="in-"] { animation: ftl-fade-in .35s ease both; }
  .ftl-img[class*="out-"] { animation: ftl-fade-out .35s ease both; }
  #ft-loader.is-done .ftl-img.is-on, #ft-loader.is-done .ftl-ring { animation: none; }
  #ft-loader.is-out { transform: none; filter: none; }
}
@keyframes ftl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ftl-fade-out { from { opacity: 1; } to { opacity: 0; } }