* {
  box-sizing: border-box;
}

:root {
  --theme-primary: #57859d;
  --theme-secondary: #ff6e48;
  --theme-tertiary: #f2c94c;
  --theme-background: #070a0b;
  --theme-on-background: #f1f1f1;
  --loader-muted: rgba(241, 241, 241, 0.56);
  --loader-soft: rgba(241, 241, 241, 0.08);
  --loader-line: rgba(241, 241, 241, 0.12);
  --loader-deco: #c69a4a;
  --loader-deco-rgb: 198, 154, 74;
  --loader-deco-soft: rgba(198, 154, 74, 0.40);
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--theme-background);
  overflow: hidden;
}

body:not(.flutter-loaded) {
  overflow: hidden;
}

#loading-container {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100%;
  overflow: hidden;
  color: var(--theme-on-background);
  background:
    radial-gradient(ellipse 90% 60% at 50% 48%,
      color-mix(in srgb, var(--theme-primary) 8%, transparent),
      transparent 62%),
    var(--theme-background);
  isolation: isolate;
  z-index: 9999;
  opacity: 1;
  transition:
    opacity 700ms ease,
    filter 700ms ease;
}

.flutter-loaded #loading-container {
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

#intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Background ornaments
   ------------------------------------------------------------------ */

/* Contained sunburst halo. Fixed 380px box centered on the viewport
   so the rays never reach the screen edges. The radial mask keeps
   the rays entirely OUTSIDE the mark area — they appear only as a
   tight ring of gold rays around the central diamond, peaking ~80px
   beyond the mark's edge and fading to nothing at the box edge. */
.loader-beams {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from -90deg at 50% 50%,
    transparent 0deg 8.4deg,
    color-mix(in srgb, var(--loader-deco) 32%, transparent) 8.4deg 9deg
  );
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.72) 52%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.72) 52%,
    rgba(0, 0, 0, 0.55) 72%,
    transparent 100%
  );
  opacity: 0.7;
  animation: loader-sunburst-breathe 9s ease-in-out infinite;
}

/* Subtle vertical fluting at the left/right margins — keeps the eye
   anchored to the central column without screaming. */
.loader-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 26px,
    color-mix(in srgb, var(--theme-on-background) 6%, transparent) 26px 27px,
    transparent 27px 30px,
    color-mix(in srgb, var(--theme-on-background) 3%, transparent) 30px 31px,
    transparent 31px 34px
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.85) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.85) 0%,
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.85) 100%
  );
  opacity: 0.45;
}

.loader-noise {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------------
   Architectural frame: thin gold perimeter rectangle with stepped
   double-L corner brackets at all four corners.
   ------------------------------------------------------------------ */
.loader-frame {
  position: absolute;
  inset: 28px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--loader-deco) 18%, transparent);
}

.loader-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--loader-deco) 11%, transparent);
  pointer-events: none;
}

.loader-corner {
  position: absolute;
  width: 78px;
  height: 78px;
  pointer-events: none;
}

.loader-corner::before,
.loader-corner::after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-width: 0;
}

/* Outer L (full corner bracket — overlays the perimeter at full strength) */
.loader-corner::before {
  inset: 0;
  border-color: var(--loader-deco);
}

/* Inner L (stepped inward, slightly softer) */
.loader-corner::after {
  inset: 11px;
  border-color: color-mix(in srgb, var(--loader-deco) 58%, transparent);
}

.loader-corner--tl {
  top: 0;
  left: 0;
}

.loader-corner--tl::before {
  border-top-width: 1px;
  border-left-width: 1px;
}

.loader-corner--tl::after {
  border-top-width: 1px;
  border-left-width: 1px;
}

.loader-corner--tr {
  top: 0;
  right: 0;
}

.loader-corner--tr::before {
  border-top-width: 1px;
  border-right-width: 1px;
}

.loader-corner--tr::after {
  border-top-width: 1px;
  border-right-width: 1px;
}

.loader-corner--br {
  right: 0;
  bottom: 0;
}

.loader-corner--br::before {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.loader-corner--br::after {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.loader-corner--bl {
  bottom: 0;
  left: 0;
}

.loader-corner--bl::before {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.loader-corner--bl::after {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

/* ------------------------------------------------------------------
   Centerpiece
   ------------------------------------------------------------------ */
.loader {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(620px, calc(100vw - 64px));
  min-height: 340px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 24px 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

.loader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

body.intro-screen-active .loader-brand {
  display: none;
}

/* Mark shell — the wrapping container that produces the circular gold
   halo behind the emblem. No more nested CSS diamonds, scan lines,
   or raster icon here. All geometry lives inside the SVG emblem
   so the lines stay crisp and a single visual system owns the mark. */
.loader-mark-shell {
  position: relative;
  display: grid;
  width: 148px;
  height: 148px;
  place-items: center;
  border-radius: 50%;
  box-shadow:
    0 0 100px rgba(var(--loader-deco-rgb), 0.22),
    0 0 36px rgba(var(--loader-deco-rgb), 0.16);
}

/* Single inline SVG holding the entire deco mark:
   outer diamond + middle hairline + inner stepped center
   + 4 cardinal lozenge finials + a tiny filled core diamond. */
.loader-mark-emblem {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--loader-deco);
  filter:
    drop-shadow(0 0 10px rgba(var(--loader-deco-rgb), 0.35))
    drop-shadow(0 0 22px rgba(var(--loader-deco-rgb), 0.18));
}

/* ------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------ */
.loader-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.loader-kicker-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.loader-kicker-row::before,
.loader-kicker-row::after {
  content: "";
  display: block;
  width: 38px;
  height: 1px;
  flex-shrink: 0;
}

.loader-kicker-row::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--loader-deco) 55%, transparent)
  );
}

.loader-kicker-row::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--loader-deco) 55%, transparent),
    transparent
  );
}

.loader-kicker-pip {
  width: 5px;
  height: 5px;
  background: var(--loader-deco);
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--loader-deco-rgb), 0.55);
}

.loader-kicker,
.intro-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: color-mix(in srgb, var(--loader-deco) 88%, var(--theme-on-background));
}

.app-title {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 46px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--theme-on-background);
  text-wrap: balance;
  text-shadow: 0 10px 36px color-mix(in srgb, var(--theme-primary) 22%, transparent);
  animation: loader-title-in 800ms ease-out both;
  padding-left: 0.20em;
}

.loader-subtitle {
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--loader-muted);
}

/* ------------------------------------------------------------------
   Progress
   ------------------------------------------------------------------ */
.loader-status {
  display: grid;
  width: min(340px, 72vw);
  gap: 14px;
}

.loader-track {
  position: relative;
  height: 6px;
}

.loader-track::before,
.loader-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--loader-deco) 60%, transparent) 18%,
    color-mix(in srgb, var(--loader-deco) 60%, transparent) 82%,
    transparent
  );
}

.loader-track::before {
  top: 0;
}

.loader-track::after {
  bottom: 0;
}

.loader-track-marker {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  margin-left: -3.5px;
  background: var(--loader-deco);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(var(--loader-deco-rgb), 0.75);
  animation: loader-track-march 2800ms ease-in-out infinite;
}

.loader-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: color-mix(in srgb, var(--theme-on-background) 50%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.34em;
}

.loading-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dot {
  width: 4px;
  height: 4px;
  background: var(--loader-deco);
  transform: rotate(45deg);
  animation: loader-dot 1600ms ease-in-out infinite;
  opacity: 0.5;
}

.dot:nth-child(2) {
  animation-delay: 160ms;
}

.dot:nth-child(3) {
  animation-delay: 320ms;
}

/* ------------------------------------------------------------------
   Footer wordmark
   ------------------------------------------------------------------ */
.intro-text-container {
  position: absolute;
  right: 0;
  bottom: 24px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.intro-text {
  padding: 0 24px;
  letter-spacing: 0.44em;
  color: color-mix(in srgb, var(--loader-deco) 78%, var(--loader-muted));
  /* Override the inline <style> in index.html which forces a
     magenta-to-indigo gradient fill plus a blurFade animation that
     ends at opacity 0. None of those belong on the deco footer. */
  background: none;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor;
  animation: none;
  filter: none;
  opacity: 1;
}

/* ------------------------------------------------------------------
   Intro-screen (FFFD / SOWO) overrides — preserved for the post-loader
   overlay copy. Kept structurally intact but cleaned up for consistency.
   ------------------------------------------------------------------ */
.intro-headline {
  max-width: 760px;
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--theme-on-background);
  text-align: center;
  opacity: 0;
  animation: loader-title-in 800ms ease-out 260ms forwards;
}

.intro-body {
  max-width: 520px;
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--loader-muted);
  text-align: center;
  opacity: 0;
  animation: loader-title-in 650ms ease-out 520ms forwards;
}

.intro-headline.mono,
.intro-coord,
.intro-counter {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
}

.intro-headline.shimmer,
.intro-body .gradient-text,
.intro-body .shimmer-word {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary), var(--theme-tertiary));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loader-title-in 800ms ease-out 260ms forwards, loader-text-flow 2600ms linear infinite;
}

.intro-body .color-indigo,
.intro-body .color-purple {
  color: var(--theme-primary);
  -webkit-text-fill-color: var(--theme-primary);
}

.intro-body .color-emerald,
.intro-body .color-gold {
  color: var(--theme-secondary);
  -webkit-text-fill-color: var(--theme-secondary);
}

.intro-coord,
.intro-counter-label {
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--theme-on-background) 42%, transparent);
  text-transform: uppercase;
}

.intro-counter {
  font-size: 68px;
  font-weight: 800;
  line-height: 0.95;
  color: var(--theme-secondary);
}

/* ------------------------------------------------------------------
   Animations
   ------------------------------------------------------------------ */
@keyframes loader-title-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loader-sunburst-breathe {
  0%,
  100% {
    opacity: 0.50;
  }

  50% {
    opacity: 0.72;
  }
}

@keyframes loader-track-march {
  0%,
  100% {
    left: 4%;
    opacity: 0.85;
  }

  50% {
    left: 96%;
    opacity: 1;
  }
}

@keyframes loader-dot {
  0%,
  100% {
    opacity: 0.28;
    transform: rotate(45deg) scale(0.78);
  }

  45% {
    opacity: 0.92;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes loader-text-flow {
  from {
    background-position: 0 center;
  }

  to {
    background-position: 220% center;
  }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .loader {
    width: min(420px, calc(100vw - 36px));
    min-height: 300px;
    gap: 28px;
  }

  .loader-mark-shell {
    width: 118px;
    height: 118px;
  }

  .app-title {
    font-size: 32px;
    letter-spacing: 0.18em;
  }

  .loader-subtitle,
  .intro-body {
    font-size: 11px;
    letter-spacing: 0.24em;
  }

  .loader-frame {
    inset: 16px;
  }

  .loader-corner {
    width: 44px;
    height: 44px;
  }

  .loader-corner::after {
    inset: 7px;
  }

  .intro-text-container {
    bottom: 16px;
  }

  .intro-text {
    letter-spacing: 0.34em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}