/*
Theme Name: Numa Milling Co.
Theme URI: https://numamill.com
Author: Numa
Description: Custom WordPress theme for Numa — a Ugandan grain company. Community-milled flour from family farms since 1993.
Version: 1.0
License: Proprietary
Text Domain: numa
*/

/* ========== BASE ========== */
html { scroll-behavior: smooth; }

/* ========== SCROLL REVEAL ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-100 { transition-delay: 100ms; }
.reveal-delay-200 { transition-delay: 200ms; }
.reveal-delay-300 { transition-delay: 300ms; }
.reveal-delay-400 { transition-delay: 400ms; }
.reveal-delay-500 { transition-delay: 500ms; }

/* ========== NAVBAR ========== */
.glass-nav {
  background: rgba(0, 0, 53, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 165, 0, 0.15);
}

/* ========== CARDS ========== */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 30, 0.1);
  border-color: rgba(255, 165, 0, 0.3);
}
.dark .card-lift:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 20, 0.6);
}

/* ========== BACKGROUND PATTERNS ========== */
.hero-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 53, 0.05) 1px, transparent 0);
  background-size: 32px 32px;
}
.grain-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}
.dark .grain-texture::before { opacity: 0.04; }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #fefcf5; }
::-webkit-scrollbar-thumb { background: #000035; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ffa500; }
.dark ::-webkit-scrollbar-track { background: #000035; }
.dark ::-webkit-scrollbar-thumb { background: #ffa500; }
.dark ::-webkit-scrollbar-thumb:hover { background: #d48900; }

/* ========== FOCUS & SELECTION ========== */
*:focus-visible {
  outline: 2px solid #ffa500;
  outline-offset: 2px;
  border-radius: 4px;
}
::selection {
  background: rgba(255, 165, 0, 0.2);
  color: #000035;
}
.dark ::selection {
  background: rgba(255, 165, 0, 0.3);
  color: #fff;
}

/* ========== VINTAGE FRAME — Torn Newspaper ========== */

/* SVG torn-paper filter injected via JS or inline — see page-history.php */

.vintage-frame {
  position: relative;
  padding: 14px 12px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 119, 70, 0.06) 2px,
      rgba(139, 119, 70, 0.06) 3px
    ),
    linear-gradient(175deg, #f2e8c9 0%, #e8d7a3 40%, #dfca8e 100%);
  filter:
    drop-shadow(3px 4px 6px rgba(0, 0, 20, 0.35))
    drop-shadow(1px 1px 2px rgba(0, 0, 20, 0.2));
  transition: transform 0.35s ease, filter 0.35s ease;
  clip-path: polygon(
    2% 0%, 5% 1%, 9% 0%, 14% 2%, 19% 0%, 24% 1%, 28% 0%, 33% 2%,
    38% 1%, 43% 0%, 48% 2%, 53% 0%, 57% 1%, 62% 0%, 66% 2%,
    71% 0%, 76% 1%, 81% 0%, 85% 2%, 90% 0%, 94% 1%, 98% 0%,
    100% 3%, 99% 8%, 100% 13%, 98% 18%, 100% 23%, 99% 27%,
    100% 33%, 98% 38%, 100% 43%, 99% 47%, 100% 52%, 98% 57%,
    100% 63%, 99% 68%, 100% 73%, 98% 78%, 100% 83%, 99% 87%,
    100% 92%, 98% 97%, 100% 100%,
    96% 99%, 91% 100%, 87% 98%, 82% 100%, 77% 99%, 72% 100%,
    68% 98%, 63% 100%, 58% 99%, 53% 100%, 48% 98%, 43% 100%,
    38% 99%, 33% 100%, 28% 98%, 24% 100%, 19% 99%, 15% 100%,
    10% 98%, 5% 100%, 1% 99%, 0% 95%, 1% 90%, 0% 85%, 2% 80%,
    0% 75%, 1% 70%, 0% 65%, 2% 60%, 0% 55%, 1% 50%, 0% 45%,
    2% 40%, 0% 35%, 1% 30%, 0% 25%, 2% 20%, 0% 15%, 1% 10%, 0% 5%
  );
}

/* Torn inner edge — pseudo element simulating photo border tear */
.vintage-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(139, 100, 40, 0.15);
  pointer-events: none;
  z-index: 2;
}

/* Aged stain overlay */
.vintage-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139, 100, 40, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 60%, rgba(120, 80, 30, 0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(100, 70, 20, 0.05) 0%, transparent 35%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: multiply;
}

.vintage-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.45) saturate(0.55) contrast(0.85) brightness(0.85);
  transition: filter 0.4s ease, transform 0.5s ease;
  clip-path: polygon(
    1% 0%, 3% 1%, 7% 0%, 11% 1%, 16% 0%, 22% 1%, 27% 0%, 32% 1%,
    37% 0%, 42% 1%, 46% 0%, 51% 1%, 56% 0%, 61% 1%, 65% 0%, 70% 1%,
    74% 0%, 79% 1%, 84% 0%, 89% 1%, 94% 0%, 97% 1%, 99% 0%,
    100% 2%, 99% 6%, 100% 11%, 99% 16%, 100% 21%, 99% 25%,
    100% 30%, 99% 35%, 100% 40%, 99% 45%, 100% 51%, 99% 56%,
    100% 61%, 99% 66%, 100% 71%, 99% 76%, 100% 81%, 99% 86%,
    100% 91%, 99% 96%, 100% 100%,
    97% 99%, 93% 100%, 88% 99%, 82% 100%, 77% 99%, 72% 100%,
    66% 99%, 61% 100%, 56% 99%, 50% 100%, 45% 99%, 39% 100%,
    34% 99%, 28% 100%, 23% 99%, 17% 100%, 12% 99%, 6% 100%,
    3% 99%, 1% 100%, 0% 96%, 1% 91%, 0% 86%, 1% 81%, 0% 76%,
    1% 71%, 0% 65%, 1% 60%, 0% 55%, 1% 49%, 0% 44%, 1% 39%,
    0% 34%, 1% 29%, 0% 23%, 1% 18%, 0% 13%, 1% 8%, 0% 3%
  );
}

/* Tilt variations */
.vintage-frame.tilt-right { transform: rotate(3deg); }
.vintage-frame.tilt-left  { transform: rotate(-3deg); }
.vintage-frame.tilt-more-right { transform: rotate(5deg); }
.vintage-frame.tilt-more-left  { transform: rotate(-5deg); }

.vintage-frame:hover {
  transform: rotate(0deg) translateY(-5px) !important;
  filter:
    drop-shadow(5px 8px 14px rgba(0, 0, 20, 0.45))
    drop-shadow(2px 2px 4px rgba(0, 0, 20, 0.3));
  z-index: 10;
}
.vintage-frame:hover img {
  filter: sepia(0.1) saturate(1) contrast(1) brightness(1);
  transform: scale(1.03);
}

/* Dark mode */
.dark .vintage-frame {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(80, 70, 40, 0.08) 2px,
      rgba(80, 70, 40, 0.08) 3px
    ),
    linear-gradient(175deg, #3d3522 0%, #352d1c 40%, #2e2616 100%);
}
.dark .vintage-frame::before {
  border-color: rgba(180, 150, 80, 0.15);
}