/* Ansaab app boot loader — Vivid light, landing → app handoff */

.app-loader,
.app-handoff {
  --loader-bg: #f4f6f8;
  --loader-primary: #2563eb;
  --loader-gold: #f59e0b;
  --loader-emerald: #10b981;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Noto Kufi Arabic', 'Outfit', system-ui, sans-serif;
  background: var(--loader-bg);
  color: #0f172a;
}

html[lang='en'] .app-loader,
html[lang='en'] .app-handoff {
  font-family: 'Outfit', 'Noto Kufi Arabic', system-ui, sans-serif;
}

.app-handoff {
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.app-handoff.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.landing-handoff #nasab-landing {
  opacity: 0;
  transform: scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.5s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
  pointer-events: none;
}

.app-loader__bg,
.app-handoff__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-loader__orb,
.app-handoff__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

.app-loader__orb--1,
.app-handoff__orb--1 {
  width: min(55vmax, 420px);
  height: min(55vmax, 420px);
  background: rgba(37, 99, 235, 0.12);
  top: -12%;
  inset-inline-end: -8%;
  animation: loader-float 7s ease-in-out infinite;
}

.app-loader__orb--2,
.app-handoff__orb--2 {
  width: min(45vmax, 340px);
  height: min(45vmax, 340px);
  background: rgba(245, 158, 11, 0.1);
  bottom: -10%;
  inset-inline-start: -6%;
  animation: loader-float 8s ease-in-out infinite reverse;
}

.app-loader__orb--3,
.app-handoff__orb--3 {
  width: min(35vmax, 260px);
  height: min(35vmax, 260px);
  background: rgba(16, 185, 129, 0.1);
  top: 38%;
  inset-inline-start: 42%;
  animation: loader-float 6s ease-in-out infinite;
  animation-delay: -2s;
}

.app-loader__content,
.app-handoff__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 360px;
  animation: loader-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-loader__logo-wrap,
.app-handoff__logo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 1rem;
}

.app-loader__logo-ring,
.app-handoff__logo-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(37, 99, 235, 0.15);
  animation: loader-ring 2.4s ease-in-out infinite;
}

.app-loader__logo-ring--2,
.app-handoff__logo-ring--2 {
  inset: -16px;
  border-color: rgba(245, 158, 11, 0.12);
  animation-delay: -1.2s;
}

.app-loader__logo,
.app-handoff__logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 22px;
  box-shadow:
    0 12px 40px rgba(37, 99, 235, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  animation: loader-logo-pulse 2.8s ease-in-out infinite;
}

.app-loader__brand,
.app-handoff__brand {
  margin: 0 0 1.25rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #1e293b 0%, var(--loader-primary) 50%, var(--loader-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-loader__tree {
  width: 140px;
  height: 110px;
  margin-bottom: 1.5rem;
}

.app-loader__tree-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.app-loader__trunk,
.app-loader__branch {
  fill: none;
  stroke: #7a5538;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: loader-draw 1.8s ease forwards;
}

.app-loader__trunk {
  stroke-width: 4;
  animation-delay: 0.15s;
}

.app-loader__branch--l {
  stroke-width: 2.8;
  animation-delay: 0.55s;
}

.app-loader__branch--r {
  stroke-width: 2.4;
  animation-delay: 0.75s;
}

.app-loader__branch--s {
  stroke-width: 2;
  animation-delay: 0.95s;
}

.app-loader__node {
  opacity: 0;
  transform-origin: center;
  animation: loader-node-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.app-loader__node--root {
  fill: var(--loader-gold);
  animation-delay: 0.35s;
}

.app-loader__node--1 {
  fill: var(--loader-primary);
  animation-delay: 1.05s;
}

.app-loader__node--2 {
  fill: var(--loader-emerald);
  animation-delay: 1.2s;
}

.app-loader__node--3 {
  fill: #6366f1;
  animation-delay: 1.35s;
}

.app-loader__kin-line {
  stroke: url(#loaderKinGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  opacity: 0.7;
  animation: loader-draw 0.8s ease forwards;
}

.app-loader__kin-line--a { animation-delay: 1.45s; }
.app-loader__kin-line--b { animation-delay: 1.6s; }

.app-loader__progress {
  width: min(240px, 72vw);
  height: 5px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.app-loader__progress-bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--loader-primary), var(--loader-emerald), var(--loader-gold));
  background-size: 200% 100%;
  animation: loader-shimmer 1.6s linear infinite;
  transition: width 0.35s ease;
}

.app-loader__message,
.app-handoff__message {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  min-height: 1.4em;
  animation: loader-msg-in 0.4s ease;
}

.app-loader__dots {
  display: inline-flex;
  gap: 3px;
  margin-inline-start: 2px;
  vertical-align: baseline;
}

.app-loader__dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--loader-primary);
  opacity: 0.35;
  animation: loader-dot 1.2s ease-in-out infinite;
}

.app-loader__dots span:nth-child(2) { animation-delay: 0.15s; }
.app-loader__dots span:nth-child(3) { animation-delay: 0.3s; }

.app-loader--exit {
  animation: loader-exit 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: none;
}

.app-loader.is-hidden,
.app-loader[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.nasab-app-mode #app-loading:not(.is-hidden):not([hidden]) {
  display: flex;
}

.app-loader--exit .app-loader__content {
  animation: loader-content-exit 0.2s ease forwards;
}

@keyframes loader-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes loader-exit {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes loader-content-exit {
  to {
    opacity: 0;
    transform: scale(1.03);
  }
}

@keyframes loader-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -14px); }
}

@keyframes loader-ring {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes loader-logo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes loader-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes loader-node-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes loader-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes loader-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes loader-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .app-loader__trunk,
  .app-loader__branch,
  .app-loader__kin-line,
  .app-loader__node,
  .app-loader__logo,
  .app-loader__logo-ring,
  .app-loader__orb,
  .app-handoff__orb,
  .app-loader__progress-bar {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }

  .app-loader--exit {
    animation: none;
    opacity: 0;
  }

  body.landing-handoff #nasab-landing {
    transition: opacity 0.2s ease;
    filter: none;
  }
}