/* html { scroll-behavior: smooth; } */

#welcomeMenu {
    width: 430px;
    height: 410px;
    display: none;
  }
  
  #introVideo {
    display: none;
  }
  
  #sun {
    display: inline-block;
    background-image: url("https://nmd.pt/landingPage/671px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA's_Solar_Dynamics_Observatory_-_20100819.png");
    position: absolute;
    bottom: 50px;
    left: 100px;
    width: 240px;
    height: 240px;
    opacity: 0.3;
    z-index: -11;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: top left;
    offset-path: path("M 0 350 q 300 -800 1200 0");
    offset-position: center;
    animation: moveSun 60000ms infinite reverse ease-in-out;
  }
  
  #moon {
    display: inline-block;
    position: absolute;
    bottom: 50px;
    left: 100px;
    width: 240px;
    height: 240px;
    opacity: 0.3;
    z-index: -10;
    background-image: url("https://nmd.pt/landingPage/Full_Moon_Luc_Viatour.png");
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top left;
    offset-path: path("M 0 350 q 300 -800 1200 0");
    offset-position: center;
    animation: moveMoon 60000ms infinite ease-in-out;
  }
  
  /* ANIMAÇÕES */
  @keyframes moveMoon {
    0%, 25% {
      offset-distance: 0%;
      transform: scale(0);
      opacity: 0.3;
      filter: brightness(150%) contrast(100%) grayscale(0%);
      z-index: -10;
    }
    40%, 45%, 47% {
      offset-distance: 50%;
      transform: scale(1.8);
      opacity: 1;
      filter: brightness(80%) contrast(150%) grayscale(80%);
      z-index: 2;
    }
    55% {
      offset-distance: 55%;
      transform: scale(1.8);
      opacity: 1;
      filter: brightness(10%) contrast(100%) grayscale(80%);
      z-index: 2;
    }
    75% {
      offset-distance: 75%;
      transform: scale(0);
      opacity: 0.8;
      filter: brightness(350%) contrast(50%) grayscale(0%);
      z-index: -4;
    }
    100% {
      offset-distance: 100%;
      transform: scale(0);
      opacity: 0.3;
      filter: brightness(350%) contrast(0%) grayscale(0%);
      z-index: -10;
    }
  }
  
  @keyframes moveSun {
    0%, 25% {
      offset-distance: 0%;
      transform: scale(0);
      opacity: 0.3;
      filter: brightness(150%) contrast(150%) grayscale(100%);
      z-index: -11;
    }
    50% {
      offset-distance: 50%;
      transform: scale(1.8);
      opacity: 1;
      filter: brightness(1500%) contrast(250%) grayscale(50%);
      z-index: 1;
    }
    75% {
      offset-distance: 75%;
      transform: scale(0);
      opacity: 0.8;
      filter: brightness(50%) contrast(150%) grayscale(80%);
    }
    100% {
      offset-distance: 100%;
      transform: scale(0);
      opacity: 0.3;
      filter: brightness(350%) contrast(150%) grayscale(100%);
      z-index: -11;
    }
  }
  
  /* TIPOGRAFIA */
  h1 {
    text-shadow: 3px 3px #333;
    overflow: hidden;
    white-space: nowrap;
    letter-spacing: .15em;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
  }
  
  h2 {
    text-shadow: 2px 2px #333;
  }
  
  #monkeySpeech {
    overflow: hidden;
    border-right: .15em solid #0081ff;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: typing 3.5s steps(40, end), blink-caret2 .75s step-end infinite;
  }
  
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  @keyframes blink-caret {
    50% { border-color: transparent }
  }
  
  @keyframes blink-caret2 {
    0%, 100% { border-color: #0081ff }
    50% { border-color: transparent }
  }
  
  /* ARTICLE INFO BOX */
  article::after {
    content: "info";
    position: fixed;
    top: 2vh !important;
    left: calc(50% - 100px);
    width: 200px;
    height: 30px;
    padding: 10px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: white !important;
    opacity: 0.8 !important;
    border-radius: 50px;
    text-shadow: 1px 1px #333;
    filter: contrast(150%);
    background-image:
      repeating-linear-gradient(-37deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px),
      repeating-linear-gradient(53deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px),
      repeating-linear-gradient(143deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px),
      repeating-linear-gradient(233deg, grey, grey 10.5px, transparent 14px, transparent 19.25px, grey 21px);
    background-size: 10px calc(100% + 26.29px), calc(100% + 26.29px) 10px, 10px calc(100% + 26.29px), calc(100% + 26.29px) 10px;
    background-repeat: no-repeat;
    animation: borderAnimation 0.9s infinite linear;
  }
  
  article:hover::after {
    content: "On this WebApp, we created a design narrative about a space monkeys kind, where you can get to know about their origins, fly over their forest, play paper scissors rock vs space monkey, or even gamble space monkey bucks on their casino, but you can also visit our projects and find out more about our studio.";
    width: 400px;
    height: 525px;
    margin-left: -100px;
    font-size: 1em;
    text-align: justify;
    background-color: rgba(255, 102, 0, 0.8);
    background-image: url("https://nmd.pt/landingPage/article_nmd.jpg");
    background-size: 100%;
    background-position: bottom !important;
    background-repeat: no-repeat;
    border-radius: 30px;
    opacity: 1 !important;
    text-shadow: 1px 1px #333;
    line-height: 1.5em;
    filter: contrast(120%);
  }
  
  @keyframes borderAnimation {
    from { background-position: 0 0, -26.29px 0, 100% -26.29px, 0 100%; }
    to { background-position: 0 -26.29px, 0 0, 100% 0, -26.29px 100%; }
  }
  
  /* LAYOUT */
  body {
    display: flex;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: -2;
  }
  
  body::-webkit-scrollbar {
    display: none;
  }
  
  iframe {
    border-radius: 5px;
    overflow-y: hidden;
    zoom: 1.15 !important;
  }
  
  /* VIDEO */
  #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.5;
    z-index: -5;
  }
  
  .vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 200px rgb(0,0,0) inset;
    z-index: -4;
  }
  
  #videoSourceFrame {
    position: fixed;
    right: 0;
    top: 10vh;
    min-width: 100%;
    height: 50vh;
    opacity: 0;
    z-index: -3;
  }
  
  #design, #ps2 {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    z-index: -4;
  }
  
  /* RETURN BUTTON */
  #return {
    position: fixed;
    left: 10px;
    top: 14px;
    width: 180px;
    height: 20px;
    padding: 5px 0;
    text-align: center;
    font-size: small;
    font-weight: 800;
    background-color: #0081ff;
    border: 3px solid #ccc;
    border-radius: 22px;
    color: aliceblue;
    opacity: 0;
    z-index: -3;
    text-shadow: 2px 2px #333;
    letter-spacing: 0.1em;
  }
  
  #return:hover {
    background-color: #ccc;
    border-color: #0081ff;
  }
  
  /* BACKGROUND LAYERS */
  #mouseSignals,
  #superTree,
  #superForest {
    position: fixed;
    left: -10px;
    top: -10px;
    min-width: 105%;
    min-height: 105%;
  }
  
  #mouseSignals { opacity: 0.033; z-index: 1; }
  #superTree { opacity: 0.066; z-index: 2; }
  #superForest { opacity: 0.033; z-index: -1; }
  
  /* MEDIA QUERIES */
  @media screen and (max-width:1024px) {
    #myVideo, #moon, #sun { display: none; }
    html, body { overflow-x: hidden; }
    body { position: relative; }
    #videoSourceFrame { top: 0; height: 60vh !important; }
    #superTree, #mouseSignals { display: none; }
  }
  
  @media screen and (max-width:511px) {
    iframe { zoom: 1.1 !important; }
    button { font-size: medium; padding: 5px; }
  }
  
  @media screen and (min-width:1367px) {
    body { background-size: 5000% 5000% !important; }
    #megaContainer { zoom: 1.2; }
    #videoSourceFrame { top: 10vh; height: 40vh; }
  }
  
  /* NAV */
  nav {
    zoom: 0.75;
    margin-top: 25px;
  }
  
  #monkeyInteraction {
    margin-bottom: 30px;
  }
  
  #demo {
    color: #fff;
    font-size: medium;
    text-align: center;
    width: 100%;
  }
  
  #dateTime {
    position: fixed;
    top: 70px;
    width: 400px;
    left: 50%;
    margin-left: -190px;
    text-align: center;
  }
  
  iframe {
    margin-bottom: 20px;
  }