/* ════════════════════════════════════════════════════════════
   AHMED ALSAIDY PORTFOLIO — White & Blue Theme
   Fonts: Doran (local) + Tajawal (Google)
   Palette: Bright White #FFFFFF · Deep Blue #0A2540 · Cyan Accent #06B6D4
   ════════════════════════════════════════════════════════════ */

@font-face { font-family:'Doran'; src:url('../fonts/Doran-Thin.ttf')      format('truetype'); font-weight:100; font-display:swap; }
@font-face { font-family:'Doran'; src:url('../fonts/Doran-Light.ttf')     format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Doran'; src:url('../fonts/Doran-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Doran'; src:url('../fonts/Doran-Medium.ttf')    format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Doran'; src:url('../fonts/Doran-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Doran'; src:url('../fonts/Doran-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }

/* ── Design Tokens ── */
:root {
  --burg:      #082a4d; /* Modern Deep Blue */
  --deep:      #04152A; /* Deeper Blue for footer/hero */
  --cream:     #FFFFFF; /* Pure White */
  --offwhite:  #F8FAFC; /* Very light slate for contrast if needed */
  --gold:      #06B6D4; /* Cyan Accent */
  --gold-hi:   #22D3EE; 
  --gold-lo:   #0891B2; 
  --txt:       #1E293B; /* Dark Text for Light mode */
  --txt-m:     #64748B; /* Muted Text for Light mode */
  --line:      rgba(6, 182, 212, 0.15); 
  --line-d:    rgba(255, 255, 255, 0.09);

  --fd: 'Doran','Tajawal',serif;
  --ft: 'Tajawal',sans-serif;

  --px: clamp(1.5rem, 5vw, 6rem);
  --py: clamp(5rem, 10vh, 9rem);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }
body { font-family:var(--ft); background:var(--cream); color:var(--txt); overflow-x:hidden; cursor:none; }
a { text-decoration:none; color:inherit; }
img, video { display:block; max-width:100%; border-radius: 6px; }
ul,li { list-style:none; }
.text-center { text-align:center; }

/* ── Skills Subtitle ── */
.skills-subtitle {
  font-family:var(--ft); font-size:1rem; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.8rem;
}

/* ── Scroll Progress Bar ── */
.progress-bar {
  position:fixed; top:0; left:0; right:0; height:2px; z-index:99999;
  background:linear-gradient(to right, var(--gold), var(--gold-hi));
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.1s linear;
  pointer-events:none;
}

/* ── Grain ── */
.grain {
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.03; mix-blend-mode:multiply; 
}
body.dark .grain { mix-blend-mode:screen; opacity:.02; }

/* ── Vertical grid ── */
.vgrid {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  display:flex; justify-content:space-between; padding:0 var(--px);
}
.vgrid span {
  width:1px; background:rgba(0,0,0,.03);
  animation:vgDrop 1.8s var(--ease) both;
  transform-origin:top;
}
.sec--dark .vgrid span, .hero .vgrid span, .footer .vgrid span { background:rgba(255,255,255,.03); }
.vgrid span:nth-child(1){animation-delay:.05s}
.vgrid span:nth-child(2){animation-delay:.12s}
.vgrid span:nth-child(3){animation-delay:.19s}
.vgrid span:nth-child(4){animation-delay:.26s}
.vgrid span:nth-child(5){animation-delay:.33s}
@keyframes vgDrop { 0%{transform:scaleY(0)} 100%{transform:scaleY(1)} }

/* ── Scroll Wrapper ── */
#sw { width:100%; overflow:hidden; position:relative; z-index:2; }
#sc { will-change:transform; width:100%; }

/* ── Custom Cursor ── */
.cur-dot {
  position:fixed; top:0; left:0; width:8px; height:8px;
  background:var(--gold); border-radius:50%; pointer-events:none; z-index:10000;
  transform:translate(-50%,-50%); transition:background .3s;
}
.cur-ring {
  position:fixed; top:0; left:0; width:40px; height:40px;
  border:1.5px solid rgba(6, 182, 212, 0.4); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), background .3s, border-color .3s, opacity .3s;
  display:flex; align-items:center; justify-content:center;
  font-size:.55rem; letter-spacing:1px; font-family:var(--ft);
}
body.c-hide .cur-dot { transform:translate(-50%,-50%) scale(0); }
body.c-hide .cur-ring { width:0;height:0;opacity:0; }
body.c-dim  .cur-ring { width:60px;height:60px;background:rgba(6,182,212,.12); border-color:var(--gold); }

/* ── Navigation ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.8rem) var(--px);
  transition:background .5s, backdrop-filter .5s, box-shadow .5s, color .5s;
  color: #fff;
}
.nav.stuck {
  background:rgba(255, 255, 255, .95);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  color: var(--txt);
}
.nav__links { display:flex; gap:clamp(1.5rem,3vw,3rem); font-size:.88rem; font-weight:500; }
.nav__link { position:relative; padding-bottom:3px; }
.nav__link::after {
  content:''; position:absolute; bottom:0; right:0; width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav__link:hover::after { transform:scaleX(1); }
.nav__cta {
  font-size:.85rem; font-weight:700; padding:.5rem 1.25rem;
  border:1.5px solid var(--gold); border-radius:4px;
  color:inherit; transition:background .3s, color .3s;
}
.nav__cta:hover { background:var(--gold); color:#fff; }
.lang-switch {
  display:inline-block; font-family:var(--ft); font-weight:800; font-size:.85rem;
  padding:.3rem .6rem; border-radius:4px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  transition:all .3s;
}
.lang-switch:hover { background:var(--gold); border-color:var(--gold); color:#fff; transform:scale(1.05); }

/* ── Section Structure ── */
.sec { position:relative; overflow:hidden; }
.sec--light { background:var(--cream); color:var(--txt); }
.sec--dark  { background:var(--burg);  color:#fff; }

.wrap { max-width:1360px; margin:0 auto; padding:var(--py) var(--px); position:relative; z-index:1; }
.wrap--split { display:grid; grid-template-columns:5fr 7fr; gap:6vw; align-items:start; }
@media(max-width:860px){ .wrap--split{grid-template-columns:1fr; gap:3rem;} }

/* SVG Waves */
.sec__wave { position:relative; width:100%; line-height:0; margin-top:-1px; }
.sec__wave svg { display:block; width:100%; height:clamp(70px,8vw,120px); }
.hero__wave { position:absolute; bottom:0; left:0; right:0; line-height:0; z-index:2; }
.hero__wave svg { display:block; width:100%; height:clamp(70px,8vw,120px); }

/* Typography */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ft); font-size:.75rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem;
}
.eyebrow::before {
  content:''; display:block; width:24px; height:1.5px;
  background:var(--gold); flex-shrink:0;
}
.eyebrow--light { color:var(--gold); }

.sec__h {
  font-family:var(--fd); font-weight:800;
  font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.15;
  color:inherit; margin-bottom:2rem;
}
.sec__h--light { color:#fff; }
.sec__head { margin-bottom:clamp(3rem,6vh,5rem); }
.sec__head--center { text-align:center; }
.sec__sub { font-family:var(--ft); font-size:1rem; line-height:1.8; color:rgba(255,255,255,.55); max-width:560px; margin:1rem auto 3rem; }
.sec__pin { position:sticky; top:28vh; }
.sec__body { display:flex; flex-direction:column; gap:2rem; }
.sec__lead { font-family:var(--ft); font-size:clamp(1.1rem,1.8vw,1.3rem); line-height:1.9; font-weight:400; color:inherit; }

/* ════════════════════════════════════════
   HERO 
════════════════════════════════════════ */
.hero {
  position:relative; min-height:100vh; background:var(--burg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background: radial-gradient(circle at 60% 50%, rgba(6,182,212,0.1) 0%, transparent 60%);
}
.hero-wrap {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1400px; z-index: 2; padding-top: 5vh; gap: 4rem; flex-wrap: wrap-reverse;
}

.hero-right {
  flex: 1; min-width: 320px;
}
.hero-left {
  flex: 1; display: flex; justify-content: center; align-items: center; min-width: 320px;
}

.hero__image-container {
  position: relative; width: min(420px, 80vw); padding-bottom: 3rem;
}
.hero-img {
  width: 100%; height: auto; object-fit: cover;
  border-radius: 20px;
  mask-image: linear-gradient(to top, transparent 0%, black 15%);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 15%);
  filter: contrast(1.05) brightness(1.1);
  position: relative; z-index: 2;
  transition: transform 0.5s var(--ease);
}
.hero-img-glow {
  position: absolute; top: 5%; left: -5%; right: -5%; bottom: -5%;
  background: linear-gradient(45deg, var(--gold), transparent, var(--gold-lo));
  filter: blur(40px); opacity: 0.3; z-index: 0; border-radius: 50%;
  animation: pulseGlow 6s ease-in-out infinite alternate;
}
@keyframes pulseGlow { 0% {opacity:0.2; transform:scale(0.95);} 100% {opacity:0.4; transform:scale(1.05);} }


.hero__eyebrow {
  font-family:var(--ft); font-size:clamp(.8rem,1vw,.95rem); letter-spacing:2px;
  color:rgba(255,255,255,.7); margin-bottom:2.5vh; font-weight:700;
}
.hero__h1 {
  font-family:var(--fd); font-weight:800; font-size:clamp(3rem,7vw,6.5rem); line-height:1.1;
  color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero__badges {
  display:flex; align-items:center; gap:1rem; margin-top:2rem; flex-wrap:wrap;
}
.hero__badge {
  font-family:var(--ft); font-size:clamp(.75rem,1.1vw,.95rem); font-weight:600; letter-spacing:1px;
  color:#fff; padding:.4rem 1.2rem;
  border:1px solid rgba(6,182,212,.3); border-radius:30px; background:rgba(6,182,212,.08);
}
.hero__badge-sep { font-size:.8rem; color:rgba(6,182,212,.5); }
.hero__scroll-btn {
  display:inline-flex; align-items:center; gap:1rem; flex-direction: row;
  margin-top:5vh; pointer-events:all; transition:opacity .3s;
}
.hero__scroll-btn:hover { opacity:.7; }
.hero__scroll-line {
  width:55px; height:1px; background:linear-gradient(to right, transparent, var(--gold));
  animation:linePulseX 2s ease-in-out infinite;
}
@keyframes linePulseX { 0%,100%{transform:scaleX(.6);opacity:.5} 50%{transform:scaleX(1);opacity:1} }
.hero__scroll-text { font-family:var(--ft); font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.6); }


/* ════════════════════════════════════════
   STATS
════════════════════════════════════════ */
.stats { display:flex; gap:3rem; margin-top:1.5rem; }
@media(max-width:580px){ .stats{gap:1.5rem;} }
.stat__num { display:block; font-family:var(--fd); font-weight:800; font-size:clamp(2.5rem,4vw,3.5rem); color:var(--gold); line-height:1; margin-bottom:.3rem; }
.stat__lbl { display:block; font-family:var(--ft); font-size:.9rem; color:var(--txt-m); letter-spacing:.5px; }


/* ════════════════════════════════════════
   TIMELINE (Experience)
════════════════════════════════════════ */
.timeline {
  display: flex; flex-direction: column; position: relative; margin: 0 auto; max-width: 900px; padding: 2rem 0;
}
.timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 24px;
  width: 2px; background: rgba(6,182,212,.2);
}
@media (max-width: 600px) { .timeline::before { right: 14px; } }
.timeline-item { position: relative; padding-right: 60px; margin-bottom: 3.5rem; }
@media (max-width: 600px) { .timeline-item { padding-right: 45px; margin-bottom: 2.5rem; } }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-marker {
  position: absolute; top: 12px; right: 16px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--gold); border: 4px solid var(--burg);
  box-shadow: 0 0 0 4px rgba(6,182,212,.15);
  transition: transform 0.4s var(--ease), background 0.4s;
}
@media (max-width: 600px) { .timeline-marker { right: 6px; } }
.timeline-item:hover .timeline-marker { transform: scale(1.3); background: #fff; }

.timeline-content {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 2rem;
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s;
}
.timeline-item:hover .timeline-content {
  transform: translateX(-10px); border-color: rgba(6,182,212,.4); background: rgba(6,182,212,.1);
}
.timeline-date {
  font-family: var(--ft); font-size: 0.82rem; font-weight: 700; letter-spacing: 1px;
  color: var(--gold); margin-bottom: 1rem; display: inline-block;
  padding: 0.3rem 1rem; background: rgba(6,182,212,.15); border-radius: 30px;
}
.timeline-title { font-family: var(--fd); font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.3rem; }
.timeline-company { font-family: var(--ft); font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,.7); margin-bottom: 1.2rem; }
.timeline-desc { font-family: var(--ft); font-size: 1rem; line-height: 1.8; color: rgba(255,255,255,.8); }


/* ════════════════════════════════════════
   SKILLS GRID
════════════════════════════════════════ */
.skills-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.skill-badge {
  font-family: var(--ft); font-size: 0.95rem; font-weight: 500;
  padding: 0.8rem 1.6rem; color: var(--txt);
  background: rgba(0,0,0,.02); border: 1.5px solid var(--gold);
  border-radius: 30px; cursor: default;
  transition: background 0.3s, color 0.3s, transform 0.3s, border-color 0.3s;
}
.skill-badge:hover {
  background: var(--gold); color: #fff; transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 20px rgba(6,182,212,.2); border-color: var(--gold);
}
.skill-badge--gold { background: rgba(6,182,212,.1); border-color: transparent; color: var(--burg); }


/* ════════════════════════════════════════
   PROJECTS GRID (Videos & Images)
════════════════════════════════════════ */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 2rem; }
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } }
.work-card {
  background: var(--cream); border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
  box-shadow: 0 5px 15px rgba(0,0,0,.02);
}
.work-card:hover {
  transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.1);
  border-color: rgba(6,182,212,.3);
}
.work-media { width: 100%; height: 260px; background: #000; overflow: hidden; }
.work-media video, .work-media img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity 0.4s, transform 0.8s var(--ease);
}
.work-card:hover .work-media video, .work-card:hover .work-media img {
  opacity: 1; transform: scale(1.05);
}
.work-info { padding: 1.8rem; border-top: 1px solid rgba(0,0,0,.05); }
.work-info h3 { font-family: var(--fd); font-size: 1.3rem; font-weight: 700; color: var(--txt); margin-bottom: 0.5rem; }
.work-info p { font-family: var(--ft); font-size: 0.9rem; color: var(--txt-m); line-height: 1.7; }

/* ════════════════════════════════════════
   MASONRY GRID (Designs)
════════════════════════════════════════ */
.masonry-grid {
  columns: 3 320px; column-gap: 2rem; width: 100%;
}

/* Initial hidden state — JS adds .vis to trigger the stagger animation */
.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  /* Animation state: hidden until JS adds .vis */
  opacity: 0;
  filter: blur(10px);
  transform: translateY(40px) scale(0.95);
  transition:
    opacity    0.65s cubic-bezier(0.19, 1, 0.22, 1),
    transform  0.65s cubic-bezier(0.19, 1, 0.22, 1),
    filter     0.65s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.4s,
    z-index    0.4s;
  will-change: transform, opacity, filter;
}

/* Revealed state */
.masonry-item.vis {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* Hover — only when already visible */
.masonry-item.vis:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  z-index: 2;
}

.masonry-item img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  transition: transform 0.5s var(--ease), filter 0.4s;
  filter: brightness(0.9);
}
.masonry-item.vis:hover img { transform: scale(1.03); filter: brightness(1.1); }


/* ════════════════════════════════════════
   VOICE OVER / PODCASTS
════════════════════════════════════════ */
.podcast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 4rem; }
.podcast-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--cream); border: 1px solid rgba(0,0,0,.05); box-shadow: 0 5px 15px rgba(0,0,0,.02);
  border-radius: 12px; padding: 2rem; transition: transform 0.4s var(--ease), border-color 0.4s;
}
.podcast-card:hover { transform: translateY(-8px); border-color: rgba(6,182,212,.4); box-shadow: 0 15px 30px rgba(0,0,0,.08); }
.podcast-card img {
  width: 120px; height: 120px; object-fit: cover; border-radius: 50%;
  margin-bottom: 1.5rem; border: 4px solid var(--cream);
  box-shadow: 0 0 0 2px var(--gold); padding: 4px; background: var(--cream);
}
.podcast-card h3 { font-family: var(--fd); font-size: 1.25rem; color: var(--txt); margin-bottom: 0.6rem; }
.podcast-card p { font-family: var(--ft); font-size: 0.9rem; color: var(--txt-m); line-height: 1.6; margin-bottom: 2rem; }
.audio-wrap { width: 100%; border-radius: 30px; overflow: hidden; }
.audio-wrap audio { width: 100%; height: 40px; outline: none; }
.audio-wrap audio::-webkit-media-controls-panel { background: rgba(6,182,212,.1); }
.audio-wrap audio::-webkit-media-controls-play-button,
.audio-wrap audio::-webkit-media-controls-mute-button { background-color: rgba(6,182,212,.8); border-radius: 50%; }
.audio-wrap audio::-webkit-media-controls-current-time-display,
.audio-wrap audio::-webkit-media-controls-time-remaining-display { color: var(--txt); font-family: var(--ft); }


/* ════════════════════════════════════════
   CERTIFICATES GRID
════════════════════════════════════════ */

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
@media (max-width: 1100px) { .cert-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 750px)  { .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (max-width: 480px)  { .cert-grid { grid-template-columns: 1fr; } }

.cert-card {
  background: var(--cream);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
}
.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  border-color: rgba(6,182,212,.35);
}
.cert-card__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f0f4f8;
}
.cert-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
  border-radius: 0;
}
.cert-card:hover .cert-card__img-wrap img { transform: scale(1.05); }
.cert-card__info {
  padding: 1rem 1.2rem 1.3rem;
  text-align: right;
}
.cert-card__name {
  font-family: var(--fd);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.cert-card__org {
  font-family: var(--ft);
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.5px;
}


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer { background:var(--deep); color:#fff; }
.footer__top { padding:clamp(5rem,12vh,10rem) var(--px) clamp(4rem,8vh,7rem); text-align:center; max-width:1360px; margin:0 auto; }
.footer__title { font-family:var(--fd); font-weight:800; font-size:clamp(2.8rem,7.5vw,6rem); line-height:1.1; margin:1.5rem 0 3rem; }
.footer__email {
  display:inline-block; font-family:var(--fd); font-weight:300;
  font-size:clamp(1.3rem,3vw,2.4rem); letter-spacing:.5px;
  color:rgba(255,255,255,.6); position:relative; transition:color .4s;
}
.footer__email::after {
  content:''; position:absolute; bottom:-5px; left:0; right:0; height:1px; background:var(--gold);
  transform:scaleX(.15); transform-origin:right; transition:transform .6s var(--ease);
}
.footer__email:hover { color:var(--gold); }
.footer__email:hover::after { transform:scaleX(1); transform-origin:left; }

.footer__bottom { border-top:1px solid rgba(255,255,255,.07); padding-top:3.5rem; padding-bottom:4rem; }
.footer__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; }
@media(max-width:900px){ .footer__grid{grid-template-columns:repeat(2,1fr); gap:3rem;} }
@media(max-width:500px){ .footer__grid{grid-template-columns:1fr;} }
.fc { display:flex; flex-direction:column; gap:.9rem; text-align:right; }
.fc__title { font-family:var(--ft); font-size:.68rem; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.4rem; }
.fc__link { font-family:var(--ft); font-size:1rem; color:rgba(255,255,255,.8); transition:color .3s, transform .3s; width:fit-content; align-self:flex-end; }
.fc__link:hover { color:var(--gold); transform:translateX(-4px); }
.footer__copy { font-family:var(--ft); font-size:.8rem; color:rgba(255,255,255,.4); line-height:1.7; margin-top:1rem; }

/* ── Premium Global Reveals ── */
.reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(60px) scale(0.95);
  transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1),
              transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
              filter 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity, filter;
}
.reveal.in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* ── Smart Staggered Components ── */
.stagger-child {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(50px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
              transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
              filter 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity, filter;
  pointer-events: none; /* Protect against hover breaking anim */
}
.stagger-child.in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Stagger children of a revealed container */
.intro-stagger.in > * { animation: none; }

.preloader {
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  overflow:hidden; pointer-events:all;
}
.pre__bg { position:absolute; inset:0; background:var(--deep); transition:transform 1s cubic-bezier(.76,0,.24,1); }
.pre__bg--1 { transform-origin:top; }
.pre__bg--2 { transform-origin:bottom; background:var(--burg); }
.preloader.split .pre__bg--1 { transform:translateY(-100%); }
.preloader.split .pre__bg--2 { transform:translateY(100%); }

.pre__center { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:2rem; }
.pre__logo { opacity:0; transform:translateY(20px); transition:opacity .7s, transform .7s var(--ease); }
.preloader.show-logo .pre__logo { opacity:1; transform:translateY(0); }
.pre__line { width:0; height:2px; background:linear-gradient(to left, transparent, var(--gold), transparent); transition:width 1.2s var(--ease); }
.preloader.show-logo .pre__line { width:min(260px,50vw); }
.pre__counter { position:absolute; bottom:8vh; left:50%; transform:translateX(-50%); font-family:var(--fd); font-size:clamp(3rem,6vw,5rem); font-weight:800; color:rgba(255,255,255,.08); letter-spacing:-2px; z-index:2; transition:color .4s; pointer-events:none; user-select:none; }
.pre__tagline { position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:.8rem; z-index:2; white-space:nowrap; opacity:0; transform:translateX(-50%) translateY(8px); transition:opacity .6s, transform .6s var(--ease); }
.preloader.show-logo .pre__tagline { opacity:1; transform:translateX(-50%) translateY(0); }
.pre__tagline span { font-family:var(--fd); font-size:clamp(.9rem,1.5vw,1.2rem); font-weight:400; color:rgba(255,255,255,.6); letter-spacing:2px; }
.pre__tagline-dot { color:var(--gold) !important; opacity:.6; }
.preloader.gone { display:none; }

.hero__eyebrow, .hero__h1, .hero__badges, .hero__scroll-btn, .hero-left {
  opacity:0; transform:translateY(30px); transition:opacity .0s;
}
.hero-left.visible     { animation:heroFadeUp 1s    var(--ease)  .1s forwards; }
.hero__eyebrow.visible { animation:heroFadeUp .9s   var(--ease)  .2s forwards; }
.hero__h1.visible      { animation:heroFadeUp 1.1s  var(--ease)  .35s forwards; }
.hero__badges.visible  { animation:heroFadeUp .9s   var(--ease)  .55s forwards; }
.hero__scroll-btn.visible { animation:heroFadeUp .8s var(--ease) .75s forwards; }
@keyframes heroFadeUp { to { opacity:1; transform:translateY(0); } }

.hero-particle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:floatP var(--dur,8s) ease-in-out var(--del,0s) infinite alternate;
  opacity:var(--op,.12); background:var(--gold); filter:blur(var(--blur,0px));
}
@keyframes floatP {
  0%   { transform:translate(0,0) scale(1); }
  100% { transform:translate(var(--tx,20px), var(--ty,-30px)) scale(var(--sc,1.1)); }
}

/* ════════════════════════════════════════
   CERT CAROUSEL (Infinite Scroll — en.html)
════════════════════════════════════════ */
.cert-carousel {
  overflow: hidden;
  width: 100%;
  padding: 1.5rem 0;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.cert-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: certScroll 40s linear infinite;
}
.cert-track img {
  height: 220px;
  width: auto;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(6,182,212,.15);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
  cursor: zoom-in;
}
.cert-track img:hover {
  transform: scale(1.05) translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(6,182,212,.25);
}
@keyframes certScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cert-carousel:hover .cert-track { animation-play-state: paused; }

@media(max-width:860px) {
  .nav__links { display:none; }
  .hero-wrap { justify-content: center; text-align: center; gap: 2rem; padding-top: 1rem; }
  .hero-left, .hero-right { flex: 1 1 100%; min-width: 100%; margin-top: 0; }
  .hero__scroll-btn { flex-direction: column; margin-top: 2.5rem; }
  .hero__scroll-line { width: 1px; height: 55px; background:linear-gradient(to bottom, transparent, var(--gold)); animation:linePulse 2s ease-in-out infinite; }
  @keyframes linePulse { 0%,100%{transform:scaleY(.6);opacity:.5} 50%{transform:scaleY(1);opacity:1} }
  
  /* Prevent horizontal scroll */
  body, html { overflow-x: hidden !important; width: 100%; }
  
  /* Typography resizing for phones */
  .hero__h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.3; }
  .sec__h { font-size: clamp(1.8rem, 7vw, 2.5rem); margin-bottom: 1.5rem; }
  .stat__num { font-size: clamp(1.8rem, 6vw, 2.2rem); }
  
  /* Fix Hero Image blowing out width */
  .hero__image-container { width: min(300px, 85vw); margin: 0 auto; padding-bottom: 1.5rem; }
  .hero__badges { justify-content: center; gap: 0.8rem; margin-top: 1.5rem; }
  
  /* Fix grid overflow & margins */
  .masonry-grid { columns: 2 150px; column-gap: 1rem; }
  .masonry-item { margin-bottom: 1rem; }
  .timeline::before { right: 8px; }
  .timeline-marker { right: -1px; }
  .timeline-item { padding-right: 35px; }
  .timeline-content { padding: 1.5rem 1rem; }
  .footer__title { font-size: clamp(2rem, 6vw, 3rem); }
  .footer__email { font-size: clamp(1.1rem, 5vw, 1.5rem); }

  /* On mobile: masonry items always visible (touch devices can't hover to reveal) */
  .masonry-item {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable 3D hover effects on touch */
  .work-card:hover { transform: none; }
  .cert-card:hover { transform: none; }
  .podcast-card:hover { transform: none; }
}

@media(max-width:480px) {
  .masonry-grid { columns: 1; }
  .stats { flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 2rem; }
  .hero__badge { padding: 0.3rem 0.8rem; font-size: 0.75rem; }
  .wrap { padding: clamp(3rem, 6vh, 4rem) clamp(1rem, 3vw, 1.2rem); }
  .cert-track img { height: 160px; }
  .work-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .podcast-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .cert-card__name { font-size: 0.82rem; }
}

/* ── Reduced Motion Accessibility ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .masonry-item { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}