/* ================================================================
   MANU — Ancient Archive cinematic page
   Extends style.css. Scoped to body.manu-page.
   ================================================================ */

body.manu-page{
  --mnavy: #030408;
  --mnavy-2: #06080f;
  --mnavy-3: #080b14;
  --mbronze: #a9825a;
  --mgold: #d9bb84;
  --mstone: #8a8272;
  --mtext: #ece7d9;
  --mtext-dim: #a9a290;
  background: var(--mnavy);
}

/* ---------- header ---------- */
body.manu-page header.site-nav{
  position: fixed;
  width: 100%;
  transition: background .5s ease, border-color .5s ease, opacity .6s ease;
}
body.manu-page header.site-nav.hero-mode{ background: transparent; border-bottom-color: transparent; }
body.manu-page header.site-nav.nav-enter{ opacity: 0; }
body.manu-page header.site-nav.nav-enter.nav-in{ opacity: 1; }
body.manu-page .brand span{ color: var(--mgold); }
body.manu-page .links a:hover{ color: var(--mgold); }
body.manu-page .links a.active{ color: var(--mgold); border-color: var(--mgold); }

/* ================================================================
   AMBIENT LAYERS — fixed, always active, same visual weight as the
   rain/lightning system on the YNIKMH page. Nothing here is gated
   behind scroll triggers; it is alive from the first frame.
   ================================================================ */

.stars{
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  background: radial-gradient(ellipse at 50% 10%, #070a14 0%, var(--mnavy) 60%);
}
.stars .star{
  position: absolute;
  background: var(--mtext);
  border-radius: 50%;
  animation: twinkle ease-in-out infinite;
}
.stars .star.far{ background: #82869a; }
@keyframes twinkle{
  0%, 100%{ opacity: .12; }
  50%{ opacity: 1; }
}
.stars .shooter{
  position: absolute;
  width: 110px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,187,132,0.85), transparent);
  opacity: 0;
  animation: shoot linear infinite;
}
@keyframes shoot{
  0%{ opacity: 0; transform: translate(0,0) rotate(18deg); }
  1.5%{ opacity: .9; }
  7%{ opacity: 0; transform: translate(140px, 52px) rotate(18deg); }
  100%{ opacity: 0; }
}

.cosmic-haze{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 28% 15%, rgba(169,130,90,0.07), transparent 55%),
              radial-gradient(ellipse at 78% 60%, rgba(120,140,190,0.05), transparent 60%);
}

.dust-field{
  position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
}
.dust-field .mote{
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--mgold);
  animation-name: drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.dust-field .mote.bright{
  width: 3px; height: 3px;
  background: #f3ddab;
  box-shadow: 0 0 6px rgba(243,221,171,0.8);
}
@keyframes drift{
  0%{ transform: translate(0,0); opacity: 0; }
  15%{ opacity: .75; }
  85%{ opacity: .45; }
  100%{ transform: translate(var(--dx,20px), -170px); opacity: 0; }
}

/* cosmic ash — a second, slower, cooler-toned particle system for extra depth.
   .ash-back sits behind content; .ash-front drifts in front of it. */
.ash-back{ position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ash-front{ position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ash-field .ash{
  position: absolute;
  width: 1.4px; height: 1.4px;
  border-radius: 50%;
  background: #d8d4c6;
  animation-name: ashDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes ashDrift{
  0%{ transform: translate(0,0); opacity: 0; }
  20%{ opacity: .5; }
  80%{ opacity: .3; }
  100%{ transform: translate(var(--adx, -30px), var(--ady, 160px)); opacity: 0; }
}

/* rare word-spotlight particle, spawned by JS during idle moments */
.spotlight-particle{
  position: fixed;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #f3ddab;
  box-shadow: 0 0 8px rgba(243,221,171,0.9), 0 0 16px rgba(243,221,171,0.4);
  z-index: 6; pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.spotlight-particle.active{ opacity: .9; }

.ancient-mist{
  position: fixed; left: -15%; right: -15%; bottom: 0; height: 44vh; z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(14,19,32,0.4), transparent 82%);
  animation: mistDrift 60s ease-in-out infinite;
}
.ancient-mist::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 35% at 30% 100%, rgba(24,31,50,0.3), transparent 72%),
              radial-gradient(ellipse 45% 30% at 75% 100%, rgba(24,31,50,0.25), transparent 72%);
  animation: mistBreathe 30s ease-in-out infinite;
}
@keyframes mistDrift{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(4%); }
}
@keyframes mistBreathe{
  0%, 100%{ opacity: .5; }
  50%{ opacity: .85; }
}

.light-shaft{
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(217,187,132,0.055) 49%, transparent 60%);
  animation: shaftShift 60s ease-in-out infinite;
}
@keyframes shaftShift{
  0%, 100%{ transform: translateX(-6%); }
  50%{ transform: translateX(6%); }
}




/* ================================================================
   HERO
   ================================================================ */
.manu-hero{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  position: relative; z-index: 4;
  padding: 0 24px;
}
.manu-hero h1{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(32px, 6.6vw, 68px);
  line-height: 1.42;
  color: var(--mtext);
  max-width: 18ch;
  opacity: 0;
  animation: mFade 1.8s ease forwards;
  animation-delay: .4s;
  text-shadow: 0 0 60px rgba(217,187,132,0.12);
}
.manu-hero h1 em{ font-style: normal; color: var(--mgold); }
@keyframes mFade{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: none; }
}

/* ---------- full-screen statement scene ---------- */
.m-scene{
  min-height: 85vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  position: relative; z-index: 4;
  padding: 70px 24px;
}
.m-scene h2{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(28px, 5.4vw, 54px);
  line-height: 1.5;
  color: var(--mtext);
  max-width: 20ch;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.m-scene h2 em{ font-style: normal; color: var(--mgold); }
.m-scene.in-view h2{ opacity: 1; transform: none; }

/* ================================================================
   STORY SECTIONS — heading, then large image, then paragraph.
   No side-by-side layout. No exhibit labels.
   ================================================================ */
.story{
  padding: 110px 0;
  position: relative; z-index: 4;
}
.story .wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.story h2{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(28px, 5.2vw, 52px);
  line-height: 1.48;
  color: var(--mtext);
  max-width: 20ch;
  margin: 0 auto 56px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.story h2 em{ font-style: normal; color: var(--mgold); }
.story.in-view h2{ opacity: 1; transform: none; }

.story-media{
  opacity: 0; transform: translateY(26px) scale(.98);
  transition: opacity 1.4s ease .1s, transform 1.4s ease .1s;
  margin: 0 auto;
}
.story.in-view .story-media{ opacity: 1; transform: none; }
.story-media img{
  width: 100%;
  max-height: 78vh;
  object-fit: cover;
  display: block;
  filter: grayscale(.3) sepia(.16) brightness(.72) contrast(1.1);
  box-shadow: 0 50px 120px rgba(0,0,0,0.6);
}

.story p{
  font-family: 'EB Garamond', serif;
  font-size: 19px;
  line-height: 1.9;
  color: var(--mtext-dim);
  max-width: 56ch;
  margin: 44px auto 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.3s ease .2s, transform 1.3s ease .2s;
}
.story.in-view p{ opacity: 1; transform: none; }

/* ================================================================
   WAR SECTION — image first, text reveals after
   ================================================================ */
.war-image{
  position: relative; z-index: 4;
  padding: 0;
}
.war-image img{
  width: 100%;
  max-height: 92vh;
  object-fit: cover;
  display: block;
  filter: grayscale(.35) brightness(.55) contrast(1.15);
  opacity: 0; transform: scale(1.02);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
.war-image.in-view img{ opacity: 1; transform: none; }

.war-text{
  padding: 110px 24px 140px;
  text-align: center;
  position: relative; z-index: 4;
  background: var(--mnavy);
}
.war-text h2{
  font-family: 'Cormorant SC', serif;
  font-weight: 600;
  font-size: clamp(34px, 6.4vw, 66px);
  line-height: 1.34;
  letter-spacing: .015em;
  color: #7d1c26;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4);
  max-width: 16ch;
  margin: 0 auto;
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
.war-text.in-view h2{ opacity: 1; transform: none; }

/* ================================================================
   QUIET ENDING — no book, no cover, just atmosphere and one button
   ================================================================ */
.quiet-ending{
  min-height: 90vh;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 4;
  background: var(--mnavy);
}
.quiet-ending .btn.primary{
  background: transparent;
  border-color: var(--mbronze);
  color: var(--mtext);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s ease, background .3s ease, border-color .3s ease;
}
.quiet-ending.in-view .btn.primary{ opacity: 1; transform: none; }
.quiet-ending .btn.primary:hover{
  background: var(--mbronze);
  border-color: var(--mbronze);
  color: var(--mnavy);
}

@media (max-width: 640px){
  .manu-hero{ padding: 0 20px; }
  .m-scene{ min-height: 60vh; padding: 50px 20px; }
  .story{ padding: 80px 0; }
  .story .wrap{ padding: 0 20px; }
  .story h2{ margin-bottom: 36px; }
  .story-media img{ max-height: 46vh; }
  .story p{ font-size: 17px; margin-top: 32px; }
  .war-text{ padding: 60px 20px 80px; }
}

@media (prefers-reduced-motion: reduce){
  .stars .star, .stars .shooter, .dust-field, .ancient-mist, .light-shaft{ animation: none; }
  .m-scene h2, .story h2, .story-media, .story p, .war-image img, .war-text h2, .quiet-ending .btn{
    opacity: 1 !important; transform: none !important;
  }
}