/* Override global navigation animations */
html body .nav-item:not(.portfolio-link),
html[light-mode="dark"] body .nav-item:not(.portfolio-link),
html[light-mode="light"] body .nav-item:not(.portfolio-link) {
  position: absolute;
  transform: translateX(-50%);
  opacity: 1;
  pointer-events: auto;
}

/* Position nav items 
.about-link {
  left: 20% !important;
}
.resume-link {
  left: 35% !important;
}
.portfolio-secondary-link {
  left: 50% !important;
}
.extra-link {
  left: 65% !important;
}
.statement-link {
  left: 80% !important;
}
*/

/* Background image styling specific to experience page */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

#resume-section .container {
    margin-top: 65px;
    margin: 65px auto 0;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 100%;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  align-items: stretch;
}


.containers {
  padding: 20px;
  margin: 10px;
  flex: 1;
}

.container1 {  
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px;
  margin: 0;
  width: 100%;
}

/* Direct BU logo image */
.container1 > .container-image {
  width: 150px !important;
  height: auto !important;
  max-width: none !important;
}

/* Brooklyn Brewery logo */
.container1 .brooklyn-img {
  position: relative;
  display: inline-block;
  width: 150px !important;
}

.container1 .brooklyn-img img {
  display: block;
  width: 150px !important;
  height: auto !important;
  max-width: none !important;
  position: relative;
  z-index: 1;
}

/* PacSun logo */
.container1 .pacsun-img {
  position: relative;
  display: inline-block;
  width: 150px !important;
}

.container1 .pacsun-img img {
  display: block;
  width: 150px !important;
  height: auto !important;
  max-width: none !important;
  position: relative;
  z-index: 1;
}

.container2 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 30px 0px 0px 0px;
  margin: 0;
  width: 100%;
}

.container3 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0px 0px 0px 0px;
  margin: 10px 0 0 0;
  width: 100%;
}

.container4 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0px 0px 0px 0px;
  margin: 0;
  width: 100%;
}

.container5 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0px 0px 0px 0px;
  margin: 0;
  width: 100%;
}


.text-line {
  margin: 0;
  color: white;
  text-decoration: underline;
  text-underline-offset: 4px; 
  font-family: 'Ysabeau Infant', sans-serif;
  font-size: 1.2em;
  text-align: center;
  width: 30%;
  opacity: 1;
  text-shadow: 
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1);
}

.text-lines {
  margin: 0;
  color: white;
  font-family: 'Ysabeau Infant', sans-serif;
  font-size: 0.9em;
  text-align: center;
  width: 30%;
  opacity: 1;
  text-shadow: 
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1);
}

/* Main content layout */
#resume-section .main-content {
  flex: 1 0 auto;
  padding-bottom: 100px;
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  background: transparent;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Experience page specific styles */
.about-content {
  padding: 2rem;
  color: white;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
  flex: 1;
}

/* Add vertical spacing */
.vertical-spacer {
  height: 150px;
}

.about-content h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.about-section {
  background-color: transparent;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 2rem;
  opacity: 1;
}

.skills-container {
    width: 100%;
    min-height: 400px;
    margin: 150px 0 50px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}

.skills-container::before {
    content: '';
    position: absolute;
    top: 80px; /* Start below the titles */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: calc(100% - 80px); /* Adjust height to account for the top offset */
    background-color: white;
    opacity: 0.8;
    box-shadow: 
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1);
}

.skills-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 45%;
}

.skills-section.right {
    align-items: flex-end;
}

.skills-section.right .skills-left-column,
.skills-section.right .skills-right-column {
    display: flex;
    flex-direction: column;
    gap: 40px;  /* Match the gap from the left section */
    width: 45%;  /* Ensure equal width */
}

.skills-section.right .skill-item {
    flex-direction: row-reverse;
    text-align: right;
    min-height: 40px;  /* Match the height from the left section */
}

.skills-section.right .skill-text {
    text-align: right;
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
}

.skills-title {
    color: white;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 1.4em;
    opacity: 1;
    margin-bottom: 50px;
    text-shadow: 
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1);
}

.skills-columns {
    display: flex;
    gap: 100px;
    width: 100%;
}

.skills-left-column,
.skills-right-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 45%;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

/* Right section specific styles */
.skills-section.right .skills-left-column,
.skills-section.right .skills-right-column {
    align-items: flex-end;
}

.skills-section.right .skill-item {
    flex-direction: row-reverse;
    text-align: right;
    gap: 10px;  /* Match the gap from the left section */
}

.skills-section.right .skill-icon {
    margin-left: 10px;  /* Add margin to the left since it's reversed */
    margin-right: 0;    /* Remove right margin since it's reversed */
}

/* Add specific styling for the IBM logo */
img[src*="ibm-logo"] {
    filter: brightness(0) invert(1);
    width: 35px;
    height: 28px;
    object-fit: contain;
}

.skill-text {
    color: white;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 0.9em;
    opacity: 1;
    text-shadow: 
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1);
}

/* Remove all the old line-related styles */
.skills-container::after,
.skills-container .left-line-1,
.skills-container .right-line-1,
.skills-container .left-line-2,
.skills-container .right-line-2,
.skills-container .left-line-3,
.skills-container .right-line-3,
.skills-container .left-line-4,
.skills-container .right-line-4,
.skills-container .left-line-5,
.skills-container .right-line-5 {
    display: none;
}

/*
.footer {
    width: 100%;
    padding: 2rem 0;
    background: linear-gradient(to top, 
                rgba(0, 0, 0, 0.85) 0%, 
                rgba(0, 0, 0, 0.7) 60%, 
                rgba(0, 0, 0, 0.4) 85%, 
                rgba(0, 0, 0, 0) 100%) !important;
    color: white;
    text-align: center;
    margin-top: auto;
    position: relative;
}*/

.footer .container {
    margin: 0 auto;
    display: block;
    max-width: 1140px;
}

/* Override any existing background colors for the footer */
html[light-mode="light"] .footer,
html[light-mode="dark"] .footer {
    background: linear-gradient(to top, 
                rgba(0, 0, 0, 0.85) 0%, 
                rgba(0, 0, 0, 0.7) 60%, 
                rgba(0, 0, 0, 0.4) 85%, 
                rgba(0, 0, 0, 0) 100%) !important;
}

.footer-heading {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

.footer p, 
.footer a {
    color: white;
}
/*
.copyright-text {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 0.9rem;
}*/

.skill-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    opacity: 1;
    color: rgb(255, 255, 255);
}

.download-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.download-resume {
    display: block;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    text-align: center;
    width: fit-content;
    text-shadow: 
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1),
        0px 0px 10px rgba(0, 0, 0, 1);
}

.download-resume:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* Resume page specific styles */
.resume-page .navbar {
  background: linear-gradient(to bottom, 
                rgba(0, 0, 0, 0.85) 0%, 
                rgba(0, 0, 0, 0.7) 60%, 
                rgba(0, 0, 0, 0.4) 85%, 
                rgba(0, 0, 0, 0) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.resume-page .footer {
  background: linear-gradient(to top, 
                rgba(0, 0, 0, 0.85) 0%, 
                rgba(0, 0, 0, 0.7) 60%, 
                rgba(0, 0, 0, 0.4) 85%, 
                rgba(0, 0, 0, 0) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Background shapes */
.pacsun-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 65px);
    height: calc(100% + 15px);
    background-color: black;
    border: .25px solid white;
    border-radius: 1px;
    z-index: -1;
}

.brooklyn-img::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: 50%;
    z-index: -1;
}


/* ============================= */
/* LOGO ENTRANCE ANIMATIONS - FINAL VERSION */
/* ============================= */

.container1 > .container-image,
.container1 .brooklyn-img img,
.container1 .pacsun-img img {
    /* Default state: slightly below and faded */
    transform: translateY(20px);
    opacity: 0.1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* When animation class is added: rise to normal position */
.logos-animated > .container-image,
.logos-animated .brooklyn-img img,
.logos-animated .pacsun-img img {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ============================= */
/* TEXT SEQUENTIAL ANIMATIONS */
/* ============================= */

/* Default state for all text elements - start below and faded */
.container2 .text-line,
.container3 .text-lines,
.container4 .text-lines,
.container5 .text-lines {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out !important;
}

/* Animation classes for each container */
.container2.text-animated .text-line {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.container3.text-animated .text-lines {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.container4.text-animated .text-lines {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

.container5.text-animated .text-lines {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* ============================= */
/* SKILLS TITLES ANIMATIONS */
/* ============================= */

/* Default state for skills titles - start below and faded */
.skills-title {
  transform: translateY(20px) !important;
  opacity: 0 !important;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out !important;
}

/* Animation class for skills titles */
.skills-section.titles-animated .skills-title {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ============================= */
/* SCROLL-TRIGGERED SKILLS ANIMATIONS */
/* ============================= */

/* White line animation - starts with no height */
.skills-container::before {
  height: 0 !important;
  transition: height 4.5s ease-out !important;
}

/* When animation is triggered, line grows to full height */
.skills-container.line-animated::before {
  height: calc(100% - 80px) !important;
}

/* Default state for all skill items - start below and faded */
.skill-item {
  transform: translateY(20px) !important;
  opacity: 0 !important;
  transition: transform 1.5s ease-out, opacity 1.5s ease-out !important;
}

/* Animation class for skill items */
.skill-item.item-animated {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ============================= */
/* ANIMATION RESET SYSTEM */
/* ============================= */

/* Reset state - forces elements to starting position */
.animation-reset .container1 > .container-image,
.animation-reset .container1 .brooklyn-img img,
.animation-reset .container1 .pacsun-img img {
    transform: translateY(20px) !important;
    opacity: 0.1 !important;
    transition: none !important; /* No transition during reset */
}

.animation-reset .text-line,
.animation-reset .text-lines {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: none !important;
}

.animation-reset .skills-title {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: none !important;
}

.animation-reset .skill-item {
    transform: translateY(20px) !important;
    opacity: 0 !important;
    transition: none !important;
}

.animation-reset .skills-container::before {
    height: 0 !important;
    transition: none !important;
}

/* Ready state - re-enables transitions */
.animation-ready .container1 > .container-image,
.animation-ready .container1 .brooklyn-img img,
.animation-ready .container1 .pacsun-img img,
.animation-ready .text-line,
.animation-ready .text-lines,
.animation-ready .skills-title,
.animation-ready .skill-item {
    transition: transform 0.8s ease-out, opacity 0.8s ease-out !important;
}

.animation-ready .skills-container::before {
    transition: height 4.5s ease-out !important;
}

/* ============================= */
/* SKILL ITEM HOVER EFFECTS */
/* ============================= */

/* Base transition for skill items when they're animated */
.skill-item.item-animated {
  transform: translateY(0) !important;
  opacity: 1 !important;
  transition: transform 0.4s ease-out, 
              opacity 1.5s ease-out, 
              text-shadow 0.4s ease-out !important;
  cursor: pointer;
}

/* Hover state for skill items */
.skill-item.item-animated:hover {
  transform: translateY(-3px) scale(1.1) !important;
}

/* Glow effect on the text when hovering skill item */
.skill-item.item-animated:hover .skill-text {
  text-shadow: 
    0 0 8px rgba(255, 248, 240, 0.8),
    0 0 16px rgba(255, 248, 240, 0.6),
    0 0 24px rgba(255, 248, 240, 0.4),
    /* Keep the original shadows for depth */
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1),
    0px 0px 10px rgba(0, 0, 0, 1);
  transition: text-shadow 0.4s ease-out;
}

/* Add glow to icons on hover */
.skill-item.item-animated:hover .skill-icon {
  filter: drop-shadow(0 0 8px rgba(255, 248, 240, 0.6));
  transition: filter 0.4s ease-out;
}

/* Special handling for image icons (Odin, IBM, etc.) */
.skill-item.item-animated:hover img.skill-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 248, 240, 0.6));
  transition: filter 0.4s ease-out;
}

/* Ensure smooth transition back when hover ends */
.skill-item.item-animated .skill-text {
  transition: text-shadow 0.4s ease-out;
}

.skill-item.item-animated .skill-icon {
  transition: filter 0.4s ease-out;
}