/* =========================================================
   ONYXIRIUM — V10
   Rebuild propre : mêmes fondations (logo, couleurs, univers
   cristaux), exécution refaite de zéro.
   ========================================================= */

:root{
  --blue-1:#c8ecff;
  --blue-2:#3aa8ff;
  --blue-3:#0D47A1;
  --violet-1:#a16aff;
  --violet-2:#7023db;
  --ink:#020610;
  --ink-2:#01040b;
  --panel:rgba(4,10,24,.72);
  --panel-strong:rgba(3,8,20,.88);
  --line:rgba(120,150,210,.22);
  --text:#dbe4f2;
  --text-dim:#9db0c9;
  --font-display:'Orbitron',sans-serif;
  --font-body:'Sora',system-ui,sans-serif;
  --ease:cubic-bezier(.16,.8,.24,1);
  --mx:0px; --my:0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:#0c1a33;color:#cfe4ff;padding:10px 16px;border-radius:8px;
  text-decoration:none;font:600 .85rem var(--font-body);
  border:1px solid var(--blue-2);
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px}

:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:4px}


/* ---------- Scene / background ---------- */
.scene{position:fixed;inset:0;z-index:-10;overflow:hidden;background:var(--ink-2)}

/* The intro clip plays once, alone — just the small brand mark shows
   over it. It then crossfades into a frozen frame of the same scene
   (so nothing visibly jumps): every creature holds still, only the
   water keeps moving, revealed through a mask over the reflection
   pool at the base of the temple. A single native loop there is fine
   — ripples have no fixed position to jump between. */
.bg-video{
  position:absolute;inset:-2%;width:104%;height:104%;
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
}
.bg-video.v-intro{opacity:1}
.bg-video.v-intro.is-hidden{opacity:0}

.frozen-bg{
  position:absolute;inset:-2%;width:104%;height:104%;
  background:url('frozen.jpg') center center/cover no-repeat;
  opacity:0;transition:opacity .5s ease;
}
body.intro-complete .frozen-bg{opacity:1}

.water-video{
  position:absolute;inset:-2%;width:104%;height:104%;
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 85%, rgba(0,0,0,.5) 90%, #000 94%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, transparent 85%, rgba(0,0,0,.5) 90%, #000 94%, #000 100%);
}
body.intro-complete .water-video{opacity:1}

.scene .veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(2,6,16,.12), rgba(2,6,16,.62) 60%),
    linear-gradient(180deg, rgba(2,6,16,.4) 0%, rgba(2,6,16,.1) 26%, rgba(2,6,16,.28) 76%, rgba(2,6,16,.72) 100%);
}

/* A steady dark pool behind the hero copy, so the tagline/lead stay
   readable over whatever the footage is doing behind them. */
.hero-veil{
  position:absolute;left:50%;top:10%;width:min(900px,96vw);height:52%;
  transform:translateX(-50%);pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 62% 68% at 50% 56%, rgba(3,2,10,.66), transparent 78%);
}

/* Ambient embers: a handful of motes drifting up, layered on top of
   the footage for a bit of extra atmosphere. Always on. */
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1s ease 2.8s}
body.is-ready .embers{opacity:1}
.ember{position:absolute;bottom:6%;width:3px;height:3px;border-radius:50%;filter:blur(.3px);animation:emberRise linear infinite}
.ember.b{background:#8fd4ff;box-shadow:0 0 6px 1px rgba(120,200,255,.8)}
.ember.v{background:#cf9fff;box-shadow:0 0 6px 1px rgba(190,130,255,.8)}
@keyframes emberRise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.85}
  85%{opacity:.35}
  100%{transform:translateY(-92vh) translateX(var(--drift,14px));opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .embers{display:none}
  .bg-video,.water-video,.frozen-bg{transition:none !important}
}

/* Skip: jump straight to the settled end state, no animation. */
body.intro-skipped .embers{opacity:1 !important;transition:none !important}

body.intro-skipped .topbar,
body.intro-skipped .mainnav,
body.intro-skipped .hero-logo,
body.intro-skipped .tagline,
body.intro-skipped .sep,
body.intro-skipped .lead,
body.intro-skipped .features,
body.intro-skipped footer{
  transition:none !important;
  opacity:1 !important;transform:none !important;
}
body.intro-skipped .card{
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease) !important;
  opacity:1 !important;translate:0 !important;
}

@media (prefers-reduced-motion: reduce){
  .mainnav{opacity:1 !important}
  .hero-logo{animation:none !important}
  .topbar,.hero-logo,.tagline,.sep,.lead,.features,footer{
    transition:none !important;opacity:1 !important;transform:none !important;
  }
  .card{opacity:1 !important;translate:0 !important}
}


/* ---------- Topbar ---------- */
.topbar{
  width:min(1280px,calc(100% - 40px));
  margin:16px auto 0;
  height:64px;
  padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  backdrop-filter:blur(20px);
  transform:translateY(-10px) translateZ(0);
  opacity:0;
  transition:opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s;
}
body.is-ready .topbar{opacity:1;transform:translateY(0) translateZ(0)}

.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:26px;width:auto}

.mainnav{display:flex;align-items:center;gap:2px;flex:0 0 auto;opacity:0;transition:opacity .6s var(--ease)}
body.intro-complete .mainnav{opacity:1}
.mainnav a{
  position:relative;
  padding:9px 16px;
  font:600 .74rem var(--font-display);
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-dim);
  border-radius:9px;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.mainnav a:hover{color:#eaf3ff;background:rgba(255,255,255,.05)}
.mainnav a.active{color:#fff}
.mainnav a.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;
  background:linear-gradient(90deg,var(--blue-2),var(--violet-1));
  border-radius:2px;
}

/* ---------- Hero ---------- */
main{width:min(1280px,calc(100% - 40px));margin:0 auto}
.hero{
  padding:min(11vh,96px) 20px 30px;
  text-align:center;
}
.hero-logo{
  width:clamp(280px,42vw,520px);
  margin:0 auto;
  opacity:0;transform:scale(.94);
  filter:drop-shadow(0 0 40px rgba(80,130,255,.25));
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
body.intro-complete .hero-logo{opacity:1;transform:scale(1)}

.tagline{
  margin:26px 0 14px;
  font:600 .82rem var(--font-display);
  letter-spacing:.5em;
  text-indent:.5em;
  color:#aecbff;
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.6);
  opacity:0;transform:translateY(8px);
  transition:opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s;
}
body.intro-complete .tagline{opacity:1;transform:translateY(0)}

.sep{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:16px;color:#6bc1ff;
  opacity:0;transition:opacity 1s var(--ease) .25s;}
body.intro-complete .sep{opacity:1}
.sep i{width:70px;height:1px;background:linear-gradient(90deg,transparent,#42a5f5)}
.sep i:last-child{transform:scaleX(-1)}
.sep b{font-size:.7rem;transform:rotate(45deg)}

.lead{
  margin:0 auto;max-width:520px;
  font:1rem/1.7 var(--font-body);color:var(--text-dim);
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 24px rgba(0,0,0,.6);
  opacity:0;transform:translateY(8px);
  transition:opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s;
}
body.intro-complete .lead{opacity:1;transform:translateY(0)}

/* ---------- Cards ---------- */
.cards{
  max-width:840px;margin:38px auto 26px;
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
  padding:0 20px;
}
.card{
  --px:50%; --py:50%; --rx:0deg; --ry:0deg;
  position:relative;overflow:hidden;
  min-height:330px;padding:30px 32px 28px;
  text-align:center;border-radius:18px;
  background:linear-gradient(180deg,rgba(14,10,28,.7),rgba(8,5,18,.92));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) translateZ(0);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  opacity:0; translate:0 16px;
  animation:none;
}
body.intro-complete .card{opacity:1;translate:0 0;transition:opacity .8s var(--ease) var(--stagger,.1s), translate .8s var(--ease) var(--stagger,.1s), transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);}
.card.portal{--stagger:.1s}
.card.forum{--stagger:.2s}

.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--px) var(--py), var(--glow-color,rgba(255,255,255,.1)), transparent 62%);
  transition:opacity .3s;
}
.card:hover::before{opacity:1}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.1) 48%, transparent 56%);
  background-size:220% 220%;background-position:150% 0;
  opacity:0;transition:opacity .3s, background-position .7s var(--ease);
}
.card:hover::after{opacity:1;background-position:-50% 100%}
.card:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) translateZ(0)}
.card.portal{border-color:rgba(41,158,255,.4);--glow-color:rgba(58,168,255,.16)}
.card.portal:hover{box-shadow:0 18px 50px -20px rgba(33,150,243,.35)}
.card.forum{border-color:rgba(147,71,239,.4);--glow-color:rgba(161,106,255,.16)}
.card.forum:hover{box-shadow:0 18px 50px -20px rgba(147,71,239,.35)}

.emblem{
  width:88px;height:88px;margin:0 auto 14px;display:grid;place-items:center;
  border:1px solid currentColor;border-radius:50%;position:relative;font-size:2.5rem;
}
.emblem::before,.emblem::after{content:"";position:absolute;background:currentColor;opacity:.35}
.emblem::before{width:112px;height:1px}
.emblem::after{height:112px;width:1px}
.card.portal .emblem{color:#2aa8ff;box-shadow:0 0 26px rgba(33,150,243,.22),inset 0 0 22px rgba(33,150,243,.12)}
.card.forum .emblem{color:#a64fff;box-shadow:0 0 26px rgba(147,71,239,.22),inset 0 0 22px rgba(147,71,239,.13)}
.emblem span{text-shadow:0 0 18px currentColor}

.card h2{margin:0 0 6px;font:700 1.5rem var(--font-display);letter-spacing:.03em}
.card.portal h2{color:#5cb9ff}
.card.forum h2{color:#b876ff}
.card h3{margin:0 0 14px;font:500 .66rem var(--font-body);letter-spacing:.16em;color:#c4cfe0;text-transform:uppercase}
.card p{margin:0;font:.86rem/1.6 var(--font-body);color:#c2cddc;min-height:52px}

.cta{
  margin-top:20px;height:46px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  border-radius:9px;text-decoration:none;color:#fff;
  font:600 .72rem var(--font-body);letter-spacing:.06em;
  transition:filter .2s,transform .2s;
}
.card.portal .cta{border:1px solid #2196F3;background:linear-gradient(90deg,rgba(13,71,161,.75),rgba(22,90,180,.32))}
.card.forum .cta{border:1px solid #9143ec;background:linear-gradient(90deg,rgba(49,27,146,.82),rgba(97,38,163,.35))}
.cta:hover{filter:brightness(1.3);transform:translateY(-2px)}
.cta b{font-size:1.35rem;font-weight:400;transition:transform .2s}
.cta:hover b{transform:translateX(3px)}

/* ---------- Features ---------- */
.features{
  max-width:1240px;margin:6px auto 22px;padding:6px 4px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:15px;
  background:var(--panel);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .9s var(--ease) .3s;
}
body.intro-complete .features{opacity:1}
.features article{
  display:flex;gap:13px;align-items:center;padding:16px 20px;
  border-right:1px solid rgba(120,150,210,.13);
}
.features article:last-child{border-right:0}
.features i{
  flex:0 0 44px;height:44px;display:grid;place-items:center;font-style:normal;
  border:1px solid rgba(140,100,220,.6);border-radius:50%;color:#a86cff;
  text-shadow:0 0 10px #673AB7;font-size:1.05rem;
}
.features h4{margin:0 0 4px;font:600 .68rem var(--font-display);letter-spacing:.08em;color:#eef2fa}
.features p{margin:0;font:.75rem/1.45 var(--font-body);color:#9fb0c8}

/* ---------- Community preview (scroll-revealed) ---------- */
.community{
  max-width:1240px;margin:52px auto 30px;padding:0 20px;
  opacity:0;translate:0 22px;
  transition:opacity .9s var(--ease), translate .9s var(--ease);
}
.community.is-visible{opacity:1;translate:0 0}
.community-head{text-align:center;margin-bottom:30px}
.community-head p.eyebrow{
  margin:0 0 8px;font:600 .68rem var(--font-display);letter-spacing:.3em;text-indent:.3em;color:#8fa8d9;
}
.community-head h2{margin:0;font:700 1.5rem var(--font-display);letter-spacing:.02em;color:#eef2fa}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px;
}
.stat{
  padding:22px 18px;text-align:center;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(12px);
}
.stat b{display:block;font:700 1.9rem var(--font-display);
  background:linear-gradient(90deg,var(--blue-2),var(--violet-1));background-clip:text;color:transparent}
.stat span{font:.72rem var(--font-body);letter-spacing:.06em;color:var(--text-dim)}

.topics{
  border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(12px);overflow:hidden;
}
.topic{
  display:flex;align-items:center;gap:16px;padding:15px 20px;
  border-bottom:1px solid rgba(120,150,210,.13);text-decoration:none;color:var(--text);
  transition:background .2s;
}
.topic:last-child{border-bottom:0}
.topic:hover{background:rgba(255,255,255,.03)}
.topic .tag{
  flex:0 0 auto;font:600 .62rem var(--font-display);letter-spacing:.06em;padding:5px 10px;border-radius:6px;
}
.topic.blue .tag{color:#7cc4ff;border:1px solid rgba(58,168,255,.4);background:rgba(33,150,243,.08)}
.topic.violet .tag{color:#c69bff;border:1px solid rgba(147,71,239,.4);background:rgba(147,71,239,.08)}
.topic .title{flex:1 1 auto;font:.85rem var(--font-body);color:#e4eaf5}
.topic .meta{flex:0 0 auto;font:.72rem var(--font-body);color:#7c8ba3}

@media (max-width:700px){
  .stats{grid-template-columns:1fr}
  .topic{flex-wrap:wrap;gap:6px 12px}
  .topic .meta{margin-left:auto}
}

footer{
  text-align:center;padding:22px 20px 34px;
  color:#7c8ba3;font:.75rem var(--font-body);
  opacity:0;transition:opacity .9s var(--ease) .4s;
}
body.intro-complete footer{opacity:1}

@media (prefers-reduced-motion: reduce){
  .card,.topbar,.hero-logo,.tagline,.sep,.lead,.features,.community,footer{
    opacity:1 !important;transform:none !important;translate:0 !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .cards{grid-template-columns:1fr;max-width:440px}
  .features{grid-template-columns:1fr 1fr}
  .features article{border-right:0;border-bottom:1px solid rgba(120,150,210,.13)}
  .features article:nth-child(2n){border-right:0}
  .features article:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:600px){
  .topbar{height:58px;padding:0 14px}
  .brand img{height:21px}
  .mainnav a{padding:7px 10px;font-size:.66rem}
  .hero{padding:9vh 14px 24px}
  .tagline{letter-spacing:.38em;font-size:.72rem}
  .features{grid-template-columns:1fr}
  .features article{border-right:0;border-bottom:1px solid rgba(120,150,210,.13)}
  .features article:last-child{border-bottom:0}
}

/* ---------- Maps card / carousel ---------- */
.cards{max-width:1240px;grid-template-columns:repeat(3,minmax(0,1fr))}
.card.maps-card{--stagger:.3s;border-color:rgba(91,205,255,.38);--glow-color:rgba(80,190,255,.15);padding:24px 24px 22px;text-align:left}
.card.maps-card:hover{box-shadow:0 18px 50px -20px rgba(56,189,248,.34)}
.card.maps-card::after{z-index:4}
.maps-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.card.maps-card h2{color:#78d6ff;margin:2px 0 6px}
.card.maps-card h3{margin-bottom:0}
.maps-count{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;border:1px solid rgba(111,211,255,.5);color:#b8ebff;font:700 .72rem var(--font-display);box-shadow:0 0 24px rgba(58,168,255,.14),inset 0 0 16px rgba(58,168,255,.08)}
.maps-carousel{position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(120,180,230,.24);height:auto;aspect-ratio:16/9;background:#040812}
.maps-track{height:100%;display:flex;transition:transform .62s var(--ease);will-change:transform}
.map-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;text-decoration:none;background-image:linear-gradient(180deg,rgba(1,5,14,.04),rgba(1,5,14,.78)),url('frozen.jpg');background-size:cover;background-position:center;isolation:isolate}
.map-slide::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 70% 20%,var(--map-glow,rgba(58,168,255,.28)),transparent 46%),linear-gradient(120deg,var(--map-tint,rgba(13,71,161,.22)),transparent 60%);mix-blend-mode:screen}
.map-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,6,16,.82),rgba(2,6,16,.08) 70%);z-index:-1}
.map-slide.island{background-image:url('maps-clean/the-island.png');background-position:center;--map-glow:rgba(66,190,255,.38);--map-tint:rgba(26,125,190,.24)}
.map-slide.scorched{background-image:url('maps-clean/scorched-earth.png');background-position:center;--map-glow:rgba(255,148,64,.42);--map-tint:rgba(170,70,20,.26)}
.map-slide.center{background-image:url('maps-clean/the-center.png');background-position:center;--map-glow:rgba(90,215,255,.38);--map-tint:rgba(30,115,170,.24)}
.map-slide.aberration{background-image:url('maps-clean/aberration.png');background-position:center;--map-glow:rgba(191,78,255,.48);--map-tint:rgba(96,31,150,.3)}
.map-slide.extinction{background-image:url('maps-clean/extinction.png');background-position:center;--map-glow:rgba(255,95,102,.32);--map-tint:rgba(115,35,45,.24)}
.map-slide.ragnarok{background-image:url('maps-clean/ragnarok.png');background-position:center;--map-glow:rgba(76,175,255,.38);--map-tint:rgba(32,92,170,.26)}
.map-slide.valguero{background-image:url('maps-clean/valguero.png');background-position:center;--map-glow:rgba(112,245,205,.35);--map-tint:rgba(20,120,95,.23)}
.map-slide.genesis{background-image:url('maps-clean/genesis-part-1.png');background-position:center;--map-glow:rgba(73,130,255,.45);--map-tint:rgba(52,46,160,.28)}
.map-slide.lost-colony{background-image:url('maps-clean/lost-colony.png');background-position:center;--map-glow:rgba(237,88,255,.42);--map-tint:rgba(116,31,150,.28)}
.map-slide.astraeos{background-image:url('maps-clean/astraeos.png');background-position:center;--map-glow:rgba(255,202,88,.4);--map-tint:rgba(140,91,20,.24)}
.map-visual{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;text-shadow:0 2px 14px #000}
.map-visual b{font:700 .84rem var(--font-display);letter-spacing:.08em;color:#fff}
.map-visual small{font:600 .58rem var(--font-display);letter-spacing:.08em;color:#bad1e9}
.maps-arrow{position:absolute;top:50%;z-index:5;width:32px;height:32px;margin-top:-16px;border-radius:50%;border:1px solid rgba(180,220,255,.36);background:rgba(2,8,20,.72);backdrop-filter:blur(8px);color:#fff;font:400 1.4rem/1 var(--font-body);cursor:pointer;transition:background .2s,transform .2s}
.maps-arrow:hover{background:rgba(25,91,160,.72);transform:scale(1.07)}
.maps-arrow.prev{left:10px}.maps-arrow.next{right:10px}
.maps-dots{display:flex;justify-content:center;gap:5px;margin:11px 0 7px}
.maps-dot{width:6px;height:6px;padding:0;border:0;border-radius:99px;background:rgba(154,180,214,.36);cursor:pointer;transition:width .25s var(--ease),background .25s}
.maps-dot.is-active{width:20px;background:#62c8ff}
.maps-hint{min-height:0!important;margin:0!important;text-align:center!important;font-size:.68rem!important;color:#8fa4be!important}

@media (max-width:1060px){
  .cards{grid-template-columns:1fr 1fr;max-width:840px}
  .card.maps-card{grid-column:1/-1;max-width:407px;width:100%;justify-self:center}
}
@media (max-width:880px){
  .cards{grid-template-columns:1fr;max-width:440px}
  .card.maps-card{grid-column:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){.maps-track{transition:none}.maps-arrow{display:none}}