/* ═══════════════════════════════════════════════════
   FOUNDER SECTION — مؤسس نجم
   Uses SAME background as showcase-posts section.
   Layout mirrors the original founder-info card.
═══════════════════════════════════════════════════ */

/* ─── Section Shell ─── */
.founder-section {
  position: relative;
  padding: 0 0 var(--space-lg) 0;
  background: var(--surface-alt); /* Sand background color matches the theme */
  overflow: hidden;
  transition: background 0.8s ease;

  /* Theme variables for smooth Day/Night transitions */
  --surface-light: oklch(0.99 0.002 55);
  --surface-dark: oklch(0.10 0.004 55);
  --surface-alt-light: oklch(0.95 0.003 55);
  --surface-alt-dark: oklch(0.14 0.005 55);
}

/* ─── Top Separator (elegant divider line before the section) ─── */
.founder-section::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
  opacity: 0.7;
  position: relative;
  z-index: 3; /* Ensure divider stays above the background veil */
}

/* ─── Section Banner (Transparent Container for Content) ─── */
.founder-section__banner {
  position: relative;
  z-index: 4; /* Render above background veil and clearing mask */
  width: 100%;
  min-height: 190px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Bottom Gradient Bridge: fades section background/waves into next section ─── */
/* Positioned relative to the section (.founder-section) by being absolute-positioned and non-relative container banner */
.founder-section__banner::before,
.founder-section__banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100px; /* Taller bridge for extra smooth blending */
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.8s ease;
}

/* Light mode bottom bridge */
.founder-section__banner::before {
  background: linear-gradient(to bottom, oklch(from var(--surface-light) l c h / 0) 0%, var(--surface-light) 100%);
  opacity: 1;
}

/* Dark mode bottom bridge */
.founder-section__banner::after {
  background: linear-gradient(to bottom, oklch(from var(--surface-dark) l c h / 0) 0%, var(--surface-dark) 100%);
  opacity: 0;
}

[data-theme="dark"] .founder-section__banner::before {
  opacity: 0;
}
[data-theme="dark"] .founder-section__banner::after {
  opacity: 1;
}

.founder-section__veil-svg g {
  will-change: transform;
  transform: translateZ(0);
}

.founder-section__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: center center;
  pointer-events: none;
  /* Smooth mask to fade out waves at the top & bottom edges to prevent clashing diagonal lines */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Laptop Animation for Sand Veil skew */
@media (min-width: 769px) {
  .founder-section__veil {
    animation: founder-veil-sway 22s ease-in-out infinite;
  }
}

@keyframes founder-veil-sway {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(0.4deg); }
}

.founder-section__veil-svg {
  width: 100%;
  height: 100%;
}

/* Clearing mask for readability of the centered title, restricted to the top banner height */
.founder-section__clearing {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px; /* Aligns with banner content area */
  z-index: 2;
  pointer-events: none;
}

.founder-section__clearing::before,
.founder-section__clearing::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* Light mode clearing mask - precise OKLCH interpolation prevents grayish/muddy transition halo */
.founder-section__clearing::before {
  background: radial-gradient(
    ellipse 70% 80% at 50% 50%,
    var(--surface-alt-light) 0%,
    oklch(from var(--surface-alt-light) l c h / 0.65) 45%,
    oklch(from var(--surface-alt-light) l c h / 0) 90%
  );
  opacity: 1;
}

/* Dark mode clearing mask */
.founder-section__clearing::after {
  background: radial-gradient(
    ellipse 70% 80% at 50% 50%,
    var(--surface-alt-dark) 0%,
    oklch(from var(--surface-alt-dark) l c h / 0.65) 45%,
    oklch(from var(--surface-alt-dark) l c h / 0) 90%
  );
  opacity: 0;
}

[data-theme="dark"] .founder-section__clearing::before {
  opacity: 0;
}
[data-theme="dark"] .founder-section__clearing::after {
  opacity: 1;
}

/* ─── Section Header ─── */
.founder-section__header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: center;
  margin-bottom: 0; /* inside banner — no extra margin */
}

.founder-section__title {
  font-size: var(--fs-heading-2);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
  margin: 0;
}

/* ─── Inner Card — replicates .founder-info exactly ─── */
.founder-section__card {
  max-width: 1280px;
  margin: 0 auto;
  width: calc(100% - 2 * var(--space-md));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background-color: transparent;
  border: 1px solid var(--border);
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  position: relative;
  z-index: 4; /* Render above background veil and clearing mask */
}

.founder-section__card:hover {
  border-color: var(--color-accent-warm);
  transform: translateY(-4px);
}

[data-theme="dark"] .founder-section__card {
  border-color: var(--border);
}

/* ─── Image Side ─── */
.founder-section__image {
  position: relative;
  overflow: hidden;
  min-height: 450px;
}

.founder-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Default smooth transition for hover */
  transition: transform 0.6s var(--ease-out-quart);
}

/* Beautiful comfortable unzoom entrance effect when scrolled into view */
.founder-section__card:not(.revealed) .founder-section__image img {
  transform: scale(1.08); /* Less scale makes the movement distance shorter and subtler */
}
.founder-section__card.revealed .founder-section__image img {
  transform: scale(1);
  /* Slower duration and a more relaxed easing curve for a comfortable feel */
  transition: transform 1.6s cubic-bezier(0.33, 1, 0.68, 1) 0.1s;
}

.founder-section__card:hover .founder-section__image img {
  transform: scale(1.05);
  transition: transform 0.6s var(--ease-out-quart); /* Override reveal transition on hover */
}

/* ─── Info Side — inherits silk_posts.css curtain glow via .founder-info__items ─── */
.founder-section__info {
  display: flex;
  flex-direction: column;
  /* Removed justify-content: center to allow child to stretch */
}

/* Make the items container take full height so its background covers the whole box */
.founder-section .founder-info__items {
  flex: 1;
}

/* ─── Hover Animations Sync ─── */
.founder-section__card:hover .founder-info__items::before {
  background: 
    radial-gradient(circle at 50% -10%, oklch(0.30 0.01 55 / 0.12) 0%, transparent 75%),
    linear-gradient(90deg, oklch(0.95 0.003 55) 0%, oklch(0.92 0.003 55) 15%, oklch(0.99 0.002 55) 30%, oklch(0.92 0.003 55) 45%, oklch(0.95 0.003 55) 60%, oklch(0.92 0.003 55) 75%, oklch(0.99 0.002 55) 90%, oklch(0.95 0.003 55) 100%) !important;
}

.founder-section__card:hover .founder-info__items::after {
  background: 
    radial-gradient(circle at 50% -10%, oklch(0.88 0.02 65 / 0.22) 0%, transparent 75%),
    linear-gradient(90deg, oklch(0.14 0.005 55) 0%, oklch(0.18 0.006 55) 15%, oklch(0.12 0.004 55) 30%, oklch(0.18 0.006 55) 45%, oklch(0.14 0.005 55) 60%, oklch(0.18 0.006 55) 75%, oklch(0.12 0.004 55) 90%, oklch(0.14 0.005 55) 100%) !important;
}

.founder-section__card:hover .founder-info__icon {
  transform: scale(1.2) translateY(-2px) !important;
  filter: drop-shadow(0 0 16px rgba(255, 140, 0, 0.9)) !important;
}

/* ─── Mobile & Tablet: Stack vertically ─── */
@media (max-width: 900px) {
  .founder-section__card {
    grid-template-columns: 1fr;
  }

  .founder-section__image {
    min-height: 240px;
    order: -1;
  }

  .founder-section__card:hover {
    transform: none;
  }

  .founder-section__card:hover .founder-section__image img {
    transform: none;
  }
}

/* ─── Mobile-specific: tighten everything ─── */
@media (max-width: 768px) {
  .founder-section {
    padding: 0 0 var(--space-md) 0;
  }

  /* Banner shorter on mobile — image fills space below */
  .founder-section__banner {
    min-height: 110px;
  }

  /* Shorten the bottom gradient bridge on mobile screens */
  .founder-section__banner::before,
  .founder-section__banner::after {
    display: block !important; /* Ensure it is visible at the bottom of the section */
    height: 60px;
  }

  .founder-section__header {
    padding: 0 var(--space-md);
  }

  .founder-section__card {
    width: 100%;
    border-left: none;
    border-right: none;
    margin-top: 0; /* flush — image immediately follows banner with no gap */
  }

  .founder-section__image {
    min-height: 260px; /* taller image fills the gap naturally */
  }

  /* Override the 42px !important from silk_posts.css to scale down icons */
  .founder-section .founder-info__icon {
    width: 28px !important;
    height: 28px !important;
  }

  /* Enhance Arabic typography for Cairo font readability */
  .founder-section .founder-info__text {
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
    text-align: right !important;
  }

  /* Ergonomic touch targets */
  .founder-section .founder-info__items {
    padding: var(--space-md) !important;
  }

  .founder-section .founder-info__item {
    padding: var(--space-sm) var(--space-md) !important;
    gap: var(--space-md) !important;
  }
}