/* ============================================
   Noor — Footer component (premium editorial band)
   Background always uses var(--accent-current)
   ============================================ */

.site-footer {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* --- Surface: accent band --- */

.site-footer__surface {
  position: relative;
  background: var(--accent-current);
  min-height: clamp(140px, 18vh, 240px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Sheen (light sweep) --- */

.site-footer__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: var(--sheen-pos, 100%) 0;
  will-change: background-position;
}

/* --- Grain overlay --- */

.site-footer__surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,0.4) 0%, transparent 0.8%),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.3) 0%, transparent 0.6%),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.35) 0%, transparent 0.7%),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,0.3) 0%, transparent 0.5%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.25) 0%, transparent 0.9%);
  background-size: 4px 4px, 5px 5px, 3px 3px, 6px 6px, 4px 4px;
  mix-blend-mode: overlay;
  translate: var(--grain-x, 0) var(--grain-y, 0);
}

/* --- Inner grid: 3 columns --- */

.site-footer__inner {
  position: relative;
  z-index: 3;
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
  padding: var(--space-lg) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

/* --- Left & right meta --- */

.site-footer__meta {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  display: inline-block;
  cursor: default;
}

/* Dot indicator (same pattern as nav + tagline) */
.site-footer__meta::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

.site-footer__meta:hover::after {
  transform: translateX(-50%) scale(1);
  width: 16px;
  border-radius: 2px;
}

@keyframes footer-dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.site-footer__meta:hover::after {
  animation: footer-dot-pulse 4s ease-in-out infinite;
}

.site-footer__left {
  justify-self: start;
}

.site-footer__right {
  justify-self: end;
}

/* --- Center brand --- */

.site-footer__center {
  justify-self: center;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  will-change: transform;
}

.site-footer__mark {
  display: block;
  width: 32px;
  height: auto;
}

.site-footer__mark img {
  width: 100%;
  height: auto;
  display: block;
}

.site-footer__word {
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* --- Responsive --- */

@media (max-width: 600px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-sm);
  }

  .site-footer__left,
  .site-footer__right {
    justify-self: center;
  }

  .site-footer__center {
    order: -1;
  }
}