/* =========================================================
   Aoris Tattoo — o códice noturno
   Cor tirada do logo (violeta-preto + rosa-prata) e do feed em P&B.
   ========================================================= */

:root {
  /* cor */
  --nanquim: #17131B;      /* fundo, o preto violeta do logo */
  --grafite: #241F29;      /* superfície: folha, barra */
  --osso: #EEE6EB;         /* texto */
  --rosa-prata: #EBB9D0;   /* só na ação principal e no nome */
  --prata: #A9A1AE;        /* anotações e linhas de construção */
  --linha: rgb(169 161 174 / 0.22);

  /* tipo */
  --f-gotica: "Grenze Gotisch", "UnifrakturMaguntia", Georgia, serif;
  --f-texto: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 480ms;
  --motion-assinatura: 1150ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --press-scale: 0.97;
  --foco-inicial: 1.06;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
    --foco-inicial: 1;
    --motion-scene: 200ms;
  }
}

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

html {
  background: var(--nanquim);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nanquim);
  color: var(--osso);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, p, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--rosa-prata);
  outline-offset: 3px;
  border-radius: 4px;
}

.abertura,
main > section,
.rodape {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 6px;
  font-family: var(--f-texto);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }

.btn-principal {
  background: var(--rosa-prata);
  color: var(--nanquim);
}
.btn-principal:active { background: #F4D2E1; }
.btn-principal i { font-size: 19px; }

.btn-traco {
  border: 1px solid var(--linha);
  color: var(--osso);
  font-weight: 500;
}
.btn-traco:active { border-color: var(--prata); background: rgb(238 230 235 / 0.05); }

@media (hover: hover) and (pointer: fine) {
  .btn-principal:hover { background: #F4D2E1; }
  .btn-traco:hover { border-color: var(--prata); }
}

/* ---------- abertura ---------- */

.abertura {
  padding-top: calc(18px + var(--safe-top));
  padding-bottom: 56px;
}

.assinatura {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linha), 0 0 0 4px var(--nanquim), 0 0 0 5px var(--linha);
}
.arroba {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--prata);
  font-size: 15px;
  text-decoration: none;
}

.prancha-mestra {
  position: relative;
  width: min(100%, 36vh);
  width: min(100%, 36svh);
  margin: 14px auto 0;
  aspect-ratio: 446 / 591;
}

/* sfumato: a foto dissolve na sombra, sem contorno duro */
.sfumato {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 44%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 62% at 50% 44%, #000 50%, transparent 100%);
}
.sfumato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.construcao {
  position: absolute;
  inset: -3% -12%;
  width: 124%;
  height: 106%;
  fill: none;
  stroke: var(--prata);
  stroke-width: 0.22;
  opacity: 0.5;
  pointer-events: none;
}
.construcao circle,
.construcao rect,
.construcao path { stroke-dasharray: 400; stroke-dashoffset: 0; }

.nota {
  position: absolute;
  color: var(--prata);
  font-size: 13px;
  line-height: 1.35;
}
.nota-mao {
  right: -8%;
  top: 6%;
  max-width: 13ch;
  text-align: right;
}
.nota-traco {
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 0 6px auto;
  background: var(--prata);
  opacity: 0.6;
}

.nome {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: -0.42em;
  font-family: var(--f-gotica);
  font-weight: 700;
  line-height: 0.95;
  font-size: clamp(66px, 21vw, 92px);
  perspective: 700px;
}
.nome-aoris {
  display: inline-block;
  padding: 0 0.04em;
  background: linear-gradient(172deg, #FFF3F9 8%, var(--rosa-prata) 44%, #B9A7B6 62%, #F6DCE8 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  backface-visibility: visible;
}
.nome-tattoo {
  font-size: 0.34em;
  font-weight: 500;
  color: var(--prata);
}

.tese {
  max-width: 34ch;
  margin: 22px auto 0;
  text-align: center;
  font-size: 17px;
}
.lugar {
  margin-top: 10px;
  text-align: center;
  color: var(--prata);
  font-size: 14px;
}
.lugar i { margin-right: 4px; font-size: 13px; }

.acoes {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- códice ---------- */

.codice { padding-top: 40px; padding-bottom: 72px; border-top: 1px solid var(--linha); }

.cabeca h2,
.oficio h2 {
  font-family: var(--f-gotica);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.05;
  color: var(--osso);
}
.cabeca p {
  max-width: 36ch;
  margin-top: 12px;
  color: var(--prata);
}

.filtros {
  display: flex;
  gap: 4px;
  margin: 26px calc(var(--gutter) * -1) 22px;
  padding-inline: calc(var(--gutter) - 10px);
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: none;
  min-height: 48px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--prata);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) var(--ease-standard);
}
.filtro::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 2px;
  background: var(--rosa-prata);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-standard) var(--ease-emphasis);
}
.filtro[aria-pressed="true"] { color: var(--osso); }
.filtro[aria-pressed="true"]::after { transform: scaleX(1); }
.filtro:active { color: var(--osso); }

.estudos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  gap: 22px 12px;
}
.estudo[hidden] { display: none; }
.e-larga { grid-column: span 2; }
.e-alta { grid-row: span 2; }

.estudo-abrir {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.estudo-img {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--grafite);
  box-shadow: inset 0 0 0 1px var(--linha);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.e-alta .estudo-img { flex: 1; aspect-ratio: auto; min-height: 220px; }
.e-larga .estudo-img { aspect-ratio: 16 / 10; }
.estudo-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.estudo-abrir:active .estudo-img { transform: scale(var(--press-scale)); }

.estudo-titulo {
  margin-top: 10px;
  font-family: var(--f-gotica);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.1;
}
.estudo-nota {
  margin-top: 3px;
  color: var(--prata);
  font-size: 13px;
  line-height: 1.35;
}

/* ajuste de foco: a imagem entra como lente que acha o ponto */
.js .estudo-img img {
  opacity: 0;
  transform: scale(var(--foco-inicial));
  transition:
    opacity var(--motion-scene) var(--ease-enter),
    transform 900ms var(--ease-enter);
}
.js .estudo.is-in .estudo-img img { opacity: 1; transform: none; }

.vazio { margin-top: 12px; color: var(--prata); }

/* ---------- ofício ---------- */

.oficio { padding-bottom: 72px; }
.passos {
  margin-top: 26px;
  counter-reset: passo;
  display: grid;
  gap: 26px;
}
.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 14px;
}
.passos li::before {
  content: counter(passo, upper-roman);
  grid-row: span 2;
  font-family: var(--f-texto);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--rosa-prata);
  padding-top: 2px;
}
.passo-t { font-weight: 600; font-size: 17px; }
.passos li p:not(.passo-t) { color: var(--prata); }

/* ---------- convite ---------- */

.convite {
  position: relative;
  padding-top: 56px;
  padding-bottom: 64px;
  text-align: center;
  border-top: 1px solid var(--linha);
  overflow: hidden;
}
/* eco da assinatura: escrita ao espelho, como nos cadernos de Leonardo */
.convite-espelho {
  font-family: var(--f-gotica);
  font-weight: 700;
  font-size: clamp(70px, 24vw, 110px);
  line-height: 0.9;
  color: var(--osso);
  opacity: 0.07;
  transform: scaleX(-1);
  white-space: nowrap;
  user-select: none;
}
.convite h2 {
  max-width: 17ch;
  margin: -0.55em auto 26px;
  position: relative;
  font-family: var(--f-gotica);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
}
.convite .btn { width: 100%; }

.redes { margin-top: 18px; display: grid; }
.redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  color: var(--osso);
  text-decoration: none;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
.redes a:active { color: var(--rosa-prata); }
.redes i { color: var(--prata); }

/* ---------- barra fixa ---------- */

.barra-cta { display: none; }
.js .barra-cta {
  display: block;
  position: fixed;
  z-index: 20;
  inset-inline: 0;
  bottom: 0;
  padding: 12px var(--gutter) calc(12px + var(--safe-bottom));
  background: linear-gradient(to top, var(--nanquim) 62%, rgb(23 19 27 / 0));
  transform: translateY(110%);
  transition: transform var(--motion-emphasis) var(--ease-exit);
  pointer-events: none;
}
.js .barra-cta.is-on {
  transform: none;
  transition-timing-function: var(--ease-enter);
  pointer-events: auto;
}
.barra-cta .btn { width: 100%; max-width: 520px; margin-inline: auto; display: flex; }

/* ---------- folha (detalhe do estudo) ---------- */

.folha {
  width: 100%;
  max-width: 560px;
  max-height: 94vh;
  max-height: 94svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: var(--grafite);
  color: var(--osso);
  overflow: auto;
  overscroll-behavior: contain;
}
.folha::backdrop { background: rgb(10 8 12 / 0.72); }
.folha[open] { animation: folha-sobe var(--motion-emphasis) var(--ease-enter); }
.folha[open]::backdrop { animation: some-aparece var(--motion-emphasis) var(--ease-standard); }
html:has(.folha[open]) { overflow: hidden; }

@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes some-aparece { from { opacity: 0; } }

.folha-corpo { padding: 10px 16px calc(16px + var(--safe-bottom)); }
.folha-topo { display: flex; justify-content: flex-end; }
.folha-fechar,
.folha-passo {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.folha-fechar { border-color: transparent; font-size: 20px; }
.folha-fechar:active,
.folha-passo:active { transform: scale(var(--press-scale)); }

.folha-img {
  margin-top: 4px;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 1;
  background: var(--nanquim);
}
.folha-img img { width: 100%; height: 100%; object-fit: cover; }
.folha-img.is-trocando img { animation: some-aparece var(--motion-standard) var(--ease-standard); }

.folha-fig figcaption { padding: 14px 2px 0; }
.folha-titulo {
  font-family: var(--f-gotica);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.05;
}
.folha-nota { margin-top: 4px; color: var(--prata); font-size: 15px; }

.folha-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.folha-nav .btn { flex: 1; padding: 0 12px; }

/* ---------- rodapé ---------- */

.rodape {
  padding-top: 28px;
  padding-bottom: calc(32px + var(--safe-bottom));
  border-top: 1px solid var(--linha);
  text-align: center;
  color: var(--prata);
  font-size: 13px;
}

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  text-align: left;
  font-size: 13px;
  line-height: 1.35;
  color: var(--osso);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.credito-txt { color: var(--prata); }
.credito-txt strong {
  display: block;
  color: var(--osso);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--rosa-prata);
  --seal-ring: 0.4 1.4;          /* pontilhado, como dotwork */
  --seal-font: var(--f-texto);
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.8px;
}
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }
.credito:active .selo-b2 { rotate: -10deg; }
.selo-giro { transform-box: view-box; transform-origin: 50px 50px; }

@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

/* =========================================================
   Assinatura: o nome nasce escrito ao espelho e vira para
   quem lê, como nos cadernos de Leonardo. As linhas de
   construção do estudo se traçam antes. Um único momento.
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {
  .js .nome-aoris {
    transform: rotateY(180deg);
    transition: transform var(--motion-assinatura) var(--ease-emphasis) 520ms;
  }
  .js .nome-aoris.is-lido { transform: none; }

  .js .construcao circle,
  .js .construcao rect,
  .js .construcao path {
    stroke-dashoffset: 400;
    animation: traca 1400ms var(--ease-standard) 120ms forwards;
  }
  .js .construcao rect { animation-delay: 260ms; }
  .js .construcao path { animation-delay: 380ms; }

  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still,
  .selo-b2.is-still .selo-giro,
  .is-page-hidden .selo-b2,
  .is-page-hidden .selo-giro { animation-play-state: paused; }
}

@keyframes traca { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
  .folha[open] { animation-name: some-aparece; }
  .js .barra-cta { transition: opacity var(--motion-standard) linear; transform: none; opacity: 0; }
  .js .barra-cta.is-on { opacity: 1; }
}

/* ---------- telas maiores: mesma coluna, mais ar ---------- */

@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .abertura { padding-top: calc(36px + var(--safe-top)); }
}

@media (max-width: 350px) {
  :root { --gutter: 16px; }
  .cabeca h2, .oficio h2 { font-size: 34px; }
  .convite h2 { font-size: 30px; }
  .estudo-titulo { font-size: 21px; }
}