/* ============================================================
   Nexus Vortex — Coming soon
   Charte : creme #F9EDCF, bronze #935927, noir #141414, olive #2D3325
   Effet : au scroll, une lumiere chaude nait du noir, le logo se
   revele et remonte a mesure que le texte apparait dessous.
   ============================================================ */

@font-face{
  font-family:'Caviar Dreams';
  src:url('fonts/CaviarDreams-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --cream:#F9EDCF;
  --bronze:#935927;
  --bronze-deep:#6E4015;
  --ink:#141414;
  --olive:#2D3325;

  --font-display:'Caviar Dreams','Comfortaa',sans-serif;
  --font-label:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* Variables pilotees par le scroll (main.js) */
  --lightO:.22;
  --lightScale:.6;
  --logoScale:1.6;
  --logoGlow:0px;
  --contentO:0;
  --legalO:0;
  --cueO:1;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Scene ---------- */
.scene{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  /* profondeur olive discrete dans le noir */
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(45,51,37,.55), transparent 60%),
    var(--ink);
  text-align:center;
  padding:0 24px;
}

/* Lumiere chaude qui nait du noir, resserree pour lire comme du metal qui capte la lumiere */
.light{
  position:absolute;
  left:50%;top:46%;
  width:120vmax;height:120vmax;
  transform:translate(-50%,-50%) scale(var(--lightScale));
  opacity:var(--lightO);
  background:radial-gradient(circle,
    rgba(249,237,207,.9) 0%,
    rgba(249,237,207,.32) 12%,
    rgba(147,89,39,.28) 26%,
    transparent 52%);
  filter:blur(5px);
  pointer-events:none;
}

/* ---------- Stack (logo + contenu) ---------- */
.stack{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.mark{
  display:block;
  width:clamp(100px,14vw,148px);
  height:auto;
  transform:scale(var(--logoScale));
  filter:drop-shadow(0 0 var(--logoGlow) rgba(147,89,39,.55));
  will-change:transform;
}

/* Le contenu grandit avec le scroll : le logo remonte naturellement */
.content{
  overflow:hidden;
  height:0;
  opacity:var(--contentO);
  will-change:height,opacity;
}

.eyebrow{
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.30em;
  font-weight:600;
  font-size:.82rem;
  color:var(--bronze);
  margin:28px 0 14px;
  padding-left:.30em;
}

.name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem,7vw,4.6rem);
  letter-spacing:.04em;
  line-height:1;
  color:var(--cream);
}
.name span{color:var(--bronze)}

.tagline{
  margin-top:18px;
  font-size:clamp(.9rem,1.7vw,1.05rem);
  color:rgba(249,237,207,.72);
  letter-spacing:.01em;
}

.message{
  margin:22px auto 0;
  max-width:46ch;
  font-size:clamp(.98rem,1.9vw,1.15rem);
  line-height:1.6;
  color:rgba(249,237,207,.9);
}

/* ---------- CTA ---------- */
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
  margin-top:40px;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-weight:600;
  font-size:.86rem;
  line-height:1;
  padding:17px 34px;
  border:1px solid transparent;
  border-radius:3px;
  text-decoration:none;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             background .35s ease,
             color .35s ease,
             border-color .35s ease,
             box-shadow .35s ease;
}
/* Bouton principal : bronze plein, capte la lumiere au survol */
.btn-primary{
  background:var(--bronze);
  color:var(--cream);
  border-color:var(--bronze);
}
.btn-primary:hover{
  background:var(--bronze-deep);
  border-color:var(--bronze-deep);
  transform:translateY(-2px);
  box-shadow:0 10px 26px -10px rgba(147,89,39,.75);
}
/* Bouton secondaire : contour discret qui s'anime vers le bronze */
.btn-ghost{
  background:transparent;
  color:var(--cream);
  border-color:rgba(249,237,207,.32);
}
.btn-ghost:hover{
  color:var(--cream);
  border-color:var(--bronze);
  background:rgba(147,89,39,.14);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* ---------- Legal + cue ---------- */
.legal{
  position:absolute;
  bottom:22px;left:0;right:0;
  z-index:2;
  font-size:.74rem;
  letter-spacing:.06em;
  color:rgba(249,237,207,.45);
  opacity:var(--legalO);
}
.legal-sep{margin:0 .35em;color:rgba(249,237,207,.3)}
.legal-by{
  color:rgba(147,89,39,.85);
  text-decoration:none;
  transition:color .3s ease;
}
.legal-by:hover{color:var(--bronze)}
.legal-by:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:2px}
.cue{
  position:absolute;
  bottom:24px;left:0;right:0;
  z-index:2;
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color:rgba(249,237,207,.5);
  opacity:var(--cueO);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.spacer{height:220vh}

/* ---------- Mobile ---------- */
@media (max-width:520px){
  .cta{flex-direction:column;width:100%;max-width:320px;margin-inline:auto}
  .btn{width:100%}
  .legal{font-size:.68rem;padding:0 16px}
}

/* ---------- Accessibilite : pas d'animation ---------- */
@media (prefers-reduced-motion:reduce){
  .cue{display:none}
  .spacer{display:none}
  .content{height:auto!important;opacity:1!important}
  .mark{transform:none!important;filter:drop-shadow(0 0 16px rgba(147,89,39,.5))}
  .light{opacity:.85!important;transform:translate(-50%,-50%) scale(1.05)!important}
  .legal{opacity:1!important}
}