/* ==========================================================
   LIANOVA GENESIS ENGINE
   STAGE — UNIVERSO VIVO
   RELEASE CANDIDATE 1.0
========================================================== */

/* ==========================================================
   STAGE E CAMADAS
========================================================== */

#genesis-stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  isolation:isolate;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 48%,
      #07182b 0%,
      #030a14 42%,
      #010307 72%,
      #000000 100%
    );
}

#genesis-stage > div{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

#layer-background{
  z-index:10;
}

#layer-nebula{
  z-index:20;
}

#layer-particles{
  z-index:30;
}

#layer-seed{
  z-index:40;
}

#layer-scene{
  z-index:50;
  pointer-events:auto;
}

#layer-overlay{
  z-index:60;
}

/* ==========================================================
   FUNDO — RESPIRAÇÃO PROFUNDA
========================================================== */

.genesis-background-field{
  position:absolute;
  inset:-18%;

  opacity:.50;

  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(52,145,255,.15) 0%,
      rgba(28,90,185,.075) 28%,
      rgba(8,30,72,.035) 52%,
      transparent 72%
    );

  filter:blur(58px);

  animation:
    genesisBackgroundLiving
    14s
    ease-in-out
    infinite;
}

@keyframes genesisBackgroundLiving{
  0%,
  100%{
    opacity:.34;
    transform:scale(.96);
    filter:
      blur(56px)
      brightness(.80);
  }

  50%{
    opacity:.64;
    transform:scale(1.075);
    filter:
      blur(78px)
      brightness(1.06);
  }
}

/* ==========================================================
   NEBULOSA — CAMPO CÓSMICO
========================================================== */

.genesis-nebula-field{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.genesis-nebula{
  position:absolute;
  left:50%;
  top:50%;

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  will-change:
    transform,
    opacity,
    filter;
}

.genesis-nebula-primary{
  width:min(82vw,1080px);
  aspect-ratio:1;

  opacity:.58;

  background:
    radial-gradient(
      ellipse at center,
      rgba(82,190,255,.20) 0%,
      rgba(45,135,255,.105) 24%,
      rgba(21,76,175,.05) 46%,
      rgba(5,28,80,.018) 62%,
      transparent 76%
    );

  filter:blur(56px);

  animation:
    genesisNebulaPrimaryLiving
    13s
    ease-in-out
    infinite alternate;
}

.genesis-nebula-secondary{
  width:min(128vw,1680px);
  aspect-ratio:1;

  opacity:.30;

  background:
    radial-gradient(
      ellipse at 50% 52%,
      rgba(38,105,235,.14) 0%,
      rgba(20,66,165,.065) 36%,
      rgba(6,26,77,.022) 58%,
      transparent 76%
    );

  filter:blur(105px);

  animation:
    genesisNebulaSecondaryLiving
    18s
    ease-in-out
    infinite alternate;
}

@keyframes genesisNebulaPrimaryLiving{
  from{
    opacity:.42;

    transform:
      translate(-50%,-50%)
      scale(.91)
      rotate(-2deg);

    filter:
      blur(54px)
      brightness(.88);
  }

  to{
    opacity:.70;

    transform:
      translate(-50%,-50%)
      scale(1.075)
      rotate(2deg);

    filter:
      blur(66px)
      brightness(1.12);
  }
}

@keyframes genesisNebulaSecondaryLiving{
  from{
    opacity:.18;

    transform:
      translate(-50%,-50%)
      scale(1.08)
      rotate(1deg);
  }

  to{
    opacity:.36;

    transform:
      translate(-50%,-50%)
      scale(.94)
      rotate(-1deg);
  }
}

/* ==========================================================
   NEBULOSA — REVERBERAÇÃO DA ONDA
========================================================== */

.genesis-nebula-field.is-wave-active
.genesis-nebula-primary{
  animation:
    genesisNebulaWavePrimary
    1.65s
    cubic-bezier(.16,.84,.44,1)
    both;
}

.genesis-nebula-field.is-wave-active
.genesis-nebula-secondary{
  animation:
    genesisNebulaWaveSecondary
    2.15s
    cubic-bezier(.22,.72,.36,1)
    .16s
    both;
}

@keyframes genesisNebulaWavePrimary{
  0%{
    opacity:.46;

    transform:
      translate(-50%,-50%)
      scale(.95);

    filter:
      blur(56px)
      brightness(.92);
  }

  32%{
    opacity:.84;

    transform:
      translate(-50%,-50%)
      scale(1.13);

    filter:
      blur(68px)
      brightness(1.32);
  }

  100%{
    opacity:.58;

    transform:
      translate(-50%,-50%)
      scale(1);

    filter:
      blur(58px)
      brightness(1);
  }
}

@keyframes genesisNebulaWaveSecondary{
  0%{
    opacity:.18;

    transform:
      translate(-50%,-50%)
      scale(.97);

    filter:
      blur(102px)
      brightness(.92);
  }

  42%{
    opacity:.44;

    transform:
      translate(-50%,-50%)
      scale(1.12);

    filter:
      blur(120px)
      brightness(1.20);
  }

  100%{
    opacity:.28;

    transform:
      translate(-50%,-50%)
      scale(1);

    filter:
      blur(105px)
      brightness(1);
  }
}

/* ==========================================================
   PARTÍCULAS — MATÉRIA CÓSMICA VIVA
========================================================== */

.genesis-particles-field{
  position:absolute;
  inset:-5%;
  overflow:hidden;
  pointer-events:none;
}

.genesis-particle{
  position:absolute;

  left:var(--particle-x);
  top:var(--particle-y);

  width:var(--particle-size);
  height:var(--particle-size);

  border-radius:50%;

  opacity:var(--particle-opacity);

  background:
    rgba(205,244,255,.94);

  box-shadow:
    0 0 5px rgba(145,230,255,.74),
    0 0 13px rgba(55,145,255,.30);

  will-change:
    transform,
    opacity,
    filter;

  animation:
    genesisParticleLiving
    var(--particle-duration)
    ease-in-out
    var(--particle-delay)
    infinite alternate;
}

@keyframes genesisParticleLiving{
  0%{
    opacity:
      calc(var(--particle-opacity) * .38);

    transform:
      translate3d(
        calc(var(--particle-drift-x) * -.35),
        calc(var(--particle-drift-y) * -.25),
        0
      )
      scale(
        calc(.72 * var(--particle-depth))
      );

    filter:
      brightness(.78)
      blur(.15px);
  }

  42%{
    opacity:
      calc(var(--particle-opacity) * .78);

    transform:
      translate3d(
        calc(var(--particle-drift-x) * .35),
        calc(var(--particle-drift-y) * .55),
        0
      )
      scale(
        calc(.92 * var(--particle-depth))
      );

    filter:
      brightness(1.02)
      blur(0);
  }

  100%{
    opacity:
      var(--particle-opacity);

    transform:
      translate3d(
        var(--particle-drift-x),
        var(--particle-drift-y),
        0
      )
      scale(
        calc(1.12 * var(--particle-depth))
      );

    filter:
      brightness(1.18)
      blur(0);
  }
}

/* Reação coletiva ao pulso */

.genesis-particles-field.is-wave-active
.genesis-particle{
  animation:
    genesisParticleWave
    1.65s
    cubic-bezier(.16,.84,.44,1)
    both;
}

@keyframes genesisParticleWave{
  0%{
    opacity:
      calc(var(--particle-opacity) * .55);

    transform:
      translate3d(0,0,0)
      scale(.80);

    filter:brightness(.90);
  }

  30%{
    opacity:
      min(
        1,
        calc(var(--particle-opacity) * 1.9)
      );

    transform:
      translate3d(
        0,
        calc(-13px * var(--wave-scale)),
        0
      )
      scale(
        calc(.96 + (.16 * var(--wave-scale)))
      );

    filter:brightness(1.55);
  }

  100%{
    opacity:
      var(--particle-opacity);

    transform:
      translate3d(0,-4px,0)
      scale(1);

    filter:brightness(1);
  }
}

/* ==========================================================
   GENESIS SEED — CORAÇÃO DO UNIVERSO
========================================================== */

.genesis-seed-field{
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  pointer-events:none;
}

.genesis-seed-core{
  position:relative;
  z-index:4;

  width:20px;
  height:20px;

  border-radius:50%;

  opacity:.70;

  background:
    radial-gradient(
      circle at 36% 30%,
      #ffffff 0%,
      #e8fbff 20%,
      #8fe8ff 48%,
      #2b8dff 100%
    );

  box-shadow:
    0 0 14px rgba(255,255,255,1),
    0 0 36px rgba(160,232,255,.96),
    0 0 82px rgba(72,165,255,.72),
    0 0 160px rgba(35,95,255,.38),
    0 0 275px rgba(15,50,180,.20);

  will-change:
    transform,
    opacity,
    filter;

  animation:
    genesisSeedIdle
    8s
    ease-in-out
    infinite;
}

.genesis-seed-core::before{
  content:"";

  position:absolute;
  inset:-16px;

  border:
    1px solid rgba(158,232,255,.25);

  border-radius:50%;

  opacity:.28;

  animation:
    genesisSeedRingIdle
    7s
    ease-in-out
    infinite;
}

.genesis-seed-core::after{
  content:"";

  position:absolute;
  inset:-48px;

  border-radius:50%;

  opacity:.48;

  background:
    radial-gradient(
      circle,
      rgba(130,218,255,.20) 0%,
      rgba(55,130,255,.08) 42%,
      transparent 72%
    );

  filter:blur(10px);

  animation:
    genesisSeedAuraIdle
    9s
    ease-in-out
    infinite alternate;
}

.genesis-seed-halo{
  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  pointer-events:none;
}

.genesis-seed-halo-inner{
  width:94px;
  height:94px;

  opacity:.30;

  background:
    radial-gradient(
      circle,
      rgba(110,215,255,.26) 0%,
      rgba(45,130,255,.09) 42%,
      transparent 72%
    );

  filter:blur(9px);
}

.genesis-seed-halo-outer{
  width:220px;
  height:220px;

  opacity:.15;

  background:
    radial-gradient(
      circle,
      rgba(48,145,255,.18) 0%,
      rgba(18,65,175,.055) 46%,
      transparent 75%
    );

  filter:blur(23px);
}

@keyframes genesisSeedIdle{
  0%,
  100%{
    opacity:.54;

    transform:scale(.88);

    filter:brightness(.90);
  }

  50%{
    opacity:.82;

    transform:scale(1.04);

    filter:brightness(1.13);
  }
}

@keyframes genesisSeedRingIdle{
  0%,
  100%{
    opacity:.12;
    transform:scale(.78);
  }

  50%{
    opacity:.36;
    transform:scale(1.20);
  }
}

@keyframes genesisSeedAuraIdle{
  from{
    opacity:.30;
    transform:scale(.88);
  }

  to{
    opacity:.62;
    transform:scale(1.18);
  }
}

/* ==========================================================
   SEED — BATIMENTO GERADO PELO PULSE ENGINE
========================================================== */

.genesis-seed-field.is-pulse-active
.genesis-seed-core{
  animation:
    genesisSeedPulseDriven
    1.20s
    cubic-bezier(.16,.84,.44,1)
    both;
}

.genesis-seed-field.is-pulse-active
.genesis-seed-halo-inner{
  animation:
    genesisSeedHaloInnerDriven
    1.35s
    ease-out
    both;
}

.genesis-seed-field.is-pulse-active
.genesis-seed-halo-outer{
  animation:
    genesisSeedHaloOuterDriven
    1.70s
    ease-out
    .10s
    both;
}

@keyframes genesisSeedPulseDriven{
  0%{
    opacity:.56;

    transform:scale(.82);

    filter:brightness(.90);
  }

  17%{
    opacity:1;

    transform:scale(1.36);

    filter:brightness(1.58);
  }

  34%{
    opacity:.84;

    transform:scale(1.01);

    filter:brightness(1.10);
  }

  52%{
    opacity:1;

    transform:scale(1.17);

    filter:brightness(1.34);
  }

  100%{
    opacity:.68;

    transform:scale(.92);

    filter:brightness(1);
  }
}

@keyframes genesisSeedHaloInnerDriven{
  0%{
    opacity:.14;

    transform:
      translate(-50%,-50%)
      scale(.68);
  }

  42%{
    opacity:.66;

    transform:
      translate(-50%,-50%)
      scale(1.34);
  }

  100%{
    opacity:.26;

    transform:
      translate(-50%,-50%)
      scale(.98);
  }
}

@keyframes genesisSeedHaloOuterDriven{
  0%{
    opacity:.06;

    transform:
      translate(-50%,-50%)
      scale(.76);
  }

  48%{
    opacity:.42;

    transform:
      translate(-50%,-50%)
      scale(1.38);
  }

  100%{
    opacity:.14;

    transform:
      translate(-50%,-50%)
      scale(1);
  }
}

/* ==========================================================
   NARRATIVA — SURGINDO DA PENUMBRA
========================================================== */

.scene01-narrative{
  position:absolute;

  left:50%;
  top:67%;

  z-index:120;

  width:
    min(
      1040px,
      calc(100vw - 64px)
    );

  transform:
    translateX(-50%);

  text-align:center;

  pointer-events:none;
}

.scene01-line{
  margin:0;

  opacity:0;

  color:
    rgba(245,250,255,.97);

  text-shadow:
    0 0 18px rgba(255,255,255,.13),
    0 0 55px rgba(88,195,255,.16);
}

.scene01-line-primary{
  font-size:
    clamp(28px,3.5vw,56px);

  font-weight:300;

  line-height:1.28;

  letter-spacing:.035em;
}

.scene01-line-secondary{
  margin-top:22px;

  color:
    rgba(205,224,242,.83);

  font-size:
    clamp(18px,2vw,29px);

  font-weight:300;

  line-height:1.5;

  letter-spacing:.075em;
}

.genesis-scene-01.show-primary-line
.scene01-line-primary{
  animation:
    genesisTextMaterialize
    3.5s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

.genesis-scene-01.show-secondary-line
.scene01-line-secondary{
  animation:
    genesisTextMaterialize
    3.9s
    cubic-bezier(.22,1,.36,1)
    forwards;
}

@keyframes genesisTextMaterialize{
  0%{
    opacity:0;

    transform:
      translateY(16px)
      scale(.985);

    filter:
      blur(13px)
      brightness(1.65);
  }

  28%{
    opacity:.15;

    filter:
      blur(9px)
      brightness(1.42);
  }

  62%{
    opacity:.58;

    filter:
      blur(3px)
      brightness(1.15);
  }

  100%{
    opacity:1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0)
      brightness(1);
  }
}

/* ==========================================================
   SAÍDA DA CENA
========================================================== */

.genesis-act-01.phase-act-ending{
  animation:
    genesisStageExit
    1.6s
    ease
    forwards;
}

@keyframes genesisStageExit{
  from{
    opacity:1;
    filter:brightness(1);
  }

  to{
    opacity:0;
    filter:brightness(.42);
  }
}

/* ==========================================================
   RESPONSIVIDADE
========================================================== */

@media(max-width:700px){
  .genesis-nebula-primary{
    width:118vw;
  }

  .genesis-nebula-secondary{
    width:175vw;
  }

  .scene01-narrative{
    top:65%;

    width:
      calc(100vw - 36px);
  }

  .scene01-line-primary{
    font-size:
      clamp(25px,7vw,38px);
  }

  .scene01-line-secondary{
    margin-top:16px;

    font-size:
      clamp(17px,4.8vw,24px);
  }
}

/* ==========================================================
   ACESSIBILIDADE
========================================================== */

@media(prefers-reduced-motion:reduce){
  .genesis-background-field,
  .genesis-nebula,
  .genesis-particle,
  .genesis-seed-core,
  .genesis-seed-core::before,
  .genesis-seed-core::after,
  .genesis-seed-halo{
    animation:none !important;
  }

  .genesis-scene-01.show-primary-line
  .scene01-line-primary,
  .genesis-scene-01.show-secondary-line
  .scene01-line-secondary{
    animation:none !important;

    opacity:1;
    transform:none;
    filter:none;
  }
}