/* Final scoped adjustments requested for desktop and tablet. */

/* Keep the biography card fully visible and balanced opposite the portrait. */
#portfolio-root:not(.compact-layout) #about .intro-about {
  left: 6.5% !important;
  top: 53% !important;
  width: 42% !important;
  max-width: 650px !important;
  padding: clamp(24px, 2.35vw, 38px) !important;
}

/* Arabic keeps the exact same physical column as English. */
#portfolio-root[lang="ar"]:not(.compact-layout) #about .intro-about {
  left: 6.5% !important;
  right: auto !important;
  top: 53% !important;
  width: 42% !important;
  max-width: 650px !important;
}

#portfolio-root:not(.compact-layout) #about .intro-about h2 {
  font-size: clamp(34px, 3.05vw, 54px) !important;
  line-height: 1.08 !important;
  margin-bottom: 16px !important;
}

#portfolio-root[lang="ar"]:not(.compact-layout) #about .intro-about h2 {
  font-size: clamp(30px, 2.65vw, 46px) !important;
  line-height: 1.42 !important;
}

#portfolio-root:not(.compact-layout) #about .intro-about p {
  font-size: clamp(13px, .94vw, 16px) !important;
  line-height: 1.68 !important;
}

/* The three sourcing cards reveal as one horizontal unit. */
#portfolio-root:not(.compact-layout) #study .study-flow.sync-sourcing {
  opacity: 0 !important;
  transform: translate3d(0, 42px, 0) scale(.988) !important;
  filter: blur(2px) !important;
  transition: opacity .85s cubic-bezier(.16,1,.3,1),
              transform .95s cubic-bezier(.16,1,.3,1),
              filter .75s ease !important;
  will-change: opacity, transform, filter;
}

#portfolio-root:not(.compact-layout) #study .study-flow.sync-sourcing.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

#portfolio-root #study .study-flow.sync-sourcing .study-step {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  --v14-o: 1 !important;
  --v14-y: 0px !important;
  --v14-s: 1 !important;
  --v14-b: 0px !important;
}

/* Each desktop row in the seven-stage system reveals as a single unit. */
#portfolio-root:not(.compact-layout) #stageFlow .stage-row-member {
  opacity: 0 !important;
  transform: translate3d(0, 38px, 0) scale(.99) !important;
  filter: blur(2px) !important;
  transition: opacity .8s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1),
              filter .7s ease !important;
  transition-delay: 0s !important;
  --v14-o: 1 !important;
  --v14-y: 0px !important;
  --v14-s: 1 !important;
  --v14-b: 0px !important;
}

#portfolio-root:not(.compact-layout) #stageFlow .stage-row-member.stage-row-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

#portfolio-root.compact-layout #study .study-flow.sync-sourcing,
#portfolio-root.compact-layout #stageFlow .stage-row-member,
#portfolio-root.compact-layout #stageFlow .stage-row-member.stage-row-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-root #study .study-flow.sync-sourcing,
  #portfolio-root #stageFlow .stage-row-member {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Soft LinkedIn-inspired atmosphere, contained to the opening / about scene. */
#portfolio-root #about {
  position: relative;
  isolation: isolate;
}

#portfolio-root #about .intro-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--about-art-opacity, 1);
  background:
    radial-gradient(72% 48% at 17% 18%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.22) 46%, transparent 76%),
    radial-gradient(58% 46% at 82% 28%, rgba(187,199,206,.34) 0%, rgba(212,220,225,.15) 52%, transparent 78%),
    radial-gradient(68% 44% at 48% 74%, rgba(255,255,255,.46) 0%, rgba(203,213,219,.12) 55%, transparent 82%),
    linear-gradient(145deg, #f4f6f7 0%, #e9edef 48%, #f5f7f8 100%);
  transition: opacity .18s linear;
}

#portfolio-root[data-theme="dark"] #about .intro-sticky::after {
  background:
    radial-gradient(72% 48% at 17% 18%, rgba(76,88,96,.20) 0%, rgba(45,54,60,.10) 46%, transparent 76%),
    radial-gradient(58% 46% at 82% 28%, rgba(113,128,137,.16) 0%, rgba(57,68,75,.08) 52%, transparent 78%),
    radial-gradient(68% 44% at 48% 74%, rgba(67,79,87,.14) 0%, rgba(33,40,45,.06) 55%, transparent 82%),
    linear-gradient(145deg, #171c20 0%, #11161a 50%, #181e22 100%);
}

/* Compact layouts use normal document flow: fade the atmosphere before projects. */
#portfolio-root.compact-layout #about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(92% 34% at 16% 12%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.22) 50%, transparent 78%),
    radial-gradient(78% 38% at 86% 35%, rgba(185,198,205,.28) 0%, rgba(213,220,225,.11) 54%, transparent 80%),
    linear-gradient(180deg, #f3f5f6 0%, #eaedef 52%, rgba(237,240,242,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
}

#portfolio-root.compact-layout #about .intro-sticky::after {
  display: none;
}

#portfolio-root[data-theme="dark"].compact-layout #about::after {
  background:
    radial-gradient(92% 34% at 16% 12%, rgba(77,89,97,.18) 0%, rgba(45,55,61,.08) 50%, transparent 78%),
    radial-gradient(78% 38% at 86% 35%, rgba(112,127,136,.14) 0%, rgba(55,66,73,.07) 54%, transparent 80%),
    linear-gradient(180deg, #171c20 0%, #12171b 52%, rgba(18,23,27,0) 100%);
}

/* The mobile composition is centered around the portrait and role card. */
@media (max-width: 700px) {
  #portfolio-root.compact-layout #about .intro-name {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  #portfolio-root.compact-layout #about .intro-name span {
    width: 100%;
    text-align: center !important;
  }
}