/* =========================================
   MCA ARTIST — Additional Visual Enhancements
   Updated for Black/White + Yellow/Red/Blue
========================================= */

/* ── Gold/Yellow rule dividers ── */
.gold-rule {
  width: 60px;
  height: 1px;
  background: var(--yellow);
  margin: 1rem auto;
  opacity: 0.6;
}

/* ── Section background alternation (pure B&W base) ── */
.services  { background: var(--charcoal-deep); }
.about     { background: var(--charcoal); }
.portfolio { background: var(--charcoal-deep); }
.process   {
  background: var(--charcoal);
  background-image: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(26,110,245,0.04) 0%, transparent 70%);
}
.pricing    { background: var(--charcoal-deep); }
.commission { background: var(--charcoal); }

/* ── Image loading shimmer — yellow highlight ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.gallery-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--charcoal-mid) 0%,
    rgba(245,200,0,0.07) 50%,
    var(--charcoal-mid) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Hide shimmer once image is loaded */
.gallery-img-wrap:has(img.loaded)::before {
  opacity: 0;
  pointer-events: none;
}

/* Image stacks above shimmer */
.gallery-img-wrap img {
  position: relative;
  z-index: 1;
}

/* ── Scrollbar refinement ── */
html {
  scrollbar-gutter: stable;
}

/* ── Tri-color section accent top lines ── */
.services::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--yellow) 33%, var(--red) 33% 66%, var(--blue) 66%);
  opacity: 0.5;
}
.services { position: relative; }

/* ==========================
   Hero: stacked profile UI
   ========================== */
.hero { --profile-size: 160px; position: relative; }

.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--charcoal-deep);
}

.hero-banner .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-topbar {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  z-index: 5;
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 8px;
  border: none;
  color: var(--text-primary);
  background: rgba(17,17,17,0.04);
}

.topbar-btn svg { display: block; color: #fff; }

.hero-banner .hero-profile-wrap {
  position: absolute;
  left: clamp(16px,4.5vw,40px);
  bottom: calc(var(--profile-size) / -2);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 7;
}

.hero-profile {
  --s: var(--profile-size);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  background: #fff;
  margin: 0;
}

.hero-profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mca-pill {
  margin-top: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  color: #fff;
  background: rgba(255,255,255,0.02);
  font-weight: 600;
  z-index: 6;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.banner-mca {
  position: absolute;
  right: clamp(16px,4.5vw,48px);
  bottom: 18px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-mca img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero .hero-content {
  padding-top: calc(var(--profile-size) / 2 + 20px);
  text-align: center;
}

/* Decorative circular frame behind heading */
.hero-content { position: relative; }
.hero-frame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -120px;
  width: clamp(220px,36vw,420px);
  height: clamp(220px,36vw,420px);
  border-radius: 50%;
  border: 10px solid #fff;
  background: rgba(255,255,255,0.02);
  z-index: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* Featured masked person placed in the banner and overlapping the content */
.featured-person {
  position: absolute;
  right: clamp(18px,6vw,72px);
  bottom: -80px;
  width: clamp(180px,22vw,360px);
  z-index: 8;
  display: block;
  pointer-events: none;
}
.featured-person img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.45));
}

/* Ensure the title/content sits above the frame */
.hero-title, .hero-badge, .hero-ctas, .hero-sub { position: relative; z-index: 2; }

/* Adjustments to keep overlap exact and responsive */
@media (min-width: 1100px) {
  .featured-person { bottom: -calc(var(--profile-size) / 1.2); }
}
@media (max-width: 800px) {
  .hero-frame { top: -90px; }
  .featured-person { width: clamp(140px,28vw,220px); bottom: -60px; }
}


/* Responsive adjustments */
@media (max-width: 800px) {
  .hero { --profile-size: 120px; }
  .topbar-btn { height: 36px; width: 36px; }
  .hero-topbar { padding: 0 10px; }
  .banner-mca { width: 64px; height: 64px; }
}

@media (max-width: 420px) {
  .hero { --profile-size: 96px; }
  .mca-pill { padding: 5px 12px; font-size: 14px; }
  .hero .hero-content { padding-top: calc(var(--profile-size) / 2 + 14px); }
  .banner-mca { width: 56px; height: 56px; right: 12px; }
}