/*
Theme Name: Empyrean
Theme URI: https://example.com/empyrean
Author: Empyrean
Author URI: https://example.com
Description: A three-realm blog theme — Heaven, Earth, and Hell. The homepage descends from a marble-white firmament (a large quote hero) through a terrestrial world of blog, news and shop, into a fiery inferno call-to-action. Features a scroll-reactive navigation bar that morphs its palette as you move between realms. Classic theme, translation-ready, with featured-image and custom-menu support.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: empyrean
Tags: blog, news, one-column, custom-menu, custom-logo, featured-images, full-width-template, translation-ready, editor-style
*/

/* ---------- resets ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0a0a0c; overflow-x: hidden; font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
::selection { background: #e0362d; color: #fff; }
img { max-width: 100%; height: auto; }
a { color: #3b6ea5; text-decoration: none; }
a:hover { color: #2f5d43; }

/* anchor scroll offset for the fixed nav */
#top, #earth, #news, #products { scroll-margin-top: 66px; }

/* ---------- keyframes ---------- */
@keyframes floatUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes emberRise { 0% { transform: translateY(0) scale(1); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-220px) scale(.3); opacity: 0; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes rayspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rayspinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes rayglow { 0%,100% { opacity: .4; } 50% { opacity: .68; } }

/* ---------- morphing navigation ---------- */
/* default = heaven */
body {
  --nav-bg: rgba(250,246,238,0.80);
  --nav-border: rgba(42,38,32,0.09);
  --nav-text: #26221b;
  --nav-dim: rgba(42,38,32,0.5);
  --nav-accent: #8a7d63;
  --nav-mark: linear-gradient(135deg,#ffffff,#e8e2d4);
  --nav-active-bg: rgba(0,0,0,0.05);
  --nav-label: "the firmament";
}
body.realm-earth {
  --nav-bg: rgba(224,234,229,0.86);
  --nav-border: rgba(30,58,44,0.12);
  --nav-text: #1e3a2c;
  --nav-dim: rgba(30,58,44,0.55);
  --nav-accent: #3b6ea5;
  --nav-mark: linear-gradient(135deg,#3b6ea5,#7aa15f);
  --nav-active-bg: rgba(0,0,0,0.05);
  --nav-label: "the terrestrial";
}
body.realm-hell {
  --nav-bg: rgba(12,11,13,0.82);
  --nav-border: rgba(224,54,45,0.30);
  --nav-text: #f4ece0;
  --nav-dim: rgba(244,236,224,0.5);
  --nav-accent: #e0362d;
  --nav-mark: linear-gradient(135deg,#e0362d,#3a0b08);
  --nav-active-bg: rgba(224,54,45,0.12);
  --nav-label: "the inferno";
}

.empyrean-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 40px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background .7s ease, border-color .7s ease;
}
.empyrean-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; }
.empyrean-brand:hover { color: inherit; }
.empyrean-mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--nav-mark);
  box-shadow: 0 0 0 1px var(--nav-border);
  transition: background .7s ease;
}
.empyrean-brand-name {
  font-weight: 800; font-size: 16px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--nav-text); transition: color .6s ease;
}
.empyrean-tabs { display: flex; align-items: center; gap: 4px; }
.empyrean-tab {
  cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 8px 15px; border-radius: 3px;
  color: var(--nav-text); background: transparent;
  transition: color .7s ease, background .3s ease;
}
.empyrean-tab:hover { color: var(--nav-accent); }
.empyrean-tab.is-active { color: var(--nav-accent); background: var(--nav-active-bg); }
.empyrean-label {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px;
  color: var(--nav-dim); transition: color .7s ease;
}
.empyrean-label::after { content: var(--nav-label); }

/* mobile nav */
@media (max-width: 680px) {
  .empyrean-nav { padding: 12px 18px; }
  .empyrean-label { display: none; }
  .empyrean-tab { padding: 7px 9px; font-size: 12px; }
  .empyrean-brand-name { font-size: 13px; letter-spacing: .2em; }
}

/* ---------- inner page (archive / single / page) shell ---------- */
.empyrean-inner { background: linear-gradient(180deg, #e6edf0 0%, #cfdfd8 22%, #b7cdaa 60%, #a9c49f 100%); min-height: 100vh; padding: 128px 24px 96px; }
.empyrean-inner-wrap { max-width: 820px; margin: 0 auto; }
.empyrean-archive-wrap { max-width: 1180px; margin: 0 auto; }
.empyrean-kicker { font-size: 12px; letter-spacing: .4em; color: #2f5d43; font-weight: 700; }
.empyrean-page-title { margin: 14px 0 0; font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(38px,6vw,66px); line-height: 1; color: #1e3a2c; }
.empyrean-prose { font-size: 16.5px; line-height: 1.8; color: #24352b; }
.empyrean-prose h1,.empyrean-prose h2,.empyrean-prose h3 { font-family: 'Cormorant Garamond', serif; color: #1c2f24; line-height: 1.15; }
.empyrean-prose a { color: #294f6e; text-decoration: underline; text-underline-offset: 2px; }
.empyrean-prose img { border-radius: 4px; }
.empyrean-prose blockquote { border-left: 3px solid #7aa15f; margin: 24px 0; padding: 4px 0 4px 20px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: #2f5d43; }

.empyrean-pagination { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 48px; }
.empyrean-pagination .page-numbers { padding: 9px 15px; border: 1px solid rgba(30,58,44,.2); border-radius: 3px; color: #1e3a2c; font-size: 13px; font-weight: 600; }
.empyrean-pagination .page-numbers.current { background: #2f5d43; color: #fff; border-color: #2f5d43; }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }