/* ==========================================================================
   CIEL — tatuador, Belo Horizonte
   Página curta: identidade, links e um carrossel. Preto e branco, como o
   trabalho: papel no fundo, tinta preta na ação e no hero, uma luz só
   vindo do alto à esquerda (as sombras caem para baixo e para a direita).
   ========================================================================== */

:root {
  /* cor */
  --papel: #ECEAF0;        /* fundo */
  --folha: #F7F6F9;        /* superfícies sobre o papel */
  --grafite: #1C1A21;      /* texto */
  --grafite-2: #5D5966;    /* texto de apoio (5.6:1 no papel) */
  --tinta: #0E0C11;        /* ação, hero, pálpebras e rodapé */
  --tinta-alta: #2A2730;   /* botão preto sob o cursor */
  --sombra: 28 26 33;      /* sombras tingidas de grafite */

  /* tipografia */
  --f-display: 'Gloock', 'Times New Roman', serif;
  --f-texto: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --m-fast: 140ms;
  --m-standard: 220ms;
  --m-scene: 460ms;
  --abertura-dur: 2400ms;
  --e-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --e-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --e-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --press: 0.975;

  /* sombras de objeto */
  --sombra-folha:
    1px 1px 1px rgb(var(--sombra) / 0.16),
    4px 8px 14px -4px rgb(var(--sombra) / 0.22),
    12px 24px 38px -14px rgb(var(--sombra) / 0.42);
  --sombra-leve:
    1px 1px 1px rgb(var(--sombra) / 0.10),
    3px 6px 14px -6px rgb(var(--sombra) / 0.22);

  /* grão de papel, estático */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .10 0 0 0 0 .13 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* viewport */
  --g: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* hero curto: os links aparecem já na primeira tela */
  --hero-h: clamp(320px, 45vh, 460px);
}

@supports (height: 100svh) {
  :root { --hero-h: clamp(320px, 45svh, 460px); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --press: 1; }
}

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--grafite);
  background-color: var(--papel);
  background-image: var(--grao);
  font: 400 17px/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--grafite);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :focus-visible,
.rodape :focus-visible,
.visor :focus-visible { outline-color: var(--papel); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: calc(8px + var(--safe-top));
  left: 8px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--folha);
  color: var(--grafite);
  border-radius: 10px;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.shell {
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- botão preto ---------- */

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--tinta);
  color: var(--folha);
  font: 600 16.5px/1.2 var(--f-texto);
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 0 0 1px rgb(236 234 240 / 0.3),
    0 12px 26px -12px rgb(0 0 0 / 0.9);
  transition: transform var(--m-fast) var(--e-standard), background-color var(--m-fast) var(--e-standard);
}
.btn-primary i { font-size: 21px; }
.btn-primary:active { transform: translateY(1px) scale(var(--press)); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background-color: var(--tinta-alta); }
}

/* ==========================================================================
   ABERTURA — contraste, profundidade, atmosfera
   As três palavras do texto do Ciel viram as três etapas de uma tatuagem:
   o traço nasce da ponta da agulha, a sombra entra em pontilhismo e a foto
   recolhe até virar o topo da página. Só com JS, uma vez por sessão, e
   termina sozinha pelo CSS mesmo se o script falhar.
   ========================================================================== */

@property --ponto {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.abertura { display: none; }

.js .abertura {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  /* o quadro nasce do tamanho da tela */
  --qw: min(100vw, 560px);
  --qh: 100vh;
  animation: abertura-fim var(--abertura-dur) linear forwards;
}
@supports (height: 100dvh) {
  .js .abertura { --qh: 100dvh; }
}
.abertura-vista .abertura,
.abertura-pulada .abertura { display: none; }

/* o papel da página, com o mesmo grão */
.abertura-papel {
  position: absolute;
  inset: 0;
  background: var(--papel) var(--grao);
  animation: some 450ms var(--e-standard) 1800ms forwards;
}

.abertura-quadro {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 560px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 30px 44px -32px rgb(var(--sombra) / 0.7);
  /* ponta da agulha na foto (19,3% x 81,3%) levada para o quadro pelo
     mesmo object-fit: cover do hero, sem JS */
  --ax: min(calc(var(--qw) * 0.193), calc(var(--qw) * 0.52 - var(--qh) * 0.2175));
  --ay: max(calc(var(--qh) * 0.813), calc(var(--qh) * 0.4 + var(--qw) * 0.621));
  /* atmosfera: o quadro recolhe até o tamanho exato do hero */
  animation: recolhe 600ms var(--e-emphasis) 1700ms both;
}

.abertura-foto,
.abertura-traco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 40%;   /* igual ao hero: no fim o quadro encaixa nele */
}

/* profundidade: a foto entra por pontos que crescem, como sombreamento pontilhado */
.abertura-foto {
  -webkit-mask-image: radial-gradient(circle, #000 var(--ponto), transparent calc(var(--ponto) * 1.12));
  mask-image: radial-gradient(circle, #000 var(--ponto), transparent calc(var(--ponto) * 1.12));
  -webkit-mask-size: 9px 9px;
  mask-size: 9px 9px;
  animation: pontos 760ms cubic-bezier(0.55, 0, 0.35, 1) 950ms both;
}

/* contraste: o traço se espalha a partir da ponta da agulha */
.abertura-traco {
  clip-path: circle(0px at var(--ax) var(--ay));
  animation:
    traco 780ms cubic-bezier(0.55, 0, 0.3, 1) 280ms both,
    some 320ms var(--e-standard) 1400ms forwards;
}

/* o mesmo véu do hero entra enquanto o quadro recolhe */
.abertura-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(14 12 17 / 0) 0%,
    rgb(14 12 17 / 0) 52%,
    rgb(14 12 17 / 0.7) 76%,
    rgb(14 12 17 / 0.94) 100%);
  opacity: 0;
  animation: aparece-fica 420ms var(--e-standard) 1900ms both;
}

/* a máquina liga: um ponto de tinta e uma onda na ponta da agulha */
.abertura-agulha {
  position: absolute;
  left: var(--ax);
  top: var(--ay);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--tinta);
  animation: agulha 820ms var(--e-enter) 100ms both;
}
.abertura-agulha::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
  animation: onda 700ms var(--e-enter) 240ms both;
}

/* as palavras do próprio Ciel, uma por etapa; difference inverte a cor
   sozinha: escura sobre o papel, clara sobre a foto. Presas ao quadro,
   sobem junto quando ele recolhe e entregam o lugar para o nome */
.abertura-palavras {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  height: 1.25em;
  margin: 0;
  color: #fff;
  font: 400 clamp(38px, 11vw, 52px)/1.25 var(--f-display);
  text-align: center;
  mix-blend-mode: difference;
  pointer-events: none;
}
.abertura-palavras span {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: palavra 720ms var(--e-standard) both;
}
.abertura-palavras span:nth-child(1) { animation-delay: 350ms; }
.abertura-palavras span:nth-child(2) { animation-delay: 1030ms; }
.abertura-palavras span:nth-child(3) { animation-delay: 1680ms; animation-duration: 640ms; }

@keyframes abertura-fim {
  0%, 99% { visibility: visible; }
  100% { visibility: hidden; }
}
@keyframes traco { to { clip-path: circle(150vmax at var(--ax) var(--ay)); } }
/* a foto só existe a partir do primeiro ponto: com raio zero o navegador
   ainda pinta um pixel por célula, o que sujaria o traço */
@keyframes pontos {
  0% { --ponto: 0px; opacity: 0; }
  1% { opacity: 1; }
  100% { --ponto: 7px; opacity: 1; }
}
@keyframes recolhe { to { height: var(--hero-h); } }
@keyframes some { to { opacity: 0; } }
@keyframes aparece-fica { to { opacity: 1; } }
@keyframes agulha {
  0% { transform: scale(0); opacity: 1; }
  25% { transform: scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: scale(0.6); opacity: 0; }
}
@keyframes onda {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(6); opacity: 0; }
}
@keyframes palavra {
  0% { opacity: 0; transform: translateY(12px); }
  30%, 72% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-8px); }
}

@media (min-width: 600px) {
  .abertura-quadro { border-radius: 0 0 6px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .abertura { display: none; }
}

/* ==========================================================================
   IDENTIDADE
   ========================================================================== */

.hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  isolation: isolate;
  background: var(--tinta);
  color: var(--papel);
  /* uma folha escura deitada sobre o papel */
  box-shadow: 0 30px 44px -32px rgb(var(--sombra) / 0.7);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 52% 40%: o mesmo enquadramento do quadro da abertura, que encaixa aqui */
  object-position: 52% 40%;
  transform-origin: 52% 40%;
}

.hero-veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgb(14 12 17 / 0) 0%,
    rgb(14 12 17 / 0) 52%,
    rgb(14 12 17 / 0.7) 76%,
    rgb(14 12 17 / 0.94) 100%);
}

.hero-texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 var(--g) 20px;
}
.hero-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgb(236 234 240 / 0.85);
}

.marca {
  font: 400 clamp(52px, 16vw, 68px)/0.9 var(--f-display);
  /* o espaçamento largo é a assinatura do perfil: C I E L */
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}
.marca-linha { display: block; overflow: hidden; padding-bottom: 0.06em; }
.marca-linha > span { display: block; }

.onde {
  padding: 16px var(--g) 0;
  max-width: 34ch;
  color: var(--grafite-2);
  font-size: 15.5px;
  line-height: 1.45;
}

/* entrada da identidade: começa quando o quadro da abertura encaixa no hero */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.abertura-vista):not(.abertura-pulada) .marca-linha > span { animation: sobe 700ms var(--e-enter) 2250ms both; }
  .js:not(.abertura-vista):not(.abertura-pulada) .hero-avatar { animation: aparece 450ms var(--e-standard) 2380ms both; }
}
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { transform: translateY(104%); } }

/* ==========================================================================
   LINKS
   ========================================================================== */

.links {
  display: grid;
  gap: 8px;
  padding: 14px var(--g) 0;
}

.canal {
  display: grid;
  grid-template-columns: 30px 1fr 16px;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 18px;
  border-radius: 12px;
  background: var(--folha);
  color: var(--grafite);
  text-decoration: none;
  box-shadow: var(--sombra-leve);
  transition: transform var(--m-fast) var(--e-standard), box-shadow var(--m-fast) var(--e-standard);
}
.canal:active { transform: translateY(1px) scale(0.99); box-shadow: 1px 1px 2px rgb(var(--sombra) / 0.14); }
.canal > i:first-child,
.canal-mail a > i { font-size: 22px; text-align: center; }
.canal b { display: block; font-weight: 600; line-height: 1.3; }
.canal small { display: block; color: var(--grafite-2); font-size: 14.5px; line-height: 1.35; }
.canal .seta { font-size: 13px; color: var(--grafite-2); }

/* o WhatsApp é a ação: o único link em preto */
.canal-wa {
  background: var(--tinta);
  color: var(--folha);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    3px 8px 18px -8px rgb(var(--sombra) / 0.6);
}
.canal-wa small,
.canal-wa .seta { color: rgb(236 234 240 / 0.72); }
@media (hover: hover) and (pointer: fine) {
  .canal:hover { box-shadow: 2px 5px 16px -6px rgb(var(--sombra) / 0.3); }
  .canal-wa:hover { background: var(--tinta-alta); }
}

.canal-mail {
  grid-template-columns: 1fr 48px;
  padding: 0 7px 0 0;
}
.canal-mail:active { transform: none; box-shadow: var(--sombra-leve); }
.canal-mail a {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 0 8px 18px;
  border-radius: 12px;
  text-decoration: none;
}
.canal-mail a small { word-break: break-all; }
.btn-copiar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--papel);
  color: var(--grafite);
  font-size: 17px;
  transition: transform var(--m-fast) var(--e-standard), background-color var(--m-fast) var(--e-standard), color var(--m-fast) var(--e-standard);
}
.btn-copiar:active { transform: scale(0.94); }
.btn-copiar.is-ok { background: var(--tinta); color: var(--folha); }

/* ==========================================================================
   CARROSSEL
   ========================================================================== */

.galeria { padding-top: 64px; }

.galeria-texto { padding: 0 var(--g); }
.galeria h2 {
  max-width: 21ch;
  font: 400 clamp(26px, 7.4vw, 32px)/1.12 var(--f-display);
  letter-spacing: -0.005em;
}
.galeria-texto p {
  margin-top: 14px;
  max-width: 36ch;
  color: var(--grafite-2);
}

/* cabeçalho de post, como no feed do Instagram */
.post-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 22px;
  padding: 0 var(--g);
  color: var(--grafite);
  font-size: 15px;
  text-decoration: none;
}
.post-topo img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.post-topo b { font-weight: 600; }
.post-topo i { font-size: 13px; color: var(--tinta); }

/* carrossel de post: foto de ponta a ponta, uma por deslize, scroll nativo */
.carrossel { position: relative; }

.carrossel-lista {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--tinta);
}
.carrossel-lista::-webkit-scrollbar { display: none; }
.carrossel-lista:focus-visible { outline-offset: -3px; }

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;   /* um deslize, uma foto — como no Instagram */
}

.slide-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* 3:4, o retrato do Instagram; a foto inteira aparece ao tocar */
.slide-face {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--tinta);
}
.slide-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* contador no canto, como no post */
.carrossel-contador {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(14 12 17 / 0.72);
  color: var(--folha);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* bolinhas: indicam a posição, o gesto é o deslize */
.carrossel-pontos {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding-top: 14px;
}
.carrossel-pontos span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--sombra) / 0.24);
  transition: background-color var(--m-standard) var(--e-standard), transform var(--m-standard) var(--e-standard);
}
.carrossel-pontos span.is-on { background: var(--tinta); transform: scale(1.15); }

/* setas só para quem usa mouse; no celular o gesto é o deslize */
.nav-btn {
  position: absolute;
  top: calc(50% - 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(247 246 249 / 0.9);
  color: var(--tinta);
  font-size: 15px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.3);
  transition: opacity var(--m-standard) var(--e-standard), transform var(--m-fast) var(--e-standard);
}
.nav-ant { left: 12px; }
.nav-seg { right: 12px; }
.nav-btn:active { transform: scale(0.92); }
.nav-btn:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) {
  .nav-btn { display: none; }
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.rodape {
  margin-top: 72px;
  padding: 30px var(--g) calc(26px + var(--safe-bottom));
  background: var(--tinta);
  color: rgb(236 234 240 / 0.74);
  text-align: center;
  font-size: 14.5px;
}
.rodape a {
  display: inline-block;
  padding: 13px 4px;
  color: var(--papel);
  text-underline-offset: 4px;
}

/* ==========================================================================
   VISOR
   ========================================================================== */

.visor {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--papel);
}
.visor::backdrop { background: rgb(14 12 17 / 0.94); }
.visor[open] { animation: aparece var(--m-standard) var(--e-standard); }
html:has(.visor[open]) { overflow: hidden; }

.visor-corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(70px + var(--safe-top)) 16px calc(20px + var(--safe-bottom));
}
.visor-img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border-radius: 4px;
}
.visor-t { font: 400 26px/1.1 var(--f-display); }
.visor-info { display: grid; gap: 14px; }
.visor-fechar {
  position: absolute;
  top: calc(12px + var(--safe-top));
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(236 234 240 / 0.12);
  color: var(--papel);
  font-size: 20px;
  transition: transform var(--m-fast) var(--e-standard);
}
.visor-fechar:active { transform: scale(0.92); }

::view-transition-group(foto-visor) {
  animation-duration: var(--m-scene);
  animation-timing-function: var(--e-emphasis);
}

/* ==========================================================================
   TOAST
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  z-index: 150;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 15px;
  font-weight: 500;
  box-shadow: 4px 12px 26px -8px rgb(var(--sombra) / 0.55);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity var(--m-standard) var(--e-standard), transform var(--m-standard) var(--e-enter);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-on { transform: translate(-50%, 0); }
}

@media (min-width: 600px) {
  .hero { border-radius: 0 0 6px 6px; }
}