/* ── Loader ──────────────────────────────────────────────────── */
.global-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  transition: opacity 0.55s var(--ease), visibility 0s 0.55s;
}
.global-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}
.loader-content {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  position: relative; z-index: 2;
}
.loader-logo {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1rem, 4vw, 1.6rem);
  letter-spacing: 0.3em; color: var(--ink); animation: loaderPulse 2s ease-in-out infinite;
}
@keyframes loaderPulse { 50% { opacity: 0.55; } }

.loader-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mid);
}
.status-blink { animation: blink 1s step-end infinite; color: var(--blue); }

.loader-progress-bar {
  width: min(280px, 60vw); height: 1px; background: var(--line-2); position: relative;
}
.loader-progress-fill {
  height: 100%; width: 0; background: var(--blue);
  transition: width 0.12s linear; position: relative; overflow: visible;
}
.loader-glow {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-hi));
  box-shadow: 0 0 12px 2px var(--blue-glow);
}


/* ─────────────────────────────────────────────────────────────
   📱 MOBILE MODE — iOS / Android (PWA-style)
   Added automatically. Targets phones (≤ 768px) + touch devices.
   • Safe-area insets (notch, home indicator)
   • Momentum scrolling
   • No tap highlight, no text-size auto-adjust
   • 16px inputs (prevents iOS auto-zoom)
   • Custom cursor disabled
   • Larger tap targets (≥ 44px)
   ───────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-top:    env(safe-area-inset-top);
    --safe-right:  env(safe-area-inset-right);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left:   env(safe-area-inset-left);
  }
}

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  html, body {
    cursor: auto !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  body {
    -webkit-overflow-scrolling: touch;
    padding-top:    env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left:   env(safe-area-inset-left, 0);
    padding-right:  env(safe-area-inset-right, 0);
  }
  *, a, button, input, textarea, select, label { cursor: auto !important; }
  .cursor, .cursor-dot, .grain { display: none !important; }

  /* Prevent iOS zoom on focus */
  input, select, textarea { font-size: 16px !important; }

  /* Bigger tap targets */
  a, button, [role="button"], .btn, .nav-icon, .close-btn,
  .bl-close, .bl-prev, .bl-next, .lb-close, .lb-prev, .lb-next,
  .blog-filter-btn, .audio-play-btn, .entry-expand-btn,
  .dd-close-btn, .dd-nav-btn {
    min-height: 44px;
    min-width:  44px;
    touch-action: manipulation;
  }
}

/* ─── loader.css mobile ─── */
@media (max-width: 768px) {
  .loader-bg-grid { background-size: 36px 36px; }
  .loader-logo { font-size: 1rem; letter-spacing: 0.25em; }
  .loader-progress-bar { width: 70vw; }
  .loader-status { font-size: 0.55rem; }
  .global-loader { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
}