:root{
  --bg:#0a0f1a; --bg2:#101a2b; --card:#131e30;
  --ink:#e8eef5; --muted:#93a4b8;
  --accent:#8fc1e3; --accent2:#dfe9f2; --glow:rgba(143,193,227,.35);
}
body[data-theme="kingslanding"]{
  --bg:#170c09; --bg2:#241108; --card:#271309;
  --ink:#f5ead8; --muted:#c2a184;
  --accent:#e0a92e; --accent2:#c0392b; --glow:rgba(224,169,46,.35);
}
body[data-theme="nightswatch"]{
  --bg:#04060b; --bg2:#0a0e16; --card:#0d1320;
  --ink:#dfe6ee; --muted:#7f8b9b;
  --accent:#79e0c3; --accent2:#aebfd4; --glow:rgba(121,224,195,.30);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19px; line-height:1.7;
  transition: background 1.2s ease, color 1.2s ease;
  overflow-x:hidden;
}
#particles{position:fixed; inset:0; z-index:0; pointer-events:none}
.wrap{position:relative; z-index:1}
h1,h2,h3,.brand,.navbtn,.chip{font-family:'Cinzel', serif}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, black), transparent);
  backdrop-filter:blur(6px);
}
.brand{font-weight:800; letter-spacing:.35em; font-size:15px; color:var(--accent)}
.navbtns{display:flex; gap:10px; flex-wrap:wrap}
.navbtn{
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:transparent; color:var(--ink);
  padding:7px 16px; font-size:12px; letter-spacing:.15em; cursor:pointer;
  transition:.3s; text-transform:uppercase;
}
.navbtn:hover,.navbtn.active{
  background:var(--accent); color:var(--bg);
  box-shadow:0 0 22px var(--glow);
}

/* ---------- HERO ---------- */
header{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 20px;
}
.kicker{letter-spacing:.5em; color:var(--muted); font-size:14px; text-transform:uppercase; animation:fadeUp 1.4s .2s both}
h1.title{
  font-size:clamp(42px, 9vw, 110px); font-weight:800; line-height:1.05;
  letter-spacing:.12em; margin:18px 0 10px;
  background:linear-gradient(180deg, var(--ink), var(--accent));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:titleIn 1.6s cubic-bezier(.2,.8,.2,1) both;
  text-shadow:0 0 60px var(--glow);
}
@keyframes titleIn{from{opacity:0; letter-spacing:.5em; filter:blur(8px)} to{opacity:1; letter-spacing:.12em; filter:blur(0)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
.heroquote{font-style:italic; color:var(--muted); font-size:clamp(18px,2.5vw,26px); max-width:640px; animation:fadeUp 1.4s .6s both}
.chips{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap; justify-content:center; animation:fadeUp 1.4s .9s both}
.chip{
  text-decoration:none; color:var(--ink); font-size:13px; letter-spacing:.2em;
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding:12px 26px; transition:.35s; text-transform:uppercase;
}
.chip:hover{background:var(--accent); color:var(--bg); box-shadow:0 0 30px var(--glow); transform:translateY(-3px)}
.scrolldown{margin-top:60px; color:var(--muted); font-size:26px; animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)}}

/* ---------- SECTIONS ---------- */
section{max-width:1150px; margin:0 auto; padding:110px 24px 40px}
.scene{
  width:100%; border-radius:10px; overflow:hidden; display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.scene svg{display:block; width:100%; height:auto}
.sechead{display:flex; align-items:baseline; gap:18px; margin:44px 0 6px; flex-wrap:wrap}
.sechead h2{font-size:clamp(30px,4.5vw,48px); letter-spacing:.1em; color:var(--accent)}
.sechead .motto{font-style:italic; color:var(--muted); font-size:20px}
.cols{display:grid; grid-template-columns:1.4fr 1fr; gap:36px; margin-top:14px}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
blockquote{
  border-left:3px solid var(--accent); padding:6px 0 6px 22px;
  font-style:italic; font-size:22px; color:var(--accent2); margin-top:8px;
}
blockquote cite{display:block; margin-top:6px; font-size:15px; color:var(--muted); font-style:normal; letter-spacing:.1em}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-top:34px}
.card{
  background:color-mix(in srgb, var(--card) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  padding:22px; border-radius:8px; transition:.35s;
}
.card:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 24px var(--glow)}
.card h3{color:var(--accent); font-size:16px; letter-spacing:.12em; margin-bottom:6px}
.card p{color:var(--muted); font-size:17px}

/* divider sword */
.divider{display:flex; justify-content:center; padding:50px 0 10px; opacity:.8}
.divider svg{width:min(420px,70vw)}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(40px); transition:opacity 1s ease, transform 1s ease}
.reveal.visible{opacity:1; transform:none}

footer{text-align:center; padding:90px 20px 60px; color:var(--muted)}
footer .vm{font-family:'Cinzel',serif; letter-spacing:.4em; color:var(--accent); font-size:15px; text-transform:uppercase}

/* ---------- SVG animations ---------- */
.dragon{animation:fly 20s linear infinite}
@keyframes fly{
  0%{transform:translate(-260px,40px)}
  25%{transform:translate(180px,-10px)}
  50%{transform:translate(620px,50px)}
  75%{transform:translate(1000px,0px)}
  100%{transform:translate(1460px,40px)}
}
.wingL{transform-origin:18px 6px; animation:flapL .7s ease-in-out infinite alternate}
.wingR{transform-origin:46px 6px; animation:flapR .7s ease-in-out infinite alternate}
@keyframes flapL{from{transform:rotate(-26deg)} to{transform:rotate(30deg)}}
@keyframes flapR{from{transform:rotate(26deg)} to{transform:rotate(-30deg)}}
.crow{animation:crowfly 26s linear infinite}
.crow.c2{animation-duration:34s; animation-delay:-14s}
.crow.c3{animation-duration:30s; animation-delay:-6s}
@keyframes crowfly{
  0%{transform:translate(1300px,30px)}
  50%{transform:translate(500px,-20px)}
  100%{transform:translate(-200px,25px)}
}
.aurora path{animation:auroraShift 9s ease-in-out infinite alternate}
.aurora path:nth-child(2){animation-duration:12s; animation-delay:-4s}
.aurora path:nth-child(3){animation-duration:15s; animation-delay:-7s}
@keyframes auroraShift{
  from{opacity:.25; transform:translateX(-30px) skewX(-3deg)}
  to{opacity:.6; transform:translateX(30px) skewX(4deg)}
}
.torch{animation:flick 1.6s ease-in-out infinite alternate}
.torch.t2{animation-duration:1.1s; animation-delay:-.4s}
.torch.t3{animation-duration:1.9s; animation-delay:-.9s}
@keyframes flick{from{opacity:.5} to{opacity:1}}
.moonglow{animation:pulse 6s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.5} to{opacity:.9}}
.sea{animation:seaShimmer 5s ease-in-out infinite alternate}
@keyframes seaShimmer{from{opacity:.35} to{opacity:.75}}
.star{animation:twinkle 3s ease-in-out infinite alternate}
.star:nth-child(odd){animation-duration:2.1s; animation-delay:-1s}
@keyframes twinkle{from{opacity:.2} to{opacity:1}}
.snowdot{animation:snowfallLocal 7s linear infinite}
@keyframes snowfallLocal{from{transform:translateY(-40px)} to{transform:translateY(640px)}}