/* Inspired by the expanding frame and logo reveal; content stays readable at rest. */
.reveal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  transition: transform .45s ease, box-shadow .45s ease, border-radius .45s ease;
}
.reveal-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 2px solid var(--blue);
  opacity: 0;
  transform: rotate(5deg) scale(1.04);
  transition: inset .5s ease, opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.reveal-card::after {
  content: "VED / DIGITAL STUDIO";
  position: absolute;
  z-index: 4;
  bottom: 13px;
  left: 50%;
  padding: 0 10px;
  background: #fff;
  color: var(--blue);
  font: 700 9px var(--body);
  letter-spacing: .4em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition: opacity .45s ease, transform .45s ease, letter-spacing .5s ease;
  pointer-events: none;
}
.reveal-card:hover,
.reveal-card:focus-visible {
  border-radius: 0;
  transform: translateY(-5px);
}
.reveal-card:hover::before,
.reveal-card:focus-visible::before {
  inset: 13px;
  opacity: 1;
  transform: rotate(0) scale(1);
}
.reveal-card:hover::after,
.reveal-card:focus-visible::after {
  opacity: 1;
  letter-spacing: .18em;
  transform: translateX(-50%) translateY(0);
}
.service-card.reveal-card { padding-bottom: 42px; }
.service-card.reveal-card:hover { box-shadow: 0 22px 42px #101c3821; }
.service-card.reveal-card .drawing-browser { transition: transform .55s ease, box-shadow .55s ease; }
.service-card.reveal-card:hover .drawing-browser { transform: rotate(0) translateY(-6px); box-shadow: 0 14px 30px #175cff33; }
.project-card.reveal-card { padding-bottom: 35px; }
.project-card.reveal-card .project-url { margin-bottom: 3px; }
.project-card.reveal-card:hover { box-shadow: 0 22px 45px #101c3821; }
.project-card.reveal-card .project-preview { position: relative; }
.project-card.reveal-card .project-preview::after {
  content: "ABRIR PROJETO ↗";
  position: absolute;
  inset: auto 0 0;
  padding: 26px 20px 14px;
  background: linear-gradient(transparent, #101c38d9);
  color: white;
  font: 700 11px var(--body);
  letter-spacing: .17em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.project-card.reveal-card:hover .project-preview::after,
.project-card.reveal-card:focus-visible .project-preview::after { opacity: 1; transform: none; }

/* The hero image becomes a branded card instead of pretending the PNG is transparent. */
.hero-art:hover .mascot-frame { border-radius: 3px; box-shadow: 0 33px 70px #061c7380; }
.hero-art .floating-tag { transition: transform .5s ease; }
.hero-art:hover .tag-top { transform: rotate(0) translateY(-6px); }
.hero-art:hover .tag-bottom { transform: rotate(0) translateY(-6px); }
.button-primary, .button-light, .nav-cta { position: relative; overflow: hidden; }
.button-primary::after, .button-light::after, .nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, #ffffff52 50%, transparent 75%);
  transform: translateX(-150%);
  transition: transform .6s ease;
  pointer-events: none;
}
.button-primary:hover::after, .button-light:hover::after, .nav-cta:hover::after { transform: translateX(150%); }
.method .step { position: relative; padding-inline: 15px; padding-bottom: 20px; transition: background .4s ease, border-color .4s ease; }
.method .step::before {
  content: "";
  position: absolute;
  inset: 4px 0 0;
  border: 1px solid var(--blue);
  opacity: 0;
  transform: rotate(4deg) scale(1.05);
  transition: opacity .4s ease, transform .4s ease, inset .4s ease;
  pointer-events: none;
}
.method .step:hover { background: #f7faff; border-top-color: var(--blue); }
.method .step:hover::before { inset: 10px 0 0; opacity: 1; transform: none; }
.contact-form-wrap { position: relative; transition: box-shadow .45s ease; }
.contact-form-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid #a8c4ff;
  opacity: 0;
  transform: rotate(3deg);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.contact-form-wrap:hover::before, .contact-form-wrap:focus-within::before { opacity: 1; transform: rotate(0); }
.contact-form-wrap:focus-within { box-shadow: 18px 18px 0 #175cff; }
@media (hover: none) {
  .reveal-card::before { inset: 12px; opacity: .4; transform: none; }
  .reveal-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-card, .reveal-card::before, .reveal-card::after, .reveal-card .drawing-browser,
  .reveal-card .project-preview::after, .hero-art .mascot-frame, .hero-art .floating-tag,
  .button-primary::after, .button-light::after, .nav-cta::after,
  .method .step, .method .step::before, .contact-form-wrap, .contact-form-wrap::before { transition: none; }
}