/**
 * Full-screen LOADING overlay — แบบเดียวกับ Or position
 */
@keyframes tf-l {
  0% { opacity: 0; transform: translate3d(-200px, -200px, 100px) rotateZ(-45deg) rotateY(90deg) scale(2); }
  60% { opacity: 1; transform: translate3d(20px, 20px, -50px) rotateZ(10deg) scale(0.9); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
}
@keyframes tf-o {
  0% { opacity: 0; transform: translate3d(0, 300px, -200px) rotateX(-90deg) scale(0.5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 50px) rotateX(20deg) scale(1.1); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
}
@keyframes tf-a {
  0% { opacity: 0; transform: translate3d(200px, -200px, 200px) rotateZ(45deg) rotateX(45deg) scale(1.5); }
  60% { opacity: 1; transform: translate3d(-15px, 15px, -30px) rotateZ(-10deg) scale(0.9); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
}
@keyframes tf-d {
  0% { opacity: 0; transform: translate3d(0, 0, -800px) rotateY(180deg) scale(0.1); }
  60% { opacity: 1; transform: translate3d(0, 0, 100px) rotateY(-20deg) scale(1.2); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0) scale(1); }
}
@keyframes tf-i {
  0% { opacity: 0; transform: translate3d(-200px, 200px, 50px) rotateX(-45deg) rotateY(-45deg); }
  60% { opacity: 1; transform: translate3d(15px, -15px, -20px) rotateX(15deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); }
}
@keyframes tf-n {
  0% { opacity: 0; transform: translate3d(200px, 200px, 150px) rotateZ(-90deg) scale(1.8); }
  60% { opacity: 1; transform: translate3d(-20px, -20px, -30px) rotateZ(15deg) scale(0.8); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateZ(0) scale(1); }
}
@keyframes tf-g {
  0% { opacity: 0; transform: translate3d(0, -300px, -100px) rotateX(90deg) scale(2); }
  60% { opacity: 1; transform: translate3d(0, 30px, 50px) rotateX(-20deg) scale(0.9); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) scale(1); }
}

.tf-letter {
  display: inline-block;
  opacity: 0;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: forwards;
}

.tf-letter-l { animation-name: tf-l; animation-delay: 0s; }
.tf-letter-o { animation-name: tf-o; animation-delay: 0.2s; }
.tf-letter-a { animation-name: tf-a; animation-delay: 0.4s; }
.tf-letter-d { animation-name: tf-d; animation-delay: 0.6s; }
.tf-letter-i { animation-name: tf-i; animation-delay: 0.8s; }
.tf-letter-n { animation-name: tf-n; animation-delay: 1s; }
.tf-letter-g { animation-name: tf-g; animation-delay: 1.2s; }

.tf-loader-text {
  color: #f97316;
  letter-spacing: 0.15em;
}

html.dark .tf-loader-text {
  color: #ea580c;
}

.sales-hub-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.28);
  transition: opacity 0.16s ease;
  opacity: 1;
  pointer-events: auto;
}

html.dark .sales-hub-loading-overlay {
  background: rgba(15, 23, 42, 0.6);
}

.sales-hub-loading-overlay.sales-hub-loading-hidden {
  opacity: 0;
  pointer-events: none;
}

.sales-hub-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  perspective: 1200px;
}

.sales-hub-loading-text {
  font-weight: 900;
  font-size: 2.25rem;
  text-transform: uppercase;
  display: flex;
}

@media (min-width: 640px) {
  .sales-hub-loading-text {
    font-size: 3rem;
  }
}