:root{
  --veil: rgba(0,0,0,.33);          /* voile noir 50% */
  --text: rgba(230,241,255,.92);
  --textStrong: rgba(255,255,255,.98);
  --line: rgba(255,255,255,.35);
  --lineStrong: rgba(255,255,255,.70);
}

html, body{
  margin:0;
  height:100%;
}

/* BODY */
body.goku{
  position:relative;
  min-height:100vh;
  background:#000;                 /* fond noir */
  color: var(--text);
  overflow:hidden;
}

/* IMAGE PLEIN ÉCRAN (toujours viewport) */
body.goku::before {
  content: "";
  position: fixed;
  inset: 0;

  background: url("img/moi.jpg") 51% center / cover no-repeat;

  z-index: 0;

  will-change: transform;
  transform: scale(1);

  animation: breathing 4s ease-in-out infinite;
}

@keyframes breathing {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }

  100% {
    transform: scale(1);
  }
}


/* VOILE NOIR */
.veil{
  position:fixed;
  inset:0;
  background: var(--veil);
  pointer-events:none;
  z-index:1;
}

/* CONTENU CENTRÉ */
.center{
  position:relative;
  z-index:3;            /* au-dessus des bulles */
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}

/* MODE */
.mode{
  margin-bottom:22px;
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#eaf4ff;
  opacity:.85;
  text-shadow:
    0 0 8px rgba(180,220,255,.45),
    0 0 24px rgba(120,190,255,.25);
}

/* LIEN PRINCIPAL */
.cta{
  position: relative;
  display:inline-flex;
  align-items:baseline;
  gap:14px;
  color: #f5fbff;
  text-decoration:none;
  letter-spacing:.18em;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height:1.1;
  padding: 6px 0 18px;
  border-bottom:1px solid rgba(255,255,255,.35);

  /* HALO TEXTE */
  text-shadow:
    0 0 6px  rgba(255,255,255,.85),
    0 0 18px rgba(180,220,255,.65),
    0 0 42px rgba(120,190,255,.45),
    0 0 80px rgba(80,160,255,.35),
    0 0 140px rgba(40,120,255,.25);

  transition: transform .25s ease,
              border-color .25s ease,
              text-shadow .25s ease;
}

/* HALO DIFFUS */
.cta::before{
  content:"";
  position:absolute;
  inset:-40px -80px;
  background: radial-gradient(
    ellipse at center,
    rgba(120,200,255,.35) 0%,
    rgba(120,200,255,.22) 30%,
    rgba(120,200,255,.12) 45%,
    rgba(120,200,255,0) 65%
  );
  filter: blur(14px);
  z-index:-1;
}

.cta .play{
  font-size:.8em;
  opacity:.95;
  transform: translateY(-1px);
}

.cta .ialog{
  font-style: italic;
  letter-spacing:.08em;
}

/* HOVER */
.cta:hover{
  transform: scale(1.04);
  border-bottom-color: rgba(255,255,255,.75);
  text-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 28px rgba(200,240,255,.75),
    0 0 60px rgba(140,210,255,.55),
    0 0 110px rgba(90,170,255,.45),
    0 0 180px rgba(60,140,255,.35);
}

.cta:focus-visible{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:10px;
  border-bottom-color: transparent;
}

/* SOUS-LIGNE */
.sub{
  margin-top:22px;
  font-size:13px;
  letter-spacing:.38em;
  opacity:.85;
  text-transform:uppercase;
  color:#eaf4ff;
  text-shadow:
    0 0 10px rgba(180,220,255,.55),
    0 0 26px rgba(120,190,255,.35),
    0 0 60px rgba(80,160,255,.25);
}

#bubbles{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;           /* au-dessus du voile */
  pointer-events: none;
}