/* ═══════════════════════════════════════════
   IDENTITY PHASE — signature moments + ambient
   ═══════════════════════════════════════════ */

/* Header brand/eclipse/beam retirés (chantier identité 2026-06) :
   la marque est désormais un brand_lockup à gauche (15-header.css),
   les contrôles à droite, plus de logo centré ni de balayage ambre animé. */

/* ── Splash (login one-shot) ── */
.fl-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.fl-splash.show-on-load {
  visibility: visible;
  pointer-events: auto;
  animation: splash-cycle 1.2s ease-in-out forwards;
}
.fl-splash.show-on-load .splash-glow {
  animation: splash-glow 1.2s ease-in-out forwards;
}
.fl-splash.show-on-load .splash-content {
  animation: splash-content 1.2s ease-in-out forwards;
}
.fl-splash.show-on-load .splash-progress {
  animation: splash-progress 1.0s linear forwards;
}
.splash-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%,
    rgba(245, 166, 35, 0.14) 0%,
    rgba(245, 166, 35, 0) 55%);
  opacity: 0;
  pointer-events: none;
}
.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
}
.splash-lockup {
  height: 124px;
  width: auto;
  display: block;
}
.splash-tagline {
  color: var(--dim);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.splash-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  width: 0;
}
@keyframes splash-glow {
  0%   { opacity: 0; transform: scale(0.92); }
  33%  { opacity: 1; transform: scale(1.0); }
  83%  { opacity: 1; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.05); }
}
@keyframes splash-content {
  0%   { opacity: 0; transform: translateY(2%); }
  25%  { opacity: 0; transform: translateY(2%); }
  46%  { opacity: 1; transform: translateY(0); }
  83%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2%); }
}
@keyframes splash-progress {
  0%   { width: 0%; }
  100% { width: 100%; }
}
@keyframes splash-cycle {
  0%   { opacity: 1; visibility: visible; pointer-events: auto; }
  92%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-splash.show-on-load,
  .fl-splash.show-on-load .splash-glow,
  .fl-splash.show-on-load .splash-content,
  .fl-splash.show-on-load .splash-progress {
    animation-duration: 0.01s;
  }
}

/* ── Refresh dawn flash overlay ── */
.fl-refresh-flash {
  position: absolute;
  top: 0; /* desktop-container is already below header — start at its top edge */
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    rgba(245, 166, 35, 0) 0%,
    rgba(245, 166, 35, 0.20) 70%,
    rgba(245, 166, 35, 0.55) 92%,
    rgba(245, 166, 35, 0) 100%);
  width: 65%;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
  transform: translateX(-100%);
  visibility: hidden;
}
.fl-refresh-flash.is-flashing {
  visibility: visible;
  animation: refresh-flash 0.6s ease-in-out forwards;
}
@keyframes refresh-flash {
  0%   { opacity: 0;   transform: translateX(-100%); }
  33%  { opacity: 1;   transform: translateX(0%); }
  83%  { opacity: 1;   transform: translateX(150%); }
  100% { opacity: 0;   transform: translateX(150%); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-refresh-flash.is-flashing { animation: none; }
}

/* ── Branded empty states ── */
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 18px;
  min-height: 120px;
}
.empty-state-mark {
  display: block;
  height: 54px;
  width: 76px;
  background-color: var(--muted);
  opacity: 0.5;
  -webkit-mask: url("/assets/firstlight-mark-tight.svg") no-repeat center / contain;
          mask: url("/assets/firstlight-mark-tight.svg") no-repeat center / contain;
}
.empty-state-message {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
}
.empty-state-sub {
  color: var(--dim);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: center;
}