/* Eu.Soul — fundação estética (paleta e tipografia da marca pessoal da Marcella) */

:root {
  --ink:    #29223D;
  --blue:   #0275C0;
  --cyan:   #04AFDB;
  --green:  #05763B;
  --gold:   #F2C74A;
  --orange: #DB572A;
  --purple: #744D8A;

  --bg:     #FFFDF9;
  --paper:  #FFFFFF;
  --muted:  #6B667C;

  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', 'Century Gothic', 'Futura', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.wordmark {
  font-weight: 200;
  letter-spacing: 0.02em;
}

.wordmark .dot {
  color: var(--purple);
  font-weight: 400;
}

/* faixa de gradiente que ecoa as cores da borboleta */
.spectrum-rule {
  height: 3px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--green), var(--cyan), var(--blue), var(--purple), var(--orange), var(--gold), var(--green)
  );
  background-size: 200% 100%;
  opacity: 0.85;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}

a { color: var(--blue); }

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* fluxo — tudo entra suavemente, nada aparece de repente */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  opacity: 0;
  animation: fade-rise 1s ease both;
}

.fade-in:nth-of-type(1) { animation-delay: 0.1s; }
.fade-in:nth-of-type(2) { animation-delay: 0.6s; }
.fade-in:nth-of-type(3) { animation-delay: 0.9s; }

.portal {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.portal .mark {
  transition: transform 0.5s ease;
}

.portal:hover .mark {
  transform: scale(1.05) translateY(-4px);
}

/* transição nativa entre páginas — o mesmo elemento "flui" de uma tela pra outra */
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}