:root {
  --washi: #F3ECDF;
  --sumi: #14110F;
  --sol: #E2301B;
  --ouro: #F7C400;
  --mata: #0B5A3C;

  --display: 'Dela Gothic One', 'Hiragino Kaku Gothic ProN', 'Arial Black', sans-serif;
  --body: 'Zen Kaku Gothic New', 'Hiragino Sans', system-ui, sans-serif;

  --gutter: clamp(16px, 3vw, 44px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .05 .24 0 0 0 -.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--washi);
  color: var(--sumi);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .25em; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 4px; }

/* ---------- Barra de progresso ---------- */

.progress { display: none; }
.motion .progress {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  height: 3px;
  background: var(--sol);
  transform-origin: 0 50%;
  scale: var(--progress, 0) 1;
}

/* ---------- Navegação ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  padding: 14px var(--gutter);
  font-weight: 700;
  pointer-events: none;
}
.nav nav { display: flex; gap: 6px; }
.nav a {
  padding: .15em .6em;
  background: var(--washi);
  pointer-events: auto;
}
.nav > a { margin-left: -.6em; }

/* ---------- Abertura ---------- */

.stage { position: relative; }
.pin {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--washi) var(--grain);
}
.motion .stage { height: 380svh; }
.motion .pin { position: sticky; top: 0; }

.poster { position: absolute; inset: 0; }

/* A foto do torii cobre a tela e é posicionada em coordenadas da própria imagem,
   para que o portal fique enquadrado e a câmera possa atravessá-lo. */
.scene {
  --focus: .5; /* ponto horizontal da foto mantido no centro da tela */
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 179.2svh);
  aspect-ratio: 2000 / 1116;
  translate: calc(var(--focus) * -100%) -50%;
  transform-origin: 46.9% 58.6%; /* centro do vão do portal */
}
.motion .scene { will-change: scale; }
.scene img { width: 100%; height: 100%; max-width: none; }
.scene-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 42%, rgba(20, 17, 15, .38) 64%, rgba(20, 17, 15, .62));
}

.tagline, h1, .scroll-hint {
  opacity: calc(1 - var(--out, 0));
  translate: 0 calc(var(--out, 0) * -48px);
}

.tagline {
  position: absolute;
  top: 72px;
  left: var(--gutter);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.25;
}

h1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 61.5svh;
  color: var(--washi);
  text-align: center;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc((100vw - 2 * var(--gutter)) / 10.6);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(20, 17, 15, .35);
}
h1 span { display: inline-block; }

.scroll-hint { display: none; }
.motion .scroll-hint {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 3svh, 32px);
  color: var(--washi);
  text-align: center;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
}
.motion .scroll-hint::after {
  content: '';
  display: block;
  width: 1.5px;
  height: 28px;
  margin: 10px auto 0;
  background: currentColor;
  transform-origin: top;
  animation: hint 1.8s var(--ease) infinite;
}
@keyframes hint {
  0% { scale: 1 0; }
  50% { scale: 1 1; transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { scale: 1 0; transform-origin: bottom; }
}

.art, .pan-label { display: none; }

.motion .art {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  will-change: clip-path;
}
.art img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  will-change: transform;
}

.motion .pan-label {
  display: block;
  position: absolute;
  left: var(--gutter);
  bottom: var(--gutter);
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height: 1;
}
.pan-label span {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .4em .6em;
  background: var(--washi);
  opacity: 0;
}

.motion h1 span { animation: rise .9s .15s var(--ease) backwards; }
.motion h1 span + span { animation-delay: .27s; }
.motion .scene img { animation: settle 1.6s var(--ease) backwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(40%); }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.06); }
}

/* ---------- Imagens das obras ---------- */

.sheet {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  rotate: var(--tilt, 0deg);
  transition: scale .5s var(--ease);
}
button.sheet { cursor: zoom-in; }
button.sheet:hover { scale: 1.015; }
.sheet img {
  width: 100%;
  box-shadow: 0 14px 32px rgba(20, 17, 15, .3);
}

/* ---------- Obras ---------- */

.works {
  position: relative;
  overflow: clip;
  background: var(--mata) var(--grain);
  color: var(--washi);
  padding: clamp(72px, 11vw, 170px) var(--gutter);
  display: grid;
  gap: clamp(88px, 12vw, 190px);
}

.work { display: grid; gap: clamp(28px, 3vw, 44px); }
.work:nth-child(even) .sheet { width: min(100%, 74vw, 100svh); justify-self: end; }

.work-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
}
.work-meta h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 7rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.work-meta p { font-weight: 700; }

/* ---------- Artista ---------- */

.artist {
  overflow: clip;
  background: var(--ouro) var(--grain);
  padding: clamp(72px, 11vw, 170px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.artist-photo { --tilt: -1.4deg; }
.artist-text h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: .45em;
}
.artist-text p {
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  line-height: 1.35;
  max-width: 26em;
}

/* ---------- Movimento ligado à rolagem ---------- */

/* Entrada: cada bloco sobe e aparece uma vez */
.motion .work,
.motion .artist-media,
.motion .artist-text {
  opacity: 0;
  translate: 0 80px;
  transition: opacity .8s, translate 1s var(--ease);
}
.motion .work.in,
.motion .artist-media.in,
.motion .artist-text.in { opacity: 1; translate: 0 0; }
.motion .artist-text { transition-delay: .12s; }

/* Paralaxe: --p vai de -1 a 1 enquanto o bloco atravessa a tela */
.motion .sheet[data-parallax] {
  translate: 0 calc(var(--p, 0) * -56px);
  rotate: calc(var(--tilt, 0deg) + var(--p, 0) * 2.4deg);
}
.motion .work-meta h2[data-parallax] {
  translate: calc(var(--p, 0) * -6vw) 0;
}
.motion .work:nth-child(even) .work-meta h2[data-parallax] {
  translate: calc(var(--p, 0) * 6vw) 0;
}
.motion .artist-text h2[data-parallax] {
  translate: 0 calc(var(--p, 0) * -36px);
}

/* ---------- WhatsApp ---------- */

.whatsapp {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 25;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sumi);
  color: var(--washi);
  box-shadow: 0 0 0 2px var(--washi), 0 8px 20px rgba(20, 17, 15, .25);
  transition: background .3s, scale .3s var(--ease);
}
.whatsapp[hidden] { display: none; }
.whatsapp:hover { background: var(--mata); scale: 1.06; text-decoration: none; }
.motion .whatsapp { animation: pop .6s 1s var(--ease) backwards; }
@keyframes pop {
  from { opacity: 0; scale: .6; }
}

/* ---------- Rodapé ---------- */

.foot {
  background: var(--sumi);
  color: var(--washi);
  padding: 22px calc(var(--gutter) + 70px) 22px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 28px;
  font-size: .95rem;
}
.foot-name { display: inline-flex; align-items: center; gap: 10px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot-links:empty { display: none; }

/* ---------- Obra ampliada ---------- */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 16px var(--gutter);
  border: 0;
  background: var(--sumi);
  color: var(--washi);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 12px;
}
.lightbox::backdrop { background: var(--sumi); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox-close {
  justify-self: end;
  padding: 10px 0 10px 16px;
  border: 0;
  background: none;
  color: inherit;
  font: 700 1rem var(--body);
  cursor: pointer;
}

/* ---------- Telas estreitas ---------- */

@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .scene { --focus: .4685; } /* centraliza o portal */
  h1 { font-size: calc((100vw - 2 * var(--gutter)) / 6.3); }
  h1 span { display: block; }
  .tagline { top: 62px; }
  .motion .scroll-hint { bottom: 92px; }

  .work:nth-child(even) .sheet { width: 100%; }

  .artist { grid-template-columns: minmax(0, 1fr); }

  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet, .whatsapp { transition: none; }
}