<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}

.page {
  position: relative;
  width: 100vw;
  height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #ffaa00;
}

.background {
  position: absolute;
  inset: 0;
}

.background-base,
.background-wipe {
  position: absolute;
  inset: 0;
}

.background-base {
  background: #ffaa00;
}

.background-wipe {
  background: #1d3a50;
  transform: translateY(-100%);
}

.background-wipe.is-moving {
  transition: transform 560ms cubic-bezier(0.77, 0, 0.175, 1);
}

.logo-wrap {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: clamp(650px, 80vw, 1725px);
  max-width: 80vw;
  max-height: 70vh;
}

.actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.action-link {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--actions-color, #eee8d9);
  transition: 0.2s;
}

.action-link:hover {
  transform: scale(1.1);
}

.action-link svg {
  width: 40px;
  height: 40px;
  stroke: currentColor;
}
</style>

<div class="page">
  <div class="background">
    <div class="background-base"></div>
    <div class="background-wipe"></div>
  </div>

  <div class="logo-wrap">
    <img class="logo" src="https://sankofadesign.com.br/wp-content/uploads/2026/05/logo.png">

    <div class="actions">
      <a class="action-link" href="mailto:contato@sankofadesign.com.br">
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M4 6h16v12H4V6Z" stroke-width="1.8"/>
          <path d="m4 6 8 6 8-6" stroke-width="1.8"/>
        </svg>
      </a>

      <a class="action-link" href="https://www.instagram.com/designsankofa" target="_blank">
        <svg viewBox="0 0 24 24" fill="none">
          <rect x="4" y="4" width="16" height="16" rx="4.5" stroke-width="1.8"/>
          <circle cx="12" cy="12" r="3.4" stroke-width="1.8"/>
        </svg>
      </a>
    </div>
  </div>
</div>

<script>
const colors = [
  "#FFAA00",
  "#1D3A50",
  "#7C3C1D",
  "#424D25",
  "#EEE8D9"
];

const logos = [
  "https://sankofadesign.com.br/wp-content/uploads/2026/05/logo.png",
  "https://sankofadesign.com.br/wp-content/uploads/2026/05/logo2.png",
  "https://sankofadesign.com.br/wp-content/uploads/2026/05/logo2.png",
  "https://sankofadesign.com.br/wp-content/uploads/2026/05/logo2.png",
  "https://sankofadesign.com.br/wp-content/uploads/2026/05/logo3.png"
];

const directions = ["Y", "-Y", "X", "-X"];

const base = document.querySelector(".background-base");
const wipe = document.querySelector(".background-wipe");
const logo = document.querySelector(".logo");

let index = 0;

function animate() {
  const next = (index + 1) % colors.length;
  const dir = directions[Math.floor(Math.random() * directions.length)];

  if (dir === "Y") wipe.style.transform = "translateY(-100%)";
  if (dir === "-Y") wipe.style.transform = "translateY(100%)";
  if (dir === "X") wipe.style.transform = "translateX(-100%)";
  if (dir === "-X") wipe.style.transform = "translateX(100%)";

  wipe.style.background = colors[next];

  requestAnimationFrame(() => {
    wipe.classList.add("is-moving");
    wipe.style.transform = "translate(0,0)";
  });

  setTimeout(() => {
    base.style.background = colors[next];
    logo.src = logos[next];
    wipe.classList.remove("is-moving");
  }, 500);

  index = next;
}

setInterval(animate, 2500);
</script>