:root {
  /* Positions responsives ajustées pour toutes les tailles d’écran. */
  --brand-left: 19.3%;
  --brand-top: 6%;
  --brand-width: 66.9%;

  --construction-left: 38.5%;
  --construction-top: 64.0%;
  --construction-width: min(25.0%, 44vh);

  --copyright-left: 88%;
  --copyright-top: 80%;
  --copyright-width: min(10%, 20vh);

  --edge-vignette: 0.30;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050608;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

.scene {
  position: fixed;
  inset: 0;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  isolation: isolate;
  background: #050608;
}

.background-wrap,
.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.background-wrap {
  z-index: 0;
}

.background {
  display: block;
  object-fit: cover;
  object-position: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Vignettage léger pour conserver l'ambiance sombre de l'original. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 45%, transparent 0 48%, rgba(0, 0, 0, calc(var(--edge-vignette) * .55)) 78%, rgba(0, 0, 0, var(--edge-vignette)) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.08), transparent 16%, transparent 78%, rgba(0,0,0,.13));
}

.art {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 .45rem .55rem rgba(0, 0, 0, .48));
  transform: translateZ(0);
}

.art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.art--brand {
  left: var(--brand-left);
  top: var(--brand-top);
  width: var(--brand-width);
  z-index: 3;
}

.art--construction {
  left: var(--construction-left);
  top: var(--construction-top);
  width: var(--construction-width);
  z-index: 2;
}

.art--copyright {
  left: auto;
  top: auto;

  right: max(12px, 2vw);
  bottom: max(12px, 2vh);

  width: var(--copyright-width);
}

/* Sur les écrans portrait, le cadrage du fond est légèrement décalé à gauche
   pour garder la brèche, la lune et la ville visibles. Les logos conservent
   leurs coordonnées relatives et leur ratio. */
@media (max-aspect-ratio: 3 / 4) {
  .background {
    object-position: 23% center;
  }

  :root {
    --edge-vignette: 0.24;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .scene.is-ready .art {
    animation: reveal .65s cubic-bezier(.2,.75,.25,1) both;
  }

  .scene.is-ready .art--construction { animation-delay: .08s; }
  .scene.is-ready .art--copyright { animation-delay: .16s; }

  @keyframes reveal {
    from { opacity: 0; transform: translateY(6px) scale(.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ============================================================
   Ajustements responsive des éléments graphiques
   Les valeurs desktop ci-dessus restent inchangées.
   Chaque breakpoint adapte indépendamment position et taille
   du logo E-Banned, du panneau Under Construction et du copyright.
   ============================================================ */

/* Tablettes et petits laptops */
@media (max-width: 1100px) {
  :root {
    --brand-left: 12%;
    --brand-top: 8%;
    --brand-width: 77%;

    --construction-left: 37%;
    --construction-top: 66%;
    --construction-width: min(27%, 41vh);

    --copyright-left: 82%;
    --copyright-top: 79%;
    --copyright-width: min(13%, 24vh);
  }
}

/* Tablettes portrait / grands smartphones */
@media (max-width: 820px) {
  :root {
    --brand-left: 7%;
    --brand-top: 9.5%;
    --brand-width: 86%;

    --construction-left: 36%;
    --construction-top: 67.5%;
    --construction-width: min(28%, 39vh);

    --copyright-left: 78%;
    --copyright-top: 80%;
    --copyright-width: min(16%, 20vh);
  }
}

/* Smartphones */
@media (max-width: 600px) {
  :root {
    --brand-left: 3%;
    --brand-top: 10.5%;
    --brand-width: 94%;

    --construction-left: 35%;
    --construction-top: 69%;
    --construction-width: min(30%, 37vh);

    --copyright-left: 73%;
    --copyright-top: 81%;
    --copyright-width: min(21%, 18vh);
  }
}

/* Smartphones étroits */
@media (max-width: 400px) {
  :root {
    --brand-left: 1%;
    --brand-top: 11.5%;
    --brand-width: 98%;

    --construction-left: 34%;
    --construction-top: 70%;
    --construction-width: min(32%, 36vh);

    --copyright-left: 69%;
    --copyright-top: 82%;
    --copyright-width: min(25%, 16vh);
  }
}

/* En portrait, conserver la brèche du mur visible tout en laissant
   les éléments suivre leurs breakpoints ci-dessus. */
@media (orientation: portrait) and (max-width: 820px) {
  .background {
    object-position: 23% center;
  }
}