/* Mohamed Fathi — small additions on top of the Reeni theme (style.css stays untouched apart from local fonts) */

/* Text logo (replaces the Reeni image logo) */
.mf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mf-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-2nd);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .5px;
}
.mf-logo-text {
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.mf-logo-text span { color: var(--color-primary-2nd); }

/* Company names in the "supported company" strip */
.mf-company {
  color: var(--color-gray);
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center;
  transition: color .3s;
}
.support-company-logo:hover .mf-company { color: var(--color-heading); }

/* Hero portrait: B&W by default; on hover it turns to colour with a light sweep + sparkles */
.mf-hero-portrait .mf-hero-photo {
  position: relative;
  width: 76%;            /* same footprint the theme gives the single hero image */
  margin: auto;
}
/* separate layer for the hover lift, so it doesn't fight the theme's scroll-in zoom */
.mf-hero-portrait .mf-hero-lift {
  position: relative;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* soft red light behind the portrait — only its opacity animates, which stays smooth */
.mf-hero-portrait .mf-hero-lift::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 18%;
  bottom: 0;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 73, 74, .45), rgba(255, 73, 74, 0));
  filter: blur(30px);
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.mf-hero-portrait .mf-hero-photo img {
  width: 100%;
  display: block;
  margin: 0;
}
.mf-hero-portrait .mf-hero-color {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
/* the sweep is masked to the cut-out, so it only lights up the person */
.mf-hero-portrait .mf-hero-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 210, 200, .35) 52%, transparent 62%) no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  -webkit-mask: url(../images/mohamed/mohamed-fathi-color-cutout.png) center / 100% 100% no-repeat;
          mask: url(../images/mohamed/mohamed-fathi-color-cutout.png) center / 100% 100% no-repeat;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .8s ease;
}
.mf-hero-portrait .mf-hero-particles {
  position: absolute;
  left: -15%;
  top: -10%;
  width: 130%;
  height: 115%;
  pointer-events: none;
  z-index: 2;
}
.mf-hero-portrait::before { transition: filter 1.1s cubic-bezier(.4, 0, .2, 1), box-shadow 1.1s cubic-bezier(.4, 0, .2, 1); }

.mf-hero-portrait.is-active .mf-hero-lift { transform: translateY(-5px) scale(1.015); }
.mf-hero-portrait.is-active .mf-hero-lift::before { opacity: 1; }
.mf-hero-portrait.is-active .mf-hero-color { opacity: 1; }
.mf-hero-portrait.is-active .mf-hero-shine {
  opacity: 1;
  animation: mf-shine 2.2s cubic-bezier(.4, 0, .2, 1) .15s 1 both;
}
.mf-hero-portrait.is-active::before {
  filter: brightness(1.18) saturate(1.1);
  box-shadow: 0 0 80px rgba(255, 73, 74, .3);
}
@keyframes mf-shine {
  from { background-position: 160% 0; }
  to   { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-hero-portrait .mf-hero-lift,
  .mf-hero-portrait.is-active .mf-hero-lift { transform: none; transition: none; }
  .mf-hero-portrait.is-active .mf-hero-shine { animation: none; opacity: 0; }
}

/* Contact links in the hero keep the paragraph look */
.banner-contact-info .para a { color: inherit; }
.banner-contact-info .para a:hover { color: var(--color-primary-2nd); }

/* Portrait in the experience block: three cut-out photos that cross-fade (assets/js/exp-slideshow.js) */
.mf-exp-photo {
  position: relative;
  z-index: 1;
}
.mf-exp-slides {
  position: relative;
  aspect-ratio: 1122 / 1402;   /* all three photos share this size */
}
/* the photo column is sticky on desktop: keep photo + dots within the screen height */
@media (min-width: 992px) {
  .mf-exp-slides { max-height: calc(100vh - 190px); }
}
.mf-exp-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(14px) scale(1.02);
  will-change: opacity, transform;
}
/* fade-through: the outgoing photo clears first, then the next one rises in — the two cut-out poses never overlap */
.mf-exp-slide.is-active {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(0, 0, .2, 1) .45s, transform 1.4s cubic-bezier(.22, 1, .36, 1) .45s;
}
.mf-exp-slide.is-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transition: opacity .5s cubic-bezier(.4, 0, 1, 1), transform .6s cubic-bezier(.4, 0, 1, 1);
}
.mf-exp-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.mf-exp-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .22);
  cursor: pointer;
  transition: width .5s cubic-bezier(.22, 1, .36, 1), background-color .5s ease;
}
.mf-exp-dots button:hover { background: rgba(255, 255, 255, .45); }
.mf-exp-dots button.is-active {
  width: 30px;
  background: var(--color-primary-2nd);
}
@media (prefers-reduced-motion: reduce) {
  .mf-exp-slide, .mf-exp-dots button { transition: none; }
}
/* Six roles make the text column long — keep the portrait in view beside it */
@media (min-width: 992px) {
  .experiences-wrapper .experiences-wrap-right-content {
    position: sticky;
    top: 120px;
  }
}

/* "How I Work": the photo takes exactly the height of the three step cards beside it */
@media (min-width: 992px) {
  .latest-service-area .service-card-v2:last-child { margin-bottom: 0; }
  .latest-service-area .service-card-user-image {
    position: relative;
    height: 100%;
  }
  .latest-service-area .service-card-user-image .mf-float {
    position: absolute;
    inset: 0;
  }
  .latest-service-area .service-card-user-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
/* slow float + a red glow that follows the cut-out's outline on hover */
.mf-float { animation: mf-float 6s ease-in-out infinite; }
@keyframes mf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.service-card-user-image img { transition: filter .6s ease; }
.service-card-user-image:hover img { filter: drop-shadow(0 22px 45px rgba(255, 73, 74, .38)); }

/* shared 3D tilt — photo-effects.js feeds --mf-rx / --mf-ry from the cursor */
.mf-tilt {
  transform: perspective(1100px) rotateX(var(--mf-rx, 0deg)) rotateY(var(--mf-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
  will-change: transform;
}
.mf-tilt.is-tilting { transition: transform .15s ease-out, box-shadow .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .mf-float { animation: none; }
  .mf-tilt, .mf-tilt.is-tilting { transform: none; }
}

/* Tools & Software — Home 13 skill cards, on the same dark card surface as the rest of this page */
.mf-tool-card {
  background: var(--color-gray-2);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 30px 12px 24px;
}
.mf-tool-card .skill-inner { position: relative; z-index: 1; }
.mf-tool-card img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.mf-tool-card .name {
  color: var(--color-heading);
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}
.mf-tool-card .mf-tool-use {
  color: var(--color-gray);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 0;
}
.mf-tool-pair {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}
.mf-tool-pair img { margin: 0; }

/* Footer call-to-action buttons (replace the newsletter field) */
.mf-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

/* Hero heading typewriter (assets/js/hero-typing.js) */
.mf-typing .mf-type-intro,
.mf-typing .mf-type-role { display: block; }
.mf-typing .mf-type-em { color: var(--color-primary-2nd); }
.mf-typing .mf-type-role { transition: opacity .4s ease; }
.mf-typing .mf-type-role.is-fading { opacity: 0; }
.mf-caret,
.mf-typing.is-typing-intro .mf-type-intro::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: .9em;
  margin-left: 5px;
  vertical-align: -.08em;
  border-radius: 2px;
  background: var(--color-primary-2nd);
  animation: mf-caret 1s steps(1) infinite;
}
/* solid caret while letters are moving, blinking while a role is held */
.mf-typing.is-typing .mf-caret,
.mf-typing.is-typing-intro .mf-type-intro::after { animation: none; }
.mf-typing.is-typing-intro .mf-type-role .mf-caret { visibility: hidden; }
@keyframes mf-caret {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-caret { animation: none; display: none; }
}

/* Hero background lines: the contour lines drift slowly, and bands of light travel along them.
   The glow is masked by banner-lines-mask.png (same lines, full strength) so only the lines light up. */
.rpp-banner-five-area .mf-lines {
  position: absolute;
  inset: 0;
  animation: mf-lines-drift 14s ease-in-out infinite alternate;
  will-change: transform;
}
.rpp-banner-five-area .mf-lines img {
  width: 100%;
  height: 100%;
  display: block;
}
.mf-lines-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url(../images/banner/banner-lines-mask.png) 0 0 / 100% 100% no-repeat;
          mask: url(../images/banner/banner-lines-mask.png) 0 0 / 100% 100% no-repeat;
}
.mf-lines-band {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 38%;
  background: linear-gradient(90deg,
    rgba(255, 73, 74, 0) 0%,
    rgba(255, 73, 74, .55) 38%,
    rgba(255, 190, 180, .95) 50%,
    rgba(255, 73, 74, .55) 62%,
    rgba(255, 73, 74, 0) 100%);
  transform: translateX(-120%) skewX(-18deg);
  animation: mf-lines-sweep 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}
/* a second, fainter white band on its own rhythm so the light never feels like a loop */
.mf-lines-band.is-soft {
  width: 26%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0));
  animation-duration: 8.5s;
  animation-delay: -3s;
  animation-direction: reverse;
}
@keyframes mf-lines-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.08) rotate(.4deg); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.05) rotate(-.4deg); }
}
@keyframes mf-lines-sweep {
  0%        { transform: translateX(-120%) skewX(-18deg); }
  65%, 100% { transform: translateX(380%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rpp-banner-five-area .mf-lines,
  .mf-lines-band { animation: none; }
  .mf-lines-glow { display: none; }
}

/* Circle behind the portrait: reds flow slowly across it; the mask keeps the theme's fade to transparent at the bottom */
.banner-five-main-wrapper .mf-hero-portrait::before {
  background: linear-gradient(125deg, #FF494A 0%, #ff7a5c 22%, #d61f3a 45%, #FF494A 62%, #ff8a66 80%, #c9182f 100%);
  background-size: 260% 260%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%);
  animation: mf-arch-flow 7s ease-in-out infinite alternate;
}
@keyframes mf-arch-flow {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 40% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .banner-five-main-wrapper .mf-hero-portrait::before { animation: none; }
}

/* AI-Native Design section (Home 02 "About Me" layout): the AI tool logos inside the big counter card */
.mf-ai-area .mf-ai-tools {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}
.mf-ai-area .mf-ai-tools img {
  width: 40px;
  height: 40px;
  padding: 8px;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(20, 20, 20, .5);
  border: 1px solid rgba(255, 255, 255, .12);
}

/* Story-order layout tweaks (site audit) */
.mf-experience-section .experiences-wrapper { margin-top: 0; }       /* it now opens its own section */