html { -webkit-font-smoothing: antialiased; height: 100%; }

body {
  background: #FFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
}

body.loaded img.me { -webkit-animation-name: bounceIn; animation-name: bounceIn; }

@-webkit-keyframes bounceIn {
  0%   { opacity: 0; -webkit-transform: scale(0.5); }
  50%  { -webkit-transform: scale(1.03); }
  80%  { opacity: 1; -webkit-transform: scale(0.95); }
  100% { -webkit-transform: scale(1); }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { transform: scale(1.03); }
  80%  { opacity: 1; transform: scale(0.95); }
  100% { transform: scale(1); }
}

@-webkit-keyframes spin {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.container {
  border-radius: 50%;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  position: absolute;
  top: 50%;
  width: 200px;
}
.container .maincaption {
  -webkit-transition: opacity .2s ease;
          transition: opacity .2s ease;
  -webkit-animation: spin 60s infinite linear;
          animation: spin 60s infinite linear;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
  color: #AAA;
  display: block;
  font-size: 20px;
  height: 130px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: -30px;
  width: 130px;
}
.loaded .container .maincaption {
  -webkit-transition: opacity 1s ease;
          transition: opacity 1s ease;
  opacity: 1;
}
.container .maincaption span {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  display: block;
  height: 100%;
  margin-left: -10px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 20px;
}
.container:hover .maincaption { opacity: 0; }
.container:hover .cover { opacity: 1; visibility: visible; }
.container:hover .cover li { width: 200px; }
.container:hover .cover li.youtube,
.container:hover .cover li.instagram,
.container:hover .cover li.blog { width: 230px; }
.container:hover .cover li.github { width: 218px; }

img.me {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-transition: all .1s ease;
          transition: all .1s ease;
  border-radius: 50%;
  height: 200px;
  left: 50%;
  margin: -100px 0 0 -100px;
  position: absolute;
  top: 50%;
  width: 200px;
  z-index: 99;
  object-fit: cover;
  object-position: center top;
}

.cover {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all .3s ease;
          transition: all .3s ease;
  border-radius: 50%;
  display: block;
  height: 400px;
  left: 50%;
  list-style: none;
  margin: -200px 0 0 -200px;
  opacity: 0;
  padding-left: 0;
  position: relative;
  top: 50%;
  visibility: hidden;
  width: 400px;
  z-index: 3;
}
.cover.visible { opacity: 1; visibility: visible; }
.cover.fadeout li a { opacity: .3; }

.cover li {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition-property: width, margin, opacity, -webkit-transform;
          transition-property: width, margin, opacity, transform;
  -webkit-transition-duration: .4s, .5s, .5s;
          transition-duration: .4s, .5s, .5s;
  -webkit-transition-timing-function: ease, ease, ease;
          transition-timing-function: ease, ease, ease;
  position: absolute;
  right: 50%;
  top: 160px;
  width: 10px;
  z-index: 1;
}
.cover li a {
  -webkit-transition: opacity .4s ease;
          transition: opacity .4s ease;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 75px;
  border-radius: 50%;
  color: #555;
  display: block;
  height: 80px;
  text-decoration: none;
  opacity: 1;
  width: 80px;
  z-index: 0;
  box-sizing: content-box;
}
.cover li a:hover { opacity: 1; }
.cover li a:hover .caption { opacity: 1; }

.cover li a .caption {
  -webkit-transition: opacity .5s ease;
          transition: opacity .5s ease;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-animation: spin 12s infinite linear;
          animation: spin 12s infinite linear;
  height: 50%;
  left: 50%;
  margin-top: -15px;
  opacity: 0;
  padding-bottom: 15px;
  position: absolute;
  top: 0;
}
.cover li a .caption span {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  display: block;
  height: 100%;
  margin-left: -10px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 20px;
}

/* ===== ÂNGULOS ===== */
.cover li:nth-child(1)   { -webkit-transform: rotate(56deg);  transform: rotate(56deg); }
.cover li:nth-child(1) a { -webkit-transform: rotate(-56deg); transform: rotate(-56deg); }

.cover li:nth-child(2)   { -webkit-transform: rotate(101deg); transform: rotate(101deg); }
.cover li:nth-child(2) a { -webkit-transform: rotate(-101deg); transform: rotate(-101deg); }

.cover li:nth-child(3)   { -webkit-transform: rotate(146deg); transform: rotate(146deg); }
.cover li:nth-child(3) a { -webkit-transform: rotate(-146deg); transform: rotate(-146deg); }

.cover li:nth-child(4)   { -webkit-transform: rotate(191deg); transform: rotate(191deg); }
.cover li:nth-child(4) a { -webkit-transform: rotate(-191deg); transform: rotate(-191deg); }

.cover li:nth-child(5)   { -webkit-transform: rotate(236deg); transform: rotate(236deg); }
.cover li:nth-child(5) a { -webkit-transform: rotate(-236deg); transform: rotate(-236deg); }

.cover li:nth-child(6)   { -webkit-transform: rotate(281deg); transform: rotate(281deg); }
.cover li:nth-child(6) a { -webkit-transform: rotate(-281deg); transform: rotate(-281deg); }

.cover li:nth-child(7)   { -webkit-transform: rotate(326deg); transform: rotate(326deg); }
.cover li:nth-child(7) a { -webkit-transform: rotate(-326deg); transform: rotate(-326deg); }

.cover li:nth-child(8)   { -webkit-transform: rotate(371deg); transform: rotate(371deg); }
.cover li:nth-child(8) a { -webkit-transform: rotate(-371deg); transform: rotate(-371deg); }

/* ===== ÍCONES (background) ===== */
.cover li.instagram a { background-image: url("../images/instagram.svg"); }
.cover li.blog      a { background-image: url("../images/blog.svg"); }
.cover li.youtube   a { background-image: url("../images/youtube.svg"); }
.cover li.spotify   a { background-image: url("../images/spotify.svg"); }
.cover li.email     a { background-image: url("../images/email.svg"); }
.cover li.github    a { background-image: url("../images/github.svg"); }
.cover li.linkedin  a { background-image: url("../images/linkedin.svg"); }
.cover li.goodreads a { background-image: url("../images/goodreads.svg"); }

/* ===== CORES POR REDE ===== */
.cover li.instagram a { background-color: #cc8d44; }
.cover li.instagram .caption { color: #5e3e19; }

.cover li.blog a { background-color: #f4a261; }
.cover li.blog .caption { color: #6b3e15; }

.cover li.youtube a { background-color: #ed4747; }
.cover li.youtube .caption { color: #5c0c10; }

.cover li.spotify a { background-color: #59c54a; }
.cover li.spotify .caption { color: #24591d; }

.cover li.email a { background-color: #fadf2c; }
.cover li.email .caption { color: #8a7803; }

.cover li.github a { background-color: #CCC; }
.cover li.github .caption { color: gray; }

.cover li.linkedin a { background-color: #5a9fd4; }
.cover li.linkedin .caption { color: #174675; }

.cover li.goodreads a { background-color: #b08968; }
.cover li.goodreads .caption { color: #5a4530; }

/* ===== STAGGER DELAY ===== */
.cover li:nth-child(1) { -webkit-transition-delay: 0.04s; transition-delay: 0.04s; }
.cover li:nth-child(2) { -webkit-transition-delay: 0.08s; transition-delay: 0.08s; }
.cover li:nth-child(3) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; }
.cover li:nth-child(4) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; }
.cover li:nth-child(5) { -webkit-transition-delay: 0.20s; transition-delay: 0.20s; }
.cover li:nth-child(6) { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; }
.cover li:nth-child(7) { -webkit-transition-delay: 0.28s; transition-delay: 0.28s; }
.cover li:nth-child(8) { -webkit-transition-delay: 0.32s; transition-delay: 0.32s; }

/* ===== ÍCONES MAIORES ===== */
.cover li.youtube,
.cover li.instagram,
.cover li.blog { margin-top: -15px; }
.cover li.youtube a,
.cover li.instagram a,
.cover li.blog a {
  background-size: 95px;
  padding: 15px;
}

/* ===== GITHUB (deslocado) ===== */
.cover li.github { margin-top: -7px; padding-left: 100px; }
.cover li.github a { background-size: 90px; padding: 9px; }

/* ===== ROTAÇÃO LETRA-A-LETRA ===== */
.char-1 { -webkit-transform: rotate(-9.8deg);  transform: rotate(-9.8deg); }
.char0  { -webkit-transform: rotate(0deg);     transform: rotate(0deg); }
.char1  { -webkit-transform: rotate(9.8deg);   transform: rotate(9.8deg); }
.char2  { -webkit-transform: rotate(19.6deg);  transform: rotate(19.6deg); }
.char3  { -webkit-transform: rotate(29.4deg);  transform: rotate(29.4deg); }
.char4  { -webkit-transform: rotate(39.2deg);  transform: rotate(39.2deg); }
.char5  { -webkit-transform: rotate(49deg);    transform: rotate(49deg); }
.char6  { -webkit-transform: rotate(58.8deg);  transform: rotate(58.8deg); }
.char7  { -webkit-transform: rotate(68.6deg);  transform: rotate(68.6deg); }
.char8  { -webkit-transform: rotate(78.4deg);  transform: rotate(78.4deg); }
.char9  { -webkit-transform: rotate(88.2deg);  transform: rotate(88.2deg); }
.char10 { -webkit-transform: rotate(98deg);    transform: rotate(98deg); }
.char11 { -webkit-transform: rotate(107.8deg); transform: rotate(107.8deg); }
.char12 { -webkit-transform: rotate(117.6deg); transform: rotate(117.6deg); }
.char13 { -webkit-transform: rotate(127.4deg); transform: rotate(127.4deg); }
.char14 { -webkit-transform: rotate(137.2deg); transform: rotate(137.2deg); }
.char15 { -webkit-transform: rotate(147deg);   transform: rotate(147deg); }
.char16 { -webkit-transform: rotate(156.8deg); transform: rotate(156.8deg); }
.char17 { -webkit-transform: rotate(166.6deg); transform: rotate(166.6deg); }
.char18 { -webkit-transform: rotate(176.4deg); transform: rotate(176.4deg); }
.char19 { -webkit-transform: rotate(186.2deg); transform: rotate(186.2deg); }
.char20 { -webkit-transform: rotate(196deg);   transform: rotate(196deg); }
.char21 { -webkit-transform: rotate(205.8deg); transform: rotate(205.8deg); }
.char22 { -webkit-transform: rotate(215.6deg); transform: rotate(215.6deg); }
.char23 { -webkit-transform: rotate(225.4deg); transform: rotate(225.4deg); }
.char24 { -webkit-transform: rotate(235.2deg); transform: rotate(235.2deg); }
.char25 { -webkit-transform: rotate(245.0deg); transform: rotate(245.0deg); }
.char26 { -webkit-transform: rotate(254.8deg); transform: rotate(254.8deg); }
.char27 { -webkit-transform: rotate(264.6deg); transform: rotate(264.6deg); }
.char28 { -webkit-transform: rotate(274.4deg); transform: rotate(274.4deg); }
.char29 { -webkit-transform: rotate(284.2deg); transform: rotate(284.2deg); }
.char30 { -webkit-transform: rotate(294deg);   transform: rotate(294deg); }
.char31 { -webkit-transform: rotate(303.8deg); transform: rotate(303.8deg); }
.char32 { -webkit-transform: rotate(313.6deg); transform: rotate(313.6deg); }
.char33 { -webkit-transform: rotate(323.4deg); transform: rotate(323.4deg); }
.char34 { -webkit-transform: rotate(333.2deg); transform: rotate(333.2deg); }
.char35 { -webkit-transform: rotate(343deg);   transform: rotate(343deg); }
.char36 { -webkit-transform: rotate(352.8deg); transform: rotate(352.8deg); }

/* ==================================================================
   MOBILE / TOUCH
   - pulse mínimo no container inteiro enquanto recolhido
   - .expanded espelha o :hover desktop e escala pra caber na viewport
   - tap em um ícone foca (mostra caption rotativo + blur nos outros)
   - segundo tap no mesmo ícone abre o link
   ================================================================== */
@media (hover: none) and (pointer: coarse) {

  /* Base scale fixo pra caber em telas estreitas E pra evitar quirk do iOS
     Safari onde animação que muda transform deixava o elemento travado no
     último valor da animação ao trocar de regra. Mantendo o mesmo transform
     base nos dois estados (recolhido e expandido), o pulse só adiciona +4%
     em cima — sem race condition. */
  .container {
    -webkit-transform: scale(0.85);
            transform: scale(0.85);
  }

  @-webkit-keyframes pulse {
    0%, 100% { -webkit-transform: scale(0.85); }
    50%      { -webkit-transform: scale(0.884); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(0.85); }
    50%      { transform: scale(0.884); }
  }

  body.loaded .container:not(.expanded) {
    -webkit-animation: pulse 2.4s ease-in-out infinite;
            animation: pulse 2.4s ease-in-out infinite;
  }

  /* Para o pulse explicitamente quando expandido (override do rule de cima) */
  .container.expanded {
    -webkit-animation: none;
            animation: none;
  }

  /* Rebalanceia a bounding box dos ícones: como Instagram (slot 4) cai
     exatamente no ângulo "direita pura", ela estende ~23px mais pra direita
     do que Blog estende pra esquerda. Shift do .cover compensa. */
  .container.expanded .cover {
    margin-left: -213px;
  }

  .me { cursor: pointer; }

  /* Espelha :hover quando .expanded */
  .container.expanded .maincaption { opacity: 0; }
  .container.expanded .cover { opacity: 1; visibility: visible; }
  .container.expanded .cover li { width: 200px; }
  .container.expanded .cover li.youtube,
  .container.expanded .cover li.instagram,
  .container.expanded .cover li.blog { width: 230px; }
  .container.expanded .cover li.github { width: 218px; }

  /* Estado .focused (primeiro tap num ícone): caption gira em volta + outros borram */
  .cover li.focused a .caption { opacity: 1; }
  .cover.fadeout li.focused a { opacity: 1; }
}