.wrapper
  .background
    .n30.imagen
      img(src='https://upload.wikimedia.org/wikipedia/commons/3/31/Great_white_shark_south_africa.jpg')
    .texto
      p X 
        span.tcX 0
      p Y 
        span.tcY 0

      p Duis et eros eget quam efficitur vehicula. Morbi sit amet rutrum ex. Ut vestibulum viverra enim, ac auctor purus tempus eu. Aenean fringilla, urna sed porttitor cursus, ipsum est laoreet nibh, sed fringilla mi odio vitae justo. Proin in dui augue. Donec quis sem sit amet lectus sagittis pellentesque eget eu justo.
    .piso

@import 'nib';

$color1 = rgba(17, 75, 95, 1)
$color2 = rgba(2, 128, 144, 1)
$color3 = rgba(228, 253, 225, 1)
$color4 = rgba(69, 105, 144, 1)
$color5 = rgba(244, 91, 105, 1)

body
  background-color $color4
  margin 0
  font-family sans-serif
  color $color4
  perspective 400px
  overflow hidden
  transform-style preserve-3d

.wrapper
  display flex
  justify-content center
  align-items center
  width 100vw
  height 100vh
  transform-style preserve-3d

.background
  background-color $color2
  width 100vw
  height 100vh
  position absolute
  left 0
  top 0
  transform translateZ(-100px)
  transform-style preserve-3d
  
  .n30
    transform translateZ(130px)
    box-shadow 0 10px 30px rgba(black, .3)
    
  .piso
    absolute bottom left right
    height 150px
    background-color $color1
    transform rotate3d(1,0,0,270deg)
    transform-origin 0% 100%
   
   .texto
     width 60%
     height 40vh
     overflow-y auto
     overflow-x hidden
     padding 1em
     absolute right 100px bottom 100px
     transform translateZ(140px)
     background-color rgba($color3, .7)
     box-shadow 0 10px 40px rgba(black, .2)
     border-radius 10px
     p
       margin-top 0
       &:last-child
         margin-bottom 0
     
   .imagen
     height 40vh
     width 50vw
     border-bottom 4px solid white
     opacity .8
     absolute top 50px
     overflow hidden
     img
       height auto
       width 100%

console.clear()

var events = ['mousemove', 'touchmove'];

events.forEach(function(event){
  document.addEventListener(event, function(e){

    var origX, origY,
        tcx = document.querySelector('.tcX'),
        tcy = document.querySelector('.tcY');

    if(e.type == 'touchmove'){

      origX = e.touches[0].pageX
      origY = e.touches[0].pageY
    }else if(e.type == 'mousemove'){
      origX = e.pageX
      origY = e.pageY
    }
    
    origX = Math.round(origX)
    origY = Math.round(origY)
    
    tcx.innerHTML = e.type + origX
    tcy.innerHTML = e.type + origY

    var cX = Math.ceil(window.innerWidth / 2),
        cY = Math.ceil(window.innerHeight / 2),
        pX = origX - cX,
        pY = origY - cY,
        tiltY = pX / cX,
        tiltX = -(pY / cY),
        hipotenusa = Math.sqrt(Math.pow(tiltX, 2) + Math.pow(tiltY, 2)),
        grados = hipotenusa * 10,
        contenido = document.querySelector('.wrapper'),
        n30 = document.querySelector('.n30'),
        texto = document.querySelector('.texto');
    //2 ejes
    contenido.setAttribute('style', 'transform: rotate3d(' + tiltX + ', ' + tiltY + ',0 , ' + grados + 'deg);')

    //eje Y
    //contenido.setAttribute('style', 'transform: rotate3d(' + 0 + ', ' + tiltY + ',0 , ' + grados + 'deg);')

    n30.setAttribute('style', 'box-shadow: ' + -(tiltY * 10) + 'px ' + (tiltX * 10) + 'px ' + '30px rgba(0,0,0,0.3);')

     texto.setAttribute('style', 'box-shadow: ' + -(tiltY * 15) + 'px ' + (tiltX * 15) + 'px ' + '40px rgba(0,0,0,0.2);')

  }, false)
})