#about-page-divider {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid;
    margin: 5rem 0;
    color: var(--color-border);
}

#zalando-highlight {
  color: #FF4C00;
}

#spotify-highlight {
  color: #1DB954;
}

#forzafootball-highlight {
  color: #00A6B4;
}

.experiences {
  row-gap: 1rem;
}

.experiences h5, 
.experiences p {
  margin-block-start: 0;
}

@media (max-width: 768px) {
  .experiences p {
    padding-bottom: 3rem;
  }

  .experiences {
    row-gap: 0;
  }
}

/* =========================================
   INFINITE SCROLL MARQUEE
   ================================********* */

/* 1. The Outer Window */
.marquee-container {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  
  overflow: hidden; 
  background: var(--color-bg-main); 
  padding: 5rem 0 3rem 0; 
  
  /* NEW: The Safari Freeze Fix */
  /* This creates ONE cheap layer for the GPU to track, keeping the animation awake */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* 2. The Moving Track */
.marquee-track {
  display: flex;
  width: max-content; /* Ensures it doesn't wrap */
  
  /* The Animation:
   * 'scroll-left': the name of our keyframes below
   * '60s': how long one full loop takes (adjust for speed)
   * 'linear': keeps the speed perfectly constant (no easing)
   * 'infinite': never stops
   */
  animation: scroll-left 60s linear infinite;
}

/* 3. The Content Groups */
.marquee-content {
  display: flex;
  align-items: center;
  gap: 1rem; /* Space between each photo */
  padding-right: 1rem; /* Must match the gap so the loop is seamless */
  flex-shrink: 0; 
}

/* 4. The Images themselves */
.marquee-content img {
  /* Set a fixed height so they are all uniform.
   * Width will adjust automatically to maintain aspect ratio.
   */
  height: 25rem; 
  width: auto;

  /* Override global responsive image rules */
  max-width: none; 
  flex-shrink: 0;
  
  /* Make them black & white until hovered */
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

/* --- DESKTOP ONLY (Hover Interactions) --- */
/* This ensures tapping on a phone doesn't trigger the pause or color reveal */
@media (hover: hover) {
  /* Pause on hover for better UX */
  .marquee-track:hover {
    animation-play-state: paused;
  }

  /* Bring back color on hover */
  .marquee-content img:hover {
    filter: grayscale(0%);
  }
}

/* =========================================
   KEYFRAME ANIMATION (Hardware Accelerated)
   ========================================= */
@keyframes scroll-left {
  0% {
    /* translate3d forces the GPU to handle the movement */
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================
   INTERACTIVE TOOLTIP (Pushing Code)
   ================================********* */

/* 1. The Text Style */
.code-subtle {
  font-family: inherit;
  color: inherit;
  border-bottom: 4px dotted var(--color-muted); 
  cursor: help; 
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tooltip-wrapper:hover .code-subtle, 
.tooltip-wrapper.active .code-subtle {
  border-bottom: 4px solid var(--color-primary);
  color: var(--color-primary);
}

/* 2. The Wrapper */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  z-index: 5; 
}

/* 3. The Tooltip Bubble */
.tooltip-content {
  visibility: hidden;
  opacity: 0;
  
  /* Positioning */
  position: absolute;
  bottom: 100%; 
  left: 50%;
  
  /* CHANGED: We add var(--nudge-x) to the horizontal translation */
  transform: translateX(calc(-50% + var(--nudge-x, 0px))) translateY(10px);
  
  background-color: var(--color-primary);
  color: var(--color-bg-main);
  
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  font-family: "Geist", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: normal; 
  pointer-events: none;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The Triangle Arrow */
.tooltip-content::after {
  content: "";
  position: absolute;
  
  /* FIX 1: Overlap by 1px to kill the gap (Was top: 100%) */
  top: calc(100% - 1px); 
  
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-primary) transparent transparent transparent;
  
  /* Counteract the nudge so arrow stays pinned to the text */
  transform: translateX(calc(-1 * var(--nudge-x, 0px)));

  /* FIX 2: Sync the animation */
  /* We give the arrow the exact same transition speed/curve as the parent 
     so the counter-movement happens in perfect lockstep. */
  transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 4. Interaction Logic */
.tooltip-wrapper:hover .tooltip-content,
.tooltip-wrapper.active .tooltip-content {
  visibility: visible;
  opacity: 1;
  /* CHANGED: Maintain the nudge in the active state */
  transform: translateX(calc(-50% + var(--nudge-x, 0px))) translateY(0);
}

@media (max-width: 768px) {
  .tooltip-content {
    /* 1. Allow text to wrap so it doesn't force width */
    white-space: normal;
    
    /* 2. Constrain width to the screen size (minus safety margin) */
    max-width: 90vw;
    width: max-content; /* Shrink to fit text if shorter than max-width */
    
    /* 3. Center align wrapped text for better aesthetics */
    text-align: center;
    
    /* 4. Ensure line-height is readable when wrapped */
    line-height: 1.4;
  }
}

/* =========================================
   KEYFRAME ANIMATION
   ================================********* */
@keyframes scroll-left {
  0% {
    /* Start at the beginning */
    transform: translateX(0%);
  }
  100% {
    /* Move exactly HALF its total width to the left.
     * Because we have 2 identical sets, moving 50%
     * lands perfectly at the start of the second set,
     * creating the seamless loop.
     */
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .marquee-content img {
    height: 15em; /* Smaller on mobile */
  }
  
  .marquee-container {
    padding: 2rem 0;
  }
}

/* --- THE LOVE BUTTON --- */
.love-button {
  background: none;
  border: none;
  font-size: 2rem; /* Nice and big */
  cursor: pointer;
  transition: transform 0.2s ease;
}

.love-button:hover {
  transform: scale(1.1) rotate(5deg); /* Simple hover effect */
}

.love-button:active {
  transform: scale(0.9); /* Click effect */
}

/* --- THE FLOATING HEARTS --- */
.floating-heart {
  position: fixed;
  font-size: 1.5rem; /* If you changed this, update the margins below to match half this size */
  pointer-events: none;
  z-index: 9999;
  
  /* NEW: Shift it up and left by half its size to truly center it */
  margin-left: -0.75rem; /* Half of 1.5rem */
  margin-top: -0.75rem;  /* Half of 1.5rem */
  
  animation: float-up-and-fade 2s ease-out forwards;
}

.love-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 1rem 0; /* Optional: Adds some nice vertical spacing */
}

@keyframes float-up-and-fade {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.5) rotate(0deg);
  }
  100% {
    opacity: 0;
    /* Move up 100-300px and randomly left/right */
    transform: translate(var(--tx), -300px) scale(1.2) rotate(var(--rot));
  }
}