/* Landing page (index.php). Base, nav, container and footer are shared in site.css; tokens in zu.css. */
section{position:relative;padding:96px 0}

/* ---- hero ---- */
.hero{min-height:clamp(640px,100vh,1000px);min-height:clamp(640px,100svh,1000px);display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url(../img/hero.jpg) center 35%/cover no-repeat;filter:saturate(.9);transform:scale(1.04);animation:drift 26s ease-in-out infinite alternate}
.hero .bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 40%,rgba(4,19,26,.15) 0%,rgba(4,19,26,.6) 60%,rgba(4,19,26,.95) 100%),
  linear-gradient(180deg,rgba(4,19,26,.55) 0%,rgba(4,19,26,.1) 35%,rgba(4,19,26,.75) 80%,var(--ink) 100%)}
@keyframes drift{to{transform:scale(1.1) translateY(-14px)}}
.hero .inner{position:relative;text-align:center;width:100%}
.hero .calli{font-family:var(--f-brush);font-size:clamp(22px,3vw,34px);color:var(--teal);letter-spacing:.35em;text-shadow:0 0 22px rgba(4,19,26,.9)}
.hero h1{font-family:var(--f-head);font-weight:700;font-size:clamp(52px,10vw,128px);letter-spacing:.08em;line-height:1;margin-top:10px;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,190,90,.25))}
.hero .zh-title{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:16px}
.hero .zh-title span{font-family:var(--f-brush);font-size:clamp(26px,3.4vw,40px);color:var(--gold);letter-spacing:.2em}
.hero p.lead{max-width:640px;margin:22px auto 0;color:#d6e8e3;font-size:17px;line-height:1.7;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero .actions{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero .live{display:flex;justify-content:center;gap:12px;margin-top:38px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;background:rgba(2,14,20,.7);border:1px solid var(--line);font-size:13px;color:var(--dim);backdrop-filter:blur(8px)}
.chip b{color:var(--gold);font-weight:700}
.dot{width:9px;height:9px;border-radius:50%;background:#f0c040;box-shadow:0 0 10px currentColor;color:#f0c040}
.dot.ok{background:var(--good);color:var(--good);animation:pulse 2s infinite}
.dot.bad{background:var(--bad);color:var(--bad)}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase;text-decoration:none}
.scroll-hint::after{content:"";display:block;width:1px;height:36px;margin:10px auto 0;background:linear-gradient(var(--gold),transparent);animation:hint 2s infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- class cards ---- */
.classes{margin-top:56px;display:grid;gap:20px;grid-template-columns:repeat(5,minmax(0,1fr))}
.cls{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--goldline);background:var(--card);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;opacity:0;transform:translateY(30px)}
.cls.in{opacity:1;transform:none}
.cls:hover{transform:translateY(-6px);border-color:rgba(255,222,160,.55);box-shadow:0 24px 50px rgba(0,0,0,.5)}
.cls .art{position:relative;aspect-ratio:3/4;overflow:hidden}
.cls .art img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cls:hover .art img{transform:scale(1.1)}
.cls .art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 0%,rgba(4,19,26,.45) 38%,rgba(4,19,26,0) 70%)}
.cls .art::before{content:"";position:absolute;inset:0;z-index:1;border-radius:14px 14px 0 0;box-shadow:inset 0 0 0 1px rgba(70,230,220,0);transition:box-shadow .5s}
.cls:hover .art::before{box-shadow:inset 0 0 0 1px rgba(70,230,220,.55),inset 0 0 36px -6px rgba(70,230,220,.7)}
.cls .zh{position:absolute;top:12px;right:14px;z-index:2;font-family:var(--f-brush);font-size:34px;line-height:1;color:var(--gold);
  writing-mode:vertical-rl;text-shadow:0 0 12px rgba(2,12,18,.95),0 0 3px rgba(2,12,18,.9)}
.cls .bust{position:absolute;left:12px;top:12px;z-index:2;width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--goldline);background:rgba(2,12,18,.6)}
.cls .bust img{width:auto;height:100%;max-width:none;margin-left:-62px;object-fit:cover}
.cls .body{position:relative;margin-top:-58px;padding:0 18px 22px;z-index:2}
.cls h3{font-family:var(--f-head);font-size:21px;color:#eef7f4;text-shadow:0 0 18px rgba(70,230,220,.45)}
.cls .home{margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.cls .pop{display:inline-flex;align-items:baseline;gap:6px;margin-top:10px;padding:4px 11px;border-radius:999px;background:rgba(255,222,160,.08);border:1px solid var(--goldline);font-size:12px;color:var(--dim)}
.cls .pop b{color:var(--gold);font-size:14px}
.cls p{margin-top:12px;font-size:14px;line-height:1.65;color:var(--dim)}
.cls .role{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cls .role span{font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:#bfe0da}

/* ---- world ---- */
.world{margin-top:56px;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.place{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);aspect-ratio:16/9;background:var(--card);
  opacity:0;transform:translateY(30px);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,border-color .4s}
.place.in{opacity:1;transform:none}
.place img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s;filter:saturate(.85) brightness(.85)}
.place:hover img{transform:scale(1.08);filter:saturate(1.05) brightness(1)}
.place:hover{border-color:rgba(255,222,160,.5)}
.place::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,12,18,.92) 0%,rgba(2,12,18,.2) 55%,transparent 100%)}
.place .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}
.place .cap .zh{font-family:var(--f-brush);color:var(--teal);font-size:20px;line-height:1}
.place .cap h3{font-family:var(--f-head);font-size:20px;color:var(--gold);margin-top:4px}
.place .cap p{font-size:13px;color:#c4dcd7;margin-top:4px;line-height:1.5}
.place .lv{position:absolute;top:12px;right:12px;z-index:1;font-size:11px;letter-spacing:.12em;padding:4px 10px;border-radius:999px;background:rgba(2,12,18,.7);border:1px solid var(--goldline);color:var(--gold)}

/* ---- factions ---- */
.factions{margin-top:56px;display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.fac{position:relative;text-align:center;padding:34px 24px 30px;border-radius:14px;border:1px solid var(--line);background:var(--card);overflow:hidden;
  opacity:0;transform:translateY(30px);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,border-color .3s}
.fac.in{opacity:1;transform:none}
.fac::before{content:"";position:absolute;inset:-40% -20% auto;height:80%;background:radial-gradient(circle,var(--c) 0%,transparent 65%);opacity:.14;transition:opacity .4s}
.fac:hover{border-color:var(--c)}
.fac:hover::before{opacity:.28}
.fac img{width:112px;height:112px;margin:0 auto;position:relative;filter:drop-shadow(0 0 18px var(--c))}
.fac .zh{font-family:var(--f-brush);font-size:30px;color:var(--c);margin-top:14px;position:relative}
.fac h3{font-family:var(--f-head);font-size:22px;color:var(--gold);position:relative}
.fac p{color:var(--dim);font-size:14px;line-height:1.65;margin-top:10px;position:relative}

/* ---- call to action ---- */
.cta-band{padding:0}
.cta-box{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--goldline);min-height:380px;display:flex;align-items:center}
.cta-box .bg{position:absolute;inset:0;background:url(../img/banner-heroes.jpg) center 30%/cover no-repeat}
.cta-box .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,19,26,.96) 0%,rgba(4,19,26,.82) 42%,rgba(4,19,26,.15) 100%)}
.cta-box .txt{position:relative;padding:48px;max-width:560px}
.cta-box .zh{font-family:var(--f-brush);font-size:28px;color:var(--teal)}
.cta-box h2{font-family:var(--f-head);font-size:clamp(28px,3.6vw,42px);margin-top:6px;line-height:1.15}
.cta-box p{color:#cfe3de;margin-top:14px;line-height:1.7}
.cta-box ol{margin:18px 0 26px 18px;color:var(--dim);font-size:14px;line-height:1.9}
.cta-box ol b{color:var(--text)}
.cta-box .actions{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:1180px){.classes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  section{padding:72px 0}
  .world,.factions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cta-box .bg::after{background:linear-gradient(0deg,rgba(4,19,26,.97) 0%,rgba(4,19,26,.85) 55%,rgba(4,19,26,.3) 100%)}
  .cta-box{align-items:flex-end;min-height:520px}
}
@media (max-width:760px){.classes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){
  .container{padding:0 16px}
  .classes,.world,.factions{grid-template-columns:minmax(0,1fr)}
  .cls .art{aspect-ratio:1/1}
  .cls .art img{object-position:50% 12%}
  .cta-box .txt{padding:28px 20px}
  .hero .actions .zbtn{width:100%}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.cls,.place,.fac{opacity:1;transform:none}}