/* ============================================================
   Sign-in and loading stage ("TuxBoot"), from "TuxProjects — sign-in and
   loading preview.html" (2026-10-21). Adapted only where its notes ask:
   theme from TuxProjects' own setting, the official TuxMat mark, Poppins
   self-hosted (css/fonts.css), and page-wide rules scoped to the stage.
   ============================================================ */
/* ── Theme tokens: TuxMat brand. Day is the default. ─────────── */
:root {
  --tt-font: "Poppins", Arial, sans-serif;
  --tt-ease: cubic-bezier(.22, .61, .21, 1);

  /* Day */
  --tt-bg: #FFFFFF;
  --tt-ink: #000000;                          /* TUX, primary text */
  --tt-mute: rgba(0, 0, 0, .52);
  --tt-glow: rgba(185, 151, 91, .10);
  --tt-haze: 255, 255, 255;                   /* rgb of the distance haze */
  --tt-dim: #E4E4E5;                          /* unscanned mark (brand grey, lifted) */
  --tt-scan-glow: 0 0 8px 0 rgba(185, 151, 91, .45);
  --tt-world: 1;
  --lens-fill: rgba(255, 255, 255, .9);
  --lens-edge: rgba(0, 0, 0, .16);
  --lens-line: rgba(0, 0, 0, .46);
  --lens-faint: rgba(0, 0, 0, .13);
  --tt-btn-bg: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.06));
  --tt-btn-fg: #1F1F1F;
  --tt-btn-border: rgba(0, 0, 0, .12);
  --tt-btn-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.04), 0 14px 32px -16px rgba(0,0,0,.18);
  --tt-btn-hover: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.14));
  --tt-btn-sheen: rgba(255, 255, 255, .45);

}
/* Night */
:root[data-theme="dark"] {
  --tt-bg: #000000;
  --tt-ink: #FFFFFF;
  --tt-mute: rgba(219, 220, 221, .56);
  --tt-glow: rgba(185, 151, 91, .07);
  --tt-haze: 0, 0, 0;
  --tt-dim: #262626;
  --tt-scan-glow: 0 0 10px 1px rgba(223, 186, 124, .55);
  --tt-world: .78;
  --lens-fill: rgba(255, 255, 255, .04);
  --lens-edge: rgba(219, 220, 221, .26);
  --lens-line: rgba(219, 220, 221, .6);
  --lens-faint: rgba(219, 220, 221, .17);
  --tt-btn-bg: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  --tt-btn-fg: #FFFFFF;
  --tt-btn-border: rgba(255, 255, 255, .16);
  --tt-btn-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.9);
  --tt-btn-hover: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
  --tt-btn-sheen: rgba(255, 255, 255, .12);
}
.tt-stage, .tt-stage *, .tt-stage *::before, .tt-stage *::after { box-sizing: border-box; }
.tt-stage { font-family: var(--tt-font); font-weight: 300; -webkit-font-smoothing: antialiased; }

/* ── Stage ─────────────────────────────────────────────────── */
.tt-stage {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: radial-gradient(60vmax 40vmax at 50% 46%, var(--tt-glow), transparent 70%), var(--tt-bg);
  color: var(--tt-ink);
  overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .6s var(--tt-ease), visibility 0s linear .6s, background-color .4s ease;
}
.tt-stage[data-state="done"] { opacity: 0; visibility: hidden; transition: opacity .9s var(--tt-ease), visibility 0s linear .9s; }
.tt-stage.is-paused * { animation-play-state: paused !important; }

/* Background: one picture of a project moving from plan to done. The project and
   its milestones at the far edge, the board in the middle (tasks travel from
   To do through In progress to Done), and the timeline along the near edge. */
.tt-world {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  perspective: 1200px; perspective-origin: 50% 20%;
  opacity: 0; filter: blur(9px);
  transition: opacity 1.4s var(--tt-ease), filter 1.6s var(--tt-ease);
  -webkit-mask-image: radial-gradient(ellipse 62% 50% at 50% 40%, transparent 30%, #000 68%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 50% at 50% 40%, transparent 30%, #000 68%, #000 80%, transparent 100%);
}
.tt-world::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--tt-haze)) 0%, rgba(var(--tt-haze), .6) 10%, rgba(var(--tt-haze), 0) 30%);
}
/* Focus pull: the work resolves from soft to sharp as sign-in appears */
[data-state="signin"] .tt-world, [data-state="loading"] .tt-world { opacity: var(--tt-world); filter: blur(0); }
.tt-plane {
  position: absolute; left: 50%; top: 50%;
  width: 2600px; height: 1290px; margin: -700px 0 0 -1300px;
  transform: rotateX(48deg) scale(.72);
  transform-origin: 50% 50%;
  transition: transform 1.2s var(--tt-ease);
}
.tt-okr {
  display: block; width: 100%; height: 100%; overflow: visible;
  animation: lens-sway 46s ease-in-out infinite alternate;
}
@keyframes lens-sway { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-14px, 10px, 0); } }
[data-state="ready"] .tt-world, [data-state="done"] .tt-world { opacity: calc(var(--tt-world) + .2); filter: blur(0); transition: opacity .7s var(--tt-ease); }
[data-state="ready"] .tt-plane, [data-state="done"] .tt-plane {
  transform: rotateX(38deg) scale(.8) translateZ(140px);
  transition: transform 1.2s cubic-bezier(.5, 0, .2, 1);
}

/* Scene parts */
.tt-okr .p      { fill: var(--lens-fill); stroke: var(--lens-edge); stroke-width: 1.8; }
.tt-okr .p.hdr  { stroke: rgba(185, 151, 91, .8); stroke-width: 2.4; }
.tt-okr .col    { fill: var(--lens-faint); fill-opacity: .35; stroke: var(--lens-edge); stroke-width: 1.8; }
.tt-okr .l      { fill: var(--lens-line); }
.tt-okr .t      { fill: var(--lens-faint); }
.tt-okr .lab    { fill: var(--lens-line); font: 500 24px var(--tt-font); letter-spacing: .02em; }
.tt-okr .lab.sm { font-size: 19px; }
.tt-okr .lab.gold { fill: var(--gold); }
.tt-okr .av     { fill: var(--lens-faint); stroke: var(--lens-edge); stroke-width: 1.8; }
.tt-okr .pill-todo { fill: none; stroke: var(--lens-line); stroke-width: 1.8; opacity: .7; }
.tt-okr .pill-prog { fill: var(--lens-line); opacity: .45; }
.tt-okr .pill-done { fill: var(--gold); }
.tt-okr .grid   { stroke: var(--lens-faint); stroke-width: 1.4; }
.tt-okr .dep    { fill: none; stroke: var(--lens-line); stroke-width: 1.8; opacity: .5; }
.tt-okr .ms     { fill: none; stroke: var(--lens-line); stroke-width: 2.4; animation: proj-ms 18s var(--tt-ease) infinite; }
.tt-okr .today  { fill: var(--gold); animation: proj-blink 3.2s ease-in-out infinite; }

/* Tasks travel To do → In progress → Done on one 18s cycle, three tasks a third apart */
.tt-okr .mover  { animation: proj-move 18s var(--tt-ease) infinite; }
.tt-okr .mover .p.mv { stroke: rgba(185, 151, 91, .7); }
.tt-okr .swap   { opacity: 0; animation: proj-swap 18s var(--tt-ease) infinite; }
.tt-okr .gbar   { fill: var(--lens-line); opacity: .42; transform-box: fill-box; transform-origin: left center; transform: scaleX(0);
                  animation: proj-bar 18s var(--tt-ease) infinite; }
.tt-okr .gbar.g { fill: var(--gold); opacity: .8; }
.tt-okr .prog   { fill: var(--gold); transform-box: fill-box; transform-origin: left center; transform: scaleX(0);
                  animation: proj-prog 18s var(--tt-ease) infinite; }

@keyframes proj-move {
  0%   { transform: translate(0, 0); opacity: 0; }
  4%   { opacity: 1; }
  20%  { transform: translate(0, 0); }
  30%  { transform: translate(800px, 0); }
  55%  { transform: translate(800px, 0); }
  65%  { transform: translate(1600px, 0); }
  88%  { transform: translate(1600px, 0); opacity: 1; }
  94%, 100% { transform: translate(1600px, 0); opacity: 0; }
}
@keyframes proj-swap { 0%, 65% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes proj-bar  { 0%, 8% { transform: scaleX(0); opacity: .42; } 30% { transform: scaleX(1); } 85% { transform: scaleX(1); opacity: .42; } 93% { opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes proj-prog { 0% { transform: scaleX(0); opacity: 1; } 85% { transform: scaleX(.78); opacity: 1; } 93% { opacity: 0; } 100% { transform: scaleX(0); opacity: 0; } }
@keyframes proj-ms   { 0%, 40% { fill: transparent; stroke: var(--lens-line); } 46%, 84% { fill: var(--gold); stroke: var(--gold); } 92%, 100% { fill: transparent; stroke: var(--lens-line); } }
@keyframes proj-blink { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

[data-state="ready"] .tt-col, [data-state="done"] .tt-col { opacity: 0; transition: opacity .45s var(--tt-ease); }

.tt-col {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(100% - 48px, 360px);
}

/* Mark */
.tt-mark {
  position: relative; width: 64px; aspect-ratio: 125.32 / 102.44;
  transform: translateY(var(--lift, 0px));
  transition: transform .9s var(--tt-ease);
}
.tt-stage:not(.is-live) .tt-mark { transition: none; }
.tt-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tt-mark .base path { fill: var(--tt-dim); transition: fill .4s ease; }
.tt-mark .gold { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); }
.tt-mark .gold path { fill: url(#tt-gold); }
.tt-scan {
  position: absolute; left: -22%; right: -22%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 20%, var(--gold-2) 80%, transparent);
  box-shadow: var(--tt-scan-glow);
  opacity: 0; pointer-events: none;
}
/* Scan plays once on first load; skipped when returning from Microsoft */
[data-state="boot"]:not(.is-return) .tt-mark .gold { animation: tt-reveal 1.1s var(--tt-ease) forwards; }
[data-state="boot"]:not(.is-return) .tt-scan { animation: tt-line 1.1s var(--tt-ease) forwards; }
@keyframes tt-reveal {
  from { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0); }
}
@keyframes tt-line {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { transform: translateY(var(--mark-h, 61px)); opacity: 1; }
  100% { transform: translateY(var(--mark-h, 61px)); opacity: 0; }
}
.is-return .tt-mark .gold,
[data-state="signin"] .tt-mark .gold, [data-state="loading"] .tt-mark .gold,
[data-state="ready"] .tt-mark .gold, [data-state="done"] .tt-mark .gold { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }

/* Sign-in */
.tt-signin { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 28px; width: 100%; }
.tt-signin > * { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--tt-ease), transform .5s var(--tt-ease); }
[data-state="signin"] .tt-signin > * { opacity: 1; transform: none; }
[data-state="signin"] .tt-signin > :nth-child(1) { transition-delay: .35s; }
[data-state="signin"] .tt-signin > :nth-child(2) { transition-delay: .45s; }
[data-state="signin"] .tt-signin > :nth-child(3) { transition-delay: .6s; }
[data-state="signin"] .tt-signin > :nth-child(n+4) { transition-delay: .7s; }
.tt-stage:not([data-state="signin"]) .tt-signin { visibility: hidden; transition: visibility 0s linear .5s; }

.tt-word {
  position: relative; margin: 0; font-weight: 500; font-size: clamp(32px, 5vw, 46px);
  letter-spacing: .2em; line-height: 1; padding-left: .2em; color: var(--tt-ink);
}
.tt-word span { color: var(--gold); }
/* Wordmark resolves into focus: blur and wide tracking settle to the shared spec */
[data-state="signin"] .tt-signin > .tt-word { animation: lens-word 1.4s var(--tt-ease) .3s both; transition: none; }
@keyframes lens-word {
  from { opacity: 0; filter: blur(8px); letter-spacing: .34em; }
  to   { opacity: 1; filter: blur(0);   letter-spacing: .2em; }
}

.tt-word + .tt-ms-wrap { margin-top: 48px; }
.tt-sub { margin: 14px 0 44px; font-size: 15px; color: var(--tt-mute); letter-spacing: .01em; }

/* Microsoft button: frosted in both modes; logo stays full colour */
.tt-ms-wrap { position: relative; width: 100%; }
.tt-ms-wrap::before {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 10%; bottom: -30%;
  background: radial-gradient(closest-side, rgba(185,151,91,.24), transparent); filter: blur(16px);
}
.tt-ms {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 54px; padding: 0 18px;
  color: var(--tt-btn-fg); background: var(--tt-btn-bg);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--tt-btn-border); border-radius: 14px; box-shadow: var(--tt-btn-shadow);
  font: 600 15px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; letter-spacing: .01em;
  cursor: pointer; touch-action: manipulation;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease;
}
.tt-ms::before {
  content: ""; position: absolute; inset: 1px 1px 52% 1px; z-index: -1;
  border-radius: 13px 13px 40% 40% / 13px 13px 100% 100%;
  background: linear-gradient(180deg, var(--tt-btn-sheen), transparent);
}
@media (hover: hover) {
  .tt-ms:hover { background: var(--tt-btn-hover); border-color: rgba(185,151,91,.5); }
}
.tt-ms:active { transform: translateY(1px) scale(.995); }
.tt-ms:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.tt-ms svg { width: 20px; height: 20px; flex: none; }
.tt-ms[aria-busy="true"] { pointer-events: none; opacity: .6; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .tt-ms { background: #F4F4F4; }
  :root[data-theme="dark"] .tt-ms { background: linear-gradient(180deg, #2E2B27, #1B1A18); }
}

.tt-note { margin: 18px 0 0; font-size: 13px; color: var(--tt-mute); }
.tt-error {
  display: none; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--gold);
  font-size: 14px; line-height: 1.55; color: var(--tt-ink); max-width: 34ch;
}
.tt-error.is-visible { display: block; }

/* Loading */
.tt-status {
  z-index: 1; position: absolute; left: 0; right: 0; top: calc(50% + 64px); margin: 0; text-align: center;
  font-size: 13px; letter-spacing: .04em; color: var(--tt-mute); opacity: 0; transition: opacity .4s var(--tt-ease);
}
[data-state="loading"] .tt-status { opacity: 1; transition-delay: .4s; }
/* ── Phones ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tt-col { width: calc(100% - 40px); max-width: 360px; }
  .tt-mark { width: 56px; }
  .tt-word { font-size: clamp(28px, 8.4vw, 36px); letter-spacing: .16em; padding-left: .16em; }
  .tt-sub { margin: 12px 0 36px; font-size: 14px; }
  .tt-word + .tt-ms-wrap { margin-top: 40px; }
  .tt-note { font-size: 12.5px; }
  /* Smaller, lighter background: static OKR state, no blur, less GPU work */
  .tt-world { perspective: 800px; filter: none;
    -webkit-mask-image: radial-gradient(ellipse 110% 70% at 50% 50%, transparent 30%, #000 64%, transparent 100%);
            mask-image: radial-gradient(ellipse 110% 70% at 50% 50%, transparent 30%, #000 64%, transparent 100%); }
  .tt-plane { transform: rotateX(50deg) scale(.5); }
  .tt-okr, .tt-okr * { animation: none !important; }
  .tt-okr .gbar { transform: none; }
  .tt-okr .prog { transform: scaleX(.6); }
  .tt-okr .mover { opacity: 0; }
  [data-state="signin"] .tt-world, [data-state="loading"] .tt-world { opacity: calc(var(--tt-world) * .8); }
}
/* Short screens (phones in landscape) */
@media (max-height: 520px) {
  .tt-mark { width: 44px; }
  .tt-signin { margin-top: 16px; }
  .tt-word { font-size: 28px; }
  .tt-sub { margin: 8px 0 20px; }
  .tt-word + .tt-ms-wrap { margin-top: 24px; }
  .tt-ms { height: 48px; }
  .tt-note { margin-top: 10px; }
  .tt-status { top: calc(50% + 46px); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tt-stage, .tt-stage * { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .tt-mark .gold { clip-path: none !important; -webkit-clip-path: none !important; }
  .tt-world { filter: none !important; }
  .tt-okr .gbar { transform: none; }
  .tt-okr .prog { transform: scaleX(.6); }
  .tt-okr .mover { opacity: 0; }
}