/* ============================================================
   NIGHTFALL - Gothic Paranormal Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    --night-black: #040203;
    --night-deep: #0a0807;
    --night-dark: #130d08;
    --night-amber: #b87818;
    --night-gold: #d89820;
    --night-flame: #b84c12;
    --night-ember: #7a3008;
    --night-fog: #221810;
    --night-mist: #30250f;
    --night-text: #b8a888;
    --night-light: #e0d0b0;
    --night-faint: #4e4028;
    --font-display: 'Roboto', serif;
    --font-heading: 'Roboto', serif;
    --font-body: 'Roboto', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--night-black);
  color: var(--night-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── Grain/Film Texture Overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* ── Atmospheric Rain ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400'%3E%3Cg opacity='0.06' stroke='%23c8a870' stroke-width='0.5'%3E%3Cline x1='10' y1='0' x2='7' y2='40'/%3E%3Cline x1='30' y1='20' x2='27' y2='60'/%3E%3Cline x1='55' y1='5' x2='52' y2='45'/%3E%3Cline x1='80' y1='15' x2='77' y2='55'/%3E%3Cline x1='110' y1='0' x2='107' y2='40'/%3E%3Cline x1='135' y1='30' x2='132' y2='70'/%3E%3Cline x1='160' y1='10' x2='157' y2='50'/%3E%3Cline x1='185' y1='25' x2='182' y2='65'/%3E%3Cline x1='20' y1='80' x2='17' y2='120'/%3E%3Cline x1='45' y1='100' x2='42' y2='140'/%3E%3Cline x1='70' y1='90' x2='67' y2='130'/%3E%3Cline x1='100' y1='70' x2='97' y2='110'/%3E%3Cline x1='125' y1='110' x2='122' y2='150'/%3E%3Cline x1='150' y1='85' x2='147' y2='125'/%3E%3Cline x1='175' y1='95' x2='172' y2='135'/%3E%3Cline x1='5' y1='160' x2='2' y2='200'/%3E%3Cline x1='38' y1='180' x2='35' y2='220'/%3E%3Cline x1='65' y1='170' x2='62' y2='210'/%3E%3Cline x1='90' y1='155' x2='87' y2='195'/%3E%3Cline x1='118' y1='190' x2='115' y2='230'/%3E%3Cline x1='145' y1='165' x2='142' y2='205'/%3E%3Cline x1='170' y1='175' x2='167' y2='215'/%3E%3Cline x1='195' y1='160' x2='192' y2='200'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9998;
  animation: rain-fall 3s linear infinite;
  opacity: 0.7;
}

@keyframes rain-fall {
  0% { background-position: 0 0; }
  100% { background-position: -30px 400px; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--night-black); }
::-webkit-scrollbar-thumb { background: var(--night-amber); border-radius: 3px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar-nightfall {
  background: linear-gradient(180deg, rgba(10,7,5,0.98) 0%, rgba(10,7,5,0.85) 100%);
  border-bottom: 1px solid rgba(200,132,26,0.2);
  padding: 1rem 0;
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

.navbar-brand-nightfall {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--night-gold) !important;
  text-decoration: none;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(232,168,48,0.5);
  transition: text-shadow 0.3s;
}

.navbar-brand-nightfall:hover { text-shadow: 0 0 35px rgba(232,168,48,0.9); }

.navbar-brand-sub {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.5rem;
  letter-spacing: 6px;
  color: var(--night-amber);
  text-align: center;
  text-transform: uppercase;
}

.nav-link-nf {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night-text) !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s, text-shadow 0.3s;
}

.nav-link-nf:hover, .nav-link-nf.active {
  color: var(--night-gold) !important;
  text-shadow: 0 0 12px rgba(232,168,48,0.4);
}

.navbar-toggler-nf {
  border: 1px solid var(--night-amber);
  color: var(--night-amber);
  background: transparent;
  padding: 0.4rem 0.7rem;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--night-black);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    /* Moonlit clouds at top */
    radial-gradient(ellipse at 50% -10%, rgba(160,140,100,0.12) 0%, transparent 50%),
    /* Cold moonlight glow */
    radial-gradient(ellipse at 50% 20%, rgba(180,160,110,0.08) 0%, transparent 40%),
    /* Distant fire/ember glow below horizon */
    radial-gradient(ellipse at 50% 105%, rgba(180,70,10,0.5) 0%, rgba(120,45,5,0.25) 25%, transparent 55%),
    /* Side atmospheric depth */
    radial-gradient(ellipse at 10% 50%, rgba(20,10,5,0.8) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 50%, rgba(20,10,5,0.8) 0%, transparent 40%),
    /* Deep sky gradient */
    linear-gradient(180deg, #050304 0%, #0d0908 20%, #150e07 45%, #1c1008 65%, #0a0604 100%);
}

/* Moon */
.hero-moon {
  position: absolute;
  top: 12%; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #f5f0d8 0%, #e8ddb0 35%, #c8b878 65%, #9a8840 100%);
  box-shadow:
    0 0 0 2px rgba(245,240,216,0.08),
    0 0 30px 8px rgba(220,200,120,0.18),
    0 0 80px 20px rgba(200,170,80,0.12),
    0 0 200px 60px rgba(180,140,60,0.06);
  animation: moon-drift 12s ease-in-out infinite;
  z-index: 1;
}

/* Moon crater details */
.hero-moon::before {
  content: '';
  position: absolute;
  top: 22%; left: 28%;
  width: 18px; height: 16px;
  border-radius: 50%;
  background: rgba(120,100,50,0.25);
  box-shadow: 22px 30px 0 rgba(120,100,50,0.18), -8px 45px 0 10px rgba(120,100,50,0.12);
}

.hero-moon::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(200,180,100,0.04) 60%, rgba(200,180,100,0.12) 70%, transparent 85%);
  animation: moon-halo 8s ease-in-out infinite;
}

@keyframes moon-drift {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

@keyframes moon-halo {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Stars */
.hero-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-stars::before,
.hero-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 8%, rgba(255,245,210,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 5%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 12%, rgba(255,248,220,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 4%, rgba(255,245,210,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 9%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 6%, rgba(255,248,220,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 11%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 4%, rgba(255,245,210,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 18%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 22%, rgba(255,248,220,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 16%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 19%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 78% 14%, rgba(255,245,210,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 20%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 25%, rgba(255,245,210,0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 55% 15%, rgba(255,248,220,0.9) 0%, transparent 100%);
}

.hero-stars::after {
  background-image:
    radial-gradient(1px 1px at 8% 30%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 27%, rgba(255,245,210,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 32% 33%, rgba(255,248,220,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 28%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 31%, rgba(255,245,210,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 26%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 34%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 29%, rgba(255,245,210,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 3% 15%, rgba(255,248,220,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 10%, rgba(255,245,210,0.5) 0%, transparent 100%);
  animation: stars-twinkle 6s ease-in-out infinite alternate;
}

@keyframes stars-twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Clouds */
.hero-clouds {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  z-index: 1;
  overflow: hidden;
}

.hero-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: cloud-drift linear infinite;
}

.hero-cloud:nth-child(1) {
  width: 380px; height: 80px;
  background: radial-gradient(ellipse, rgba(60,50,35,0.55) 0%, transparent 70%);
  top: 8%; left: -10%;
  animation-duration: 80s;
}
.hero-cloud:nth-child(2) {
  width: 500px; height: 100px;
  background: radial-gradient(ellipse, rgba(45,38,28,0.6) 0%, transparent 70%);
  top: 18%; left: 30%;
  animation-duration: 110s;
  animation-delay: -30s;
}
.hero-cloud:nth-child(3) {
  width: 300px; height: 70px;
  background: radial-gradient(ellipse, rgba(55,45,32,0.5) 0%, transparent 70%);
  top: 5%; left: 60%;
  animation-duration: 95s;
  animation-delay: -50s;
}
.hero-cloud:nth-child(4) {
  width: 450px; height: 90px;
  background: radial-gradient(ellipse, rgba(50,42,30,0.45) 0%, transparent 70%);
  top: 28%; left: -20%;
  animation-duration: 130s;
  animation-delay: -20s;
}
.hero-cloud:nth-child(5) {
  width: 350px; height: 75px;
  background: radial-gradient(ellipse, rgba(48,40,28,0.5) 0%, transparent 70%);
  top: 35%; left: 55%;
  animation-duration: 100s;
  animation-delay: -70s;
}

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(110vw); }
}

/* Gothic castle silhouette */
.hero-castle {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 65%;
  z-index: 2;
}

.hero-castle::before {
  content: '';
  position: absolute;
  inset: 0;
  /* A detailed castle silhouette using clip-path */
  background: linear-gradient(180deg, 
    rgba(8,5,3,0.0) 0%,
    rgba(8,5,3,0.4) 30%,
    rgba(8,5,3,0.85) 60%,
    rgba(8,5,3,1) 100%);
  clip-path: polygon(
    0% 100%,
    /* left ground */
    0% 85%,
    3% 83%,
    3% 78%,
    4% 78%, 4% 74%, 5% 74%, 5% 78%, 6% 78%,
    6% 72%,
    7% 72%, 7% 68%, 8% 68%, 8% 72%, 9% 72%,
    9% 65%,
    10% 62%,
    10.5% 62%, 10.5% 58%, 11% 58%, 11% 62%, 11.5% 62%,
    11.5% 55%,
    /* Left main tower */
    12% 55%, 12% 50%, 12.5% 50%, 12.5% 55%, 13% 55%,
    13% 45%,
    14% 42%,
    14.5% 42%, 14.5% 36%, 15% 36%, 15% 42%, 15.5% 42%,
    15.5% 32%,
    16% 32%, 16% 26%, 16.5% 26%, 16.5% 32%, 17% 32%,
    17% 22%,
    /* Center left battlements */
    17.5% 22%, 17.5% 18%, 18% 18%, 18% 22%, 18.5% 22%,
    18.5% 15%,
    19% 15%, 19% 10%, 19.5% 10%, 19.5% 15%, 20% 15%,
    20% 12%,
    /* Central tower base approach */
    22% 10%,
    23% 8%,
    24% 8%, 24% 4%, 24.5% 4%, 24.5% 8%, 25% 8%,
    25% 5%,
    26% 5%, 26% 2%, 26.5% 2%, 26.5% 5%, 27% 5%,
    27% 3%,
    /* Main central tower - tallest */
    28% 3%,
    28.5% 1%, 28.5% -2%, 29% -2%, 29% 1%, 29.5% 1%,
    29.5% 0%,
    30% 0%, 30% -3%, 30.5% -3%, 30.5% 0%, 31% 0%,
    31% 2%,
    /* Right side of central tower */
    33% 2%,
    33.5% 4%, 34% 4%, 34% 2%, 34.5% 2%,
    34.5% 6%,
    35% 6%, 35.5% 3%, 35.5% 7%, 36% 7%,
    36% 9%,
    37% 9%,
    38% 12%,
    39% 12%, 39% 8%, 39.5% 8%, 39.5% 12%, 40% 12%,
    40% 15%,
    /* Right center section */
    42% 14%,
    43% 16%,
    44% 16%, 44% 12%, 44.5% 12%, 44.5% 16%, 45% 16%,
    45% 18%,
    46% 18%, 46% 14%, 46.5% 14%, 46.5% 18%, 47% 18%,
    47% 22%,
    48% 22%, 48% 17%, 48.5% 17%, 48.5% 22%, 49% 22%,
    49% 25%,
    /* Right towers */
    51% 23%,
    52% 20%,
    53% 20%, 53% 15%, 53.5% 15%, 53.5% 20%, 54% 20%,
    54% 18%,
    55% 18%, 55% 12%, 55.5% 12%, 55.5% 18%, 56% 18%,
    56% 22%,
    57% 22%,
    58% 25%,
    58.5% 25%, 58.5% 20%, 59% 20%, 59% 25%, 59.5% 25%,
    59.5% 30%,
    61% 28%,
    62% 28%, 62% 23%, 62.5% 23%, 62.5% 28%, 63% 28%,
    63% 32%,
    65% 30%,
    66% 32%,
    67% 32%, 67% 27%, 67.5% 27%, 67.5% 32%, 68% 32%,
    68% 38%,
    69% 38%, 69% 33%, 69.5% 33%, 69.5% 38%, 70% 38%,
    70% 42%,
    71% 42%, 71% 37%, 71.5% 37%, 71.5% 42%, 72% 42%,
    72% 48%,
    73% 48%,
    74% 52%,
    75% 52%, 75% 46%, 75.5% 46%, 75.5% 52%, 76% 52%,
    76% 56%,
    77% 56%, 77% 51%, 77.5% 51%, 77.5% 56%, 78% 56%,
    78% 62%,
    80% 60%,
    81% 62%,
    82% 62%, 82% 58%, 82.5% 58%, 82.5% 62%, 83% 62%,
    83% 68%,
    84% 68%,
    85% 72%,
    86% 72%, 86% 68%, 86.5% 68%, 86.5% 72%, 87% 72%,
    87% 77%,
    88% 77%,
    89% 80%,
    90% 80%,
    91% 82%,
    93% 83%,
    95% 83%,
    97% 85%,
    100% 87%,
    100% 100%
  );
}

.hero-castle::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  /* Ember/fire glow at the base */
  background: 
    radial-gradient(ellipse at 29% 100%, rgba(220,90,15,0.35) 0%, rgba(160,55,8,0.15) 20%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(180,65,10,0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 72% 100%, rgba(200,80,12,0.3) 0%, rgba(140,50,6,0.12) 18%, transparent 42%);
  z-index: 1;
  pointer-events: none;
}

/* Fog layers */
.hero-fog {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 35%;
  z-index: 3;
  overflow: hidden;
}

.hero-fog-layer {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: fog-drift ease-in-out infinite alternate;
}

.hero-fog-layer:nth-child(1) {
  width: 70%; height: 80px;
  left: -5%;
  background: radial-gradient(ellipse, rgba(80,65,45,0.22) 0%, transparent 70%);
  animation-duration: 20s;
}
.hero-fog-layer:nth-child(2) {
  width: 60%; height: 100px;
  left: 30%;
  background: radial-gradient(ellipse, rgba(70,58,40,0.18) 0%, transparent 70%);
  animation-duration: 28s;
  animation-delay: -10s;
  bottom: 20px;
}
.hero-fog-layer:nth-child(3) {
  width: 80%; height: 60px;
  left: 10%;
  background: radial-gradient(ellipse, rgba(90,72,50,0.2) 0%, transparent 70%);
  animation-duration: 35s;
  animation-delay: -5s;
  bottom: 40px;
}
.hero-fog-layer:nth-child(4) {
  width: 55%; height: 90px;
  left: 50%;
  background: radial-gradient(ellipse, rgba(65,52,36,0.16) 0%, transparent 70%);
  animation-duration: 22s;
  animation-delay: -15s;
  bottom: 10px;
}

@keyframes fog-drift {
  from { transform: translateX(-5%) translateY(0px); opacity: 0.7; }
  to { transform: translateX(5%) translateY(-12px); opacity: 1; }
}

.hero-orb {
  position: absolute;
  top: 9%; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(240,220,140,0.06) 0%, rgba(220,180,80,0.04) 35%, transparent 65%);
  border-radius: 50%;
  animation: pulse-orb 8s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes pulse-orb {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
  50% { transform: translateX(-50%) scale(1.15); opacity: 0.85; }
}

.hero-flames {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 280px;
  background: 
    linear-gradient(0deg, rgba(180,65,8,0.3) 0%, rgba(140,50,6,0.1) 30%, transparent 70%);
  pointer-events: none;
  z-index: 4;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}

.hero-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--night-amber);
  margin-bottom: 1.5rem;
  animation: fadeInDown 1s ease both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  color: var(--night-light);
  line-height: 1.1;
  text-shadow:
    0 0 60px rgba(232,168,48,0.3),
    0 2px 4px rgba(0,0,0,0.8);
  margin-bottom: 1rem;
  animation: fadeInDown 1s ease 0.2s both;
}

.hero-title span { color: var(--night-gold); }

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--night-faint);
  max-width: 500px;
  margin: 0 auto 2.5rem;
  font-style: italic;
  animation: fadeInUp 1s ease 0.4s both;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-nightfall {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night-gold);
  background: transparent;
  border: 1px solid var(--night-amber);
  padding: 0.7rem 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.btn-nightfall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,132,26,0.15), rgba(212,96,26,0.1));
  transform: translateX(-100%);
  transition: transform 0.4s;
}

.btn-nightfall:hover {
  color: var(--night-light);
  border-color: var(--night-gold);
  box-shadow: 0 0 25px rgba(232,168,48,0.25), inset 0 0 25px rgba(200,132,26,0.05);
}

.btn-nightfall:hover::before { transform: translateX(0); }

.btn-nightfall-solid {
  background: linear-gradient(135deg, var(--night-ember), var(--night-flame));
  color: var(--night-light);
  border: 1px solid var(--night-amber);
}

.btn-nightfall-solid:hover {
  background: linear-gradient(135deg, var(--night-flame), var(--night-amber));
  box-shadow: 0 0 30px rgba(212,96,26,0.4);
}

.btn-danger-nf {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff6b6b;
  background: transparent;
  border: 1px solid #8b2020;
  padding: 0.5rem 1.2rem;
  transition: all 0.3s;
  cursor: pointer;
}
.btn-danger-nf:hover { background: rgba(139,32,32,0.3); color: #ff4444; }

/* ============================================================
   SECTION STYLES
   ============================================================ */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--night-amber), transparent);
  margin: 0;
  opacity: 0.4;
}

.section-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--night-amber);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--night-light);
  text-shadow: 0 0 30px rgba(232,168,48,0.2);
  margin-bottom: 1rem;
}

.section-lead {
  font-style: italic;
  color: var(--night-faint);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   NEWS SECTION
   ============================================================ */
.section-news {
  background: linear-gradient(180deg, var(--night-black) 0%, var(--night-deep) 50%, var(--night-black) 100%);
  padding: 6rem 0;
}

.news-card {
  background: linear-gradient(135deg, rgba(26,18,8,0.9), rgba(17,13,9,0.95));
  border: 1px solid rgba(200,132,26,0.15);
  transition: all 0.4s;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.news-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--night-amber), transparent);
  opacity: 0;
  transition: opacity 0.4s;
}

.news-card:hover { border-color: rgba(200,132,26,0.4); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 30px rgba(200,132,26,0.08); }
.news-card:hover::before { opacity: 1; }

.news-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: sepia(0.4) brightness(0.7);
  transition: filter 0.4s;
}
.news-card:hover .news-card-img { filter: sepia(0.2) brightness(0.85); }

.news-card-body { padding: 1.5rem; }

.news-category {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--night-amber);
  margin-bottom: 0.5rem;
}

.news-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--night-light);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.news-card-excerpt {
  font-size: 0.95rem;
  color: var(--night-faint);
  margin-bottom: 1rem;
  font-style: italic;
}

.news-card-date {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 2px;
  color: var(--night-ember);
}

/* ============================================================
   SERVICES / CARDS
   ============================================================ */
.section-services {
  background: var(--night-deep);
  padding: 6rem 0;
  position: relative;
}

.section-services::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(200,132,26,0.06) 0%, transparent 60%);
  pointer-events: none;
}

.service-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200,132,26,0.12);
  background: var(--night-dark);
  transition: all 0.4s;
  height: 280px;
  display: flex;
  align-items: flex-end;
}

.service-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.35) sepia(0.5);
  transition: filter 0.5s, transform 0.5s;
}

.service-card:hover .service-card-bg { filter: brightness(0.5) sepia(0.3); transform: scale(1.05); }

.service-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10,7,5,0.9) 0%, transparent 60%);
}

.service-card-body {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  width: 100%;
}

.service-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--night-light);
  margin-bottom: 0.4rem;
}

.service-card-text {
  font-size: 0.85rem;
  color: var(--night-faint);
  font-style: italic;
  margin-bottom: 0.75rem;
}

/* ============================================================
   SHOP / MERCH
   ============================================================ */
.section-shop {
  padding: 6rem 0;
  background: linear-gradient(180deg, var(--night-black) 0%, var(--night-deep) 100%);
}

.merch-card {
  background: var(--night-dark);
  border: 1px solid rgba(200,132,26,0.12);
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}

.merch-card:hover { border-color: rgba(200,132,26,0.35); transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }

.merch-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 280px;
  background: var(--night-fog);
  display: flex;
  align-items: center;
  justify-content: center;
}

.merch-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.3) brightness(0.85);
  transition: transform 0.5s, filter 0.5s;
}
.merch-card:hover .merch-card-img { transform: scale(1.05); filter: sepia(0.1) brightness(0.95); }

.merch-badge {
  position: absolute;
  top: 1rem; right: 1rem;
  background: var(--night-flame);
  color: var(--night-light);
  font-family: var(--font-heading);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
}

.merch-card-body { padding: 1.25rem; }

.merch-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--night-light);
  margin-bottom: 0.3rem;
}

.merch-desc {
  font-size: 0.85rem;
  color: var(--night-faint);
  font-style: italic;
  margin-bottom: 0.75rem;
}

.merch-price {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--night-gold);
  margin-bottom: 1rem;
}

/* ============================================================
   MEDIA PAGE
   ============================================================ */
.section-media {
  padding: 6rem 0;
  background: var(--night-deep);
}

.yt-card {
  background: var(--night-dark);
  border: 1px solid rgba(200,132,26,0.12);
  transition: all 0.4s;
  overflow: hidden;
}
.yt-card:hover { border-color: rgba(200,132,26,0.35); transform: translateY(-3px); }

.yt-thumb {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  background: var(--night-fog);
}

.yt-thumb img, .yt-thumb iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.yt-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(200,132,26,0.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
  pointer-events: none;
}
.yt-card:hover .yt-play-btn { background: var(--night-gold); transform: translate(-50%, -50%) scale(1.1); }

.yt-thumb-img { filter: brightness(0.7); transition: filter 0.4s; }
.yt-card:hover .yt-thumb-img { filter: brightness(0.85); }

.yt-card-body { padding: 1.25rem; }
.yt-title { font-family: var(--font-heading); font-size: 0.95rem; color: var(--night-light); margin-bottom: 0.4rem; }
.yt-meta { font-size: 0.8rem; color: var(--night-faint); font-style: italic; }

/* ============================================================
   WHY NIGHTFALL FEATURES
   ============================================================ */
.feature-item { text-align: center; padding: 2rem 1rem; }

.feature-icon {
  width: 64px; height: 64px;
  border: 1px solid rgba(200,132,26,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  background: radial-gradient(circle, rgba(200,132,26,0.1), transparent);
  font-size: 1.5rem;
  color: var(--night-amber);
  transition: all 0.3s;
}
.feature-item:hover .feature-icon { border-color: var(--night-amber); box-shadow: 0 0 20px rgba(200,132,26,0.2); }

.feature-title { font-family: var(--font-heading); font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--night-light); margin-bottom: 0.5rem; }
.feature-text { font-size: 0.9rem; color: var(--night-faint); font-style: italic; }

/* ============================================================
   CONTACT
   ============================================================ */
.section-contact {
  padding: 6rem 0;
  background: var(--night-black);
  position: relative;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  background: rgba(26,18,8,0.8);
  border: 1px solid rgba(200,132,26,0.2);
  color: var(--night-text);
  font-family: var(--font-body);
  padding: 0.75rem 1rem;
  width: 100%;
  margin-bottom: 1rem;
  outline: none;
  transition: border-color 0.3s;
  font-size: 1rem;
}

.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--night-amber); box-shadow: 0 0 15px rgba(200,132,26,0.1); }

.contact-form label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night-amber);
  display: block;
  margin-bottom: 0.4rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--night-deep);
  border-top: 1px solid rgba(200,132,26,0.15);
  padding: 3rem 0 1.5rem;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--night-gold);
  text-shadow: 0 0 15px rgba(232,168,48,0.3);
}

.footer-tagline { font-style: italic; color: var(--night-faint); font-size: 0.9rem; }

.footer-link {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--night-faint);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}
.footer-link:hover { color: var(--night-amber); }

.footer-bottom {
  border-top: 1px solid rgba(200,132,26,0.1);
  margin-top: 2rem;
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--night-faint);
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 60px;
}

.admin-sidebar {
  width: 260px;
  background: var(--night-deep);
  border-right: 1px solid rgba(200,132,26,0.15);
  padding: 2rem 0;
  flex-shrink: 0;
  position: fixed;
  top: 60px;
  bottom: 0;
  overflow-y: auto;
}

.admin-sidebar-title {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--night-amber);
  padding: 0 1.5rem 1rem;
  border-bottom: 1px solid rgba(200,132,26,0.1);
  margin-bottom: 1rem;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--night-faint);
  text-decoration: none;
  transition: all 0.3s;
  border-left: 2px solid transparent;
}
.admin-nav-link:hover, .admin-nav-link.active {
  color: var(--night-gold);
  border-left-color: var(--night-amber);
  background: rgba(200,132,26,0.06);
}

.admin-content {
  flex: 1;
  margin-left: 260px;
  padding: 2.5rem;
  min-height: calc(100vh - 60px);
}

.admin-card {
  background: var(--night-deep);
  border: 1px solid rgba(200,132,26,0.15);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night-amber);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(200,132,26,0.2);
  text-align: left;
}

.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(200,132,26,0.07);
  color: var(--night-text);
  font-size: 0.95rem;
}

.admin-table tr:hover td { background: rgba(200,132,26,0.04); }

.admin-form input,
.admin-form textarea,
.admin-form select {
  background: rgba(10,7,5,0.8);
  border: 1px solid rgba(200,132,26,0.2);
  color: var(--night-text);
  font-family: var(--font-body);
  padding: 0.7rem 1rem;
  width: 100%;
  margin-bottom: 1.25rem;
  outline: none;
  transition: border-color 0.3s;
  font-size: 1rem;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus { border-color: var(--night-amber); box-shadow: 0 0 12px rgba(200,132,26,0.1); }

.admin-form label {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night-amber);
  display: block;
  margin-bottom: 0.4rem;
}

.admin-stat {
  background: var(--night-dark);
  border: 1px solid rgba(200,132,26,0.12);
  padding: 1.5rem;
  text-align: center;
}

.admin-stat-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--night-gold);
  display: block;
}

.admin-stat-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--night-faint);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(140,60,10,0.2) 0%, transparent 60%),
    var(--night-black);
}

.login-box {
  background: var(--night-deep);
  border: 1px solid rgba(200,132,26,0.2);
  padding: 3rem;
  width: 100%;
  max-width: 440px;
  position: relative;
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0; left: 1rem; right: 1rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--night-amber), transparent);
}

/* ============================================================
   PAGE HERO (Inner Pages)
   ============================================================ */
.page-hero {
  padding: 10rem 0 5rem;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(35,25,15,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(30,20,12,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 120%, rgba(160,60,8,0.3) 0%, rgba(100,40,5,0.15) 30%, transparent 55%),
    radial-gradient(ellipse at 50% -30%, rgba(140,120,70,0.06) 0%, transparent 45%),
    linear-gradient(180deg, #040203 0%, #080605 40%, #0e0908 70%, #040203 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 15%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 10%, rgba(255,248,220,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 20%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 12%, rgba(255,245,210,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 18%, rgba(255,245,210,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 8% 30%, rgba(255,245,210,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 8%, rgba(255,248,220,0.7) 0%, transparent 100%);
  pointer-events: none;
}

.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,120,25,0.3), transparent);
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-nightfall {
  background: rgba(200,132,26,0.1);
  border: 1px solid rgba(200,132,26,0.3);
  color: var(--night-text);
  font-family: var(--font-body);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.alert-nightfall-success { border-color: rgba(50,150,50,0.4); background: rgba(50,150,50,0.08); }
.alert-nightfall-danger { border-color: rgba(200,50,50,0.4); background: rgba(200,50,50,0.08); color: #ff8888; }

/* ============================================================
   UTILITIES
   ============================================================ */
.text-gold { color: var(--night-gold); }
.text-amber { color: var(--night-amber); }
.text-nf { color: var(--night-text); }
.text-faint { color: var(--night-faint); }

.border-amber { border-color: rgba(200,132,26,0.3) !important; }

.bg-dark-nf { background: var(--night-dark); }
.bg-deep-nf { background: var(--night-deep); }

.divider-gold {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--night-amber), transparent);
  margin: 1.5rem auto;
}

.divider-gold-left {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--night-amber), transparent);
  margin: 1.5rem 0;
}

/* ── Flame particle floating decoration ── */
.flame-dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--night-amber);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--night-amber);
  animation: float-dot 3s ease-in-out infinite;
}
@keyframes float-dot {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-8px); opacity: 1; }
}

/* ============================================================
   HERO NEWS TICKER
   ============================================================ */
.hero-news-ticker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  height: 44px;
  background: rgba(6,4,2,0.92);
  border-top: 1px solid rgba(184,120,24,0.25);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.hero-news-ticker-label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.2rem;
  background: var(--night-amber);
  color: var(--night-black);
  font-family: var(--font-heading);
  font-size: 0.58rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.hero-news-ticker-label::after {
  content: '';
  position: absolute;
  right: -10px; top: 0; bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, var(--night-amber), transparent);
}

.hero-news-ticker-track-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
  gap: 0;
}

.hero-news-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  animation: ticker-scroll 40s linear infinite;
  gap: 0;
}

.hero-news-ticker-track:hover,
.hero-news-ticker-track-wrap:hover .hero-news-ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.hero-news-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 2rem;
  text-decoration: none;
  transition: all 0.2s;
  border-right: 1px solid rgba(184,120,24,0.12);
}

.hero-news-ticker-item:hover .hero-news-ticker-title {
  color: var(--night-gold);
}

.hero-news-ticker-cat {
  font-family: var(--font-heading);
  font-size: 0.52rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--night-amber);
  flex-shrink: 0;
}

.hero-news-ticker-title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--night-text);
  transition: color 0.2s;
}

.hero-news-ticker-sep {
  color: var(--night-ember);
  font-size: 0.5rem;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ============================================================
   ENHANCED NEWS CARDS
   ============================================================ */
.news-card-placeholder {
  height: 200px;
  background: linear-gradient(135deg, var(--night-fog), var(--night-dark));
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card-placeholder i {
  font-size: 2.5rem;
  color: var(--night-ember);
  opacity: 0.4;
}

.news-card-placeholder-featured {
  height: 320px;
}

.news-card-placeholder-featured i {
  font-size: 3.5rem;
}

.news-card-placeholder-compact {
  width: 140px;
  min-width: 140px;
  height: 100%;
  min-height: 110px;
}

/* Featured large card */
.news-card-featured {
  height: 100%;
}

.news-card-img-featured {
  height: 320px;
}

.news-card-title-featured {
  font-size: 1.3rem;
  line-height: 1.3;
}

/* Compact side card */
.news-card-compact {
  overflow: hidden;
}

.news-card-compact .news-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.news-card-compact-img {
  width: 140px;
  min-width: 140px;
  height: 100%;
  min-height: 110px;
  object-fit: cover;
  filter: sepia(0.4) brightness(0.7);
  transition: filter 0.4s;
}

.news-card-compact:hover .news-card-compact-img {
  filter: sepia(0.2) brightness(0.85);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .admin-sidebar { display: none; }
  .admin-content { margin-left: 0; }
  .hero-title { font-size: 2.5rem; }
  .hero-news-ticker-label span { display: none; }
  .news-card-compact { flex-direction: column; }
  .news-card-compact-img { width: 100%; min-width: unset; height: 160px; }
  .news-card-placeholder-compact { width: 100%; min-width: unset; height: 120px; }
}

/* ── Transitions ── */
.page-transition {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}