/* Base theme */
:root{
  --bg: #0b0f14;
  --fg: #e6edf3;
  --muted: #b5c1cc;
  --accent: #C0448F;
  --card: #121821;
  --border: #1c2531;
  --shadow: 0 10px 30px rgba(255, 3, 183, 0.15);
  --link: #E75480;                 /* readable on dark */
  --link-hover: var(--fg);          /* on hover/focus */
  --link-hi: rgba(192, 68, 142, 0.729);  /* pink wash highlight */
  --link-underline: rgba(192, 68, 143, .85);
}

/* Light theme overrides */
:root[data-theme="light"]{
  --bg: #f6f7fb;
  --fg: #0e1420;
  --muted: #9e55b8;
  --accent: #C0448F;            /* keep pink accent */
  --card: #ffffff;
  --border: #e3e8ef;
  --shadow: 0 10px 30px rgba(21, 12, 31, 0.321);
  --link: #7a0e4f;                  /* readable on light */
  --link-hover: #000;               /* subtle dark text on hover */
  --link-hi: rgba(192, 68, 143, .18);
  --link-underline: rgba(192, 68, 143, .8);
}


/* Changing the pointer */
/* Custom circular cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;          /* size of circle */
  height: 28px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none; /* let clicks pass through */
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out, background-color 0.25s ease;
  z-index: 9999;
  mix-blend-mode: difference; /* cool effect on dark/light backgrounds */
}

/* Grow the cursor slightly when hovering links/buttons */
a:hover ~ .custom-cursor,
button:hover ~ .custom-cursor,
.custom-cursor.hovering {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: var(--accent);
}



/* Changing of theme colours when hovering on texts with links */
/* Content links inside sections: highlight-on-hover */
.section .container :where(p, li, h3, h4, h5) a:not(.button):not(.brand){
  position: relative;
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(var(--link-hi), var(--link-hi));
  background-size: 0% 60%;
  background-position: 0 85%;
  background-repeat: no-repeat;
  transition: background-size .22s ease, color .18s ease, border-color .18s ease;
}

/* Hover + keyboard focus */
.section .container :where(p, li, h3, h4, h5) a:not(.button):not(.brand):hover,
.section .container :where(p, li, h3, h4, h5) a:not(.button):not(.brand):focus-visible{
  background-size: 100% 60%;
  color: var(--link-hover);
  border-color: var(--link-underline);
  outline: none;
}

/* High-contrast visible focus ring for accessibility */
.section .container :where(p, li, h3, h4, h5) a:not(.button):not(.brand):focus-visible{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: .2rem;
}

/* Utility to opt-in anywhere */
.hl-link{
  position: relative;
  color: var(--link);
  text-decoration: none;
  background-image: linear-gradient(var(--link-hi), var(--link-hi));
  background-size: 0% 60%;
  background-position: 0 85%;
  background-repeat: no-repeat;
  transition: background-size .22s ease, color .18s ease, border-color .18s ease;
  border-bottom: 1px solid transparent;
}
.hl-link:hover,
.hl-link:focus-visible{
  background-size: 100% 60%;
  color: var(--link-hover);
  border-color: var(--link-underline);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: .2rem;
}




/* smooth color transitions */
*{ transition: color .2s linear, background-color .2s linear, border-color .2s linear; }
.avatar{ transition: box-shadow .2s linear, background .2s linear; }

/* Theme toggle button (simple) */
.theme-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--fg);
  border:1px solid var(--border); border-radius:.6rem;
  padding:.5rem .75rem; cursor:pointer; font-weight:600;
}
.theme-toggle:hover{ background:rgba(235, 3, 216, 0.394); }
.theme-toggle .theme-icon{ width:1.1rem; display:inline-block; }


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 80% -20%, rgba(124,172,248,.15), transparent 60%), var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}

.narrow{width:min(800px, 92%)}

.section{padding: clamp(3rem, 6vw, 6rem) 0}

h1,h2,h3{line-height:1.2;margin:0 0 .75rem}
h1{font-size: clamp(2rem, 4vw, 3rem)}
h2{font-size: clamp(1.5rem, 3vw, 2rem)}
h3{font-size: clamp(1.1rem, 2.2vw, 1.25rem)}

p{margin:0 0 1rem}
.lead{font-size: clamp(1rem, 2.2vw, 1.25rem);color: var(--muted)}

.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 10;
  background: rgba(11,15,20,.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 0;
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--fg);font-weight:700}
.brand-initials{background:var(--accent);color:#0b0f14;border-radius:10px;padding:.25rem .5rem}
.brand-name{opacity:.9}

.site-nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.site-nav a{color:var(--accent);text-decoration:none;padding:.5rem;border-radius:.5rem}
.site-nav a:hover{color:var(--fg);background:rgba(235, 3, 215, 0.315)}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--fg);margin:5px 0;border-radius:2px}

@media (max-width: 800px){
  .nav-toggle{display:block}
  .site-nav{position:absolute; inset: 60px 0 auto 0; display:none; background:var(--bg); border-bottom:1px solid var(--border)}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column; padding: .5rem}
}

/* These are the new navigation bar colours which may need to be edited */
/* 1) Add header-specific vars */
:root{
  --header-bg: rgba(11,15,20,.7);  /* dark default */
  --header-border: var(--border);
  --nav-icon: var(--fg);           /* hamburger/icon color */
  --nav-hover-bg: rgba(235, 3, 216, 0.568);
}

:root[data-theme="light"]{
  --header-bg: rgba(255,255,255,.75);   /* light glass */
  --header-border: #e3e8ef;
  --nav-icon: #0e1420;                  /* dark bars/icons */
  --nav-hover-bg: rgba(225, 0, 255, 0.319);      /* softer hover */
}

/* 2) Use those vars in the header + nav */
.site-header{
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--header-border);
  color: var(--fg);
}

/* Hamburger bars use the icon var, not fg */
.nav-toggle span{
  display:block; width:26px; height:2px;
  background: var(--nav-icon);
  margin:5px 0; border-radius:2px;
}

/* Nav link colors + hover work in both themes */
.site-nav a{
  color: var(--muted);
  text-decoration:none; padding:.5rem; border-radius:.5rem;
}
.site-nav a:hover{
  color: var(--fg);
  background: var(--nav-hover-bg);
}

/* Mobile menu background should follow theme */
@media (max-width: 800px){
  .site-nav{ background: var(--bg); border-bottom:1px solid var(--header-border); }
}



/* existing hero layout */
.hero-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }

/* Avatar card shell – unchanged look */
.avatar{
  --background_color:#000;
  --color_purple_light:#e2a9e5;
  --color_purple_med:#632c65;
  --color_purple_dark:#4b384c;
  --time:2.5s;

  width:220px; height:220px; margin-inline:auto;
  border-radius:22px; position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(124, 172, 248, 0.115), rgba(124, 172, 248, 0.061));
  border:1px solid var(--border, rgba(255, 255, 255, 0.097));
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.25));
  display:grid; place-items:center;
}

/* Animation container (your .main/.center adapted inside .avatar) */
.center{
  display:flex; position:relative; flex-wrap:wrap; justify-content:center; align-items:center;
  width:100px; height:100px; border-radius:50%;
  background-color: rgba(75,56,76,0.25);            /* var(--color_purple_dark) */
  box-shadow: 0 0 0 2px rgba(99,44,101,0.75);       /* var(--color_purple_med) */
  animation: spin var(--time) cubic-bezier(0.75,0,0,0.75) infinite forwards;
}

/* inner ring */
.center:before{
  content:""; position:absolute; inset:5px; border:1px solid rgba(99,44,101,0.25); border-radius:50%;
}
/* pulsing core */
.center:after{
  content:""; position:absolute; inset:40px; border-radius:50%;
  background-color: var(--color_purple_med);
  animation: pulse var(--time) ease-in-out infinite alternate;
}

/* angled corners */
.angle{
  display:inline-block; position:relative; width:30px; height:30px;
  transform: rotate(45deg); border-width:2px; border-color: var(--color_purple_light);
}
.angle:first-of-type{
  border-bottom-style:solid; border-left-style:solid;
  animation: panL var(--time) ease-in-out infinite alternate;
}
.angle:last-of-type{
  border-top-style:solid; border-right-style:solid;
  animation: panR var(--time) ease-in-out infinite alternate;
}

/* the small dots on each angle */
.angle:before{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  background-color: rgba(226,169,229,0.5); left:-8px; top:-8px;
}
.angle:first-of-type:before{ animation: slideL var(--time) linear infinite alternate; }
.angle:last-of-type:before{  animation: slideR var(--time) linear infinite alternate; }

/* keyframes (from your SCSS) */
@keyframes pulse{
  0%{transform:scale(1)} 50%{transform:scale(0)} 100%{transform:scale(1)}
}
@keyframes spin{
  0%{transform:rotate(0deg)} 100%{transform:rotate(359deg)}
}
@keyframes panL{
  0%{transform:translate(0,0) rotate(45deg)}
  50%{transform:translate(15px,0) rotate(45deg)}
  100%{transform:translate(0,0) rotate(45deg)}
}
@keyframes panR{
  0%{transform:translate(0,0) rotate(45deg)}
  50%{transform:translate(-15px,0) rotate(45deg)}
  100%{transform:translate(0,0) rotate(45deg)}
}
@keyframes slideL{
  0%{transform:translate(0,0) scale(.5)}
  50%{transform:translate(0,30px) scale(1.25)}
  100%{transform:translate(30px,30px) scale(.5)}
}
@keyframes slideR{
  0%{transform:translate(0,0) scale(.5)}
  50%{transform:translate(30px,0) scale(1.25)}
  100%{transform:translate(30px,30px) scale(.5)}
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .center, .center:after, .angle, .angle:before{ animation:none !important }
}



/* Buttons */
.button{
  display:inline-block; padding:.75rem 1rem; border-radius:.75rem;
  background: var(--accent); color: #0b0f14; text-decoration:none; font-weight:700; box-shadow: var(--shadow)
}
.button.secondary{background:transparent;color:var(--fg);border:1px solid var(--border)}
.button.small{font-size:.9rem;padding:.5rem .75rem}

/* Cards + timeline */
.cards-grid{display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem}
.cards-grid .card{grid-column: span 4; min-height: 100%;}
@media (max-width: 900px){
  .cards-grid .card{grid-column: span 6}
}
@media (max-width: 600px){
  .cards-grid .card{grid-column: span 12}
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.card .meta{opacity:.7;font-weight:600;margin-left:.35rem}

.timeline{display:grid; gap: 1rem}
.timeline .card h3{margin-bottom:.25rem}

/* Contact */
.contact-list{display:flex; flex-wrap:wrap; gap: .75rem; padding:0; margin: .5rem 0 0; list-style:none}
.contact-list a{color:var(--accent); text-decoration:none; border:1px solid var(--border); padding:.5rem .75rem; border-radius:.65rem}
.contact-list a:hover{background:rgba(235, 3, 215, 0.315)}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding: 2rem 0; color: var(--muted); text-align:center}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;z-index:1000;background:#fff;color:#000;padding:.5rem;border-radius:.5rem}

/* A11y helper already similar to your skip-link pattern */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}





/* the cue at the bottom of the hero */
.hero{
  position: relative; /* ensure we can absolutely position inside */
}
.scroll-cue{
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: inline-grid; place-items: center; gap: .35rem;
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); /* icons follow theme */
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.scroll-cue:hover{ opacity: 1; transform: translateX(-50%) translateY(-2px); }
.scroll-cue:active{ transform: translateX(-50%) translateY(0); }


/* This is for the mouse icon */

/* Mouse icon */
.scroll-cue .mouse-body{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: .9;
}
.scroll-cue .mouse-wheel{
  fill: currentColor;
  animation: wheel 1.8s ease-in-out infinite;
  transform-origin: 14px 12px;
  opacity: .9;
}

/* Chevron */
.scroll-cue .chev path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: bob 1.8s ease-in-out infinite;
  opacity: .9;
}

/* Keyframes */
@keyframes wheel{
  0%   { transform: translateY(0);       opacity: .9; }
  50%  { transform: translateY(6px);     opacity: .4; }
  100% { transform: translateY(0);       opacity: .9; }
}
@keyframes bob{
  0%   { transform: translateY(0);       opacity: .9; }
  50%  { transform: translateY(4px);     opacity: .5; }
  100% { transform: translateY(0);       opacity: .9; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-cue .mouse-wheel,
  .scroll-cue .chev path{ animation: none !important; }
}

/* Hide cue on very small screens or short viewports if you prefer */
@media (max-height: 540px){
  .scroll-cue{ display:none; }
}

/* A11y helper */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Ensure the hero is a positioning context */
.hero{ position:relative }

/* --- Scroll cue (responsive) --- */
.scroll-cue{
  position:absolute;
  left:50%;
  /* Respect iOS/Android safe areas and give breathing room */
  bottom: max(env(safe-area-inset-bottom, 0px), 1rem);
  transform: translateX(-50%);
  display:inline-grid; place-items:center; gap:.35rem;
  background:transparent; border:0; cursor:pointer;
  color: var(--muted);
  opacity:.9;
  z-index: 2; /* above hero contents, below header */
  transition: opacity .2s ease, transform .2s ease;
  /* Make the whole control scale responsively */
  font-size: clamp(12px, 1.8vw, 16px); /* base for svg sizing via em */
  line-height: 1;
  padding:.25rem; /* touch target padding */
}

/* hover/focus */
.scroll-cue:hover{ opacity:1; transform: translateX(-50%) translateY(-2px); }
.scroll-cue:active{ transform: translateX(-50%) translateY(0); }
.scroll-cue:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: .5rem;
}

/* SVGs scale with font-size */
.scroll-cue .mouse{ width: 1.75em; height: auto; }
.scroll-cue .chev{ width: 1.2em; height: auto; }

/* Mouse icon */
.scroll-cue .mouse-body{
  fill:none; stroke: currentColor; stroke-width: 2; opacity:.95;
}
.scroll-cue .mouse-wheel{
  fill: currentColor;
  animation: wheel 1.8s ease-in-out infinite;
  transform-origin: 14px 12px; /* viewBox coords, stays correct as it scales */
  opacity:.95;
}

/* Chevron */
.scroll-cue .chev path{
  fill:none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  animation: bob 1.8s ease-in-out infinite;
  opacity:.95;
}

/* Short viewports: nudge up a bit, don’t hide completely */
@media (max-height: 600px){
  .scroll-cue{ bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem); }
}
/* Very small phones: reduce size slightly */
@media (max-width: 380px){
  .scroll-cue{ font-size: 12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll-cue .mouse-wheel,
  .scroll-cue .chev path{ animation: none !important; }
}

/* New Animation for the experience section of the page*/
/* Heading + animation layout */
.work-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; margin-bottom: .75rem;
}
@media (max-width: 520px){
  .work-head{ gap:.5rem }
  .qa-badge{ width:48px; height:48px }
}

/* Badge colors follow theme */
.exp-anim{ color: var(--accent); }
.qa-badge{ display:block }

/* Subtle background ring */
.qa-badge .ring-bg{
  stroke: color-mix(in oklab, var(--muted) 35%, transparent);
}

/* Rotating arc uses accent */
.qa-badge .ring-arc{
  stroke: currentColor;
  stroke-dasharray: 28 72;       /* 28% arc, 72% gap across pathLength=100 */
  animation: qa-spin 3.2s cubic-bezier(.65,.05,.36,1) infinite;
  transform-origin: 32px 32px;
}

/* Pulse dot inherits accent, with a glow */
.qa-badge .pulse{
  fill: currentColor; opacity: .9;
  animation: qa-pulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 60%, transparent));
}

/* Check mark draws in */
.qa-badge .check{
  stroke: currentColor;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: qa-draw 1.2s ease forwards .4s;
}

/* Sparkles gently twinkle using muted tone */
/* .qa-badge .sparkles path{
  stroke: color-mix(in oklab, var(--muted) 75%, transparent);
  animation: qa-twinkle 2.4s ease-in-out infinite;
}
.qa-badge .sparkles path:nth-child(2){ animation-delay:.4s }
.qa-badge .sparkles path:nth-child(3){ animation-delay:.8s } */

/* Keyframes */
@keyframes qa-spin{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}
@keyframes qa-pulse{
  0%,100%{ transform: translateY(0) scale(1); opacity:.95 }
  50%{ transform: translateY(1px) scale(1.25); opacity:.6 }
}
@keyframes qa-draw{
  to{ stroke-dashoffset: 0 }
}
@keyframes qa-twinkle{
  0%,100%{ opacity:.35 }
  50%{ opacity:.85 }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .qa-badge .ring-arc,
  .qa-badge .pulse,
  .qa-badge .check,
  .qa-badge .sparkles path{
    animation: none !important;
  }
  .qa-badge .check{ stroke-dashoffset: 0 }
}

/* New animation for the education section */
/* Heading + animation layout (mirrors work-head) */
.edu-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; margin-bottom:.75rem;
}
@media (max-width:520px){
  .edu-head{ gap:.5rem }
  .edu-badge{ width:48px; height:48px }
}

/* Badge inherits accent/muted via currentColor */
.edu-anim{ color: var(--accent); }
.edu-badge{ display:block }

/* Subtle base ring */
.edu-badge .ring-bg{
  stroke: color-mix(in oklab, var(--muted) 35%, transparent);
}

/* Rotating learning arc */
.edu-badge .ring-arc{
  stroke: currentColor;
  stroke-dasharray: 28 72; /* arc + gap (pathLength=100) */
  animation: ed-spin 3.2s cubic-bezier(.65,.05,.36,1) infinite;
  transform-origin: 32px 32px;
}

/* Cap: soft fill + drawn strokes */
.edu-badge .cap-fill{
  fill: color-mix(in oklab, var(--accent) 18%, transparent);
}
.edu-badge .cap-stroke{
  stroke: currentColor;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: ed-draw 1.1s ease forwards .35s;
}
.edu-badge .cap-knot{
  fill: currentColor;
  opacity: .9;
}

/* Pulsing tassel ball */
.edu-badge .pulse{
  fill: currentColor;
  opacity: .95;
  animation: ed-pulse 1.8s ease-in-out infinite .2s;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 60%, transparent));
}

/* Sparkles twinkle in muted tone */
.edu-badge .sparkles path{
  stroke: color-mix(in oklab, var(--muted) 75%, transparent);
  animation: ed-twinkle 2.4s ease-in-out infinite;
}
.edu-badge .sparkles path:nth-child(2){ animation-delay:.4s }
.edu-badge .sparkles path:nth-child(3){ animation-delay:.8s }

/* Keyframes */
@keyframes ed-spin{
  to{ transform: rotate(360deg) }
}
@keyframes ed-draw{
  to{ stroke-dashoffset: 0 }
}
@keyframes ed-pulse{
  0%,100%{ transform: translateY(0) scale(1); opacity:.95 }
  50%{ transform: translateY(1px) scale(1.25); opacity:.6 }
}
@keyframes ed-twinkle{
  0%,100%{ opacity:.35 }
  50%{ opacity:.85 }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .edu-badge .ring-arc,
  .edu-badge .pulse,
  .edu-badge .sparkles path{
    animation: none !important;
  }
  .edu-badge .cap-stroke{ animation: none !important; stroke-dashoffset: 0 }
}


/* New animation for projects */
/* Heading + animation layout (mirrors work/edu heads) */
.projects-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:.75rem;
}
@media (max-width:520px){
  .projects-head{ gap:.5rem }
  .proj-badge{ width:48px; height:48px }
}

/* Badge inherits currentColor (accent) */
.proj-anim{ color: var(--accent); }
.proj-badge{ display:block }

/* Ring styling (consistent with other badges) */
.proj-badge .ring-bg{
  stroke: color-mix(in oklab, var(--muted) 35%, transparent);
}
.proj-badge .ring-arc{
  stroke: currentColor;
  stroke-dasharray: 28 72;      /* arc + gap (pathLength=100) */
  animation: prj-spin 3.2s cubic-bezier(.65,.05,.36,1) infinite;
  transform-origin: 32px 32px;
}

/* Rocket pieces */
.proj-badge .rocket-body{
  fill: color-mix(in oklab, var(--accent) 18%, transparent);
  stroke: currentColor; stroke-width: 2;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 35%, transparent));
}
.proj-badge .rocket-fin{
  fill: color-mix(in oklab, var(--accent) 30%, transparent);
  stroke: currentColor; stroke-width: 2;
}
.proj-badge .rocket-window{
  fill: var(--bg); stroke: currentColor; stroke-width: 2;
}
.proj-badge .rocket-flame{
  stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
  filter: url(#projGlow);
  animation: prj-flicker 0.45s ease-in-out infinite alternate;
}

/* Sparkles */
.proj-badge .sparkles path{
  stroke: color-mix(in oklab, var(--muted) 75%, transparent);
  animation: prj-twinkle 2.4s ease-in-out infinite;
}
.proj-badge .sparkles path:nth-child(2){ animation-delay:.4s }
.proj-badge .sparkles path:nth-child(3){ animation-delay:.8s }

/* Keyframes */
@keyframes prj-spin{ to{ transform: rotate(360deg) } }
@keyframes prj-flicker{
  0%{ transform: scaleY(0.8); opacity:.7 }
  100%{ transform: scaleY(1.3); opacity:1 }
}
@keyframes prj-twinkle{
  0%,100%{ opacity:.35 }
  50%{ opacity:.85 }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .proj-badge .ring-arc,
  .proj-badge .rocket-flame,
  .proj-badge .sparkles path{
    animation: none !important;
  }
}

/* === UFO Animation Section === */
#ufo-anim {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;          /* gives breathing room */
  background: var(--bg);      /* follows theme */
  border-block: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

#ufo-anim .anim-container {
  width: 100%;
  max-width: 800px;           /* keep it responsive */
  margin-inline: auto;
}

/* SVG sizing */
#ufo-anim svg {
  width: 100%;
  height: auto;
  display: block;
}

/* === Theme-aware coloring === */

/* Speed lines */
#ufo-anim .speedLineGroup line {
  stroke: var(--muted);
}

/* Tractor beam */
#ufo-anim .beam {
  fill: var(--link);
}

/* Spotlight ellipse */
#ufo-anim .spotlight {
  fill: var(--accent);
}

/* Cow body */
#ufo-anim .cow {
  fill: var(--fg);
}

/* Ship body */
#ufo-anim .ship path {
  fill: var(--accent);
}

/* Alien inside */
#ufo-anim .alien {
  fill: var(--fg);
}

/* Ship lights (blinking dots) */
#ufo-anim .light {
  fill: currentColor;         /* follows text color */
  color: var(--link);
  transition: fill .3s ease;
}

/* Spotlight hover pulse */
#ufo-anim .spotlightHover {
  transform-origin: 50% 50%;
}

/* Ensure smooth transitions on theme change */
#ufo-anim * {
  transition: fill .25s linear, stroke .25s linear, background-color .25s linear;
}

/* Contact: 2-column layout with animation */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items:center;
}
@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-anim{ order: -1; } /* anim above on mobile; remove if you prefer below */
}

/* Animation sizing */
#bulb-container{
  width: 100%;
  max-width: 420px;
  margin-inline:auto;
  aspect-ratio: 428 / 372.5;
}
#bulb-svg-node{
  width:100%;
  height:auto;
  display:block;
}

/* Theme-aware colors */
.bulb-stroke{
  stroke: var(--fg);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bulb-leaf{
  fill: color-mix(in oklab, var(--accent) 70%, transparent);
}
.bulb-glow path{
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

/* soft glow on accent in both themes */
.contact-anim{
  filter: drop-shadow(0 0 12px color-mix(in oklab, var(--accent) 28%, transparent));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .contact-anim{ filter: none; }
}
@media (min-width: 821px){
  .contact-anim{ order:-1; }
}