*{ box-sizing: border-box; }
  .ft-on{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
  }

  .stage{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 2rem;
  }

  /* ambient breathing glow behind the mark */
  .glow{
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(70vw, 520px);
    height: min(70vw, 520px);
    transform: translate(-50%, -50%) scale(0.86);
    background: radial-gradient(circle,
      rgba(111,47,160,0.20) 0%,
      rgba(185,100,122,0.14) 38%,
      rgba(217,166,78,0.10) 60%,
      rgba(217,166,78,0) 72%);
    filter: blur(6px);
    animation: ft-breathe 3.6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes ft-breathe{
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(0.82); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.02); }
  }

  /* the mark itself, built from the logo's own silhouette as a mask
     so the moving gradient is exactly the F, nothing more */
  .mark-wrap{
    position: relative;
    width: clamp(96px, 22vw, 156px);
    aspect-ratio: 698 / 764;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    animation: ft-rise 0.9s cubic-bezier(.19,1,.22,1) 0.15s forwards;
  }
  @keyframes ft-rise{
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }

  .mark{
    position: absolute;
    inset: 0;
    -webkit-mask-image: url('ft-loader-mark.png');
    mask-image: url('ft-loader-mark.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: linear-gradient(200deg,
      var(--purple) 0%,
      var(--plum) 30%,
      var(--rose) 52%,
      var(--gold) 78%,
      var(--rose) 92%,
      var(--purple) 108%);
    background-size: 100% 320%;
    animation: ft-flow 2.6s ease-in-out infinite;
  }
  @keyframes ft-flow{
    0%   { background-position: 0% 0%; }
    50%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
  }

  /* a second, brighter pass that sweeps through — the "ignition" */
  .mark-sheen{
    position: absolute;
    inset: 0;
    -webkit-mask-image: url('ft-loader-mark.png');
    mask-image: url('ft-loader-mark.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: linear-gradient(115deg,
      transparent 30%,
      rgba(255,244,222,0.85) 47%,
      rgba(255,244,222,0.85) 53%,
      transparent 70%);
    background-size: 260% 100%;
    mix-blend-mode: screen;
    animation: ft-sweep 2.6s ease-in-out infinite;
    opacity: .9;
  }
  @keyframes ft-sweep{
    0%   { background-position: 130% 0%; }
    55%  { background-position: -30% 0%; }
    100% { background-position: -30% 0%; }
  }

  /* embers drifting up off the flame-like form */
  .ember{
    position: absolute;
    bottom: 6%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233,193,120,0.95), rgba(185,100,122,0));
    filter: blur(0.3px);
    opacity: 0;
    animation-name: ft-ember-rise;
    animation-timing-function: cubic-bezier(.33,.1,.3,1);
    animation-iteration-count: infinite;
  }
  .ember:nth-child(1){ left: 30%; animation-duration: 3.4s; animation-delay: .2s; }
  .ember:nth-child(2){ left: 52%; width: 4px; height: 4px; animation-duration: 3s;   animation-delay: 1.1s; }
  .ember:nth-child(3){ left: 68%; width: 3px; height: 3px; animation-duration: 3.8s; animation-delay: .6s; }
  .ember:nth-child(4){ left: 42%; width: 4px; height: 4px; animation-duration: 2.8s; animation-delay: 1.7s; }
  @keyframes ft-ember-rise{
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    12%  { opacity: .9; }
    70%  { opacity: .35; }
    100% { opacity: 0; transform: translate(6px, -92px) scale(1.1); }
  }

  .wordmark{
    margin-top: 1.6rem;
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 460;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--ink);
    letter-spacing: 0.01em;
    opacity: 0;
    animation: ft-fade-up 0.8s ease-out 0.85s forwards;
  }
  .tagline{
    margin-top: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
    opacity: 0;
    animation: ft-fade-up 0.8s ease-out 1.05s forwards;
  }
  @keyframes ft-fade-up{
    from{ opacity: 0; transform: translateY(6px); }
    to  { opacity: 1; transform: translateY(0); }
  }

  /* quiet indeterminate progress rule beneath the wordmark */
  .rule{
    margin-top: 2rem;
    width: 108px;
    height: 2px;
    border-radius: 2px;
    background: rgba(42,40,44,0.08);
    overflow: hidden;
    opacity: 0;
    animation: ft-fade-up 0.8s ease-out 0.85s forwards;
  }
  .rule::after{
    content: '';
    display: block;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--rose), var(--gold));
    animation: ft-travel 1.7s cubic-bezier(.45,0,.2,1) infinite;
  }
  @keyframes ft-travel{
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
  }

  .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;
  }

  @media (prefers-reduced-motion: reduce){
    .glow, .mark, .mark-sheen, .ember, .rule::after{ animation: none !important; }
    .mark{ background-position: 0% 55%; }
    .mark-sheen{ opacity: 0; }
    .mark-wrap, .rule{ animation-duration: .01s !important; animation-delay: 0s !important; opacity: 1; transform: none; }
  }

/* ==== Frontech loader: theme vars ==== */
.ft-on[data-ft-theme="light"]{
    color-scheme: light;
    --bg: #f2f2f0;
    --ink: #2a282c;
    --ink-soft: #6b686f;
    --purple: #6f2fa0;
    --plum: #9a4a8f;
    --rose: #b9647a;
    --gold: #d9a64e;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
.ft-on[data-ft-theme="dark"]{
    color-scheme: light;
    --bg: #151217;
    --ink: #f3f0f0;
    --ink-soft: #b7b1bb;
    --purple: #6f2fa0;
    --plum: #9a4a8f;
    --rose: #b9647a;
    --gold: #d9a64e;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme:dark;}
.ft-on[data-ft-theme="dark"] .glow{display:none;}
.ft-on[data-ft-theme="dark"] .rule{background:rgba(255,255,255,0.10);}
/* ==== mount overrides ==== */
.ft-on{background:var(--bg)!important;color:var(--ink)!important;overflow:hidden!important}
.ft-on p{font-size:14px!important;font-weight:500;letter-spacing:.01em;margin:0!important;color:var(--ink-soft)!important}
.ft-on .loading-bar,.ft-on .sp-loading-bar,.ft-on .loading-bar-fill,.ft-on .sp-loading-fill{display:none!important}
.ft-on .stage{padding:0}
.ft-on .rule{margin-top:1.75rem}
.spinner.ft-on{position:fixed;inset:0;transform:none;width:auto;height:auto;border:0;border-radius:0;animation:none;background:var(--bg)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:9999}
.spinner.ft-on.hidden{display:none!important}
.loading-screen:not(.show),.sp-loading:not(.show){display:none!important}
body.auth-ready .page-loading{display:none!important}