/* Tattooei final polish — intentionally additive and easy to roll back. */
:root {
  --tt-ink: #17130f;
  --tt-paper: #f5f0e7;
  --tt-paper-deep: #ebe2d4;
  --tt-gold: #b48a4b;
  --tt-shadow: 0 28px 70px rgba(28, 21, 14, .14);
}

html { scroll-behavior: smooth; }
body { background: var(--tt-paper); }

/* Stronger editorial rhythm while keeping the page predominantly light. */
.section-spacing { position: relative; isolation: isolate; }
.section-spacing:nth-of-type(odd):not([class*="bg-"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg, rgba(255,255,255,.52), transparent 55%);
}
.section-spacing.bg-secondary {
  background:
    radial-gradient(circle at 86% 8%, rgba(180,138,75,.11), transparent 28rem),
    var(--tt-paper-deep);
}

/* Hero: larger photography, quieter overlays and real depth. */
main > section:first-child { min-height: min(940px, 100svh); }
main > section:first-child .vignette {
  width: min(62vw, 940px);
  overflow: hidden;
  will-change: transform;
}
main > section:first-child .vignette img {
  transform: scale(1.045);
  filter: saturate(.94) contrast(1.04);
  will-change: transform;
}
main > section:first-child h1 { text-wrap: balance; }
main > section:first-child h1 .font-display {
  letter-spacing: -.035em;
  text-shadow: 0 3px 34px rgba(0,0,0,.22);
}

/* Premium cards and list items: tactile but restrained. */
.section-spacing li,
.section-spacing [class*="rounded-"][class*="border"] {
  transition: transform .55s cubic-bezier(.2,.75,.25,1),
              box-shadow .55s ease, border-color .4s ease, background-color .4s ease;
}
@media (hover:hover) {
  .section-spacing [class*="rounded-"][class*="border"]:hover {
    transform: translateY(-5px);
    box-shadow: var(--tt-shadow);
    border-color: rgba(180,138,75,.42);
  }
}

/* Editorial image treatment shared by the two work galleries. */
#piercing .frame-gold,
#tatuagem .frame-gold,
#gallery [class*="overflow-hidden"]:has(> img) {
  box-shadow: var(--tt-shadow);
  background: #17130f;
}
#piercing .frame-gold img,
#tatuagem .frame-gold img,
#gallery img {
  transform: scale(1.012);
  transition: transform 1.2s cubic-bezier(.2,.75,.25,1), filter .8s ease;
  filter: saturate(.93) contrast(1.025);
}
@media (hover:hover) {
  #piercing .frame-gold:hover img,
  #tatuagem .frame-gold:hover img,
  #gallery [class*="overflow-hidden"]:hover img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.04);
  }
}

/* Scroll reveals use opacity/transform only: composited and inexpensive. */
.tt-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.75,.25,1);
}
.tt-reveal.tt-visible { opacity: 1; transform: translate3d(0,0,0); }
.tt-reveal:nth-child(2) { transition-delay: .07s; }
.tt-reveal:nth-child(3) { transition-delay: .14s; }
.tt-reveal:nth-child(4) { transition-delay: .21s; }

/* Black remains strategic: hero, final call-to-action and footer. */
footer { background: #0f0d0b !important; }

/* Keep the benefits list as two deliberate columns with breathing room. */
.tt-detail-list > li {
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) !important;
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
}
.tt-detail-list > li > h3,
.tt-detail-list > li > p { min-width: 0; }

/* The floating booking CTA must never cover footer/legal links. */
body.tt-footer-visible div[class*="fixed"][class*="bottom-"]:has(button[aria-label="Agendar horário"]) {
  opacity: 0 !important;
  transform: translate3d(0, 1.5rem, 0) !important;
  pointer-events: none !important;
}

/* Blog cover: uses an existing Tattooei photograph, not a generic stock image. */
main > section:first-child.bg-secondary:has(h1) {
  min-height: 620px;
  display: grid;
  place-items: center;
  padding-top: 9rem;
  padding-bottom: 6rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15,13,11,.34), rgba(15,13,11,.76)),
    linear-gradient(90deg, rgba(15,13,11,.48), transparent 58%),
    url('/images/trabalho-4.jpg') center 44% / cover no-repeat;
}
main > section:first-child.bg-secondary:has(h1)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(transparent, rgba(15,13,11,.52));
  pointer-events: none;
}
main > section:first-child.bg-secondary:has(h1) > .container {
  position: relative;
  z-index: 1;
}
main > section:first-child.bg-secondary:has(h1) h1 {
  color: var(--tt-paper);
  font-family: Vision, Outfit, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  text-shadow: 0 4px 36px rgba(0,0,0,.36);
}
main > section:first-child.bg-secondary:has(h1) p {
  color: rgba(245,240,231,.86) !important;
  max-width: 44rem;
  margin-inline: auto;
  text-shadow: 0 2px 22px rgba(0,0,0,.42);
}

@media (max-width: 767px) {
  .tt-detail-list > li {
    grid-template-columns: 1fr !important;
    row-gap: .65rem;
  }
  main > section:first-child .vignette { width: 100%; opacity: .72 !important; }
  main > section:first-child .vignette img { object-position: 62% center; }
  .section-spacing { overflow: clip; }
  main > section:first-child.bg-secondary:has(h1) {
    min-height: 520px;
    background-position: 58% center;
  }
}

/* Mobile safety: Framer/React must never leave editorial photography hidden. */
@media (max-width: 767px) {
  main img,
  main picture,
  main .vignette,
  main .frame-gold,
  main [class*="aspect-"] {
    visibility: visible !important;
  }
  main .vignette,
  main .frame-gold,
  main [class*="aspect-"]:has(> img) {
    opacity: 1 !important;
  }
  main > section:first-child .vignette {
    inset: 0;
    height: 100%;
  }
  main > section:first-child .vignette::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15,13,11,.86), rgba(15,13,11,.3));
    pointer-events: none;
  }
}

/* Blog header follows the same refined, light inner-page system as Piercing. */
body.tt-blog main > section:first-child.bg-secondary {
  min-height: auto;
  display: block;
  padding: 10.5rem 1.5rem 5.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 20%, rgba(180,138,75,.12), transparent 24rem),
    var(--tt-paper);
  color: var(--tt-ink);
}
body.tt-blog main > section:first-child.bg-secondary::after { display: none; }
body.tt-blog main > section:first-child.bg-secondary .container { max-width: 1180px; }
body.tt-blog main > section:first-child.bg-secondary .container::before {
  content: "CONTEÚDO TATTOOEI";
  display: block;
  margin: 0 auto 1.4rem;
  color: var(--tt-gold);
  font: 700 .7rem/1 Vision, sans-serif;
  letter-spacing: .28em;
}
body.tt-blog main > section:first-child.bg-secondary h1 {
  color: var(--tt-ink);
  font-size: clamp(2.9rem, 7vw, 6rem);
  line-height: .96;
  text-shadow: none;
}
body.tt-blog main > section:first-child.bg-secondary h1 .tt-script {
  color: var(--tt-gold);
  font-family: AveBetwan, cursive;
  font-size: 1.32em;
  font-weight: 400;
  text-transform: lowercase;
}
body.tt-blog main > section:first-child.bg-secondary p {
  color: rgba(23,19,15,.7) !important;
  max-width: 42rem;
  margin-inline: auto;
  text-shadow: none;
}
body.tt-blog .tt-blog-cover {
  width: min(1180px, calc(100% - 3rem));
  height: clamp(280px, 44vw, 560px);
  margin: 0 auto -1px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--tt-shadow);
}
body.tt-blog .tt-blog-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
@media (max-width: 767px) {
  body.tt-blog main > section:first-child.bg-secondary { padding: 8.5rem 1.25rem 3.5rem; }
  body.tt-blog .tt-blog-cover { width: calc(100% - 2rem); height: 330px; }
  body.tt-blog main > section:first-child.bg-secondary h1 { font-size: clamp(2.65rem, 14vw, 4.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tt-reveal { opacity: 1; transform: none; transition: none; }
  main > section:first-child .vignette,
  main > section:first-child .vignette img { transform: none !important; }
}