/* =========================================================
   MIRZA NAYEEM — ELEMENTOR PRO CUSTOM CSS (pure CSS, no JS)
   Paste into: Elementor → Site Settings → Custom CSS
   ========================================================= */

:root {
  --mn-bg: #05060a;
  --mn-c1: #22d3ee;   /* cyan   */
  --mn-c2: #8b5cf6;   /* violet */
  --mn-c3: #ec4899;   /* pink   */
  --mn-line: rgba(255, 255, 255, .10);
  --mn-shot-h: 340px; /* height of the project "browser window" */
}

/* ---------- 0. Shared keyframes ---------- */
@keyframes mnFlow    { to { background-position: 200% center; } }
@keyframes mnShine   { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(420%) skewX(-20deg); } }
@keyframes mnSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mnCurtain { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); visibility: hidden; } }
@keyframes mnFloat   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- 1. ENTRY ANIMATION ----------
   A dark curtain slides up on page load (pointer-events:none = never blocks clicks),
   then hero items slide-up one after another. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 99999;
  background: radial-gradient(circle at 50% 50%, #1b1035 0%, var(--mn-bg) 60%);
  pointer-events: none;
  animation: mnCurtain 1s .9s cubic-bezier(.76, 0, .24, 1) forwards;
}
/* brand flash while the curtain is down */
body::after {
  content: "MIRZA NAYEEM";
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center; text-align: center;
  font: 700 clamp(2.2rem, 8vw, 6rem) / 1 "Space Grotesk", "Inter", sans-serif; letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--mn-c1), var(--mn-c2), var(--mn-c3), var(--mn-c1)) 0 0 / 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  pointer-events: none;
  animation: mnBrand 1.7s ease forwards, mnFlow 2s linear infinite;
}
@keyframes mnBrand { 0% { opacity: 0; transform: scale(.92); filter: blur(12px); } 35%, 65% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: scale(1.08); visibility: hidden; } }
body.elementor-editor-active::before,
body.elementor-editor-active::after { display: none; } /* don't annoy yourself in the editor */

.mn-in   { opacity: 0; animation: mnSlideUp .9s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: 1.5s; }
.mn-in-2 { animation-delay: 1.7s; }
.mn-in-3 { animation-delay: 1.9s; }
.mn-in-4 { animation-delay: 2.1s; }
body.elementor-editor-active .mn-in { opacity: 1; animation: none; }

/* ---------- 2. GRADIENT TEXT + ANIMATED TEXT LOGO ----------
   Logo: Heading widget → Advanced → CSS Classes: mn-logo
   Inside any other heading use: <span class="mn-gradient-text">AI.</span> */
.mn-gradient-text,
.mn-logo .elementor-heading-title {
  background: linear-gradient(90deg, var(--mn-c1), var(--mn-c2), var(--mn-c3), var(--mn-c1));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: mnFlow 4s linear infinite;
}
.mn-logo .elementor-heading-title {
  position: relative; display: inline-block; overflow: hidden;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
/* light sweep */
.mn-logo .elementor-heading-title::after {
  content: ""; position: absolute; top: 0; left: 0; width: 25%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  mix-blend-mode: overlay;
  transform: translateX(-120%) skewX(-20deg);
  animation: mnShine 3.5s ease-in-out infinite;
}

/* ---------- 3. GLASS CARDS, GRID BACKDROP, GLOW ---------- */
.mn-glass {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--mn-line) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: 24px;
}
.mn-grid-bg { position: relative; isolation: isolate; }
.mn-grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.mn-glow { position: relative; isolation: isolate; }
.mn-glow::after {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border-radius: 50%;
  left: 15%; top: 10%; background: rgba(139, 92, 246, .28); filter: blur(120px);
  animation: mnFloat 7s ease-in-out infinite; pointer-events: none;
}

/* ---------- 4. BUTTONS ---------- */
.mn-btn .elementor-button,
.elementor-button.mn-btn {
  background: linear-gradient(90deg, var(--mn-c1), var(--mn-c2), var(--mn-c3)) !important;
  background-size: 200% auto !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font-weight: 700; box-shadow: 0 0 40px -8px rgba(139, 92, 246, .8);
  transition: transform .3s, background-position .6s, box-shadow .3s;
}
.mn-btn .elementor-button:hover,
.elementor-button.mn-btn:hover { transform: scale(1.06); background-position: 100% center !important; box-shadow: 0 0 50px -4px rgba(236, 72, 153, .8); }
.mn-btn-ghost .elementor-button {
  background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--mn-line) !important;
  color: #fff !important; border-radius: 999px !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ---------- 5. SKILL BARS (Progress Bar widget) ----------
   Expert:       CSS Classes = mn-expert
   Intermediate: CSS Classes = mn-medium */
.mn-expert .elementor-progress-wrapper,
.mn-medium .elementor-progress-wrapper { background: rgba(255, 255, 255, .10); border-radius: 999px; height: 12px; overflow: visible; }
.mn-expert .elementor-progress-bar {
  border-radius: 999px; height: 12px;
  background: linear-gradient(90deg, var(--mn-c1), var(--mn-c2), var(--mn-c3), var(--mn-c1)) !important;
  background-size: 200% auto !important; animation: mnFlow 4s linear infinite;
  box-shadow: 0 0 18px rgba(139, 92, 246, .7);
}
.mn-medium .elementor-progress-bar { border-radius: 999px; height: 12px; background: #94a3b8 !important; }
.mn-expert .elementor-progress-bar,
.mn-medium .elementor-progress-bar { font-size: 0; }               /* hide the % number inside the bar */
.mn-expert .elementor-title, .mn-medium .elementor-title { color: #fff; font-weight: 600; }

/* ---------- 6. PORTFOLIO CARD + HOVER AUTO-SCROLL ----------
   Loop Item structure:
     Container  [CSS Classes: mn-card]
       ├─ Container [CSS Classes: mn-shot]   ← Background Image = dynamic ACF "screenshot"
       ├─ Heading (project title) / Text (type)
       └─ Button  [CSS Classes: mn-btn]  "Visit Website ↗"
   How it works: the long image is the container's background, scaled to 100% width / auto height.
   background-position "top" → "bottom" slides the whole page through the window. */
.mn-card {
  overflow: hidden; border-radius: 24px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--mn-line);
  transition: transform .5s, border-color .5s, box-shadow .5s;
}
.mn-card:hover, .mn-card:focus-within {
  transform: translateY(-8px);
  border-color: rgba(139, 92, 246, .55);
  box-shadow: 0 24px 60px -20px rgba(139, 92, 246, .6);
}
.mn-shot {
  position: relative;
  height: var(--mn-shot-h); min-height: var(--mn-shot-h);
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;          /* full width, natural (long) height */
  background-position: center top !important;     /* start at top */
  transition: background-position .8s cubic-bezier(.22, 1, .36, 1);   /* quick return */
}
.mn-shot::after {                                 /* soft top fade, looks like a screen */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 40px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent);
}
@media (hover: hover) {
  .mn-card:hover .mn-shot,
  .mn-card:focus-within .mn-shot {
    background-position: center bottom !important;   /* slide to bottom */
    transition: background-position 8s linear;       /* ← scroll duration */
  }
  .mn-card.mn-slow:hover .mn-shot { transition-duration: 14s; }  /* add class mn-slow on very long shots */
  .mn-card.mn-fast:hover .mn-shot { transition-duration: 4s; }
}

/* ---------- 7. EXPERIENCE TIMELINE (Icon Box widgets) ----------
   Parent Container:  CSS Classes = mn-timeline   (Flex column)
   Each Icon Box:     CSS Classes = mn-tl-item */
.mn-timeline { position: relative; }
.mn-timeline::before {                             /* the vertical line */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--mn-c1), var(--mn-c2), var(--mn-c3));
  box-shadow: 0 0 14px rgba(139, 92, 246, .6);
}
.mn-tl-item { position: relative; width: 50% !important; box-sizing: border-box; margin-bottom: 40px !important; }
.mn-tl-item .elementor-widget-container {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--mn-line); border-radius: 20px;
  padding: 26px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .4s, border-color .4s, box-shadow .4s;
}
.mn-tl-item:hover .elementor-widget-container {
  transform: translateY(-6px); border-color: rgba(139, 92, 246, .55); box-shadow: 0 20px 50px -20px rgba(139, 92, 246, .6);
}
.mn-tl-item:nth-child(odd)  { padding-right: 48px; margin-right: auto; }
.mn-tl-item:nth-child(even) { padding-left: 48px;  margin-left: auto; }
.mn-tl-item::after {                               /* the glowing dot */
  content: ""; position: absolute; top: 34px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--mn-bg); border: 2px solid var(--mn-c2); transition: background .3s, box-shadow .3s;
}
.mn-tl-item:nth-child(odd)::after  { right: -8px; }
.mn-tl-item:nth-child(even)::after { left: -8px; }
.mn-tl-item:hover::after { background: var(--mn-c2); box-shadow: 0 0 20px var(--mn-c2); }
.mn-tl-item .elementor-icon-box-title { color: #fff; font-family: "Space Grotesk", sans-serif; }
.mn-tl-item .elementor-icon-box-description { color: #cbd5e1; font-size: 15px; line-height: 1.7; }
.mn-tl-item .elementor-icon { color: var(--mn-c1); }

@media (max-width: 767px) {                        /* mobile: single column, line on the left */
  .mn-timeline::before { left: 14px; transform: none; }
  .mn-tl-item { width: 100% !important; }
  .mn-tl-item:nth-child(n) { padding: 0 0 0 44px; margin-left: 0; margin-right: 0; }
  .mn-tl-item:nth-child(n)::after { left: 6px; right: auto; }
}

/* ---------- 8. ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  body::before, body::after { display: none; }
  .mn-in { opacity: 1; }
}