/* ===== Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; background: #f4f4f4; }

/* Header/Nav (unchanged look; slightly larger) */
header { background: #333; color: #fff; padding: 1rem 0; }
header nav ul { display: flex; justify-content: center; list-style: none; position: relative; }
header nav ul li { margin: 0 12px; position: relative; }
header nav ul li > a { color: #fff; text-decoration: none; font-size: 1.05rem; padding: 8px 10px; display: inline-block; }
header nav ul li > a:hover { text-decoration: underline; }

/* Hover dropdown */
.has-dropdown .dropdown {
  position: absolute; top: 100%; left: 0; min-width: 180px;
  background: #222; padding: 8px 0; display: none; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); z-index: 20;
}
.has-dropdown:hover .dropdown { display: block; }
.dropdown li { margin: 0; }
.dropdown a { color: #fff; display: block; padding: 8px 12px; text-decoration: none; font-size: 0.95rem; }
.dropdown a:hover { background: #2d2d2d; }

/* Sections */
.hero { text-align: center; }
.section { padding: 64px 20px; }
.section h2 { text-align: center; margin-bottom: 14px; }

/* ===== HERO banner ===== */
.hero-banner {
  position: relative;
  min-height: 65vh;
  display: grid;
  place-items: center;
  padding: 60px 20px;
  color: #eaf6ff;
  overflow: hidden;
}
.hero-banner::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url('what-is-data-analytics-mads.jpg');
  background-size: cover; background-position: center;
  filter: brightness(1.08) saturate(1.05);
  z-index: -2;
}
.hero-banner::after {
  content: "";
  position: absolute; inset: 0;
  /* LIGHTER overlay for a brighter image */
  background: radial-gradient(120% 120% at 10% 0%,
              rgba(0,0,0,0.38), rgba(0,0,0,0.30) 40%, rgba(0,0,0,0.38) 100%);
  z-index: -1;
}
.hero-inner { max-width: 1100px; width: 95%; margin: 0 auto; }

/* Bigger hero fonts */
.hero-banner h1 {
  font-size: clamp(2.6rem, 6.5vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  line-height: 1.15;
  margin-bottom: 10px;
}
.hero-banner .subtitle {
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  opacity: 0.98;
}

/* Typewriter baseline */
.type-target { min-height: 1em; position: relative; white-space: pre-line; }
/* Force title and subtitle to stack & center */
.hero-inner .type-target { display: block; margin-left: auto; margin-right: auto; }

.typing::after { content: "▌"; position: absolute; right: -0.15em; animation: blink 1s steps(1) infinite; opacity: 0.9; }
@keyframes blink { 50% { opacity: 0; } }
.typed::after { content: ""; }

/* Part 2 — About */
.section-light { background: #ffffff; color: #222; }
.section-light p { max-width: 950px; margin: 0 auto; }

/* Part 3 — Skills */
.section-dark { background: #0e0e0e; color: #f5f5f5; }
.section-dark .skill {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  max-width: 900px; margin: 14px auto; padding: 8px 0;
}
.skill-label { min-width: 160px; font-weight: 600; }
.bar {
  height: 12px; background: #2a2a2a; border-radius: 999px; overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #00d4ff, #00ffa3); transition: width 1200ms ease; }
.pct { font-weight: 600; min-width: 48px; text-align: right; }

/* Part 4 — Portfolio */
.section-grid { background: #ffffff; }
.cards {
  max-width: 1100px; margin: 18px auto 0; padding: 0 8px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
}
.card {
  display: block; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  text-decoration: none; color: #222;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,0.14); }
.card .thumb { height: 150px; background-size: cover; background-position: center; }
.thumb-1 { background-image: linear-gradient(135deg,#c9f,#9ff); }
.thumb-2 { background-image: linear-gradient(135deg,#f9c,#ff9); }
.thumb-3 { background-image: linear-gradient(135deg,#9fc,#c9f); }
.card h3 { padding: 12px 14px 4px; }
.card p { padding: 0 14px 8px; color: #444; }
.card .cta { display: inline-block; padding: 0 14px 14px; color: #0b6bff; }

/* Footer */
footer { text-align: center; padding: 14px; background: #333; color: #fff; }

/* Mobile */
@media (max-width: 640px) {
  nav ul { flex-wrap: wrap; gap: 10px; }
  .hero-banner { padding: 46px 16px; min-height: 60vh; }
  .section { padding: 48px 16px; }
}

/* ===== Scroll-reveal animation (appears on enter, hides on leave) ===== */
.reveal {
  --d: 0ms;                 /* custom delay (set via data-reveal) */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 600ms ease var(--d),
    transform 600ms ease var(--d);
}
.reveal.show {
  opacity: 1;
  transform: translateY(0);
}