/* ══════════════════════════════════════════════════════════════════════════
   POLISH & MICRO-INTERACTIONS
   Elevating the UI from 7.5 to 10x
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SECTION-COLORED TEXT SELECTION ── */
::selection {
  background: var(--bo-accent);
  color: var(--bo-paper);
}

.fr-wrap ::selection {
  background: var(--fr-accent);
  color: white;
}

.gd-wrap ::selection {
  background: var(--gd-accent);
  color: white;
}

/* ── NAV SEARCH LINK ── */
.nav-search {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}

.nav-search:hover {
  opacity: 1;
}

.nav-search i {
  stroke-width: 2.5;
}

/* ── TAB LINKS ── */
a.tab-btn {
  text-decoration: none;
  color: inherit;
}

/* ── CARD LINKS ── */
a.card, a.fr-card, a.gd-card,
a.sec-art, a.fr-sec-c, a.gd-sec-c,
a.ri, a.fr-ri, a.gd-ri {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.ri:hover .ri-title,
a.fr-ri:hover .fr-ri-t,
a.gd-ri:hover .gd-ri-t {
  color: var(--bo-accent);
}

.fr-wrap a.fr-ri:hover .fr-ri-t {
  color: var(--fr-accent);
}

.gd-wrap a.gd-ri:hover .gd-ri-t {
  color: var(--gd-accent);
}

a.card:hover .card-title,
a.fr-card:hover .fr-card-t,
a.gd-card:hover .gd-card-t {
  color: var(--bo-accent);
}

a.fr-card:hover .fr-card-t {
  color: var(--fr-accent);
}

a.gd-card:hover .gd-card-t {
  color: var(--gd-accent);
}

a.sec-art:hover .sec-h,
a.fr-sec-c:hover .fr-sec-h,
a.gd-sec-c:hover .gd-sec-h {
  color: var(--bo-accent);
}

a.fr-sec-c:hover .fr-sec-h {
  color: var(--fr-accent);
}

a.gd-sec-c:hover .gd-sec-h {
  color: var(--gd-accent);
}

/* ── GLOBAL TRANSITIONS ── */
* {
  transition-property: color, background-color, border-color, opacity, transform, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── FOCUS STATES (Accessibility) ── */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--bo-accent);
  outline-offset: 2px;
}

.fr-wrap *:focus-visible {
  outline-color: var(--fr-accent);
}

.gd-wrap *:focus-visible {
  outline-color: var(--gd-accent);
}

/* ── IMPROVED CONTRAST (Accessibility) ── */
.ri-meta, .card-meta, .fr-ri-m, .fr-card-m, .gd-ri-m, .gd-card-m {
  color: #5A5347; /* Darker muted for better contrast */
}

.fr-wrap .fr-ri-m, .fr-wrap .fr-card-m {
  color: #4A5A6A;
}

.gd-wrap .gd-ri-m, .gd-wrap .gd-card-m {
  color: #4A5A4A;
}

/* ── CARD HOVER ENHANCEMENTS ── */
.ri, .card, .fr-ri, .fr-card, .gd-ri, .gd-card {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ri:hover, .card:hover {
  background: var(--bo-paper-dim);
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
}

.fr-ri:hover, .fr-card:hover {
  background: var(--fr-bg-raised);
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
}

.gd-ri:hover, .gd-card:hover {
  background: var(--gd-paper-dim);
  padding-left: 12px;
  margin-left: -12px;
  padding-right: 12px;
  margin-right: -12px;
}

/* ── BUTTON ENHANCEMENTS ── */
.btn, .fr-btn, .gd-btn, .nl button, .fr-nl button, .gd-nl button {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.btn:hover, .fr-btn:hover, .gd-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active, .fr-btn:active, .gd-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nl button:hover, .fr-nl button:hover, .gd-nl button:hover {
  filter: brightness(1.1);
}

/* ── CHIP/PILL ENHANCEMENTS ── */
.chip {
  position: relative;
  overflow: hidden;
}

.chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s ease;
}

.chip:hover::before {
  left: 100%;
}

.pill {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pill:hover {
  transform: translateY(-1px);
}


/* ── SECTION ARTICLE CARDS ── */
.sec-art, .fr-sec-c, .gd-sec-c {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sec-art::after, .fr-sec-c::after, .gd-sec-c::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  background: var(--bo-accent);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fr-sec-c::after {
  background: var(--fr-accent);
}

.gd-sec-c::after {
  background: var(--gd-accent);
}

.sec-art:hover::after, .fr-sec-c:hover::after, .gd-sec-c:hover::after {
  transform: scaleX(1);
}

/* ── STAT BOX ENHANCEMENTS ── */
.stat-box, .fr-stat, .gd-stat {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(22, 19, 15, 0.2);
}

.fr-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(42, 76, 114, 0.15);
}

.gd-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(46, 94, 40, 0.15);
}

.stat-box .sn, .fr-stat .sn, .gd-stat .sn {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-box:hover .sn, .fr-stat:hover .sn, .gd-stat:hover .sn {
  transform: scale(1.02);
}

/* ── WRITE BOX ENHANCEMENTS ── */
.write-box, .fr-write, .gd-write {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.write-box:hover {
  border-color: var(--bo-accent);
  box-shadow: 0 4px 16px rgba(181, 97, 10, 0.1);
}

.fr-write:hover {
  border-color: var(--fr-accent);
  box-shadow: 0 4px 16px rgba(42, 76, 114, 0.1);
}

.gd-write:hover {
  border-color: var(--gd-accent);
  box-shadow: 0 4px 16px rgba(46, 94, 40, 0.1);
}

/* ── PULL QUOTE ENHANCEMENTS ── */
.pq, .fr-pq, .gd-pq {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pq::before, .fr-pq::before, .gd-pq::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 24px;
  font-family: var(--f-serif);
  font-size: 72px;
  font-weight: 800;
  color: var(--bo-accent);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.fr-pq::before {
  color: var(--fr-accent);
}

.gd-pq::before {
  color: var(--gd-accent);
}

/* ── TICKER PAUSE ON HOVER ── */
.ticker:hover .ticker-text,
.fr-ticker:hover .fr-ticker-txt,
.gd-ticker:hover .gd-ticker-txt {
  animation-play-state: paused;
}

/* ── MASTHEAD LOGO SUBTLE ANIMATION ── */
.logo-text, .fr-logo, .gd-logo {
  transition: letter-spacing 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.masthead-logo:hover .logo-text {
  letter-spacing: 0.01em;
}

.fr-logo-area:hover .fr-logo {
  letter-spacing: 0.01em;
}

.gd-logo-area:hover .gd-logo {
  letter-spacing: 0.01em;
}

/* ── NAVIGATION LINK UNDERLINE ANIMATION ── */
.masthead-nav a, .fr-nav a, .gd-nav a {
  position: relative;
}

.masthead-nav a::after, .fr-nav a::after, .gd-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.masthead-nav a:hover::after, .fr-nav a:hover::after, .gd-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── SECTION PANEL TRANSITIONS ── */
.section-panel {
  animation: none;
}

.section-panel[x-show="true"] {
  animation: panelFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── READING TOGGLE ENHANCEMENT ── */
.read-toggle {
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.read-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── INPUT FOCUS STATES ── */
.nl input, .fr-nl input, .gd-nl input {
  transition: all 0.2s;
}

.nl input:focus {
  background: rgba(255, 255, 255, 0.05);
}

.fr-nl input:focus {
  background: rgba(255, 255, 255, 0.05);
}

.gd-nl input:focus {
  background: rgba(255, 255, 255, 0.05);
}

/* ── VERDICT BOX ENHANCEMENT ── */
.fr-verdict {
  position: relative;
  overflow: hidden;
}

.fr-verdict::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

/* ── SMOOTH SCROLL INDICATOR ── */
@keyframes scrollHint {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}

/* ── LOADING SKELETON (for future dynamic content) ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bo-paper-dim) 25%,
    var(--bo-paper) 50%,
    var(--bo-paper-dim) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 2px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── IMPROVED VERTICAL RHYTHM ── */
.sb-sec {
  margin-bottom: 36px;
}

.ri {
  padding: 14px 0;
}

.ri-num {
  margin-bottom: 6px;
}

.ri-title {
  margin-bottom: 6px;
  line-height: 1.35;
}

/* ── KICKER LINE ANIMATION ── */
.kicker::before, .fr-kicker::before, .gd-kicker::before {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kicker:hover::before {
  width: 32px;
}

.fr-kicker:hover::before {
  width: 32px;
}

.gd-kicker:hover::before {
  width: 32px;
}

/* ── FOOTER ENHANCEMENT ── */
.site-footer {
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 48px;
  right: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-amber), transparent);
}

.footer-brand {
  transition: letter-spacing 0.3s;
}

.footer-brand:hover {
  letter-spacing: 0.02em;
}

/* ── GRAIN TEXTURE REFINEMENT ── */
body::after {
  opacity: 0.018;
  mix-blend-mode: multiply;
}