/* ================================================================
   AG MOTORS MIAMI — about.css  (/about/ — the founder's story)
   Two chapters, mirrored: photo on one side melting into black,
   text sitting in the darkened half. Every photo edge is masked to
   transparent, so the chapters blend into one continuous canvas.
   ================================================================ */

.page-about { background: var(--c-black); overflow: hidden; }

/* ── Chapter shell ──────────────────────────────────────────────── */
.about-block {
  --media-w: 62%;
  position: relative;
  display: flex; align-items: center;
  min-height: max(100vh, 760px);
  padding: calc(var(--header-h) + 40px) var(--pad-x) 120px;
}
.about-block--left { justify-content: flex-end; }
.about-block + .about-block { margin-top: -12vh; }   /* overlap the soft edges: no black gap */

/* ── Photo ──────────────────────────────────────────────────────── */
.about-block__media {
  position: absolute; top: 0; bottom: 0;
  width: var(--media-w);
  overflow: hidden;
  --mask-y: linear-gradient(to bottom, transparent 0%, #000 16%, #000 72%, transparent 100%);
  /* horizontal fade towards the text  ×  vertical fade top & bottom */
  --mask-c: linear-gradient(#000, #000);   /* corner softener, set per side */
  -webkit-mask-image: var(--mask-x), var(--mask-y), var(--mask-c);
          mask-image: var(--mask-x), var(--mask-y), var(--mask-c);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.about-block--right .about-block__media {
  right: 0;
  --mask-x: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 14%, #000 42%);
  --mask-c: radial-gradient(ellipse 48% 40% at 0% 100%, transparent 0%, rgba(0,0,0,0.3) 45%, #000 100%);
}
.about-block--left .about-block__media {
  left: 0;
  /* Aren stands right of centre in this shot: keep the fade on the outer edge */
  --mask-x: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.35) 9%, #000 24%);
  /* longer top fade: the bright skyline rises slowly out of chapter one */
  --mask-y: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 18%, #000 44%, #000 74%, transparent 100%);
  /* round off the top-right corner where the two straight fades meet */
  --mask-c: radial-gradient(ellipse 48% 46% at 100% 0%, transparent 0%, rgba(0,0,0,0.3) 45%, #000 100%);
}
.about-block__media img {
  position: absolute; left: 0; top: -6%;
  width: 100%; height: 112%;              /* headroom for the parallax */
  object-fit: cover;
  transform-origin: 50% 40%;
}
.about-block--right .about-block__media img { object-position: 60% 72%; }
.about-block--left  .about-block__media img { object-position: 50% 82%; }
/* subtle overall grade so white text never fights a bright sky */
.about-block__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.35), rgba(10,10,10,0) 45%);
  pointer-events: none;
}

/* ── Text ───────────────────────────────────────────────────────── */
.about-block__text {
  position: relative; z-index: 1;
  width: min(44%, 560px);
}
.about-eyebrow {
  display: inline-block; margin-bottom: 22px;
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-orange);
}
.about-title {
  margin-bottom: clamp(26px, 3.4vh, 40px);
  font-family: var(--f-head); font-weight: 900; text-transform: uppercase;
  font-size: clamp(46px, 5.4vw, 92px); line-height: 0.92; letter-spacing: -0.01em;
  text-wrap: balance;
}
.about-title em { font-style: normal; color: var(--c-orange); }

.about-block__text p {
  font-family: var(--f-body);
  font-size: clamp(16px, 1.25vw, 19px); font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,0.74);
}
.about-block__text p + p { margin-top: 18px; }
.about-block__text p strong { font-weight: 500; color: var(--c-white); }
.about-block__text p.about-lead {
  margin-bottom: 26px;
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 3.6vw, 58px); line-height: 0.98; letter-spacing: 0;
  color: var(--c-white);
  text-wrap: balance;
}

/* ── Signature ──────────────────────────────────────────────────── */
.about-sign {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: clamp(30px, 4vh, 44px);
  padding-left: 22px;
  border-left: 2px solid var(--c-orange);
}
.about-sign__name {
  font-family: 'Kaushan Script', cursive;
  font-size: clamp(38px, 3.4vw, 54px); line-height: 1;
  color: var(--c-white);
}
.about-sign__role {
  font-family: var(--f-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* ── CTA ────────────────────────────────────────────────────────── */
.about-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(30px, 4vh, 44px); }
.about-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--f-body); font-size: 15px; font-weight: 700;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-expo), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.about-btn:hover { transform: translateY(-3px); }
.about-btn--primary { background: var(--c-orange); color: #fff; box-shadow: 0 10px 30px rgba(255,85,0,0.35); }
.about-btn--primary:hover { box-shadow: 0 14px 36px rgba(255,85,0,0.5); }
.about-btn--ghost { border: 1px solid rgba(255,255,255,0.22); color: var(--c-white); background: rgba(255,255,255,0.04); }
.about-btn--ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.08); }

/* ── Tablet / phone: photo on top, text rises out of its dark edge ── */
@media (max-width: 900px) {
  .about-block {
    flex-direction: column; align-items: stretch;
    min-height: 0;
    padding: 0 0 64px;
  }
  .about-block + .about-block { margin-top: 0; }
  .about-block__media {
    position: relative; inset: auto;
    width: 100%; height: 125vw; max-height: 78svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 66%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 66%, transparent 100%);
  }
  .about-block:first-child .about-block__media {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 66%, transparent 100%);
  }
  .about-block__media img { top: 0; height: 100%; }
  /* crop the sky, keep Aren and the car in frame */
  .about-block--right .about-block__media img { object-position: 62% 88%; }
  .about-block--left  .about-block__media img { object-position: 58% 88%; }
  .about-block__text {
    width: auto;
    margin-top: -12vw;
    padding: 0 var(--pad-x);
  }
  .about-title { font-size: clamp(40px, 11vw, 64px); }
  .about-block__text p { font-size: 16px; }
  .about-block__text p.about-lead { font-size: clamp(30px, 8.4vw, 44px); }
  .about-cta { flex-direction: column; }
  .about-btn { width: 100%; }
}

/* ── Reveal (initial state set by about.js only when GSAP runs) ── */
@media (prefers-reduced-motion: reduce) {
  .about-btn { transition: none; }
}