/* === THEME TOKENS === */
:root {
  --bg: #000000;   /* dark background */
  --fg: #ffffff;   /* dark foreground text */
  --s: #8f8f8f85;   
}

body.light {
  --bg: #ffffff;   /* light background */
  --fg: #000000;   /* light foreground text */
}

/* Base */
html {
    font-family: 'Newsreader', serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color .3s ease, color .3s ease;
  background: var(--bg);
  color: var(--fg);
}

/* Random variables */
.github-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --x1: 0;
    --y1: 0;
    --x2: 0;
    --y2: 0;
    --x3: 0;
    --y3: 0;
    --x4: 0;
    --y4: 0;
    --x5: 0;
    --y5: 0;
    --x6: 0;
    --y6: 0;
    --x7: 0;
    --y7: 0;
    --x8: 0;
    --y8: 0;
}

.linkedin-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --x1: 0;
    --y1: 0;
    --x2: 0;
    --y2: 0;
    --x3: 0;
    --y3: 0;
    --x4: 0;
    --y4: 0;
    --x5: 0;
    --y5: 0;
    --x6: 0;
    --y6: 0;
    --x7: 0;
    --y7: 0;
    --x8: 0;
    --y8: 0;
}

.email-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --x1: 0;
    --y1: 0;
    --x2: 0;
    --y2: 0;
    --x3: 0;
    --y3: 0;
    --x4: 0;
    --y4: 0;
    --x5: 0;
    --y5: 0;
    --x6: 0;
    --y6: 0;
    --x7: 0;
    --y7: 0;
    --x8: 0;
    --y8: 0;
}


/* make form controls inherit the page font */
input, button, textarea, select { font: inherit; }

/* tiny spacer */
.topbar {
    background-color: var(--fg); /* looks white on dark, dark on light */
    display: flex;
    height: 0px;
    margin-bottom: 19%;
}

/* Redirects */
.other {
    flex: 1;
    display: flex;
    position: fixed;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 40px;
    padding-left: 60px;
    word-spacing: 20px;
}


.name {
    display: flex;
    font-size: 60px;
    margin-bottom: -5px;
    font-weight: 400;
    color: var(--fg);
    text-shadow: 0 0 0 var(--fg);
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

/* Mobile responsive name */
@media (max-width: 900px) {
    .name {
        font-size: 40px;
        white-space: normal;
        line-height: 1.1;
        padding: 180px 20px 0 20px;
    }
}

@media (max-width: 480px) {
    .name {
        font-size: 32px;
        padding: 140px 15px 0 15px;
    }
}
.subname {
    display: flex;
    font-size: 18px;
    font-weight: 400;
    color: var(--fg);
    text-shadow: 0 0 0 var(--fg);
    margin-bottom: 40px;
    padding: 10px;
    justify-content: center;
}

.middle {
    flex: 1;                    
    display: flex;             
    align-items: center;        
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 70px;    
    margin-bottom: 10px;
}

/* row layout + spacing */
.icon-row {
  display: flex;
  gap: 100px;
}

/* shared behavior for all icon images */
.githubicon,
.linkedinicon {
  display: block;
  transition: transform .15s ease, filter .325s ease;
}

.emailicon {
  display: block;
  transition: transform .15s ease, filter .325s ease;
}

/* individual sizes (yours) */
.githubicon  { width: 33px; height: 33px; }
.emailicon   { width: 31px; height: 31px; }
.linkedinicon{ width: 39px; height: 38px; }

/* clickable area (no bg on hover) */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;      /* comfy tap target */
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
}

      /* drop-shadow(calc(-1 * var(--x1)) var(--y1) 0 var(--fg)) y is minus 
      drop-shadow(calc(-1 * var(--x2)) var(--y2) 0 var(--fg))
      drop-shadow(calc(-1 * var(--x3)) var(--y3) 0 var(--fg))
      drop-shadow(calc(-1 * var(--x4)) var(--y4) 0 var(--fg))
      drop-shadow(calc(-1 * var(--x5)) var(--y5) 0 var(--fg)) 
      drop-shadow(calc(-1 * var(--x6)) var(--y6) 0 var(--fg))
      drop-shadow(calc(-1 * var(--x7)) var(--y7) 0 var(--fg))
      drop-shadow(calc(-1 * var(--x8)) var(--y8) 0 var(--fg)) 
      */ 

/* hover: slight enlarge + colored glow per icon */
.github-box .icon-link:hover .githubicon,
.github-box .icon-link:focus-visible .githubicon {
  filter: 
      drop-shadow(var(--x1) var(--y1) 0 var(--s)) /* y is minus */ 
      drop-shadow(var(--x2) var(--y2) 0 var(--s))
      drop-shadow(var(--x3) var(--y3) 0 var(--s))
      drop-shadow(var(--x4) var(--y4) 0 var(--s))
      drop-shadow(var(--x5) var(--y5) 0 var(--s))
      drop-shadow(var(--x6) var(--y6) 0 var(--s))
      drop-shadow(var(--x7) var(--y7) 0 var(--s))
      drop-shadow(var(--x8) var(--y8) 0 var(--s))
}

.email-box .icon-link:hover .emailicon,
.email-box .icon-link:focus-visible .emailicon {
  filter: 
      drop-shadow(var(--x1) var(--y1) 0 var(--s)) 
      drop-shadow(var(--x2) var(--y2) 0 var(--s))
      drop-shadow(var(--x3) var(--y3) 0 var(--s))
      drop-shadow(var(--x4) var(--y4) 0 var(--s))
}


.linkedin-box .icon-link:hover .linkedinicon,
.linkedin-box .icon-link:focus-visible .linkedinicon {
  filter: 
      drop-shadow(var(--x1) var(--y1) 0 var(--s)) /* y is minus */ 
      drop-shadow(var(--x2) var(--y2) 0 var(--s))
      drop-shadow(var(--x3) var(--y3) 0 var(--s))
      drop-shadow(var(--x4) var(--y4) 0 var(--s))
      drop-shadow(var(--x5) var(--y5) 0 var(--s))
      drop-shadow(var(--x6) var(--y6) 0 var(--s))
      drop-shadow(var(--x7) var(--y7) 0 var(--s))
      drop-shadow(var(--x8) var(--y8) 0 var(--s))

}

/* theme switching: show white icons on dark; black on light */
.icon-light { display: none; }
body.light .icon-dark  { display: none; }
body.light .icon-light { display: block; }

/* reduce motion users */
@media (prefers-reduced-motion: reduce) {
  .githubicon, .emailicon, .linkedinicon { transition: none; }
}



.footer {
    color: var(--bg);
    background-color: var(--fg);
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3vh;
    margin-top:30px;
    padding-top:3px;
    z-index: 10;
}


.mac {
    color: var(--fg); 
    transition: color 255ms ease, text-shadow 255ms ease;
    will-change: color;
}
.mac:hover {
    text-shadow: #FDBF57 0px 21px 0px, #495965 0px 42px 0px;
    color: #7A003C;
}

/* Temporarily disable transitions for instant theme changes */
.no-transition .mac {
    transition: none !important;
}

/* Canvas sits on top but only intercepts clicks on the rope itself */
/* it was x = 1350 */
#ropeCanvas {
    display: flex;
    flex: 1;
    position: fixed;
    inset: 0;
    pointer-events: none; /* Don't block clicks to page elements */
    touch-action: none;
    z-index: 1000; /* Ensure it's on top */
}

.pixel-art {
  image-rendering: pixelated;      /* modern browsers */
  image-rendering: crisp-edges;    /* Firefox */
  -ms-interpolation-mode: nearest-neighbor; /* legacy */
}

/* Loading screen */
#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg);  /* Use same background as page */
  z-index: 9999;
  transition: opacity 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);  /* Smoother easing */
}

#loadingScreen.fade-out {
  opacity: 0;
  pointer-events: none;
}