/* Valenya Online — refonte cinematique : base (tokens, type, nav, hero, stats). */

:root {
  --deep:#060810; --night:#0a0d1a; --panel:#131728; --panel-2:#0d1120;
  --bone:#ece4d2; --muted:#8b90a8; --dim:#5c5f74;
  --gold:#e8b45c; --gold-hi:#f7e0a8; --gold-dim:#b08a4e;
  --crystal:#7db8ff; --ember:#ff5a3c; --arcane:#9b7bff;
  --line:rgba(232,180,92,.15); --line-strong:rgba(232,180,92,.32);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1140px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--deep); color:var(--bone); font-family:var(--sans); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.eyebrow { font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--crystal);
  font-weight:600; }
.display { font-family:var(--serif); font-weight:700; line-height:1.05; letter-spacing:.01em;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,#b1823a);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- Buttons ---- */
.btn { display:inline-block; font:inherit; font-weight:600; font-size:15px; padding:14px 30px;
  border-radius:8px; cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
  letter-spacing:.02em; border:1px solid transparent; }
.btn-gold { color:#1a1206; border-color:var(--gold-hi);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); box-shadow:0 6px 26px rgba(232,180,92,.3); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 34px rgba(232,180,92,.45); }
.btn-ghost { color:var(--bone); border-color:rgba(236,228,210,.25); background:rgba(12,16,28,.4);
  backdrop-filter:blur(4px); }
.btn-ghost:hover { border-color:var(--crystal); color:#fff; }

/* ---- Nav ---- */
.nav { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:16px clamp(20px,5vw,40px);
  transition:background .3s, border-color .3s, backdrop-filter .3s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(6,8,16,.82); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.nav-brand { font-family:var(--serif); font-size:22px; font-weight:700; letter-spacing:.04em;
  color:var(--gold-hi); }
.nav-links { display:flex; gap:26px; align-items:center; }
.nav-links a { font-size:14px; color:var(--muted); transition:color .15s; }
.nav-links a:hover { color:var(--gold-hi); }
.nav-links .btn { padding:9px 20px; font-size:13.5px; }
.nav-right { display:flex; align-items:center; gap:18px; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; }
.nav-toggle span { width:24px; height:2px; background:var(--bone); border-radius:2px; }
.audio-btn { flex:0 0 auto; width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(12,16,28,.4); border:1px solid var(--line); color:var(--muted); font-size:15px;
  line-height:1; transition:color .2s, border-color .2s, background .2s; }
.audio-btn:hover { color:var(--gold-hi); border-color:var(--line-strong); }
.audio-btn.playing { color:#1a1206; border-color:var(--gold-hi);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold)); animation:audiopulse 2.4s ease-in-out infinite; }
@keyframes audiopulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,180,92,.45)} 50%{box-shadow:0 0 0 7px rgba(232,180,92,0)} }

/* ---- Hero ---- */
.hero { position:relative; min-height:100vh; overflow:hidden; display:grid; place-items:center; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns { from{transform:scale(1.03)} to{transform:scale(1.13) translateY(-1.5%)} }
.hero-veil { position:absolute; inset:0; background:
  radial-gradient(120% 78% at 50% 20%, transparent 28%, rgba(6,8,16,.55) 100%),
  linear-gradient(180deg, rgba(6,8,16,.4) 0%, transparent 30%, rgba(6,8,16,.78) 76%, var(--deep) 100%); }
.hero-canvas { position:absolute; inset:0; }
.hero-in { position:relative; text-align:center; padding:0 22px; max-width:940px;
  display:flex; flex-direction:column; align-items:center; animation:rise 1.1s ease both; }
@keyframes rise { from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
.hero-logo { width:min(80vw,560px); filter:drop-shadow(0 6px 32px rgba(232,180,92,.35));
  mix-blend-mode:screen; }
.hero-tag { margin-top:2px; font-size:clamp(16px,2.4vw,21px); text-shadow:0 2px 16px rgba(0,0,0,.85);
  max-width:38ch; color:var(--bone); }
.hero-cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; justify-content:center; }
.hero-plats { margin-top:16px; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); }
.scroll-cue { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:var(--muted);
  font-size:24px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,9px)} }

/* ---- Stats ribbon ---- */
.stats { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(26px,7vw,80px);
  padding:36px clamp(20px,5vw,40px); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--night),var(--deep)); }
.stat { text-align:center; }
.stat b { display:block; font-family:var(--serif); font-size:clamp(30px,5vw,46px); color:var(--gold-hi);
  font-weight:700; font-variant-numeric:tabular-nums; }
.stat span { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ---- Section rhythm ---- */
.sec { padding:clamp(66px,10vw,124px) 0; }
.sec-head { max-width:760px; margin:0 auto 54px; text-align:center; }
.sec-head .eyebrow { display:block; margin-bottom:14px; }
.sec-head h2 { font-size:clamp(30px,5.4vw,52px); }
.sec-head p { margin-top:16px; color:var(--muted); font-size:16.5px; }

/* ---- Reveal + footer ---- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }
.foot { border-top:1px solid var(--line); padding:34px 0; text-align:center; color:var(--dim);
  font-size:13.5px; background:var(--deep); }
.foot a { color:var(--muted); } .foot a:hover { color:var(--gold-hi); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-bg,.scroll-cue,.hero-in,.audio-btn.playing { animation:none; }
  .reveal { opacity:1; transform:none; transition:none; }
}
@media (max-width:820px) {
  .nav-links { position:fixed; inset:64px 12px auto 12px; flex-direction:column; gap:4px; padding:14px;
    background:rgba(10,13,26,.97); border:1px solid var(--line); border-radius:12px;
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s; }
  .nav-links.open { transform:none; opacity:1; pointer-events:auto; }
  .nav-links a { padding:10px 8px; font-size:15px; }
  .nav-toggle { display:flex; }
}