/* ===================== Creative Director Card (no HTML changes) ===================== */
:root{
  --ink:#EAF7F3;                  /* main text on dark */
  --muted:#BBD3CC;                /* secondary text */
  --deep:#071d1a;                 /* page/deep bg */
  --panel:#0b2723;                /* card base */
  --brand:#00c39a;                /* mint green */
  --brand2:#4ef0b5;               /* glow mint */
  --brand3:#23c8ff;               /* cyan accent */
}


body{ background: radial-gradient(900px 420px at 10% -10%, #0d2f2a 20%, #0b2723 30%) fixed; }

/* --- Card base: layered blobs + glass --- */
.director-card{
  position: relative;
  max-width: 980px;
  margin: 72px auto;
  padding: 32px 28px 36px;
  direction: rtl;
  color: var(--ink);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) padding-box,
    linear-gradient(135deg, rgba(78,240,181,.20), rgba(35,200,255,.16), transparent) border-box,
    var(--panel);
  border: 1px solid transparent;
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  overflow: hidden;
  isolation: isolate;
}

/* Color blobs behind content */
.director-card::before,
.director-card::after{
  content:"";
  position:absolute; border-radius:50%;
  filter: blur(18px);
  pointer-events:none;
  z-index:-1;
  opacity:.45;
}
.director-card::before{
  width: 520px; height: 520px;
  top: -220px; right: -180px;
  background: radial-gradient(circle at 40% 40%, rgba(0,195,154,.50), transparent 65%);
  animation: blobA 22s ease-in-out infinite alternate;
}
.director-card::after{
  width: 680px; height: 680px;
  bottom: -280px; left: -220px;
  background: radial-gradient(circle at 60% 60%, rgba(35,200,255,.35), transparent 70%);
  animation: blobB 28s ease-in-out infinite alternate;
}
@keyframes blobA{
  0%{ transform: translate(0,0) scale(1)}
  50%{ transform: translate(-30px,18px) scale(1.05)}
  100%{ transform: translate(18px,-22px) scale(.98)}
}
@keyframes blobB{
  0%{ transform: translate(0,0) scale(1)}
  50%{ transform: translate(24px,-16px) scale(1.06)}
  100%{ transform: translate(-18px,20px) scale(1)}
}

/* Header: name with wavy underline accent */
.director-head{ display:flex; align-items:flex-start; gap:18px; }
.head-text{ flex:1; }

.name{
  margin:0 0 6px;
  font: 900 30px/1.25 "Tajawal","Noto Kufi Arabic",system-ui,sans-serif;
  letter-spacing:.2px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  position: relative;
  display: inline-block;
}
.name::after{
  /* animated wavy underline */
  content:"";
  position:absolute; right: 0; bottom: -8px;
  width: 180px; height: 6px;
  background:
    radial-gradient(6px 6px at 6px 3px, var(--brand2) 55%, transparent 56%) repeat-x;
  background-size: 18px 6px;
  animation: wave 2.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(78,240,181,.35));
  border-radius: 3px;
}
@keyframes wave{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(-18px) }
}

/* Title pill with shimmer */
.title{
  margin:12px 0 10px;
  font: 700 15px "Tajawal",system-ui;
  color: var(--muted);
  /* display:inline-block; */
  padding:7px 12px;
  border-radius: 12px;
  position: relative;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.title::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.12) 40%, transparent 60%);
  transform: translateX(-120%);
  animation: shimmer 4.2s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%) }
  60%{ transform: translateX(120%) }
  100%{ transform: translateX(120%) }
}

/* Section badge with subtle pulse */
.section-badge{
  display:inline-block;
  margin-top:8px;
  padding:7px 14px;
  font: 800 13.5px "Tajawal",system-ui;
  color:#05201b;
  background: linear-gradient(135deg, var(--brand2), var(--brand));
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,195,154,.35);
  position: relative;
}
.section-badge::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:999px;
  border: 2px solid rgba(78,240,181,.25);
  animation: pulse 3.2s ease-in-out infinite;
  opacity:.65;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.55 }
  50%{ transform: scale(1.06); opacity:.85 }
}

/* Portrait: neon frame + parallax hover */
.director-portrait{
  margin: 20px 0 16px;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #0a2320;
  border: 1px solid rgba(78,240,181,.18);
  box-shadow:
    0 22px 44px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.03);
}
.director-portrait::before{
  /* neon border trace */
  content:"";
  position:absolute; inset:-1px;
  border-radius: 18px;
  background:
    conic-gradient(from 0deg, rgba(78,240,181,.5), rgba(35,200,255,.45), rgba(78,240,181,.5));
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: frame-rotate 10s linear infinite;
  opacity:.35;
}
@keyframes frame-rotate{ to{ transform: rotate(360deg) } }

.director-portrait img{
  width:100%; height:100%;
  object-fit: cover; /* change to 'contain' to show full image */
  transform: scale(1.02);
  transition: transform 1.1s ease, filter .8s ease;
  filter: contrast(1.06) saturate(1.08);
}
.director-portrait:hover img{
  transform: scale(1.05);
  filter: contrast(1.1) saturate(1.12);
}

/* Floating particles over portrait (very subtle) */
.director-portrait::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.22) 40%, transparent 41%),
    radial-gradient(2px 2px at 80% 40%, rgba(255,255,255,.18) 40%, transparent 41%),
    radial-gradient(1.6px 1.6px at 60% 78%, rgba(255,255,255,.2) 40%, transparent 41%);
  animation: drift-stars 18s linear infinite;
  opacity:.25;
  pointer-events:none;
}
@keyframes drift-stars{
  from{ transform: translateY(0) }
  to{   transform: translateY(-12px) }
}

/* Details list: creative bullets and rails */
.details-list{
  list-style:none;
  margin: 10px 0 0;
  padding: 8px 6px 0;
  font: 500 16px/2 "Tajawal",system-ui;
  color: var(--ink);
  position: relative;
}
.details-list::before{
  /* faint vertical rail */
  content:"";
  position:absolute; right: 0; top: 0; bottom: 6px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(78,240,181,.35), rgba(35,200,255,.25));
  box-shadow: 0 0 0 3px rgba(78,240,181,.10);
}
.details-list li{
  position:relative;
  padding-inline-start: 28px;      /* space for bullet */
  margin: 4px 0;
}
.details-list li::before{
  content:"";
  position:absolute; inset-inline-start: 0; top: .85em;
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--brand2), var(--brand));
  box-shadow: 0 0 10px rgba(78,240,181,.45);
}
.details-list strong{
  color: var(--brand2);
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  font-weight:800;
}

/* Responsive tweaks */
@media (max-width: 900px){
  .director-card{ padding: 26px 20px; border-radius: 22px; }
  .name{ font-size: 26px }
  .director-portrait{ aspect-ratio: 4/3 }
}
@media (max-width: 560px){
  .name{ font-size: 22px }
  .title{ font-size: 14px }
  .details-list{ font-size: 15px }
}