/* =========================================================================
   enhance.css  (SITE-WIDE POLISH LAYER)
   Layers modern depth, rounding, spacing and motion on top of the existing
   editorial design system. Loaded LAST so it can refine without a rewrite.
   Honours prefers-reduced-motion. Keeps the ink/signal/paper identity but
   deepens it with richer shadows, softer surfaces and orchestrated reveals.
   ========================================================================= */

:root {
  /* Richer, layered shadow scale (warm-tinted to match the paper bg) */
  --shadow-sm: 0 1px 2px rgba(20,17,15,.05), 0 2px 6px rgba(20,17,15,.06);
  --shadow-md: 0 6px 18px rgba(20,17,15,.09), 0 2px 6px rgba(20,17,15,.06);
  --shadow-lg: 0 24px 60px rgba(20,17,15,.16), 0 8px 20px rgba(20,17,15,.10);

  /* Softer, more generous radii */
  --r-sm: 7px; --r-md: 12px; --r-lg: 20px;

  /* A gentle motion curve reused everywhere */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---- Global motion defaults --------------------------------------------- */

a, button, .news-card, .stat, .panel, input, select, textarea {
  transition: color .2s var(--ease-out), background-color .2s var(--ease-out),
              border-color .2s var(--ease-out), box-shadow .25s var(--ease-out),
              transform .25s var(--ease-out);
}

/* Focus-visible ring for keyboard users (accessibility + polish) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Page-load reveal ---------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#app-main > * { animation: fadeUp .5s var(--ease-out) both; }
.page-title, .section-title { animation: fadeUp .55s var(--ease-out) both; }

/* Staggered section reveals on the homepage feeds */
.cat-row:nth-of-type(1) { animation-delay: .02s; }
.cat-row:nth-of-type(2) { animation-delay: .08s; }
.cat-row:nth-of-type(3) { animation-delay: .14s; }
.cat-row:nth-of-type(4) { animation-delay: .20s; }
.cat-row, .hero-wrap { animation: fadeUp .55s var(--ease-out) both; }

/* ---- News cards: richer depth + smoother lift --------------------------- */

.news-card {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  will-change: transform;
}
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.news-card__media { border-radius: 0; }
.news-card__cat {
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(209,47,36,.35);
  backdrop-filter: saturate(1.2);
}
.news-card:hover .news-card__img { transform: scale(1.07); }

/* ---- Buttons: tactile press + sheen ------------------------------------- */

.btn, .btn--primary, .admin-login__btn {
  border-radius: var(--r-sm);
  transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out),
              background-color .2s var(--ease-out);
}
.btn:hover, .btn--primary:hover, .admin-login__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active, .btn--primary:active, .admin-login__btn:active {
  transform: translateY(0) scale(.985);
}

/* ---- Header: subtle glass + lift on scroll feel ------------------------- */

.hdr, .header, header.hdr {
  backdrop-filter: saturate(1.1) blur(2px);
}
.hdr__navlink {
  position: relative;
}
/* animated underline for nav links */
.hdr__navlink::after {
  content: "";
  position: absolute; right: 0; bottom: -3px;
  height: 2px; width: 0; background: var(--signal);
  transition: width .25s var(--ease-out);
}
.hdr__navlink:hover::after { width: 100%; }

/* ---- Form fields: friendlier focus -------------------------------------- */

input, select, textarea, .field__input {
  border-radius: var(--r-sm);
}
.field__input:focus, input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(209,47,36,.12);
  border-color: var(--signal);
}

/* ---- Tags / chips: pill polish ------------------------------------------ */

.article__tag, .news-card__tag {
  transition: transform .18s var(--ease-spring), background-color .2s, color .2s;
}
.article__tag:hover { transform: translateY(-2px) scale(1.03); }

/* ---- Images: gentle reveal ---------------------------------------------- */

.article__figure img, .news-card__img {
  transition: transform .45s var(--ease-out), filter .45s var(--ease-out);
}
.article__figure img { box-shadow: var(--shadow-md); }

/* ---- Widgets (weather / stocks): card depth ----------------------------- */

.widget, .sidebar__box {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.widget:hover { box-shadow: var(--shadow-md); }

/* Stock ticker rows: gentle hover highlight for legibility */
.stocks__row {
  transition: background-color .2s var(--ease-out);
  border-radius: var(--r-sm);
}
.stocks__row:hover { background: var(--paper-2); }

/* ---- Scrollbar (subtle, on-brand) --------------------------------------- */

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 999px;
  border: 2px solid var(--paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---- Selection + link affordance ---------------------------------------- */

.article__content a, .page a:not(.btn):not(.news-card__link) {
  text-underline-offset: 3px;
}

/* ---- Loading spinner: a touch smoother ---------------------------------- */

.feed-loading { animation: fadeIn .4s var(--ease-out) both; }

/* ---- Respect reduced-motion --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}