/*
Theme Name: TransMenVerse (Cinematic)
Theme URI: https://transmenverse.com/
Author: Damon
Description: Cinematic landing page with hero poster, sections for Animated Shorts, Comics & Kindle, Characters, and Creator quote.
Version: 1.0.0
Text Domain: transmenverse
*/

:root{
  --bg:#0b1320;
  --ink:#eaf3ff;
  --muted:#a8bed8;
  --card:#0f1a2a;
  --border:rgba(255,255,255,.08);
  --btn:#16293c;
  --grad1:#57a7ff;
  --grad2:#f3a3c7;
  --grad3:#9c63dc;
  --glow:#6fe0ff;
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;line-height:1.6}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1180px;margin:0 auto;padding:24px}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(9,16,28,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:10px}
.nav{display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:10px 12px;border-radius:10px;color:#d8e7ff}
.nav a:hover{background:rgba(255,255,255,.06)}

/* HERO */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);
  background:
    radial-gradient(60% 60% at 80% 10%, rgba(111,224,255,.15), transparent 60%),
    radial-gradient(60% 60% at 10% 30%, rgba(156,99,220,.18), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(243,163,199,.15), transparent 60%),
    #0a1422;
}
.hero-top{display:flex;align-items:flex-start;gap:18px;padding:22px 24px 0}
.hero-logo{display:flex;align-items:center;gap:12px}
.hero-logo .title{font-weight:800;letter-spacing:.02em}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.35);font-size:12px;color:#d7e6ff}

/* Poster area */
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;min-height:520px;padding:8px 24px 32px}
.poster{position:relative;border-radius:18px;border:1px solid var(--border);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.poster::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(10,20,35,.7), inset 0 -120px 160px rgba(7,14,26,.85);pointer-events:none}
.poster .electric{position:absolute;inset:auto 10% 12% auto;background:rgba(0,0,0,.45);border:1px solid var(--border);color:#d7e6ff;padding:6px 10px;border-radius:999px;font-size:12px}

.hero-copy h1{font-size:clamp(36px,5vw,72px);line-height:1.05;margin:0 0 10px;font-weight:900;letter-spacing:.01em}
.hero-copy p{margin:0 0 18px;color:var(--muted);font-size:clamp(16px,2.2vw,19px)}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--btn);border:1px solid var(--border);color:var(--ink);padding:12px 16px;border-radius:12px;font-weight:700}
.btn--primary{border:0;background:linear-gradient(120deg,var(--grad1),var(--grad2) 55%,var(--grad3));color:#061221}
.btn:hover{filter:brightness(1.05)}

/* Section heading */
.section{padding:22px 24px}
.section h2{font-size:28px;margin:0 0 14px;letter-spacing:.02em}

/* Cards */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:relative}
.card .pad{padding:12px 14px}
.card h3{margin:0 0 6px}
.tag{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid var(--border);font-size:12px}

/* Characters strip (tinted) */
.characters-strip{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:
  linear-gradient(90deg, rgba(111,224,255,.12), rgba(243,163,199,.10) 50%, rgba(156,99,220,.12));
}
.characters-strip .row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:12px}

.hero-quote{display:flex;align-items:center;gap:14px;background:#0a1726;border:1px solid var(--border);border-radius:14px;padding:14px}
.hero-quote img{width:56px;height:56px;border-radius:999px;object-fit:cover}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:#0a1724;color:var(--muted);padding:30px 0;margin-top:36px}