dreams.less

@import 'base.less';

body[data-current-build^="dreams"] #hallucinations,
body[data-current-build^="title2"] #hallucinations,
{ display: none; transform: scale(0); }

.title2DreamsBlur {
  > #titleCard { .fixed(); .blurred() }
  > #dreams {
    > #faces {
      .fixed();
      display: block;
      .blurred(@transform: scale(0.8));
      opacity: 0;
      transition: 8s;
    }
  }
}

.dreamsPlaying
{
  > #titleCard { .fixed(); .blurred() }  
  > #dreams > #faces { .full() }
}

.dreamsCitation,
.dreamsTraining,
{
  > #dreams > #faces { .full() }
  #citation { background: @pink; }
}

.dreamsTrainingExpand,
{
  > #titleCard { display: none; }
  > #dreams
    > #faces {
      .full();
      > .gen-layer {
        .animate-layers(pulse-blue);
        opacity: 1
      }
    }
}

.dreamsTrainingDiscriminator,
{
  > #titleCard { display: none; }
  > #dreams
    > #faces {
      .full();
      > .gen-layer {
        .animate-layers(pulse-blue);
        opacity: 1;
      }
      > .discrim-layer {
        .animate-layers(pulse, @t: calc(1 - var(--layer-t)));
        opacity: 1;
      }
    }
}

.dreamsTrainingFeedback,
{
  > #titleCard { display: none; }
  > #dreams
    > #faces {
      .full();
      transform: scale(1.8) translateY(15vh);
      > .gen-layer {
        .animate-layers(pulse-blue);
        opacity: 1;
      }
      > .discrim-layer {
        .animate-layers(pulse, @t: calc(1 - var(--layer-t)));
        opacity: 1;
      }
    }
}

.dreamsTrainingProblemsStructure,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces {
      .full();
      transform: scale(1.8) translateY(15vh);
      > .gen-layer {
        .animate-layers(pulse-blue);
        opacity: 1;
      }
      > .discrim-layer {
        .animate-layers(pulse, @t: calc(1 - var(--layer-t)));
        opacity: 1;
      }
    }
    > #dreamsGlobalStructure {
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.dreamsTrainingProblemsCounting,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces {
      .full();
      transform: scale(1.8) translateY(15vh);
      > .gen-layer {
        .animate-layers(pulse-blue);
        opacity: 1;
      }
      > .discrim-layer {
        .animate-layers(pulse, @t: calc(1 - var(--layer-t)));
        opacity: 1;
      }
    }
    > #dreamsGlobalStructure {
      transform: translate(-80%, -50%) scale(1);
    }
    > #dreamsGlobalCounting {
      transform: translate(0, -50%) scale(1);
      img {
        width: 40vw;
        height: auto;
      }
    }
  }
}


.dreamsInterpolation,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces {
      .full();
    }
    > #grid {
      display: block;
    }
  }
}

.dreamsGrid,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces {
      .full();
      opacity: 0;
    }
    > #grid {
      display: block;
      .full();  
    }  
  }
}

.dreamsGridFaster,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces { display: none; }
    > #grid {
      display: block;
      .full();
    }
  }
}

.dreamsGridFlashing,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces { display: none; }
    > #grid {
      display: block;
      .full();
      canvas { transition: transform 4s; }
      .grid {
        animation: pulse-opacity 2s infinite;
        transition: transform 4s;
      }
    }
  }
}

.dreamsGridZoom,
{
  > #titleCard { display: none; }
  > #dreams {
    > #faces { display: none; }
    > #grid {
      display: block;
      .full();
      --rotate-x: 60deg;
      --zoom: 0.4;
      canvas {opacity: 0}
      transition: opacity 4s;
      .grid {
        animation:
          pulse-opacity 2s infinite,          
          scroll-grid 2s linear 10s infinite;
      }
    }
  }
}

.dreamsEnd
{
  > #dreams {
    > #faces { display: none; }
    > #grid {      
      display: block;      
      .full();
      transition: opacity 4s;
      opacity: 0;
      --rotate-x: 60deg;
      --zoom: 0.4;
      canvas {opacity: 0}
      .grid {
        animation:
          pulse-opacity 2s infinite,
          scroll-grid 2s linear infinite;
      }
    }
  }
}


//-------

@keyframes glow-out {
  0% {
    filter: brightness(100%);
    opacity: 1;    
  }

  90% {
    filter: brightness(200%);
    opacity: 1;
  }

  100% {
    opacity: 0;
    filter: brightness(200%);
  }
}

@keyframes scroll-grid {
  from {
    transform: rotateX(var(--rotate-x)) scale(var(--zoom)) translate3d(0px, 0px, 0px);
  }

  to {
    transform: rotateX(var(--rotate-x)) scale(var(--zoom)) translate3d(-400px, -400px, 0px);
  }
}

@keyframes pulse-opacity {
  0% { opacity: 0.1; }
  50% { opacity: 1; }  
  100% { opacity: 0.1; }
}

grid-cells {
  .fixed();
  background: rgb(37, 37, 37);
  display: none;
  opacity: 0;
  transition: opacity 2s;

  --rotate-x: 0deg;
  --zoom: 1;
  --translate-grid: 0px;

  canvas {
    transition: transform 10s linear, opacity 5s;
    transform: rotateX(var(--rotate-x)) scale(var(--zoom));
  }
  .grid {
    transition: transform 10s linear;
    transform: rotateX(var(--rotate-x)) scale(var(--zoom));
  }
}

.animate-layers(@name: pulse, @duration: 1s, @count: infinite, @t: var(--layer-t)) {
  animation-name: @name;
  animation-duration: @duration;
  animation-delay: .lerp(@duration, 0s, @t)[];
  animation-iteration-count: infinite;
}

.blurred(@scale-x: 3, @transform: scale(3, 1.5), @radius: 20px) {
  transition: filter 4s, transform 4s;
  filter: blur(20px);
  transform: @transform;
}

.zoom-out {
  animation: rotate-x-down 4s, scale-out 8s, spin-z 5s;
}

.full {
  .fixed();
  display: block;
  opacity: 1;
  transition: filter 2s, transform 4s, opacity 2s;
  filter: blur(0);
}

#faces {
  display: none;
  transition: transform 4s, opacity 2s;
  transform: scale(1);
  perspective: 100vw;
  --stack-rotate-z: 0;
  --stack-rotate-x: 0;
  --stack-zoom: 1;
  --stack-expand: 0;
  --stack-skew-x: 0deg;
  --stack-skew-x-from: 0deg;
  --stack-skew-x-to: 0deg;
  --stack-translate-x: 0px;
  --stack-translate-y: 0px;
  --stack-translate-z: 0px;
  --discrim-stack-expand: 1;
}

#facesVideo {
  .absolute(@width: 100%, @height: 100%);
  transition: none;
  --layer-t: 0;
  --layer-x: 0;
  --layer-y: 0;
  --layer-z: 0;
  --stack-skew-x-from: 0deg;
  .layer();
}

.gen-layer {
  .layer(
    @from-width: 50%, @to-width: 30%,
    @from-height: 100%, @to-height: 50%,
    @from-z: 0vw, @to-z: 15vw);
  transition: opacity 1s;
  border: 3px solid @blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  --stack-expand: 1;
  transition: opacity 1s;
  opacity: 0;
}

.discrim-layer {
  .layer(
    @from-width: 50%, @to-width: 30%,
    @from-height: 100%, @to-height: 30%,
    @from-z: 0vw, @to-z: -15vw);
  transition: opacity 1s;
  opacity: 0;
  border: 3px solid fuchsia;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  --stack-skew-x-from: 0deg;
  --stack-skew-x-to: 10deg;
  --stack-expand: var(--discrim-stack-expand);
}

@keyframes pulse {
  0% { background: rgba(255, 0, 255, 0); }
  49% { background:rgba(255, 0, 255, 0.5); }
  51% { background:rgba(255, 0, 255, 0.5); }
  100% { background: rgba(255, 0, 255, 0); }
}

@keyframes pulse-blue {
  0% { background: rgba(255, 0, 255, 0); }
  49% { background: @translucent-electric-blue; }
  51% { background: @translucent-electric-blue; }
  100% { background: rgba(255, 0, 255, 0); }
}

.layer(
  @from-width: 100%, @to-width: 0%,
  @from-height: 100%, @to-height: 0%,
  @from-z: 0vw, @to-z: 100vw,
  @from-x: 0vw, @to-x: 0vw,
  @from-y: 0vw, @to-y: 0vw,
  @t: var(--layer-t),
  @x: calc(.lerp(@from-x, @to-x, @t: var(--layer-x))[]),
  @y: calc(.lerp(@from-y, @to-y, @t: var(--layer-y))[]),
  @z: calc(.lerp(@from-z, @to-z, @t: calc(var(--layer-z) * var(--stack-expand)))[]),
  @translation: translate3d(var(--stack-translate-x), var(--stack-translate-y), @z),
) {
  @width: .lerp(@from-width, @to-width, @t)[];
  @height: .lerp(@from-height, @to-height, @t)[];
  @top: calc((100% - @height) / 2);
  @left: calc((100% - @width) / 2);
  .absolute(@top, @left, @width, @height);
  transform:
    rotateX(var(--stack-rotate-x))
    rotateZ(var(--stack-rotate-z))
    // rotateX(.lerp(var(--stack-skew-x-from), var(--stack-skew-x-to), @t)[])

    @translation
    // translate3d(0, .lerp(5vh,s 6vh, @t)[], 0)
    scale(var(--stack-zoom));
}

.circ(@from: 0deg, @to: 360deg, @radius: 30vh, @t: var(--layer-t)) {
  @theta: .lerp(@from, @to, @t)[];
  @x: calc(var(--stack-translate-x) + var(--layer-sin) * @radius);
  @y: calc(var(--stack-translate-y) + var(--layer-sin) * @radius);
  @z: calc(var(--stack-translate-z) + var(--layer-cos) * @radius);
  @translation: translate3d(@x, @y, @z);
}

.lerp(@from, @to, @t: var(--layer-t)) {
  @delta: calc(@to - @from);
  @value: calc(@from + @delta * @t);
}

#dreamsGlobalStructure, #dreamsGlobalCounting {
  .window(@pink);
  transform: translate(-50%, -50%) scale(0);
}

#dreamsGlobalCounting > img {
  width: 40vw;
  height: auto;
}