/* =========================
   Poulie ♡
   Homepage
   ========================= */

:root {
  --background: #747e9f;
  --accent: #929fd4;
  --light: #c9d0ee;
  --text: #e8e9f2;

  --content-width: 300px;
}


/* =========================
   Reset
   ========================= */

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

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;

  background: var(--background);
  color: var(--text);

  font-family: "Quicksand", sans-serif;
  font-weight: 400;

  display: flex;
  justify-content: center;

  overflow-x: hidden;
}


/* =========================
   Page
   ========================= */

.page {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;

  padding: 50px 24px 60px;

  display: flex;
  flex-direction: column;
  align-items: center;
}


/* =========================
   Profile
   ========================= */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;

  opacity: 0;

  animation:
    fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* Profile picture */

.profile-picture {
  width: 212px;
  height: 212px;

  padding: 6px;

  border: 5px solid var(--light);
  border-radius: 50%;

  animation: floatProfile 4s ease-in-out 1s infinite;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.profile-picture:hover {
  transform: scale(1.02);

  box-shadow:
    0 10px 30px rgba(42, 48, 78, 0.12);
}

.profile-picture img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: 50%;
}


/* Profile text */

.profile-info {
  margin-top: 25px;
  text-align: center;
}

.profile-info h1 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
}

.profile-info a {
  display: inline-block;

  margin-top: 4px;

  color: var(--text);
  text-decoration: none;

  font-size: 16px;
  line-height: 1.5;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.profile-info a:hover {
  opacity: 0.75;
  transform: translateY(-1px);
}


/* =========================
   Social media
   ========================= */

.socials {
  width: var(--content-width);

  margin-top: 21px;

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

  padding: 0 35px;

  opacity: 0;

  animation:
    fadeUp 0.65s 0.18s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.socials a {
  width: 27px;
  height: 27px;

  color: var(--accent);

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

  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s ease,
    filter 0.25s ease;
}

.socials svg {
  width: 100%;
  height: 100%;

  fill: currentColor;
}

.socials a:hover {
  color: var(--light);

  transform:
    translateY(-3px)
    scale(1.12);

  filter:
    drop-shadow(
      0 5px 5px rgba(42, 48, 78, 0.15)
    );
}


/* =========================
   Divider
   ========================= */

.divider {
  width: var(--content-width);
  height: 2px;

  margin: 21px 0 24px;

  background: var(--light);

  opacity: 0;

  transform: scaleX(0);

  animation:
    dividerGrow 0.75s 0.35s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}


/* =========================
   Links
   ========================= */

.links {
  width: var(--content-width);

  display: flex;
  flex-direction: column;

  gap: 16px;
}


/* Buttons */

.link-button {
  width: 100%;
  height: 62px;

  border-radius: 17px;

  background: var(--accent);
  color: #ffffff;

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

  text-decoration: none;

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

  opacity: 0;

  transform: translateY(15px);

  animation:
    buttonEnter 0.6s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;

  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    box-shadow 0.25s ease;
}


/* Cascata dos botões */

.link-button:nth-child(1) {
  animation-delay: 0.48s;
}

.link-button:nth-child(2) {
  animation-delay: 0.60s;
}

.link-button:nth-child(3) {
  animation-delay: 0.72s;
}


/* Button hover */

a.link-button:hover {
  transform: translateY(-3px);

  background: #9ca9dc;

  box-shadow:
    0 8px 20px rgba(42, 48, 78, 0.14);
}

a.link-button:active {
  transform:
    translateY(-1px)
    scale(0.99);

  box-shadow:
    0 4px 10px rgba(42, 48, 78, 0.10);
}


/* Setup — ainda sem link */

.link-button.disabled {
  cursor: default;
}


/* =========================
   Animations
   ========================= */

/* Elementos aparecem subindo */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

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


/* Foto flutuando */

@keyframes floatProfile {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}


/* Linha crescendo do centro */

@keyframes dividerGrow {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 0.75;
    transform: scaleX(1);
  }
}


/* Botões entrando */

@keyframes buttonEnter {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

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


/* =========================
   Smaller screens
   ========================= */

@media (max-width: 360px) {

  :root {
    --content-width:
      min(300px, calc(100vw - 48px));
  }

  .page {
    padding-top: 36px;
  }

  .profile-picture {
    width: 190px;
    height: 190px;
  }
}


/* =========================
   Accessibility
   ========================= */

/*
  Se a pessoa configurou o celular/computador
  para reduzir animações, respeitamos isso.
*/

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;
  }

}