/* ==========================
   RESET
========================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
}

body{
  overflow:hidden;
  background:#e9e9e9;
  font-family: Arial, Helvetica, sans-serif;
  color:#000;
}

/* ==========================
   INTRO
========================== */

.intro-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  pointer-events:none;
}

.white-rise{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0%;
  background:#e9e9e9;
  animation:riseWhite 1.7s cubic-bezier(.77,0,.18,1) forwards;
}

@keyframes riseWhite{
  0%{
    height:0%;
  }
  100%{
    height:100%;
  }
}

/* ==========================
   BOTÃO NAVIGATION
========================== */

.navigation-button {
    position: fixed;

    top: 20px;
    left: 20px;

    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 120px;
    height: 40px;

    border: 4px solid #111;
    border-radius: 999px;

    background: #ffffff;
    color: #000000;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    box-shadow: 5px 5px 0 #1d1d1d;

    /* Escondido durante a abertura */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-10px);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s ease,
        box-shadow 0.15s ease;
}

/* Aparece depois que a barra sobe */

.navigation-button.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.navigation-button.show:hover {
    transform: translateY(-5px);

    box-shadow: 5px 8px 0 #1d1d1d;
}

.navigation-button.show:active {
    transform: translate(3px, 3px);

    box-shadow: 2px 2px 0 #1d1d1d;
}
/* ==========================
   PÁGINA
========================== */

.sites-page{
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  transition:opacity .8s ease;
}

.sites-page.show{
  opacity:1;
  visibility:visible;
}

.sites-wrapper {
    position: relative;

    width: 100%;
    height: 100vh;

    padding: 0;
}

/* ==========================
   ILUSTRAÇÃO
========================== */

.sites-illustration {
    position: absolute;

    top: 70px;
    left: 47.5%;

    width: 470px;

    margin: 0;

    transform: translateX(-50%);
}

.sites-illustration img {
    display: block;

    width: 120%;
    height: auto;

    opacity: 1;
    transform: none;
    transition: none;
}

.sites-illustration img.switching {
    opacity: 0;
    transform: translateY(5px);
}

/* ==========================
   LISTA DE SITES
========================== */

.sites-list {
    position: absolute;

    top: 60%;
    left: 50%;

    width: min(450px);

    display: flex;
    flex-direction: column;

    border-top: 2px solid #050505;

    transform: translate(-50%, -50%);
}

.site-link {
    width: 100%;

    padding: 13px 12px;

    border: none;
    border-bottom: 2px solid #050505;

    background: transparent;
    color: #050505;

    font-family: Helvetica, Arial, sans-serif;
    font-size: clamp(21px, 3vw, 32px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 2px;

    text-align: left;
    text-decoration: none;
    text-transform: lowercase;

    transition:
        padding-left 180ms ease,
        background 180ms ease,
        color 180ms ease;
}

.site-link:hover {
    padding-left: 30px;

    background: #050505;
    color: #ffffff;
}

.site-link:nth-child(1){ animation-delay:1.75s; }
.site-link:nth-child(2){ animation-delay:1.85s; }
.site-link:nth-child(3){ animation-delay:1.95s; }
.site-link:nth-child(4){ animation-delay:2.05s; }
.site-link:nth-child(5){ animation-delay:2.15s; }
.site-link:nth-child(6){ animation-delay:2.25s; }

@keyframes fadeLinks{
  to{
    opacity:1;
    transform:translateY(0);
  }
}



/* ==========================
   RESPONSIVO
========================== */

@media(max-width:700px){

  .navigation-button{
    width:105px;
    height:38px;
    font-size:14px;
  }

  .sites-illustration{
    width:min(420px, 88vw);
    margin-bottom:26px;
  }

  .site-link{
    font-size:clamp(20px, 7vw, 32px);
    padding:12px 0;
    border-bottom:3px solid #000;
  }

  .site-link:first-child{
    border-top:3px solid #000;
  }
}
/* Quatro sites sem sobreposição ou corte em telas pequenas. */
body { overflow: auto; }
.sites-page { min-height: 100svh; height: auto; opacity: 1; visibility: visible; }
.sites-wrapper { min-height: 100svh; height: auto; padding: 90px 24px 56px; display: flex; flex-direction: column; align-items: center; }
.sites-illustration { position: relative; top: auto; left: auto; transform: none; width: min(360px, 80vw); margin: 0 0 8px; }
.sites-illustration img { width: 100%; height: 230px; object-fit: contain; }
.sites-list { position: relative; top: auto; left: auto; transform: none; width: min(500px, 100%); }
.site-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-link span { font: 700 13px/1 monospace; letter-spacing: 0; }
.site-link:focus-visible { outline: 3px solid #111; outline-offset: 4px; background: #111; color: #fff; }
.navigation-button { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
@media (max-width: 700px) {
    .sites-illustration { margin-bottom: 12px; }
    .sites-illustration img { height: 200px; }
    .site-link:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .intro-screen { display: none; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}