:root {
    --card-background: rgba(230, 230, 230, 0.5);

    --bachelor-text: #1E8F3B;
    --bachelor-badge: rgba(77, 217, 114, 0.4);

    --master-text: #B54706;
    --master-badge: rgba(248, 174, 110, 0.5);

    --progress-bar-background: rgba(107, 114, 128, 0.3);
    --bachelor-progress-bar-color: rgba(52, 199, 89, 1);
    --master-progress-bar-color: rgba(255, 141, 40, 1);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --card-background: rgba(60, 60, 60, 0.5);

        --bachelor-text: #B5FFB2; 
        --bachelor-badge: rgba(50, 180, 80, 0.45);

        --master-text: #ffb648; 
        --master-badge: rgba(255, 140, 0, 0.35);

        --progress-bar-background: rgba(107, 114, 128, 0.3);
        --bachelor-progress-bar-color: rgba(52, 199, 89, 1);
        --master-progress-bar-color: rgba(255, 141, 40, 1);
    }
}

.about-me-container {
    position: relative;
}

.about-me-popup-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.about-me-popup {
    transform-origin: center center;
    
    transform: scale(0);

    opacity: 0;
    z-index: 10;
    background: var(--popup-background);
    
    padding: 3.125rem;
    border-radius: 1.5rem;

    width: clamp(13.75rem, 70%, 37.5rem);

    box-shadow: 
        0 115px 56px rgba(0, 0, 0, 0.01),
        0 65px 39px rgba(0, 0, 0, 0.05),
        0 29px 29px rgba(0, 0, 0, 0.09),
        0 7px 16px rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.about-me-popup.visible {
    animation: scaleInBlur 0.6s forwards ease-out;
}

.exam-card {
    background: var(--card-background);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

    border-radius: 1.5rem;

    height: 17.75rem;
    width: 14.5rem;

    box-shadow: 
        0 115px 56px rgba(0, 0, 0, 0.01),
        0 65px 39px rgba(0, 0, 0, 0.05),
        0 29px 29px rgba(0, 0, 0, 0.09),
        0 7px 16px rgba(0, 0, 0, 0.10);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.aboutme-background-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
    overflow-x: clip;
}

.exam-scrolling-section {
    display: flex;
    flex-direction: row;

    gap: 2rem;

    width: max-content;
    height: 23rem;
}

.scrolling-container-forward {
    animation: scroll-left 100s linear infinite;
}

.scrolling-container-backward {
    animation: scroll-right 100s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.card-title {
    font-size: 1rem;

    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.card-description {
    font-size: 0.75rem;

    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.material-icons {
    font-family: "Material Symbols Outlined";
    font-size: 4rem;

    padding-top: 1.5rem;
}

.degree-badge-container {
    padding: 0.25rem 1rem;
    display: inline-block;
    border-radius: 9999px;

    width: fit-content;

    margin-left: auto;
    margin-right: auto;

    opacity: 0.7;
}

.bachelor-badge {
    background: var(--bachelor-badge);
}

.master-badge {
    background: var(--master-badge)
}

.degree-badge-text {
    font-size: 0.875rem;
    font-weight: bold;
    margin: 0;
}

.bachelor-text {
    color: var(--bachelor-text);
}

.master-text {
    color: var(--master-text);
}

.profile-picture-small {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 
      0 69px 19px rgba(0,0,0,0),
      0 44px 18px rgba(0, 0, 0, 0.01),
      0 25px 15px rgba(0, 0, 0, 0.05),
      0 11px 11px rgba(0, 0, 0, 0.09),
      0 3px 6px rgba(0, 0, 0, 0.10);
    max-width: 100%;

    transform: scale(0);
    opacity: 0;
    filter: blur(100px);
    animation: scaleIn 0.6s forwards;
    animation-delay: 0s;

    /* Prevent any pointer interaction on the image itself */
    pointer-events: none;
  
    /* Prevent long-press menus on iOS / Safari */
    -webkit-touch-callout: none;
  
    /* Prevent image dragging */
    -webkit-user-drag: none;
    user-drag: none;
  
    /* Prevent selection */
    user-select: none;
    -webkit-user-select: none;
}

.about-me-sections.container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.about-me-inner-section-container {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;

    align-items: center;
    justify-content: center;
}

.about-me-degree-section-container {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;

    align-items: center;
    justify-content: center;

    margin-top: 1.25rem;
}

@media (max-width: 700px) {
    .about-me-degree-section-container {
        flex-direction: column;
    }
}

.about-me-double-text-container {
    display: flex;
    flex-direction: column;
    gap: 0;

    text-align: left;
}

.polimi-logo-small {
    width: 9.4rem;

    /* Prevent any pointer interaction on the image itself */
    pointer-events: none;
  
    /* Prevent long-press menus on iOS / Safari */
    -webkit-touch-callout: none;
  
    /* Prevent image dragging */
    -webkit-user-drag: none;
    user-drag: none;
  
    /* Prevent selection */
    user-select: none;
    -webkit-user-select: none;
}

.popup-text {
    font-size: 1rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .polimi-logo-small {
        filter: invert(1);
    }
}

/* On very narrow screens the popup can be taller than the carousel rows.
   Flip which element is absolutely positioned so the popup drives the
   container height and the carousel sits behind it as a background. */
@media (max-width: 420px) {
    .aboutme-background-container {
        position: absolute;
        inset: 0;
        margin: 0;
    }

    .about-me-popup-container {
        position: relative;
        z-index: 1;
        height: auto;
        padding: 2rem 0;
    }
}

/* Mobile Popup */
@media (max-width: 600px) {
    .about-me-container {
        gap: 0;
    }

    .about-me-inner-section-container {
        flex-direction: column;
        gap: 0.625rem;
    }

    .about-me-popup {
        padding: 1.25rem;
    }

    .polimi-logo-small {
        width: 7rem;
    }

    .profile-picture-small {
        width: 6rem;
        height: 6rem;
    }
}

.degree-progress-container {
    background: var(--card-background);
    padding: 0.5rem;
    border-radius: 4.7rem;

    box-shadow: 
        0 44px 18px rgba(0, 0, 0, 0.01),
        0 25px 15px rgba(0, 0, 0, 0.05),
        0 11px 11px rgba(0, 0, 0, 0.09),
        0 3px 6px rgba(0, 0, 0, 0.10);

    display: flex;
    flex-direction: row;

    justify-content: left;
    align-items: center;

    gap: 0.5rem;

    transform: scale(1);
    transition: transform 0.3s ease;
}

.degree-progress-container:hover {
    transform: scale(1.1);
    
}

.progress-bar-container {
    align-items: center;
    justify-content: center;
}

.circular-progress-bar {
    position: relative;
    width: 3.75rem;
    height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bachelor-progress-bar {
    stroke: var(--bachelor-progress-bar-color);
  }

  .master-progress-bar {
    stroke: var(--master-progress-bar-color);
  }
  
  .progress-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
  }
  
  .progress-bg {
    fill: none;
    stroke: var(--progress-bar-background);
    stroke-width: 10;

    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.25));
  }
  
  .progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 283; /* 2 * π * r (with r=45 → ~283) */
    stroke-dashoffset: 283; /* fully hidden at start */
    transition: stroke-dashoffset 1s ease;
  }
  
  .progress-text {
    position: absolute;
    font-size: 1.75rem;
    font-weight: bold;
  }

  .degree-progress-text-container {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;

    max-width: 10rem;

    margin-right: 20px;
  }

  .degree-progress-label {
    font-size: 0.5rem;
    font-weight: bold;
    text-transform: uppercase;
    
    opacity: 0.7;
    margin: 0;
    padding: 0;
  }

  .degree-progress-title {
    font-size: 1rem;
    margin: 0;
    padding: 0;
  }

  .degree-progress-subtitle {
    font-size: 0.5rem;
    margin: 0;
    padding: 0;
  }