/* =========================================
   Global reset / essentials
========================================= */
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
}

/* =========================================
   Background (Aurora effect)
========================================= */
.noxbloc-container {
  min-height: 100vh;
  background: 
    radial-gradient(circle at top left, #1a1a1a, transparent 70%),   /* dark top-left */
    radial-gradient(circle at 50% 85%, #20282d, transparent 60%),    /* dark bottom-right */
    radial-gradient(circle at bottom right, #9FF14E, transparent 52%); /* green glow bottom center */
  background-color: #1a1919; /* fallback */
  background-size: 200% 200%;
  animation: auroraShift 10s ease-in-out infinite alternate;
}

@keyframes auroraShift {
  0%   { background-position: 20% 20%, 80% 80%, 50% 100%; }
  50%  { background-position: 80% 30%, 20% 70%, 50% 90%; }
  100% { background-position: 30% 80%, 70% 20%, 50% 95%; }
}

/* =========================================
   Page fade-in effect
========================================= */
.js body {
  opacity: 0;
  transition: opacity 0.6s;
}

.js body.render {
  opacity: 1;
}

/* =========================================
   Utility classes
========================================= */
.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

.message {
  display: none;
  padding: 1em;
  text-align: center;
  color: var(--color-bg, #000);
  background: var(--color-text, #fff);
}

.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  fill: currentColor;
}

/* =========================================
   Content layout
========================================= */
.content {
  position: relative;
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0 auto;
  min-height: 100vh;
  z-index: 10;
}

.content__inner {
  grid-area: 1 / 1 / 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* =========================================
   Canvas / Scene positions
========================================= */
.scene {
  position: absolute;
}

.scene--left {
  width: 100vmin;
  height: 100vmin;
  transform: translate3d(-50vmin,0,0);
}

.scene--full {
  width: 100%;
  height: 100vh;
}

.scene--up {
  height: 150vmin;
  width: 150vmin;
  top: -50vh;
  left: 50%;
  margin-left: -75vmin;
}