inside.less

@import "base.less";

.inside #hallucinations {
  .gray-full();
  #deepDream {
    .being-watched(@x: -30vw, @rotate: 80deg, @scale: 1);
  }
}

.insideEnterSkully #hallucinations,
{
  .gray-full();
  #deepDream { .being-watched(); }
  #skully { .skully-visible(); }
}

.insideLessCruft #hallucinations,
{
  .gray-full();
  #deepDream { .being-watched(@x: -100vw); opacity: 0; }
  #skully { .skully-visible(); }
}

.insideRetina #hallucinations,
.insideRetinaGanglions #hallucinations,
.insideRetinaEtc #hallucinations,
.insideRetinaPhotoreceptors #hallucinations,
.insideRetinaLightGoesIn #hallucinations,
.insideRetinaSignalComesOut #hallucinations,
.insideRetinaOpticNerve #hallucinations,
.insideRetinaReceptiveField #hallucinations,
.insideRetinaReceptiveFieldFiringWeakly #hallucinations,
.insideRetinaReceptiveFieldOffCenterFiring #hallucinations,
.insideRetinaReceptiveFieldOffCenterDead #hallucinations,
.insideRetinaReceptiveFieldOnCenterFiring #hallucinations,
{
  .gray-full();
  background: white;
  #deepDream { display: none; }
  #skully  { .skully-visible(); }
}

.insideBrain #hallucinations
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
  > #highlightBox { display: block; }
}

.insideChiasma #hallucinations
{
  > #highlightBox {
    display: block;
    opacity: 1;
    top: 55vh; left: 45vw;
    width: 10vw; height: 10vh;
  }
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
}

.insideThalamus #hallucinations
{
  > #highlightBox {
    display: block;
    opacity: 1;
    top: 44vh; left: 47vw;
    width: 20vw; height: 20vh;
  }
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
}

.insideVisualCortex #hallucinations,
{
  > #highlightBox {
    display: block;
    opacity: 1;
    top: 34vh; left: 24vw;
    width: 30vw; height: 55vh;
    backdrop-filter: brightness(110%);
  }
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
}

.insideVisualCortexLayers #hallucinations,
{
  > #highlightBox {
    display: block;
    opacity: 1;
    top: 34vh; left: 24vw;
    width: 30vw; height: 55vh;
    backdrop-filter: brightness(110%);
  }
  > #visualCortexLayers {
    transform: translate(-110%, -55%) scale(0.5);
  }
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
}

.insideVisualCortexRecurrent #hallucinations,
.insideVisualCortexRecurrentSerotonin #hallucinations,
{
  > #highlightBox {
    display: block;
    opacity: 1;
    top: 34vh; left: 24vw;
    width: 30vw; height: 55vh;
    backdrop-filter: brightness(110%);
  }
  > #visualCortexLayers {
    transform: translate(-110%, -55%) scale(0.5);
  }
  > #visualCortexMap {
    transform: translate(0%, -50%) scale(0.75);
  }
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
}


.inside5ht2a #hallucinations,
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
  #ht2a {
    transform: translate(-50%, -50%) scale(1);
  }
}

.inside5ht2aLSDBinding #hallucinations,
.insideWeAreTheOutput #hallucinations,
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
  #ht2a {
    transform: translate(calc(-100% + 10vw), -50%) scale(1);
  }
  #ht2aLSDBinding {
    transform: translate(-5vw, -90%) scale(1);
  }
  #ht2aLSDBindingDetail {
    transform: translate(-5vw, 0%) scale(1);
  }
}

.insideAdversarialSticker #hallucinations,
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
  #ht2a {
    transform: translate(calc(-100% + 10vw), -50%) scale(1);
  }
  #ht2aLSDBinding {
    transform: translate(-5vw, -90%) scale(1);
  }
  #ht2aLSDBindingDetail {
    transform: translate(-5vw, 0%) scale(1);
  }
  #adversarialSticker {
    transform: translate(-40vw, -25vw) scale(1);
  }
}

.insideAdversarialSkiiers #hallucinations,
.insideAdversarialContinuousRefinement #hallucinations,
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
  #ht2a {
    transform:  translate(calc(-100% + 10vw), -50%) scale(1);
  }
  #ht2aLSDBinding {
    transform: translate(-5vw, -90%) scale(1);
  }
  #ht2aLSDBindingDetail {
    transform: translate(-5vw, 0%) scale(1);
  }
  #adversarialSticker {
    transform: translate(-40vw, -25vw) scale(1);
  }
  #adversarialSkiiers {
    transform: translate(-10vw, -10vh) scale(1);
  }
}

.insideBoxIllusion #hallucinations,
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }
  #boxIllusion {
    transform:  translate(-50%, -50%) scale(1);
  }
}

.insideConfettiIllusion #hallucinations,
{
  .gray-full();
  #deepDream { display: none; }
  #skully   { .skully-visible(); }

  #boxIllusion {
    transform: translate(calc(-100% + 10vw), -50%) scale(1);
  }
  #confettiIllusion {
    transform: translate(-5vw, -50%) scale(1);
  }
}

.hallucinationsToSleep #hallucinations,
{
  .gray-full();
  animation-name: glow-zonk-out;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes glow-zonk-out {
  0% {
    filter: sepia(0) brightness(100%) hue-rotate(0deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);    
  }

  90% {
    filter: sepia(20%) brightness(120%) hue-rotate(270deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);    
  }

  95% {
    clip-path: polygon(
    0 calc(50% - 1px),
    100% calc(50% - 1px),
    100% calc(50% + 1px),
    0 calc(50% + 1px));
  }

  100% {
    clip-path: polygon(
    calc(50% - 1px) calc(50% - 1px),
    calc(50% + 1px) calc(50% - 1px),
    calc(50% + 1px) calc(50% + 1px),
    calc(50% - 1px) calc(50% + 1px));
  }
}

// ---

#highlightBox {
  .fixed();
  border: 2px solid @pink;
  transition: 1s;
  opacity: 0;
  z-index: 0;
  display: none;
  backdrop-filter: brightness(150%);
}

#ht2a,
#ht2aLSDBinding,
#ht2aLSDBindingDetail,
#adversarialSticker,
#adversarialSkiiers,
#visualCortexLayers,
#visualCortexMap,
#boxIllusion,
#confettiIllusion,
{
  .window();
  > video, > img {
    width: 50vw;
  }
}

#adversarialStickers {
  z-index: 100;
}

#skully {
  position: absolute;
  height: 100vh;
  transform: translateX(100%);  // skully enters from the right
  transition: transform 4s, left 4s, opacity 0.5s;
  opacity: 0;
  left: 0;
}

.skully-visible {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.gray-full {
  background: @light-gray;
  transform: scale(1.0);
  opacity: 1;
  filter: none;
}

.being-watched(@x: -50vw, @rotate: 90deg, @scale: 0.8) {
  transition: 10s;
  transform-origin: center center;
  transform: translate3d(@x, 0, -100vh) rotateY(@rotate) scale(@scale);
  border: 10px solid black;
  background: black;
  transition: 4s;
}