/*
 * SPLASH TẢI TRANG CRM (Figma page 68 · S1 desktop 1632:235 / S2 mobile 1632:780, 28/10/2026).
 *
 * MỘT nguồn cho HAI pha, cùng class:
 *   1. index.html — khung HTML tĩnh nằm sẵn trong #root, hiện NGAY khi HTML về, trước khi
 *      bundle JS tải xong (trước đây là trang trắng). CSP chặn script inline nên pha này chỉ
 *      có CSS: không lời chào theo giờ.
 *   2. src/components/splash/SplashScreen.jsx — App.jsx hiện trong lúc chờ Firebase Auth.
 *      Thêm `.afs--settled`: bỏ phần bật vào (pha 1 đã chạy rồi), chỉ giữ các vòng lặp.
 * File nằm ở public/ và nạp bằng <link> trong index.html để có từ byte đầu tiên — import
 * trong JS thì pha 1 không có style.
 *
 * Chỉ animate transform/opacity (+ background-position của vệt sáng chữ).
 */
.afs {
  --afs-ink: #140905;
  --afs-orange: #ff6129;
  --afs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --afs-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--afs-ink); color: #fff;
  font-family: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Nền: glow, tia chéo, chữ nền ---------- */
.afs-glow {
  position: absolute; border-radius: 9999px; opacity: var(--o);
  filter: blur(var(--b)); will-change: transform, opacity;
  animation: afs-breathe 2.8s ease-in-out infinite alternate;
}
.afs-glow--deep { width: 120%; height: 46%; left: -10%; top: 80%; background: #8a1200; --b: 140px; --o: 0.9; }
.afs-glow--red { width: 58%; height: 52%; left: -18%; top: 40%; background: #e8250f; --b: 140px; --o: 0.7; animation-delay: -0.7s; }
.afs-glow--orange { width: 66%; height: 40%; left: 17%; top: 20%; background: var(--afs-orange); --b: 120px; --o: 0.8; animation-name: afs-breathe-drift; }
.afs-glow--amber { width: 30%; height: 18%; left: 35%; top: 27%; background: #ffb547; --b: 100px; --o: 0.5; animation-delay: -1.4s; }
@keyframes afs-breathe { from { opacity: calc(var(--o) * 0.75); transform: scale(1); } to { opacity: min(1, calc(var(--o) * 1.2)); transform: scale(1.07); } }
@keyframes afs-breathe-drift {
  from { opacity: calc(var(--o) * 0.75); transform: translateX(0) scale(1); }
  to { opacity: 1; transform: translateX(30px) scale(1.07); }
}

.afs-beam {
  position: absolute; top: -20%; left: 0; width: 120px; height: 140%;
  background: linear-gradient(90deg, rgba(255, 236, 214, 0) 0%, rgba(255, 236, 214, 0.2) 50%, rgba(255, 236, 214, 0) 100%);
  transform: translateX(-30vw) rotate(18deg); opacity: 0;
  animation: afs-beam 2.8s ease-in-out infinite;
}
@keyframes afs-beam {
  0%, 35% { transform: translateX(-30vw) rotate(18deg); opacity: 0; }
  42% { opacity: 1; }
  72% { opacity: 1; }
  79%, 100% { transform: translateX(120vw) rotate(18deg); opacity: 0; }
}

.afs-marquee {
  position: absolute; left: 0; bottom: 9%; display: flex; white-space: nowrap;
  font-size: clamp(64px, 11vw, 168px); font-weight: 800; font-style: italic; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 210, 180, 0.13);
  animation: afs-marquee 30s linear infinite; pointer-events: none; user-select: none;
}
.afs-marquee span { padding-right: 0.4em; }
@keyframes afs-marquee { to { transform: translateX(-50%); } }

/* ---------- Đốm sao + chấm sáng ---------- */
.afs-spark {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  color: #ffe2b0; opacity: 0;
  filter: drop-shadow(0 0 calc(var(--s) * 0.6) rgba(255, 179, 77, 0.95));
  animation: afs-twinkle 2.8s ease-in-out var(--delay) infinite;
}
.afs-spark svg { display: block; width: 100%; height: 100%; }
@keyframes afs-twinkle {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  13% { opacity: 1; transform: scale(1.25) rotate(-45deg); }
  27%, 100% { opacity: 0; transform: scale(0.3) rotate(-90deg); }
}
.afs-dot {
  position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 9999px;
  background: #ffe6b3; opacity: 0.15; animation: afs-dot 0.65s ease-in-out var(--delay) infinite alternate;
}
@keyframes afs-dot { to { opacity: 1; } }

/* ---------- Khối giữa ---------- */
.afs-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; }

.afs-fox { position: relative; width: clamp(170px, 21vw, 300px); }
.afs-fox-bob { animation: afs-bob 2.1s ease-in-out 0.72s infinite; }
.afs-fox-img {
  display: block; width: 100%; height: auto; opacity: 0;
  filter: drop-shadow(0 14px 30px rgba(60, 8, 0, 0.45));
  animation: afs-fox-in 0.72s var(--afs-ease) forwards;
}
@keyframes afs-fox-in {
  0% { opacity: 0; transform: scale(0.55) rotate(8deg); }
  70% { opacity: 1; transform: scale(1.08) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes afs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--afs-bob, -12px)); } }

.afs-shadow {
  display: block; width: 62%; height: 12px; margin: 10px auto 0; border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(40, 6, 0, 0.6), rgba(40, 6, 0, 0));
  transform: scale(0.4); opacity: 0;
  animation: afs-shadow-in 0.72s var(--afs-ease) forwards, afs-shadow 2.1s ease-in-out 0.72s infinite;
}
@keyframes afs-shadow-in { to { opacity: 1; transform: scale(1); } }
@keyframes afs-shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.82); } }

/* Vệt tốc độ bên trái cáo — 2 đợt mỗi vòng (0.25s và 1.55s), lệch nhau 0.1s */
.afs-streak {
  position: absolute; right: 78%; top: var(--y); width: var(--w); height: 2px; border-radius: 9999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
  opacity: 0; animation: afs-streak 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--delay) infinite;
}
@keyframes afs-streak {
  0% { opacity: 0; transform: translateX(-70px); }
  20% { opacity: 0.9; }
  54%, 100% { opacity: 0; transform: translateX(50px); }
}

.afs-brand { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.afs-word { position: relative; display: block; width: clamp(180px, 17vw, 236px); opacity: 0; animation: afs-rise 0.4s ease-out 0.3s forwards; }
.afs-word img { display: block; width: 100%; height: auto; }
/* Vệt sáng chạy qua chữ, cắt theo đúng hình wordmark */
.afs-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 226, 150, 0) 38%, rgba(255, 236, 170, 0.95) 48%, rgba(255, 150, 70, 0.9) 54%, rgba(255, 150, 70, 0) 64%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url('/brand/wordmark-white.png') center / contain no-repeat;
  mask: url('/brand/wordmark-white.png') center / contain no-repeat;
  animation: afs-shine 2.8s ease-in-out infinite;
}
@keyframes afs-shine { 0%, 34% { background-position: 100% 0; } 59%, 100% { background-position: 0% 0; } }
@keyframes afs-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.afs-pill {
  padding: 3px 8px; border-radius: 9999px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  color: #ffd9c2; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0; transform: scale(0.6); animation: afs-pop 0.35s var(--afs-back) 0.5s forwards;
}
@keyframes afs-pop { to { opacity: 1; transform: scale(1); } }

.afs-greet {
  min-height: 15px; margin: 14px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  background: linear-gradient(90deg, #ffffff, #ffe2b8); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: afs-rise-sm 0.35s ease-out 0.55s forwards;
}
@keyframes afs-rise-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.afs-track {
  position: relative; width: clamp(180px, 16vw, 220px); height: 3px; margin-top: 14px;
  border-radius: 9999px; background: rgba(255, 255, 255, 0.2); overflow: hidden;
}
.afs-bar {
  position: absolute; inset: 0 auto 0 0; width: 38%; border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 236, 214, 0.2), #ffffff 60%, #ffd9a8);
  box-shadow: 0 0 12px rgba(255, 210, 160, 0.9);
  transform: translateX(-100%); animation: afs-bar 1.1s ease-in-out infinite;
}
@keyframes afs-bar { to { transform: translateX(265%); } }

.afs-status {
  margin: 14px 0 0; font-size: 12.5px; font-weight: 500; color: rgba(255, 236, 222, 0.85);
  opacity: 0; animation: afs-fade 0.3s ease-out 0.7s forwards, afs-breath-text 1.6s ease-in-out 1s infinite;
}
@keyframes afs-fade { to { opacity: 1; } }
@keyframes afs-breath-text { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.afs-foot {
  position: absolute; bottom: 22px; left: 0; right: 0; margin: 0; text-align: center;
  font-size: 11px; color: rgba(255, 220, 200, 0.45); opacity: 0; animation: afs-fade 0.4s ease-out 0.8s forwards;
}

/* ---------- Pha React: bỏ phần bật vào, giữ vòng lặp ---------- */
.afs--settled .afs-fox-img,
.afs--settled .afs-word,
.afs--settled .afs-pill,
.afs--settled .afs-greet,
.afs--settled .afs-foot { animation: none; opacity: 1; transform: none; }
.afs--settled .afs-shadow { opacity: 1; transform: none; animation: afs-shadow 2.1s ease-in-out infinite; }
.afs--settled .afs-fox-bob { animation-delay: 0s; }
.afs--settled .afs-status { opacity: 1; animation: afs-breath-text 1.6s ease-in-out infinite; }

/* ---------- Điện thoại (S2) ---------- */
@media (max-width: 640px) {
  .afs { --afs-bob: -7px; }
  .afs-fox { width: 150px; }
  .afs-word { width: 168px; }
  .afs-streak { --w: 44px !important; }
  .afs-marquee { bottom: 14%; }
}

/* Người dùng tắt chuyển động: hiện thẳng, chỉ còn fade của dòng trạng thái. */
@media (prefers-reduced-motion: reduce) {
  .afs *, .afs *::before, .afs *::after { animation: none !important; }
  .afs-fox-img, .afs-word, .afs-pill, .afs-greet, .afs-status, .afs-foot, .afs-shadow { opacity: 1; transform: none; }
  .afs-spark, .afs-beam, .afs-streak { opacity: 0; }
  .afs-bar { transform: translateX(80%); }
}