/* Tales of Ann — Rescue Styles (simple, readable, robust) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
:root{
  --bg:#0e1117; --ink:#f2ece1; --muted:#cfc6b9; --gold:#d1ae86;
  --card:#141317; --card2:#18161a; --border:#3a312a; --max:1200px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg) url('assets/bg-rescue.jpg') center/cover fixed no-repeat;color:var(--ink);font-family:'Crimson Text',serif;line-height:1.65}
a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}

/* Header */
.navbar{position:sticky;top:0;z-index:40;background:rgba(12,14,18,.85);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.navbar .inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}
.brand h1{font-family:'Cinzel',serif;font-size:18px;margin:0}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{padding:6px 10px;border-radius:6px;color:#eee}
nav a:hover{background:rgba(255,255,255,.06)}
.btn{padding:6px 10px;border-radius:6px;background:#171a21;border:1px solid rgba(255,255,255,.15);color:#eee}

/* Hero */
.hero{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding:54px 0 28px}
@media(min-width:980px){.hero{grid-template-columns:1.1fr .9fr;min-height:68vh}}
.title{font-family:'Cinzel',serif;font-size:clamp(30px,6vw,48px);margin:0}
.subtitle{color:var(--muted);margin:8px 0 14px}
.cta{display:inline-block;background:linear-gradient(90deg,#b06e3b,#d68b47);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none}
.cover{width:min(420px,86vw);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);justify-self:center}

/* Sections */
.section{padding:18px 0 36px}
.grid-3{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{font-family:'Cinzel',serif;margin:14px 14px 6px}
.card p{margin:0 14px 14px}
.card img{display:block;width:100%;height:auto;border-bottom:1px solid var(--border)}

/* Footer */
.footer{padding:20px 0;text-align:center;color:#cfc4b6;border-top:1px solid rgba(255,255,255,.08);background:rgba(12,14,18,.7)}
.buy{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.buy a{background:#171a21;border:1px solid rgba(255,255,255,.15);color:#f3e5d1;padding:8px 12px;border-radius:10px}
/* ===== Book Cover: Cinematic 3D card ===== */
:root{
  --ink:#efe6d6; --muted:#cfc4b6; --gold:#d1ae86;
  --card:#141215; --card2:#191618; --border:#3a312a;
  --ember:#b06e3b; --ember2:#d68b47;
}

/* section wrapper */
.cover-section{ padding: 2rem 0; display:grid; place-items:center; }

/* 3D book container */
.book3d{
  position: relative;
  width: min(46vw, 460px);
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  transform-style: preserve-3d;
  transition: transform .4s ease, box-shadow .4s ease;
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 0 2px rgba(209,174,134,.24);
  background:
    linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border);
  overflow: visible;
}
@media (max-width: 900px){
  .book3d{ width: min(86vw, 520px); }
}

/* cover image */
.book3d-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  border-radius: 12px;
  opacity: 0; transform: translateZ(1px) scale(.98);
  transition: opacity .35s ease .05s, transform .45s ease .05s;
}

/* spine (left edge) */
.book3d::before{
  content:"";
  position:absolute; top:2%; bottom:2%; left:-10px; width:14px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.08) 45%, rgba(0,0,0,.55));
  filter: saturate(.8);
  transform: translateZ(0);
}

/* page edge (right glint) */
.book3d::after{
  content:"";
  position:absolute; top:3%; bottom:3%; right:-3px; width:6px;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%, rgba(255,255,255,.1));
  opacity:.8;
}

/* glow under the book */
.book3d:has(.book3d-img){
  --glow: radial-gradient(ellipse at 50% 115%, rgba(255, 200, 140, .25), transparent 45%);
  background-image: linear-gradient(180deg, var(--card), var(--card2)), var(--glow);
  background-blend-mode: normal, screen;
}

/* loaded state */
.book3d.loaded .book3d-img{
  opacity: 1; transform: translateZ(6px) scale(1);
}

/* hover/keyboard focus pop */
.book3d:focus-within,
.book3d:hover{
  box-shadow:
    0 60px 150px rgba(0,0,0,.6),
    0 0 0 2px rgba(209,174,134,.35);
}

/* caption + buttons */
.book3d-caption{
  position: relative;
  margin-top: clamp(1rem, 2.2vw, 1.4rem);
  text-align: center;
  color: var(--ink);
}
.book3d-caption h2{
  font-family: "Cinzel", serif;
  margin: .6rem 0 .25rem;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
}
.book3d-caption p{
  margin: 0 auto .7rem;
  max-width: 36ch; color: var(--muted);
}
.book3d-ctas{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}
.btn-cta{
  display:inline-block;
  padding:.7rem 1rem; border-radius:.7rem;
  background: linear-gradient(90deg, var(--ember), var(--ember2));
  color:#fff; text-decoration:none;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.btn-cta.ghost{
  background: transparent; color: var(--ink);
  border:1px solid rgba(255,255,255,.2);
}

/* optional: soft “lift” on hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .book3d:hover{ transform: perspective(1200px) rotateY(-8deg) rotateX(3deg) translateY(-2px); }
}

/* Reduced motion: disable fancy transforms */
@media (prefers-reduced-motion: reduce){
  .book3d, .book3d-img{ transition:none !important; transform:none !important; }
}/* Smooth in-page scroll and sticky-offset */
html { scroll-behavior: smooth; }
.anchor-target { scroll-margin-top: 84px; } /* adjust if your navbar height changes */

/* Card polish for the Lore section */
.grid-3 { display:grid; gap:1.2rem; grid-template-columns:1fr; }
@media (min-width: 900px){ .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: linear-gradient(180deg, var(--card, #151314), var(--card2, #1c1817));
  border: 1px solid var(--border, #3a312a);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
  color: var(--ink, #f1e6d8);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border-color: var(--gold, #d1ae86);
}
.card img { display:block; width:100%; height:auto; border-bottom:1px solid var(--border, #3a312a); }
.card h3 { font-family: 'Cinzel', serif; margin: 1rem 1rem .5rem; }
.card p  { margin: 0 1rem 1rem; opacity:.95; line-height:1.65; }
.card .foot { border-top:1px solid var(--border, #3a312a); padding:.8rem 1rem; background:rgba(255,255,255,.03); }
.card .foot a { text-decoration:none; color:inherit; }
.card .foot a:hover { text-decoration:underline; }
/* Never let decorative overlays block clicks */
.hero::before,
.hero::after,
.fx-overlay,
.page-overlay,
.vignette {
  pointer-events: none !important;
}

/* If you have a Sound/FX toggle, keep it clickable but tiny hitbox */
#fx-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 40; }

/* Make sure CTAs are always above background layers */
a.btn, .cta, .cta a {
  position: relative;
  z-index: 50; /* above overlays/nav/vignette */
}

/* Safety net: nothing invisible sits above main content */
*[data-decor], .decor, .overlay {
  pointer-events: none !important;
}
/* === On-page navigation (desktop = right sidebar, mobile = top bar) === */
html { scroll-behavior: smooth; }

.home-nav{
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}

.home-nav a{
  font-family: Cinzel, serif;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 10px;
}

.home-nav a:hover{
  color: var(--gold);
  border-color: var(--gold);
}

/* prevent section titles from hiding under sticky/side UI */
.anchor-target{ scroll-margin-top: 90px; }

/* Mobile: turn the side list into a top bar */
@media (max-width: 860px){
  .home-nav{
    position: sticky;
    top: 0;
    transform: none;
    right: auto;
    flex-direction: row;
    justify-content: center;
    background: rgba(0,0,0,.5);
    padding: 8px 10px;
    gap: 10px;
    backdrop-filter: blur(6px);
  }
}