/* ==========================================================================
   HERO — LIQUID TATTOO REVEAL
   Editorial · minimalista · feminino
   --------------------------------------------------------------------------
   A imagem com tatuagem fica sobre a imagem limpa e é revelada por uma
   máscara composta por 3 radial-gradients difusos (união = mancha orgânica).
   O JavaScript apenas atualiza CSS variables; toda a pintura é feita pelo
   compositor do navegador (mask + opacity), mantendo FPS alto.
   ========================================================================== */

:root {
  --hero-bg: #e9dcc9;            /* champagne */
  --hero-ink: #2b211a;           /* marrom-café profundo */
  --hero-cream: #faf6ef;         /* off-white */
  --hero-line: rgba(250, 246, 239, 0.55);

  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Estrutura do hero
   -------------------------------------------------------------------------- */

.liquid-hero {
  /* Variáveis controladas pelo JS (posição/tamanho da máscara, em px) */
  --mx: 50vw;        /* centro X da máscara                    */
  --my: 40vh;        /* centro Y da máscara                    */
  --ms: 0px;         /* "raio" base da máscara                 */
  --r1: 1;           /* respiração do blob principal           */
  --g2dx: 0px;       /* deslocamentos dos blobs secundários    */
  --g2dy: 0px;
  --g3dx: 0px;
  --g3dy: 0px;

  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-bg);
  color: var(--hero-cream);
}

/* Cursor nativo escondido apenas quando o cursor customizado está ativo */
.liquid-hero.has-custom-cursor {
  cursor: none;
}

.liquid-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* As duas imagens compartilham exatamente o mesmo enquadramento.
   Nunca aplicar transform/zoom em apenas uma delas. */
.liquid-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%; /* mantém o colo visível em recortes verticais */
  user-select: none;
  -webkit-user-drag: none;
}

.liquid-hero__base {
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Camada da tatuagem + máscara líquida
   --------------------------------------------------------------------------
   Três gradientes radiais difusos, levemente deslocados entre si, se somam
   (comportamento padrão de múltiplas mask layers) formando uma mancha
   orgânica — nunca um círculo perfeito. Bordas muito suaves, sem cortes.
   -------------------------------------------------------------------------- */

.liquid-hero__tattoo {
  z-index: 2;
  opacity: 0;
  will-change: opacity;

  -webkit-mask-image:
    radial-gradient(
      ellipse calc(var(--ms) * var(--r1)) calc(var(--ms) * 0.84)
      at var(--mx) var(--my),
      #000 0%,
      rgba(0, 0, 0, 0.96) 26%,
      rgba(0, 0, 0, 0.72) 45%,
      rgba(0, 0, 0, 0.28) 63%,
      transparent 80%
    ),
    radial-gradient(
      ellipse calc(var(--ms) * 0.66) calc(var(--ms) * 0.58)
      at calc(var(--mx) + var(--g2dx)) calc(var(--my) + var(--g2dy)),
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.55) 42%,
      rgba(0, 0, 0, 0.16) 66%,
      transparent 82%
    ),
    radial-gradient(
      ellipse calc(var(--ms) * 0.52) calc(var(--ms) * 0.6)
      at calc(var(--mx) + var(--g3dx)) calc(var(--my) + var(--g3dy)),
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0.12) 68%,
      transparent 84%
    );
  mask-image:
    radial-gradient(
      ellipse calc(var(--ms) * var(--r1)) calc(var(--ms) * 0.84)
      at var(--mx) var(--my),
      #000 0%,
      rgba(0, 0, 0, 0.96) 26%,
      rgba(0, 0, 0, 0.72) 45%,
      rgba(0, 0, 0, 0.28) 63%,
      transparent 80%
    ),
    radial-gradient(
      ellipse calc(var(--ms) * 0.66) calc(var(--ms) * 0.58)
      at calc(var(--mx) + var(--g2dx)) calc(var(--my) + var(--g2dy)),
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.55) 42%,
      rgba(0, 0, 0, 0.16) 66%,
      transparent 82%
    ),
    radial-gradient(
      ellipse calc(var(--ms) * 0.52) calc(var(--ms) * 0.6)
      at calc(var(--mx) + var(--g3dx)) calc(var(--my) + var(--g3dy)),
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0.12) 68%,
      transparent 84%
    );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  /* Fade lento: a tatuagem surge e some com calma, nunca de forma brusca */
  transition: opacity 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.liquid-hero.is-active .liquid-hero__tattoo {
  opacity: 1;
  transition-duration: 1.6s;
}

/* --------------------------------------------------------------------------
   Scrim de legibilidade — extremamente discreto
   -------------------------------------------------------------------------- */

.liquid-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(23, 17, 12, 0.38) 0%,
      rgba(23, 17, 12, 0.12) 35%,
      transparent 65%
    ),
    linear-gradient(
      0deg,
      rgba(23, 17, 12, 0.30) 0%,
      transparent 32%
    );
}

/* --------------------------------------------------------------------------
   Wordmark discreto
   -------------------------------------------------------------------------- */

.liquid-hero__brand {
  position: absolute;
  z-index: 4;
  top: clamp(1.5rem, 3.2vw, 2.75rem);
  left: clamp(1.5rem, 5vw, 4.5rem);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--hero-cream);
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Conteúdo editorial (lado esquerdo / inferior esquerdo)
   -------------------------------------------------------------------------- */

.liquid-hero__content {
  position: absolute;
  z-index: 4;
  left: clamp(1.5rem, 5vw, 4.5rem);
  bottom: clamp(2.5rem, 9vh, 6.5rem);
  max-width: min(34rem, 82vw);
  pointer-events: none; /* não interfere na revelação… */
}

.liquid-hero__content > * {
  pointer-events: auto; /* …mas links continuam clicáveis */
}

.liquid-hero__eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.82);
}

.liquid-hero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.liquid-hero__title em {
  font-style: italic;
  font-weight: 300;
}

.liquid-hero__subtitle {
  margin: 1.6rem 0 0;
  max-width: 26rem;
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(250, 246, 239, 0.88);
}

.liquid-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.4rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--hero-line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hero-cream);
  background: transparent;
  transition:
    background-color 0.6s ease,
    color 0.6s ease,
    border-color 0.6s ease;
}

.liquid-hero__cta:hover,
.liquid-hero__cta:focus-visible {
  background: var(--hero-cream);
  border-color: var(--hero-cream);
  color: var(--hero-ink);
  outline: none;
}

/* --------------------------------------------------------------------------
   Dica de interação — muito discreta, some após a primeira interação
   -------------------------------------------------------------------------- */

.liquid-hero__hint {
  position: absolute;
  z-index: 4;
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.75rem, 5vh, 3rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(250, 246, 239, 0.75);
  pointer-events: none;
  transition: opacity 1.4s ease;
}

.liquid-hero__hint-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: hint-pulse 2.6s ease-in-out infinite;
}

.liquid-hero__hint.is-hidden {
  opacity: 0;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.35); }
}

/* --------------------------------------------------------------------------
   Cursor customizado — anel fino, leve, só em ponteiros precisos
   -------------------------------------------------------------------------- */

.liquid-cursor {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity 0.5s ease;
  will-change: transform;
}

.liquid-cursor.is-visible {
  opacity: 1;
}

.liquid-cursor.is-expanded {
  /* leve expansão enquanto revela — a escala é aplicada junto do translate no JS */
  border-color: rgba(255, 255, 255, 0.85);
}

@media (pointer: coarse) {
  .liquid-cursor {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Modo simples — prefers-reduced-motion ou navegador sem mask-image.
   Sem máscara líquida: apenas crossfade suave de opacidade.
   -------------------------------------------------------------------------- */

.liquid-hero--simple .liquid-hero__tattoo {
  -webkit-mask-image: none;
  mask-image: none;
  transition: opacity 1s ease;
}

.liquid-hero--simple.is-active .liquid-hero__tattoo {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .liquid-hero__hint-dot {
    animation: none;
  }
  .liquid-cursor {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Ajustes responsivos
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .liquid-hero__image {
    object-position: 42% 24%;
  }

  .liquid-hero__content {
    left: 1.4rem;
    right: 1.4rem;
    bottom: 2.4rem;
    max-width: none;
  }

  .liquid-hero__subtitle {
    max-width: 20rem;
  }

  /* No mobile a dica sobe para não competir com o CTA
     (abaixo da navegação fixa para não colidir com o menu) */
  .liquid-hero__hint {
    right: 1.4rem;
    left: auto;
    top: calc(env(safe-area-inset-top, 0px) + 4.6rem);
    bottom: auto;
  }
}