/* ============================================================
   MIDDLE GROUND — Page Loader v3
   Logo-based animation: mark bounces in, wordmark types on,
   tagline fades, then the whole thing scales away.
   ============================================================ */

   .page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4,0,1,1);
    will-change: opacity, transform;
  }
  .page-loader.fade-out {
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
  }
  
  /* ── Wordmark — the single logo, bounces in and holds ───── */
  .loader-wordmark {
    height: clamp(56px, 11vw, 96px);
    opacity: 0;
    transform: translateY(-24px) scale(0.85);
    animation: wordmarkIn 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards;
    margin-bottom: 22px;
  }
  .loader-wordmark img {
    height: 100%;
    width: auto;
    object-fit: contain;
  }
  @keyframes wordmarkIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  
  /* ── Animated dots below tagline ────────────────────────── */
  .loader-dots {
    display: flex;
    gap: 7px;
    margin-top: 32px;
    opacity: 0;
    animation: dotsIn 0.4s ease 0.6s forwards;
  }
  .loader-dot-el {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: dotBounce 0.9s ease-in-out infinite;
  }
  .loader-dot-el:nth-child(1) { background: var(--terracotta);      animation-delay: 0s; }
  .loader-dot-el:nth-child(2) { background: var(--terracotta-soft); animation-delay: 0.15s; }
  .loader-dot-el:nth-child(3) { background: var(--blue);            animation-delay: 0.3s; }
  
  @keyframes dotBounce {
    0%,80%,100% { transform: scale(0.7); opacity: 0.4; }
    40%         { transform: scale(1.2); opacity: 1; }
  }
  
  @keyframes dotsIn {
    to { opacity: 1; }
  }
  
  /* ── Progress bar ────────────────────────────────────────── */
  .loader-bar-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--cream-deeper);
    overflow: hidden;
  }
  .loader-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--terracotta), var(--blue));
    width: 0%;
    animation: barFill 1.7s cubic-bezier(0.16,1,0.3,1) 0.1s forwards;
  }
  @keyframes barFill {
    0%   { width: 0%; }
    50%  { width: 65%; }
    100% { width: 100%; }
  }
  
  /* ── Reduced motion ─────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .page-loader { display: none !important; }
  }
  
  /* ── Mobile ─────────────────────────────────────────────── */
  @media (max-width: 480px) {
    .loader-wordmark { height: 48px; margin-bottom: 18px; }
  }