/* ─────────────────────────────────────────────────────────
   Sprouts News — "The Front Page" loader
   A staged broadsheet masthead with letterpress animations.
   ───────────────────────────────────────────────────────── */

body { margin: 0; }
html { overflow-x: hidden; overflow-y: scroll; }

#loading-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Soft warm gradient — like morning light hitting paper on a desk */
  background:
    radial-gradient(ellipse at 50% 30%, #FBF7EE 0%, #F2EBDB 60%, #E8DFCB 100%),
    var(--initial-loader-bg, #FAF6EE);

  /* Subtle paper grain — repeating noise via radial dots */
  background-image:
    radial-gradient(circle at 25% 25%, rgba(155, 27, 48, 0.025) 0, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(14, 14, 14, 0.022) 0, transparent 1.5px),
    radial-gradient(ellipse at 50% 30%, #FBF7EE 0%, #F2EBDB 60%, #E8DFCB 100%);
  background-size: 12px 12px, 9px 9px, 100% 100%;
}

/* Hide original Vuexy logo + ring */
#loading-bg .loading-logo,
#loading-bg .loading { display: none !important; }

/* ─── Paper card ─────────────────────────────────────── */
.np-paper {
  position: relative;
  inline-size: min(640px, 92vw);
  background: #FFFEFB;
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: #0E0E0E;

  /* Layered shadows = paper sitting on a wooden desk */
  box-shadow:
    0 1px 1px rgba(14, 14, 14, 0.04),
    0 6px 14px rgba(14, 14, 14, 0.08),
    0 22px 40px rgba(14, 14, 14, 0.10),
    0 40px 80px rgba(14, 14, 14, 0.06);

  /* Subtle warm paper edge */
  border: 1px solid rgba(14, 14, 14, 0.08);

  /* Slight skew for a "casually placed on the desk" feel */
  transform: rotate(-0.4deg) translateY(20px);
  opacity: 0;
  animation: np-paper-drop 0.9s 0.05s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Torn-paper decorative top edge */
.np-paper::before {
  content: '';
  position: absolute;
  inset-inline: -1px;
  inset-block-start: -1px;
  block-size: 6px;
  background: linear-gradient(180deg, transparent, rgba(14, 14, 14, 0.04));
  pointer-events: none;
}

/* Subtle paper-grain inside the card */
.np-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(14, 14, 14, 0.012) 0, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(14, 14, 14, 0.012) 0, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* ─── Top dateline ───────────────────────────────────── */
.np-dateline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14, 14, 14, 0.55);
  margin-bottom: 1rem;
  opacity: 0;
  animation: np-fade 0.5s 0.45s forwards ease-out;
}

.np-dateline .left,
.np-dateline .right { white-space: nowrap; }

/* ─── Times-style double rule ────────────────────────── */
.np-double-rule {
  position: relative;
  block-size: 6px;
  margin-block: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-double-rule::before,
.np-double-rule::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background: #0E0E0E;
  inline-size: 0;
  animation: np-rule-draw 0.85s 0.35s forwards cubic-bezier(0.65, 0, 0.35, 1);
}
.np-double-rule::before { inset-block-start: 0; }
.np-double-rule::after  { inset-block-end: 0; animation-delay: 0.45s; block-size: 0.5px; }

/* ─── Masthead ───────────────────────────────────────── */
.np-masthead {
  position: relative;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.8rem, 7.2vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 1.4rem 0 1rem;
  color: #0E0E0E;
  display: inline-block;

  /* Masthead reveal: starts black-on-black, transitions to inked feel */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  animation: np-mast-press 1.1s 0.7s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ink "drop" accent — a small red diamond floats above the S */
.np-masthead::before {
  content: '';
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 50%;
  inline-size: 6px;
  block-size: 6px;
  background: var(--initial-loader-color, #9B1B30);
  transform: translateX(-50%) rotate(45deg) scale(0);
  animation: np-ink-drop 0.6s 1.4s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Ornamental divider with diamond ────────────────── */
.np-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
  opacity: 0;
  animation: np-fade 0.5s 1.0s forwards ease-out;
}

.np-ornament .line {
  block-size: 1px;
  background: rgba(14, 14, 14, 0.4);
  inline-size: 60px;
}

.np-ornament .diamond {
  inline-size: 6px;
  block-size: 6px;
  background: var(--initial-loader-color, #9B1B30);
  transform: rotate(45deg);
  position: relative;
  animation: np-pulse-diamond 2s infinite ease-in-out;
}

/* ─── Italic tagline ─────────────────────────────────── */
.np-tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(14, 14, 14, 0.7);
  margin: 0.4rem 0 0.4rem;
  letter-spacing: 0.01em;
  opacity: 0;
  animation: np-fade 0.5s 1.1s forwards ease-out;
}

/* ─── Bottom dateline (tagline strip with edition info) ─ */
.np-strap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14, 14, 14, 0.5);
  margin-top: 0.8rem;
  opacity: 0;
  animation: np-fade 0.5s 1.2s forwards ease-out;
}

/* ─── Progress / press status ─────────────────────────── */
.np-press-status {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(14, 14, 14, 0.12);
  opacity: 0;
  animation: np-fade 0.5s 1.4s forwards ease-out;
}

.np-progress-bar {
  position: relative;
  block-size: 3px;
  background: rgba(14, 14, 14, 0.08);
  overflow: hidden;
  margin-bottom: 0.85rem;
}
.np-progress-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 30%;
  background: linear-gradient(90deg,
    transparent,
    var(--initial-loader-color, #9B1B30) 30%,
    var(--initial-loader-color, #9B1B30) 70%,
    transparent
  );
  animation: np-progress 1.6s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.np-status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(14, 14, 14, 0.6);
  text-transform: uppercase;
}

.np-status-row .indicator {
  inline-size: 6px;
  block-size: 6px;
  background: var(--initial-loader-color, #9B1B30);
  border-radius: 50%;
  flex-shrink: 0;
  animation: np-blink 1.2s infinite ease-in-out;
}

/* The cycling status text — cycles through 4 messages over 8s */
.np-status-cycle {
  position: relative;
  inline-size: 220px;
  block-size: 1.05em;
  overflow: hidden;
  text-align: start;
}
.np-status-cycle span {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 100%;
  opacity: 0;
  transform: translateY(100%);
  animation: np-cycle 8s infinite;
}
.np-status-cycle span:nth-child(1) { animation-delay: 0s; }
.np-status-cycle span:nth-child(2) { animation-delay: 2s; }
.np-status-cycle span:nth-child(3) { animation-delay: 4s; }
.np-status-cycle span:nth-child(4) { animation-delay: 6s; }

/* Stacked secondary papers behind the main one — depth */
.np-stack-1,
.np-stack-2 {
  position: absolute;
  inset: 0;
  background: #FFFEFB;
  border: 1px solid rgba(14, 14, 14, 0.06);
  z-index: -1;
  opacity: 0;
  animation: np-stack-drop 0.9s forwards cubic-bezier(0.16, 1, 0.3, 1);
}
.np-stack-1 {
  transform: rotate(1.2deg) translate(8px, 6px);
  animation-delay: 0s;
}
.np-stack-2 {
  transform: rotate(-1.6deg) translate(-10px, 10px);
  animation-delay: 0.1s;
}

/* ─── Animations ─────────────────────────────────────── */
@keyframes np-paper-drop {
  0% {
    opacity: 0;
    transform: rotate(-2deg) translateY(40px) scale(0.96);
  }
  60% {
    opacity: 1;
    transform: rotate(0.2deg) translateY(-4px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: rotate(-0.4deg) translateY(0) scale(1);
  }
}

@keyframes np-stack-drop {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes np-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes np-rule-draw {
  0%   { inline-size: 0; }
  100% { inline-size: 100%; }
}

@keyframes np-mast-press {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    text-shadow: 0 0 24px rgba(155, 27, 48, 0);
    filter: blur(2px);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 22px rgba(155, 27, 48, 0.18), 0 1px 0 rgba(14, 14, 14, 0.08);
    filter: blur(0);
    transform: translateY(0) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 rgba(155, 27, 48, 0), 0 1px 0 rgba(14, 14, 14, 0.04);
    filter: blur(0);
  }
}

@keyframes np-ink-drop {
  0%   { transform: translateX(-50%) rotate(45deg) scale(0); opacity: 0; }
  60%  { transform: translateX(-50%) rotate(45deg) scale(1.4); opacity: 1; }
  100% { transform: translateX(-50%) rotate(45deg) scale(1); opacity: 1; }
}

@keyframes np-pulse-diamond {
  0%, 100% { transform: rotate(45deg) scale(1);   opacity: 1;   }
  50%      { transform: rotate(45deg) scale(1.3); opacity: 0.7; }
}

@keyframes np-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

@keyframes np-progress {
  0%   { inset-inline-start: -30%; }
  100% { inset-inline-start: 100%; }
}

/* Cycle each message: 0-22% in, 25-42% hold, 45% out, then 100% gone */
@keyframes np-cycle {
  0%   { opacity: 0; transform: translateY(100%); }
  4%   { opacity: 1; transform: translateY(0); }
  22%  { opacity: 1; transform: translateY(0); }
  26%  { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 0; transform: translateY(-100%); }
}

/* ─── Mobile tightening ──────────────────────────────── */
@media (max-width: 480px) {
  .np-paper { padding: 2rem 1.5rem 1.75rem; }
  .np-dateline { font-size: 0.58rem; letter-spacing: 0.14em; }
  .np-strap { font-size: 0.55rem; letter-spacing: 0.12em; }
  .np-status-cycle { inline-size: 180px; }
}

/* ─── Reduced motion: disable spring/scale animations ─── */
@media (prefers-reduced-motion: reduce) {
  .np-paper,
  .np-masthead,
  .np-double-rule::before,
  .np-double-rule::after,
  .np-ornament,
  .np-tagline,
  .np-strap,
  .np-press-status,
  .np-dateline {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}