/* =================================================================
   MAMERI EXPORT — "Sobre a Mameri" cinematic motion
   Loaded ONLY on the homepage, right after home-premium.css.
   Scoped entirely to .about-section; nothing here touches the
   generic .reveal system used elsewhere on the site.
   ================================================================= */

/* ── Eyebrow label + growing gold rule ─────────────────────────── */
.about-eyebrow {
  opacity: 0;
  transform: translateY(12px);
}
.about-eyebrow-rule {
  display: block;
  width: 0;
  height: 2px;
  background: var(--gold);
  /* .about-text lays its children out with a fixed 20px flex gap;
     these negative margins pull the rule in tight against the
     eyebrow above and the title below instead of floating in two
     stacked 20px gaps. */
  margin: -12px 0 4px;
}

/* ── Title — vertical cut reveal, split by line (JS-built) ──────
   Until about-motion.js runs, the title is plain text and simply
   visible — nothing here hides the un-split heading. */
.about-title-line {
  display: block;
  overflow: hidden;
}
.about-title-line-inner {
  display: block;
  /* No transform set here on purpose: GSAP's yPercent tweening owns
     this element's transform entirely. A CSS transform: translateY(%)
     fallback here gets baked in by GSAP as a frozen pixel baseline
     the first time it touches the element (computed style always
     resolves % to px), permanently offsetting the reveal. GSAP sets
     the hidden starting state itself, synchronously, before paint. */
  will-change: transform;
}

/* ── Paragraphs ──────────────────────────────────────────────── */
.about-text .about-body {
  opacity: 0;
  transform: translateY(24px);
}

/* ── "Ver mais" — reveal + a precise 7px/300ms arrow hover,
   scoped here so the shared .link-arrow gap-hover used elsewhere
   on the site is untouched. ─────────────────────────────────── */
.about-text > .about-link {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  gap: 8px;
}
.about-text > .about-link:hover {
  gap: 8px; /* neutralize the shared gap-based hover */
}
.about-text > .about-link::after {
  display: inline-block;
  transition: transform 300ms ease;
}
.about-text > .about-link:hover::after {
  transform: translateX(7px);
}
/* Absolutely positioned, so it never becomes a flex item of the
   inline-flex link. Draws left-to-right on hover. */
.about-text > .about-link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about-text > .about-link:hover::before {
  transform: scaleX(1);
}

/* ── Image — cinematic reveal; the frame stays put, only the
   photo inside it moves (scale-in, then a subtle scroll parallax
   wired up in about-motion.js). ─────────────────────────────── */
.about-img-frame {
  clip-path: inset(100% 0 0 0);
}
.about-img-frame .about-img {
  transform: scale(1.08);
  will-change: transform;
}

/* The gold rule that rides the reveal edge as the photo uncovers.
   Full-height box translated by the same progress as the clip-path;
   the line itself sits on its top edge, i.e. always just inside the
   revealed area. */
.about-img-sweep {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  will-change: transform, opacity;
}
.about-img-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold) 18%,
    var(--gold-light) 50%,
    var(--gold) 82%,
    transparent 100%
  );
}

/* ── Mobile — smaller offsets, no parallax (handled in JS) ─────── */
@media (max-width: 768px) {
  .about-eyebrow { transform: translateY(8px); }
  .about-text .about-body { transform: translateY(16px); }
  .about-text > .about-link { transform: translateY(8px); }
}

/* ── Reduced motion — everything at rest, instantly ─────────────
   Deliberately not gated on JS: works even if scripts never run. */
@media (prefers-reduced-motion: reduce) {
  .about-eyebrow { opacity: 1; transform: none; }
  .about-eyebrow-rule { width: 24px; }
  .about-title-line-inner { transform: none; }
  .about-text .about-body { opacity: 1; transform: none; }
  .about-text > .about-link { opacity: 1; transform: none; }
  .about-text > .about-link::after,
  .about-text > .about-link::before { transition: none; }
  .about-img-frame { clip-path: inset(0 0 0 0); }
  .about-img-frame .about-img { transform: none; }
  .about-img-sweep { display: none; }
}