:root {
  color-scheme: dark;
  --bg: #02040d;
  --text: rgba(238, 242, 255, 0.88);
  --artboard-w: 5120px;
  --artboard-h: 2880px;
  --lock-y: 1724px;
  --ubix-word-y: 1488px;
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
  UbiX v0.7
  ==========
  - Assets graphiques de v0.3 inchangés.
  - Artboard fixe 5120 × 2880 px, jamais redimensionné : le viewport recadre.
  - Transition page 1 -> page 2 : fade-out de 3 s, plus franc au début et plus lent sur la fin, puis fond seul 2 s.
*/

/* ---------- Page 1 ---------- */
.landing-page {
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
}

.landing-stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* Le background est une couche distincte et reste visible pendant la transition. */
.landing-background {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: var(--artboard-w);
  height: var(--artboard-h);
  transform: translate(-50%, -50%);
  background: url("../assets/ubix-background-5k.webp") center center / 5120px 2880px no-repeat;
  pointer-events: none;
  user-select: none;
}

.landing-artboard {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: var(--artboard-w);
  height: var(--artboard-h);
  transform: translate(-50%, -50%);
}

.landing-visual {
  position: absolute;
  inset: 0;
  display: block;
  width: 5120px;
  height: 2880px;
  max-width: none;
  opacity: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  will-change: opacity;
}

/* Fade-out simple demandé : 3 secondes. */
.landing-visual.is-fading-out {
  animation: ubix-fade-out 3s linear forwards;
}

/*
  Tempo v0.7 :
  - disparition nettement plus franche au début ;
  - queue de fade volontairement plus longue et douce ;
  - durée totale inchangée : 3 secondes.
*/
@keyframes ubix-fade-out {
  0%   { opacity: 1; }
  12%  { opacity: 0.72; }
  25%  { opacity: 0.46; }
  42%  { opacity: 0.25; }
  62%  { opacity: 0.12; }
  80%  { opacity: 0.055; }
  92%  { opacity: 0.018; }
  100% { opacity: 0; }
}

/* Zone discrètement cliquable superposée au cadenas du visuel. */
.lock-hotspot {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--lock-y);
  width: 98px;
  height: 98px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(73, 177, 255, 0);
  transition:
    box-shadow 220ms ease,
    background-color 220ms ease,
    transform 220ms ease,
    opacity 180ms ease;
}

.lock-hotspot:hover,
.lock-hotspot:focus-visible {
  background: radial-gradient(
    circle,
    rgba(91, 132, 255, 0.045) 0%,
    rgba(127, 67, 255, 0.025) 52%,
    transparent 72%
  );
  box-shadow:
    0 0 0 1px rgba(112, 126, 255, 0.12),
    0 0 22px 3px rgba(83, 111, 255, 0.08),
    0 0 36px 5px rgba(183, 60, 255, 0.045);
  transform: translate(-50%, -50%) scale(1.03);
}

.lock-hotspot:active {
  transform: translate(-50%, -50%) scale(0.99);
}

/* Dès le clic, la zone interactive disparaît avec l'image et ne peut plus être recliquée. */
.landing-page.is-transitioning .lock-hotspot {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Page 2 ---------- */
.development-page {
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
}

.development-stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

.development-artboard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--artboard-w);
  height: var(--artboard-h);
  transform: translate(-50%, -50%);
  background: url("../assets/ubix-background-5k.webp") center center / 5120px 2880px no-repeat;
}

/*
  Le texte est centré sur l'emplacement exact du mot "UBIX" de la page 1
  (centre vertical mesuré à ~1488 px dans l'artboard 5K).
  Police 17 px : légèrement plus petite que les 19 px de la v0.4.
*/
.development-message {
  position: absolute;
  left: 50%;
  top: var(--ubix-word-y);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 8px 12px;
  white-space: nowrap;
  text-align: center;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.055em;
  color: rgba(241, 244, 255, 0.90);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  text-shadow:
    0 0 12px rgba(73, 121, 255, 0.055),
    0 0 18px rgba(156, 64, 255, 0.03);
  transition: color 160ms ease, text-shadow 160ms ease;
}

.development-message:hover,
.development-message:focus-visible {
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 0 14px rgba(73, 121, 255, 0.10),
    0 0 22px rgba(156, 64, 255, 0.055);
}