---
import Base from "/components/Base.astro";
import "/styles/main.css";
import "/styles/splashscreen.css";
---

<Base
  title="ENTRANCE"
  graph={{
    description: "WARNING: Bug inside.",
  }}
>
  <a href="/home" id="welcome">
    <img src="/img/sprites/door.png" id="door" alt="" />
    <img src="/img/sprites/doorbg.png" id="doorbg" alt="entrance" />
  </a>
  <div class="bwcontainer">
    <div class="bwbox">
      <ul>
        <li>
          <a href="https://bsky.app/profile/entomoviscera.online">BLUESKY</a>
        </li>
        <li>
          <a
            href="https://tangled.org/did:plc:y3zqaodyl6y47l4dptwyhu5n?tab=overview"
            >TANGLED</a
          >
        </li>
        <li>
          <a href="https://entomoviscera.tumblr.com/">TUMBLR</a>
        </li>
        <li>
          <a href="https://entomoviscera.newgrounds.com/">NEWGROUNDS</a>
        </li>
        <li>
          <a href="https://www.youtube.com/@entomoviscera">YOUTUBE</a>
        </li>
      </ul>
    </div>
    <div class="bwbox">
      <a href="mailto:entomoviscera@gmail.com">entomoviscera@gmail.com</a>
    </div>
    <div class="bwbox">
      <a href="https://tangled.org/entomoviscera.online/personal-site"
        >SITE REPOSITORY</a
      >
    </div>
  </div>
</Base>

<style>
  #welcome {
    position: relative;
    margin: 15px 20px;
  }

  #door {
    position: absolute;
    transform: 0;
    transform-origin: 10% center;
    transition: 600ms;
  }

  #welcome:hover #door {
    transform: rotateY(60deg) skewY(16deg);
  }

  @media (prefers-reduced-motion: reduce) {
    #door {
      transition: none;
    }
  }
</style>