@font-face {
  font-family: 'LED Dot Matrix';
  src: url('LED_Dot-Matrix_400.ttf') format('truetype'),
       url('fonts/LED_Dot-Matrix_400.ttf') format('truetype'),
       url('pics/LED_Dot-Matrix_400.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. VARIABLES & BASE SETUP
   ========================================================================== */
:root {
  --bg-dark: #0a0d14;
  --bg-card: #121722;
  --bg-card-hover: #19202e;
  --border-color: rgba(255, 255, 255, 0.1);
  --text-main: #f0f4f8;
  --text-muted: #8a99ad;
  --green: #22c55e;
  --green-glow: rgba(34, 197, 94, 0.25);
  --purple-glow: rgba(168, 85, 247, 0.25);
  --font-main: 'DM Sans', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-main);
}

body {
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Custom Cursor */
.cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background-color: var(--green);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
  z-index: 9999;
}

.cursor.big {
  width: 36px;
  height: 36px;
  background-color: var(--green-glow);
  border: 1px solid var(--green);
}

/* ==========================================================================
   2. NAVBAR & HEADER FIXES
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(10, 13, 20, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--green);
  font-family: var(--font-heading);
  font-weight: 700;
}

.brand small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.nav-links {
  display: flex;
  gap: 28px;
}

/* Smooth Underline Indicator */
.nav-links a {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-main);
}

.nav-links a.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.talk-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.talk-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-main);
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero {
  min-height: 100vh;
  padding: 140px 5% 60px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  position: relative;
  gap: 40px;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}

.glow-one {
  top: 10%;
  left: 10%;
  width: 300px;
  height: 300px;
  background: var(--green-glow);
}

.glow-two {
  top: 30%;
  right: 10%;
  width: 350px;
  height: 350px;
  background: var(--purple-glow);
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--green);
}

.hero-copy h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.1;
  margin: 16px 0 24px;
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--green);
}

.hero-copy p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 500px;
  margin-bottom: 32px;
}

.hero-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.primary-btn {
  background: var(--green);
  color: #000000;
  padding: 14px 28px;
  border-radius: 30px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px var(--green-glow);
}

.text-btn {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.text-btn:hover {
  color: var(--text-main);
}

.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-ring {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  overflow: hidden;
  position: relative;
  background: var(--bg-card);
}

.profile-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.availability {
  position: absolute;
  bottom: -20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.availability span {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
}

.scroll-note {
  position: absolute;
  bottom: 20px;
  left: 5%;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--text-muted);
}

/* ==========================================================================
   4. SECTIONS & CARDS
   ========================================================================== */
.section {
  padding: 100px 5%;
}

.section-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  color: var(--green);
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.section-title h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.section-title p {
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 40px;
}

/* Profile Grid */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-top: 40px;
}

.mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 24px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.accent-card {
  border-color: var(--green);
}

.profile-main {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 40px;
  border-radius: var(--radius-md);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 30px 0;
}

.info-card {
  background: var(--bg-dark);
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.info-card span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.quote {
  border-left: 3px solid var(--green);
  padding-left: 16px;
  font-style: italic;
  color: var(--text-muted);
}

/* Certifications Grid */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.cert-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 28px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.cert-card:hover {
  transform: translateY(-5px);
  border-color: var(--green);
}

.cert-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.cert-org {
  font-size: 0.75rem;
  color: var(--green);
  letter-spacing: 1px;
}

.cert-title {
  font-family: var(--font-heading);
  margin: 8px 0;
}

.cert-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.cert-status {
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-verified .status-dot { background: var(--green); }
.status-pending .status-dot { background: #eab308; }

/* Work Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.project-large {
  grid-column: span 2;
}

.project {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.project:hover {
  transform: translateY(-5px);
}

.project-visual {
  height: 240px;
  background: var(--bg-dark);
  position: relative;
  overflow: hidden;
}

.project-large .project-visual {
  height: 380px;
}

.project-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-meta {
  padding: 24px;
}

.project-meta span {
  font-size: 0.75rem;
  color: var(--green);
}

/* Skills & Services Fixes */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.skill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 28px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.skill:hover {
  transform: translateY(-5px);
  border-color: var(--green);
}

.skill span {
  font-size: 0.85rem;
  color: var(--green);
  margin-bottom: 8px;
  font-family: var(--font-heading);
}

.skill h3 {
  font-family: var(--font-heading);
  margin-bottom: 12px;
}

.skill p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.service-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 24px 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.3s ease;
}

.service-num {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.service:hover {
  border-color: var(--green);
}

.service:hover .service-num {
  transform: translateX(12px);
  color: var(--green);
}

/* Contact & Socials */
.contact {
  padding: 100px 5%;
  text-align: center;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
}

.contact h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5vw, 4rem);
  margin: 20px 0;
}

.email {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--green);
  margin: 20px 0;
  word-break: break-word;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 30px;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  transition: all 0.3s ease;
}

.socials a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #000;
  transform: translateY(-3px);
}

footer {
  padding: 40px 5%;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   5. COMPREHENSIVE RESPONSIVE DESIGN (ALL DEVICES)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero {
    padding-top: 120px;
    gap: 30px;
  }
  .section {
    padding: 80px 4%;
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 120px;
  }

  .hero-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .project-large {
    grid-column: span 1;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 4%;
    height: 70px;
  }

  .menu-btn {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: var(--bg-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: right 0.3s ease;
    border-top: 1px solid var(--border-color);
  }

  .nav-links.open {
    right: 0;
  }

  .section-title h2 {
    font-size: 2rem;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .profile-main {
    padding: 24px;
  }

  footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-copy h1 {
    font-size: 2.2rem;
  }

  .profile-ring {
    width: 220px;
    height: 220px;
  }

  .service {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .service b {
    align-self: flex-end;
  }

  .contact {
    padding: 60px 4%;
  }
}

/* ==========================================================================
   6. ABOUT SECTION - LED dot-matrix font + typing caret
   (this font is CAPITALS only and has no & / " ❤ glyphs - those use the fallback)
   ========================================================================== */
.profile-main,
.profile-main h3,
.profile-main p,
.profile-main .info-card span,
.profile-main .info-card b,
.profile-main .quote {
  font-family: 'LED Dot Matrix', 'Courier New', monospace;
}

.profile-main h3 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 3px;
  font-weight: normal;
  margin-bottom: 6px;
}

.profile-main .role {
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  color: var(--green);
  margin-bottom: 14px;
}

.profile-main p {
  font-size: 1.05rem;
  letter-spacing: 1px;
  line-height: 1.9;
}

.profile-main .info-card span { font-size: 0.85rem; letter-spacing: 2px; }
.profile-main .info-card b    { font-size: 1.05rem; letter-spacing: 1px; font-weight: normal; line-height: 1.6; }

.profile-main .quote {
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 1.8;
}
.profile-main .quote b { font-weight: normal; color: var(--text-main); }

.type-caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 3px;
  background: var(--green);
  vertical-align: text-bottom;
  animation: caretBlink 0.8s steps(1) infinite;
}

@keyframes caretBlink { 50% { opacity: 0; } }

/* ==========================================================================
   7. ARROW ANIMATIONS  (only while hovering, moving opposite to their direction)
   ========================================================================== */
.primary-btn,
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.arrow {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  animation-name: none;               /* still when not hovered */
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.arrow-right { --anim: arrowRight; }
.arrow-ne    { --anim: arrowNE; }
.arrow-down  { --anim: arrowDown; }
.arrow-up    { --anim: arrowUp; }

/* each arrow moves in the OPPOSITE direction of where it points, then returns */
@keyframes arrowRight { 0%, 100% { transform: translateX(0); }      50% { transform: translateX(-8px); } }
@keyframes arrowNE    { 0%, 100% { transform: translate(0, 0); }    50% { transform: translate(-6px, 6px); } }
@keyframes arrowDown  { 0%, 100% { transform: translateY(0); }      50% { transform: translateY(-8px); } }
@keyframes arrowUp    { 0%, 100% { transform: translateY(0); }      50% { transform: translateY(8px); } }

/* ONLY when hovering the button/link/row: arrow animates + turns green */
a:hover > .arrow,
.service:hover > .arrow {
  animation-name: var(--anim);
  color: var(--green);
}
/* but not on the green button, or the arrow would vanish */
.primary-btn:hover > .arrow { color: inherit; }


/* ==========================================================================
   8. SERVICES + SKILLS - cool hover animations
   ========================================================================== */

/* ---------- Services rows ---------- */
.service {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 0.6s ease,
              transform 0.4s cubic-bezier(.2, .8, .2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
}

/* text block now sits on the left, right after the number (was floating in the middle) */
.service > div {
  flex: 1;
  margin-left: clamp(20px, 6vw, 80px);
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
}

.service-num { min-width: 36px; }

.service h3 { transition: color 0.3s ease; }

/* green light sweeping in from the left */
.service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0) 75%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(.2, .8, .2, 1);
}

/* thin glowing line along the bottom */
.service::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--green), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(.2, .8, .2, 1);
}

.service:hover::before,
.service:hover::after { transform: scaleX(1); }

.service:hover {
  transform: translateX(10px);
  box-shadow: 0 12px 35px var(--green-glow);
}

.service:hover > div { transform: translateX(8px); }
.service:hover h3    { color: var(--green); }

/* ---------- Skill cards ---------- */
.skill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 0.6s ease,
              transform 0.4s cubic-bezier(.2, .8, .2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
}

/* spotlight that follows the mouse (position set by script.js) */
.skill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(34, 197, 94, 0.2), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* colourful line drawing across the top */
.skill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--green), #a855f7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s cubic-bezier(.2, .8, .2, 1);
}

.skill:hover::before { opacity: 1; }
.skill:hover::after  { transform: scaleX(1); }

.skill:hover {
  transform: translateY(-9px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 30px var(--green-glow);
}

.skill span { transition: letter-spacing 0.4s ease, text-shadow 0.4s ease; }
.skill h3   { transition: color 0.3s ease, transform 0.4s cubic-bezier(.2, .8, .2, 1); }

.skill:hover span { letter-spacing: 4px; text-shadow: 0 0 12px var(--green); }
.skill:hover h3   { color: var(--green); transform: translateX(6px); }

@media (max-width: 480px) {
  .service > div { margin-left: 0; }
}


/* ==========================================================================
   9. SECRET SECTION + "ILLEGAL" THEME  (click "05 / CONTACT")
   ========================================================================== */
.secret-section[hidden] { display: none; }

.secret-section:not([hidden]) {
  animation: secretIn 0.9s cubic-bezier(.2, .8, .2, 1);
}

@keyframes secretIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* the clickable label */
#contact .section-label {
  cursor: text;
  user-select: none;
  -webkit-user-select: none;
}

/* hue that smoothly cycles RED -> GREEN -> BLUE -> RED */
@property --th {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@keyframes illegalHue {
  0%   { --th: 0; }
  33%  { --th: 142; }
  66%  { --th: 217; }
  100% { --th: 360; }
}

html.illegal-theme {
  animation: illegalHue 9s linear infinite;
  --green:         hsl(var(--th) 92% 52%);
  --green-glow:    hsl(var(--th) 92% 52% / 0.3);
  --purple-glow:   hsl(calc(var(--th) + 140) 92% 52% / 0.3);
  --bg-dark:       hsl(var(--th) 45% 4%);
  --bg-card:       hsl(var(--th) 40% 7%);
  --bg-card-hover: hsl(var(--th) 40% 10%);
  --border-color:  hsl(var(--th) 80% 55% / 0.25);
  --text-muted:    hsl(var(--th) 25% 70%);
}

html.illegal-theme .navbar { background: hsl(var(--th) 45% 4% / 0.85); }

/* RGB-split glow on big headings */
html.illegal-theme h1,
html.illegal-theme h2 {
  text-shadow: 2px 0 hsl(var(--th) 95% 55% / 0.6),
              -2px 0 hsl(calc(var(--th) + 180) 95% 55% / 0.5);
}

/* CRT scanlines + flicker */
html.illegal-theme body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px,
              rgba(0, 0, 0, 0.22) 3px);
  animation: crtFlicker 3s infinite;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 0.9; }
  48%      { opacity: 1; }
  50%      { opacity: 0.7; }
  52%      { opacity: 1; }
}

/* "access granted" message */
.illegal-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 12px 22px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--green);
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  letter-spacing: 2px;
  box-shadow: 0 0 25px var(--green-glow);
  animation: toastIn 0.5s ease;
  transition: opacity 0.7s ease;
}
.illegal-toast.out { opacity: 0; }

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ==========================================================================
   10. CERTIFICATE LOGOS - all round badges, same size
   ========================================================================== */
.cert-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* picture fills the whole round badge */
.cert-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cert-card:hover .cert-logo {
  transform: scale(1.1) rotate(-4deg);
  border-color: var(--green);
  box-shadow: 0 0 18px var(--green-glow);
}

/* IBM (dark transparent logo): a little space around it + turned white */
.cert-logo.invert { padding: 8px; }
.cert-logo.invert img { object-fit: contain; filter: invert(1) brightness(1.15); }

/* if a picture is missing, show initials instead of a broken image */
.cert-logo.missing::after {
  content: attr(data-initials);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green);
}


/* ==========================================================================
   11. WORK / PROJECT CARDS - cool animations
   ========================================================================== */
.project {
  position: relative;
  transition: opacity 0.7s ease,
              transform 0.2s ease-out,
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

/* entrance: card is "wiped" in from the top (clip is removed again afterwards,
   so the hover glow is never cut off) */
.project.visible { animation: projectWipe 1s cubic-bezier(.2, .8, .2, 1) backwards; }

@keyframes projectWipe {
  from { clip-path: inset(0 0 100% 0 round 16px); }
  to   { clip-path: inset(0 0 0 0 round 16px); }
}

/* 3D tilt + lift (values are set by script.js while the mouse moves) */
.project.reveal.visible {
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(var(--lift, 0px));
}

.project.visible:hover {
  --lift: -8px;
  border-color: var(--green);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--green-glow);
}

/* mouse spotlight over the whole card */
.project::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
              var(--green-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.project:hover::after { opacity: 0.8; }

/* ---------- picture ---------- */
.project-visual img {
  transform: scale(1.25);                 /* starts zoomed, settles when revealed */
  transition: transform 1.5s cubic-bezier(.2, .8, .2, 1), filter 0.5s ease;
  filter: saturate(0.9) brightness(0.92);
}
.project.visible .project-visual img { transform: scale(1); }

.project.visible:hover .project-visual img {
  transform: scale(1.1);
  transition-duration: 0.9s;
  filter: saturate(1.15) brightness(1.05);
}

/* light streak sweeping over the picture */
.project-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-130%);
}
.project:hover .project-visual::before {
  transform: translateX(130%);
  transition: transform 1s ease;
}

/* number badge */
.project-index {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 5px 12px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 2px;
  color: var(--text-main);
  background: rgba(10, 13, 20, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s ease;
}
.project:hover .project-index {
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 14px var(--green-glow);
  transform: translateY(-3px);
}

/* ---------- text under the picture ---------- */
.project-meta { transition: transform 0.4s cubic-bezier(.2, .8, .2, 1); }
.project:hover .project-meta { transform: translateY(-4px); }

.project-meta h3 {
  display: inline-block;
  background: linear-gradient(var(--green), var(--green)) no-repeat 0 100% / 0 2px;
  transition: background-size 0.5s ease, color 0.3s ease;
}
.project:hover .project-meta h3 {
  background-size: 100% 2px;
  color: var(--green);
}

.project-meta span { transition: letter-spacing 0.4s ease; }
.project:hover .project-meta span { letter-spacing: 3px; }

/* ---------- picture missing? show a nice placeholder instead of an empty box ---------- */
.project-visual.missing {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 10px, transparent 10px 20px),
              var(--bg-dark);
  background-size: 28px 28px, auto;
  animation: stripesMove 2.5s linear infinite;
}
.project-visual.missing::after {
  content: 'IMAGE COMING SOON';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 4px;
  color: var(--text-muted);
}
@keyframes stripesMove { to { background-position: 28px 0, 0 0; } }


/* ==========================================================================
   12. PERFORMANCE (smoother scrolling + animations)
   ========================================================================== */

/* custom cursor is moved with transform now (script.js), not left/top */
.cursor { left: 0; top: 0; will-change: transform; }

/* navbar: a live blur of everything scrolling behind it is very expensive */
.navbar { backdrop-filter: none; background: rgba(10, 13, 20, 0.94); }
html.illegal-theme .navbar { background: hsl(var(--th) 45% 4% / 0.94); }

/* hero glows: a 120px blur filter is heavy -> plain soft gradients look the same */
.hero-glow { filter: none; }
.glow-one {
  width: 560px; height: 560px; top: -5%; left: -5%;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 68%);
}
.glow-two {
  width: 620px; height: 620px; top: 15%; right: -5%;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 68%);
}

/* no live filters on big pictures / badges while hovering */
.project-visual img,
.project.visible:hover .project-visual img { filter: none; }
.project-index { backdrop-filter: none; background: rgba(10, 13, 20, 0.78); }

/* tell the browser what is about to move (only while it matters) */
.project { backface-visibility: hidden; }
.project.visible:hover,
.project.visible:hover .project-visual img,
.skill:hover,
.service:hover { will-change: transform; }

/* illegal theme: far fewer repaints */
html.illegal-theme { animation: illegalHue 9s steps(90) infinite; }
html.illegal-theme body::after { animation: none; }