/* FitTech-AI website loader, "The Performance Build" - update-383.
   Public www host only: landing, guide, privacy, support. The app host keeps its
   own loader at /ft-loader.css and is deliberately untouched.

   Adapted from the supplied reference in two ways, both deliberate:
   - no html/body background or font-family rules. Those belong to the demo page;
     shipping them repaints the light www pages dark before the loader exits.
   - one served file rather than an inline <style> in four pages. CSP allows
     'unsafe-inline' for styles, so inline would work, but four copies drift.
     This file is linked from <head>, so it still paints before the bundle.

   The sequence runs ONCE and settles on the composed brand state, rather than
   looping. Two hosts hold it for different lengths (2000ms on the app, 3500ms on
   the public site) and a loop cannot land well at both: whichever number does not
   coincide with the wordmark's window would fade out over a half-drawn frame, or
   over an empty one. Playing once with animation-fill-mode: forwards means every
   dwell time past 2.2s shows the same finished screen, and the 5s failsafe shows
   a composed brand screen rather than a blank one. Only the background grid still
   loops. Changing the 2.2s means changing every shorthand below and the node
   delays with it. */

:root {
  --ftw-bg: #0A1521;
  --ftw-navy: #0F2942;
  --ftw-line: #17395A;
  --ftw-ice: #F0F4F8;
  --ftw-muted: #8CA1B8;
  --ftw-orange: #FF6B35;
  --ftw-ease: cubic-bezier(.22, .8, .22, 1);
}

/* Set on <html> by ftw-loader.js before the body paints, when this session has
   already seen the loader. Without it, every internal link replays it. */
html.ftw-seen .ftw-loader { display: none !important; }

.ftw-loader {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  overflow: hidden;
  color: var(--ftw-ice);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter,
    system-ui, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(circle at 50% 48%, rgba(23, 57, 90, .38), transparent 36%),
    var(--ftw-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 480ms var(--ftw-ease), visibility 0s linear 0s;
  isolation: isolate;
}

.ftw-loader[hidden] { display: none !important; }

/* technical grid */
.ftw-loader::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -1px;
  background-image:
    linear-gradient(rgba(140, 161, 184, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 161, 184, .055) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 67%);
  mask-image: radial-gradient(circle at center, #000 0%, transparent 67%);
  opacity: .8;
  animation: ftw-grid-breathe 2.2s ease-in-out infinite;
}

/* depth rings */
.ftw-loader::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(78vw, 760px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(140, 161, 184, .045);
  border-radius: 50%;
  box-shadow:
    0 0 0 72px rgba(140, 161, 184, .018),
    0 0 0 144px rgba(140, 161, 184, .012);
  pointer-events: none;
}

.ftw-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 480ms var(--ftw-ease), visibility 0s linear 480ms;
}

.ftw-loader__content {
  display: grid;
  justify-items: center;
  width: min(100%, 620px);
  transform: translateY(-1vh);
  text-align: center;
}

.ftw-loader__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--ftw-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: 0;
  animation: ftw-eyebrow 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__eyebrow-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ftw-orange);
  box-shadow: 0 0 9px rgba(255, 107, 53, .9);
}

.ftw-loader__stage {
  position: relative;
  width: min(100%, 500px);
  height: 154px;
}

.ftw-loader__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ftw-loader__guide {
  fill: none;
  stroke: rgba(140, 161, 184, .13);
  stroke-width: 1;
  stroke-dasharray: 2 10;
}

.ftw-loader__trajectory-wrap {
  transform-box: fill-box;
  transform-origin: center 60%;
  animation: ftw-flatten 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__trajectory {
  fill: none;
  stroke: var(--ftw-orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 530;
  stroke-dashoffset: 530;
  filter: drop-shadow(0 0 5px rgba(255, 107, 53, .6));
  animation: ftw-draw 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__node {
  fill: var(--ftw-bg);
  stroke: var(--ftw-orange);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ftw-node 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__node:nth-of-type(1) { animation-delay: 0ms; }
.ftw-loader__node:nth-of-type(2) { animation-delay: 73ms; }
.ftw-loader__node:nth-of-type(3) { animation-delay: 147ms; }
.ftw-loader__node:nth-of-type(4) { animation-delay: 220ms; }
.ftw-loader__node:nth-of-type(5) { animation-delay: 293ms; }
.ftw-loader__node:nth-of-type(6) { animation-delay: 367ms; }
.ftw-loader__node:nth-of-type(7) { animation-delay: 440ms; }

.ftw-loader__scan {
  fill: var(--ftw-orange);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 107, 53, 1));
  offset-path: path("M28 112 C83 108 105 91 153 95 S222 80 262 75 S328 62 361 66 S418 37 472 34");
  offset-rotate: 0deg;
  animation: ftw-scan 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__brand {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ftw-ice);
  font-size: clamp(32px, 7.5vw, 52px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.055em;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform: translateY(2px) scale(.98);
  animation: ftw-brand-reveal 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__brand-accent { color: var(--ftw-orange); }

.ftw-loader__brand-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82%, 440px);
  height: 2px;
  border-radius: 999px;
  background: var(--ftw-orange);
  box-shadow: 0 0 10px rgba(255, 107, 53, .55);
  opacity: 0;
  transform: translate(-50%, 30px) scaleX(.18);
  animation: ftw-brand-line 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__principles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 16px;
  margin: 20px 0 0;
  color: var(--ftw-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  animation: ftw-principles 2.2s var(--ftw-ease) 1 forwards;
}

.ftw-loader__principles i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(140, 161, 184, .58);
}

.ftw-loader__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes ftw-grid-breathe {
  0%, 100% { opacity: .48; transform: scale(1); }
  50%      { opacity: .82; transform: scale(1.012); }
}

@keyframes ftw-eyebrow {
  0%, 7%   { opacity: 0; transform: translateY(4px); }
  15%, 100%{ opacity: 1; transform: translateY(0); }
}

@keyframes ftw-draw {
  0%, 7%    { stroke-dashoffset: 530; opacity: 0; }
  11%       { opacity: 1; }
  40%, 52%  { stroke-dashoffset: 0; opacity: 1; }
  60%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes ftw-node {
  0%, 10%   { opacity: 0; transform: scale(.35); }
  20%, 45%  { opacity: 1; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(.45); }
}

@keyframes ftw-scan {
  0%, 8%    { offset-distance: 0%; opacity: 0; }
  12%       { opacity: 1; }
  40%, 48%  { offset-distance: 100%; opacity: 1; }
  56%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes ftw-flatten {
  0%, 43%   { transform: scaleY(1); }
  57%, 100% { transform: scaleY(.015); }
}

@keyframes ftw-brand-reveal {
  0%, 52%   { opacity: 0; clip-path: inset(0 50% 0 50%); transform: translateY(2px) scale(.98); }
  63%, 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(2px) scale(1); }
}

@keyframes ftw-brand-line {
  0%, 46%   { opacity: 0; transform: translate(-50%, 30px) scaleX(.18); }
  56%       { opacity: 1; transform: translate(-50%, 30px) scaleX(1); }
  84%, 100% { opacity: 1; transform: translate(-50%, 30px) scaleX(.18); }
}

@keyframes ftw-principles {
  0%, 60%   { opacity: 0; transform: translateY(5px); }
  68%, 100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .ftw-loader__content { width: min(100%, 390px); }
  .ftw-loader__stage { height: 124px; }
  .ftw-loader__eyebrow { margin-bottom: 16px; letter-spacing: .18em; }
  .ftw-loader__principles { letter-spacing: .14em; gap: 8px; }
  .ftw-loader__brand-line { transform: translate(-50%, 25px) scaleX(.18); }

  @keyframes ftw-brand-line {
    0%, 46%   { opacity: 0; transform: translate(-50%, 25px) scaleX(.18); }
    56%       { opacity: 1; transform: translate(-50%, 25px) scaleX(1); }
    84%, 100% { opacity: 1; transform: translate(-50%, 25px) scaleX(.18); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ftw-loader,
  .ftw-loader::before,
  .ftw-loader__eyebrow,
  .ftw-loader__trajectory-wrap,
  .ftw-loader__trajectory,
  .ftw-loader__node,
  .ftw-loader__scan,
  .ftw-loader__brand,
  .ftw-loader__brand-line,
  .ftw-loader__principles { animation: none !important; }

  .ftw-loader { transition-duration: 1ms; }
  .ftw-loader__chart { display: none; }
  .ftw-loader__eyebrow,
  .ftw-loader__brand,
  .ftw-loader__principles { opacity: 1; transform: none; }
  .ftw-loader__brand { clip-path: none; }
  .ftw-loader__brand-line { opacity: 1; transform: translate(-50%, 30px) scaleX(.18); }
}