/* =============================
   Eternal Kingdoms - Styles (root-level assets)
   This CSS file expects background_6.webp and logo.webp in the same directory.
   ============================= */

/* --- Design tokens --- */
:root{
  --bg:#14120d;
  --panel:#1d1a11;
  --txt-title:#EDE5CC;
  --txt-body:#D5C8A7;
  --txt-sec:#C9B78E;
  --accent:#c7b17a;
  --border:#3a321d;
  --btn-bg:#2f2a1b;
  --btn-border:#4a3f25;
  --btn-shadow:0 0 0 1px rgba(0,0,0,.22) inset, 0 6px 16px rgba(0,0,0,.28);
  --headerH:64px;
  /* Offset to push panels lower on the screen; ~250px on FHD */
  --panelOffset: clamp(80px, 23vh, 250px);
  --fadeDur: .28s;
  --fadeEase: ease;
}

/* --- Base reset --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt-body);
  overflow:hidden; /* page does not scroll */
  background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* --- Fixed background layer --- */
.bgLayer{
  position:fixed; inset:0;
  background:url('background_6.webp') center center/cover no-repeat;
  z-index:0; pointer-events:none;
}

/* --- Header --- */
header{
  position:fixed; inset:0 0 auto 0; height:var(--headerH);
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:10px 16px; z-index:3;
  backdrop-filter:saturate(120%) blur(2px);
  background:linear-gradient(180deg, rgba(20,18,13,.78), rgba(20,18,13,.38));
  border-bottom:1px solid rgba(58,50,29,.66);
}
.navBtn{
  appearance:none; cursor:pointer;
  background:var(--btn-bg); border:1px solid var(--btn-border);
  border-radius:12px; padding:10px 18px;
  font-family:"Cinzel",serif; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#EDE5CC; text-shadow:0 1px 0 rgba(0,0,0,.6); box-shadow:var(--btn-shadow);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.navBtn:hover{ transform:translateY(-1px); }
.navBtn[aria-pressed="true"]{ background:#3b331c; border-color:#6a5a30; color:#fff4d1;
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset, 0 8px 22px rgba(0,0,0,.34);
}

/* --- Fixed centered logo (beneath panels) --- */
.logoWrap{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-40%);
  z-index:1; display:flex; align-items:center; justify-content:center; width:100%;
  pointer-events:none;
}
.logo{ display:block; height:auto; width:min(60vw,720px); max-width:95vw;
  filter:drop-shadow(0 4px 28px rgba(0,0,0,.55));
}

/* --- Panels host --- */
.scrollHost{
  position:fixed; left:0; right:0; top:calc(var(--headerH) + var(--panelOffset)); bottom:0;
  z-index:2; overflow:hidden;
}

/* --- Panel --- */
.panel{
  position:absolute; left:50%; top:0; transform:translate(-50%,-8px);
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 1px 0 #000 inset, 0 0 0 1px rgba(0,0,0,.28), 0 6px 24px rgba(0,0,0,.32);
  border-radius:16px; padding:22px 24px;
  width:min(48%, 900px); max-width:95vw;
  max-height:100%; overflow:auto;

  /* Fade animation states */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:
    opacity var(--fadeDur) var(--fadeEase),
    transform var(--fadeDur) var(--fadeEase),
    visibility 0s linear var(--fadeDur);
}
.panel.visible{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,0);
  transition:
    opacity var(--fadeDur) var(--fadeEase),
    transform var(--fadeDur) var(--fadeEase);
}

/* --- Responsive widths --- */
@media (max-width:1280px){ .panel{ width:min(60%,900px); } }
@media (max-width:980px){  .panel{ width:min(80%,900px); } }
@media (max-width:680px){  .panel{ width:92vw; } }

/* --- Typography (from showcase) --- */
.title{
  font-family:"Cinzel Decorative","Cinzel",serif; font-weight:700; letter-spacing:.045em;
  color:var(--txt-title); font-size:48px; margin:0 0 14px; text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0,0,0,.7), 0 0 10px rgba(255,230,150,.20);
}
.subtitle{ color:var(--txt-sec); margin:0 0 18px; }
.bodyText{
  font-family:"Crimson Text","EB Garamond",serif; font-size:19px; color:var(--txt-body);
  letter-spacing:.008em; line-height:1.68;
}

/* --- Links (adjusted to site color scheme) --- */
a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
  color: var(--txt-title);
  text-shadow: 0 0 6px rgba(255, 240, 180, 0.4);
}

a:visited {
  color: var(--accent);
  opacity: 0.95;
}