/* Reset + Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: 'SF Pro Display', sans-serif;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;   /* ✅ kill sideways scroll */
  
}

.scrollable {
  overflow-y: scroll;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE 10+ */
}

.scrollable::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}



/* Navbar */
.navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgb(255, 255, 255);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgb(255, 255, 255);
  z-index: 1000;
}



/* Wrapper handles hover */
.logo-wrapper {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Trigger subtle shake ONCE when hovered */
.logo-wrapper:hover {
  animation: subtle-shake 0.5s ease-in-out 1; /* run once */
  transform: scale(1.05); /* slight size increase */
}

/* Rotating logo (always spins) */
/* Rotating donut logo */
.rotating-logo {
  height: 40px;
  width: auto;
  display: block;
  animation: spin 30s linear infinite; /* continuous slow rotation */
}

/* Continuous rotation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Logo enters (fade + pop) */
.logo-in {
  animation: logoIn 0.6s ease forwards;
}

@keyframes logoIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Logo exits (fade + shrink) */
.logo-out {
  animation: logoOut 0.5s ease forwards;
}

@keyframes logoOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* Wrapper handles hover scaling + subtle shake */
.logo-wrapper {
  display: inline-block;
  transition: transform 0.3s ease;
}

.logo-wrapper:hover {
  animation: subtle-shake 0.5s ease-in-out 1; /* run once */
  transform: scale(1.05);
}

/* Subtle shake animation */
@keyframes subtle-shake {
  0%, 100% { transform: scale(1.05) translateX(0); }
  25% { transform: scale(1.05) translateX(1px); }
  50% { transform: scale(1.05) translateX(-1px); }
  75% { transform: scale(1.05) translateX(1px); }
}


/* Base breadcrumb style */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 236;
  font-size: 0.7rem;
  color: #666666 ;
  opacity: 0.9;
}


.breadcrumb {
  transition: color 0.3s ease;
}

.breadcrumb-separator {
  color: #666666 ;
  font-weight: 100;
}

/* Current page stands out slightly */
.breadcrumb.current {
  font-size: 0.7rem;
  font-weight: 500;
  color: #666666 ;
}









/* ----------------------------------------------------------------------------------------- */
/* Typography */
.number {
  font-size: 1rem;
  color: rgba(170, 170, 170, 0.5);
  font-weight: 500;
  line-height: 1.2rem;
  margin-bottom: 0.1rem;
}

.number1 {
  font-size: 2rem;
  color: #FF2600;
  font-weight: 600;
  line-height: 2.2rem;
  margin-right: 8rem;
}



.title {
  font-size: 3rem;
  color: rgba(170, 170, 170, 0.5);
  font-weight: 510;
  line-height: 3rem;
  margin-bottom: 2rem;
}

.title1 {
  font-size: 3rem;
  color: #333333;
  font-weight: 510;
  line-height: 3rem;

}

.description {
  font-size: 0.8rem;
  color: #333333 ;
  margin-right: 10rem;
  justify-content: center;
  
  
}

.description1 {
  font-size: 0.8rem;
  color: #333333 ;
  margin-right: 2rem;
  justify-content: center;
  
  
}

a.uxprojects {
  text-decoration: none;
  color: inherit; /* optional: makes it inherit text color */
  line-height: 3.5rem;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.uxprojects:hover {
  text-decoration: none;
  color: inherit; /* optional: makes it inherit text color */

}

a.uxprojects:hover .title{
  color: rgb(51, 51, 51); /* highlight only the title */
  text-decoration-line: underline;
}

a.uxprojects:hover .number{
  color: #FF2600
}

a.uxprojects:hover .description{
  color: #666666 ;
}



@media (max-width: 600px) {
 
  .title{
  color: #333333; /* highlight only the title */

}

.number{
  color: #FF2600
}

.description{
  color: #666666 ;
 
}
  
}


/* container keeps logos inline and aligns them with text */
.logo-inline {
  display: inline-flex;    /* horizontal row, but stays inline with text */
  align-items: center;     /* vertical center with text baseline */
  gap: 25px;                /* spacing BETWEEN logos */
  white-space: nowrap;     /* prevents wrapping to next line */
  vertical-align: middle;  /* so the whole group aligns with surrounding text */
  margin: 0;               /* optional */
  padding: 0;
}

/* logos: size by height only so aspect ratio is preserved */
.inline-logo {
  display: block;          /* block inside the flex container */
  height: 14px;            /* control size here (tweak to taste) */
  width: 90px;             /* keep natural aspect ratio */
  margin: 0;
  opacity: 0.95;
}

/* small responsive tweak for very narrow viewports */
@media (max-width: 420px) {
  .inline-logo { height: 12px; }
  .logo-inline  { gap: 6px; }
}





/* ----------------------------------------------------------------------------------------- */

/* --- Main layout: remove the negative offset, prevent x-scroll --- */
main.content {
  left: -1rem;  
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6rem 1rem 2rem 3rem;
  gap: 4vw;
  max-width: 1600px;
  height: calc(100vh - 120px);
  position: relative;
  overflow-x: hidden;            /* ✅ kill horizontal scroll at the container */
}

/* --- Flex children must be allowed to shrink --- */
.top-left-content,
.right-panel {
  min-width: 0;                  /* ✅ critical: let columns shrink inside flex */
}








/* Desktop Left column (unchanged except min-width above) */
.top-left-content {
  flex: 1;
  max-width: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  left: 10vw;
  height: 100%;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  
}
.top-left-content::-webkit-scrollbar { display: none; }



/* Mobile Left column (unchanged except min-width above) */
.top-left-content1 {
  flex: 1;
  max-width: 550px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  min-height: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.top-left-content1::-webkit-scrollbar { display: none; }



@media (max-width: 600px) {
  .top-left-content1{
    display: initial;   
  }
  .top-left-content {
    display: none;
  }
  
}

@media (min-width: 650px) {
  .top-left-content1{
    display: none;   
  }
  .top-left-content {
    display: initial;
  }
}






/* Right scrollable panel */
.right-panel {
  flex: 2;

  max-width: 700px;
  overflow-y: auto;
  overflow-x: hidden;            /* ✅ extra guard */
  height: 100%;
  min-height: 0;
  
}


/* Make all media inside the right panel responsive */
.right-panel img,
.right-panel video,
.right-panel iframe {
  max-width: 100%;
  height: auto;
  display: block;                /* avoids inline gaps */
}


/* Long strings won’t push width */
.right-panel,
.project-content {
  overflow-wrap: anywhere;       /* or: word-break: break-word; */
}

/* Project content visibility */
.project-content { display: none; opacity: 0; transition: opacity 0.3s ease; }
.project-content.active { display: block; opacity: 1; }



@media (max-width: 600px) {
  .right-panel{
    display: none;    
  }
}







/* ----------------------------------------------------------------------------------------- */
/* Footer */
.job-role {
  font-family: 'SF Pro Display', monospace;
  font-size: 0.8rem;
  color: #555;
}
.bottom-left-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 0.7rem;
  padding: 1rem 2rem;
  color: #666666;
  text-align: center;
  background: #fff;
  backdrop-filter: blur(10px);
  z-index: 1000;
}

@media (max-width: 600px) {
  .job-role { font-size:0.6rem; }
  .bottom-left-footer { font-size: 0.6rem; }
}





/* ----------------------------------------------------------------------------------------- */






/* Desktop Filter button */

.filter-buttons {
  margin-bottom: 2rem;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
 
}

.filter-buttons button {
 text-decoration: none;
  color: #333333;
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border: 1px solid #333333;
  background-color: #ffffff;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.filter-buttons button.active{
 background: #333333;
 border: 1px solid #333333; 
 color: white; 
}

.filter-buttons button { cursor: pointer; }

.filter-buttons button:hover {
  background: #FF2600;
  border: 1px solid #FF2600;
  color: white;
}

@media (max-width: 600px) {
  .filter-buttons{
    display: none;
  }
}






/* Tile-style opening animation */

.tile-container {
  perspective: 1200px; /* gives the 3D depth */
}

/* Incoming animations */
.tile-in {
  opacity: 0;
  transform: rotateY(90deg) scale(0.95); /* tucked away */
  transform-origin: left center;
  animation: tileOpen 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.tile-in-delay {
  opacity: 0;
  transform: rotateY(90deg) scale(0.95);
  transform-origin: left center;
  animation: tileOpen 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-delay: 0.3s;
}

.tile-in-delay-delay {
  opacity: 0;
  transform: rotateY(90deg) scale(0.95);
  transform-origin: left center;
  animation: tileOpen 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-delay: 0.5s;
}

@keyframes tileOpen {
  0% {
    opacity: 0;
    transform: rotateY(90deg) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: rotateY(-5deg) scale(1.02); /* overshoot like WP tiles */
  }
  100% {
    opacity: 1;
    transform: rotateY(0) scale(1); /* settle naturally */
  }
}








/* Outgoing animations */
.tile-out {
  opacity: 1;
  transform: rotateY(0) scale(1);
  transform-origin: left center;
  animation: tileClose 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.tile-out-delay {
  opacity: 1;
  transform: rotateY(0) scale(1);
  transform-origin: left center;
  animation: tileClose 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-delay: 0.2s; /* slight stagger for secondary blocks */
}

.tile-out-delay-delay {
  opacity: 1;
  transform: rotateY(0) scale(1);
  transform-origin: left center;
  animation: tileClose 0.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  animation-delay: 0.4s; /* slight stagger for secondary blocks */
}

@keyframes tileClose {
  0% {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotateY(-90deg) scale(0.95);
  }
}









/* --- Active indicator on selected list item --- */
#linkList a.uxprojects {
  position: relative;
  padding-left: 1rem;
  cursor: pointer;
}

#linkList a.uxprojects::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: transparent;
  border-radius: 2px;
  transition: background 0.2s ease;
}

#linkList a.uxprojects.active::before {
  background: #FF2600;
}

/* active text styling */
#linkList a.uxprojects.active .number {
  color: #FF2600;
}
#linkList a.uxprojects.active .title {
  color: #333333;
  text-decoration-line: underline;
}

#linkList a.uxprojects.active .description {
  color: #666666;
}

/* keep your hover behaviour ONLY when not active */
#linkList a.uxprojects:not(.active):hover .title { color:#717171; text-decoration-line: underline;  transition: opacity 0.3s ease-in-out; }
#linkList a.uxprojects:not(.active):hover .number { color:#fd917e;  transition: opacity 0.3s ease-in-out;}
#linkList a.uxprojects:not(.active):hover .description { color:#666666; }

/* Hide filtered-out items */
#linkList a.uxprojects.hidden {
  display: none !important;
  transition: opacity 0.3s ease;
}







/* --- Active indicator on selected list item --- */
#linkList1 a.uxprojects {
  position: relative;
  cursor: pointer;
}

#linkList1 a.uxprojects::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 60%;
  background: transparent;
  border-radius: 2px;
  transition: background 0.2s ease;
}

#linkList1 a.uxprojects.active::before {
  background: #FF2600;
}

/* active text styling */
#linkList1 a.uxprojects.active .number {
  color: #FF2600;
}
#linkList1 a.uxprojects.active .title {
  color: #333333;
  text-decoration-line: underline;
}

#linkList1 a.uxprojects.active .description {
  color: #666666;
}

/* keep your hover behaviour ONLY when not active */
#linkList1 a.uxprojects:not(.active):hover .title { color:#333333; text-decoration-line: underline; transition: opacity 0.3s ease-in-out;}
#linkList1 a.uxprojects:not(.active):hover .number { color:#FF2600; transition: opacity 0.3s ease-in-out;}
#linkList1 a.uxprojects:not(.active):hover .description { color:#666666; }

/* Hide filtered-out items */
#linkList1 a.uxprojects.hidden {
  display: none !important;
  transition: opacity 0.3s ease;
}








.tools-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: left;
}

.tool-tag {
  text-decoration: none;
  font-size: 1rem;
  color: #333333;
  padding: 0.4rem 1rem;
  border: 1px solid #333333;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.tool-tag img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle
}





/* Quick Links */
/* Quick Links */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: flex-start; /* use flex-start instead of "left" */
}

.quick-links a {
  display: inline-flex;              /* ✅ flexbox alignment */
  align-items: center;               /* ✅ centers text and icon */
  text-decoration: none;
  color: #333333;
  padding: 0.5rem 1rem;
  border: 1px solid #333333;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s, border 0.3s;
}

.quick-links a:hover {
  background: #FF2600;
  border-color: #FF2600;
  color: white;
}

.quick-links a .icon {
  width: 16px;
  height: 16px;
  margin-left: 0.4rem;              /* ✅ spacing between text and icon */
  transition: filter 0.2s ease, transform 0.2s ease;
  filter: grayscale(100%) brightness(100%); /* keep monochrome base */
}

.quick-links a:hover .icon {
  filter: grayscale(100%) brightness(100); /* make them monochrome */
  transform: scale(1.099); /* grow 20% */                 /* subtle grow */
}



/* --- Tile animations for right panel --- */
.tile-in {
  animation: tileIn 0.6s ease forwards;
}
.tile-out {
  animation: tileOut 0.6s ease forwards;
}

@keyframes tileIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tileOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
  }
}


/* PROJECT PANELS: visible only when .active, animation classes control appearance */
.project-content {
  display: none;   /* hidden by default */
  /* note: don't set opacity here; animation controls visual entrance/exit */
}

.project-content.active {
  display: block;  /* becomes layout-visible only when active */
}

/* animation helpers applied to panels directly */
.project-content.tile-in {
  animation: tileIn 0.6s ease forwards;
}
.project-content.tile-out {
  animation: tileOut 0.6s ease forwards;
}



figure {
  margin: 1.5rem 0;
  text-align: center;   /* centers both image + caption */
}

figure img {
  max-width: 100%;      /* responsive */
  height: auto;

}

figcaption {
  text-align: left;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  color: #FF2600;       /* subtle gray */
}


#ytVideo {
  border: none;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 4px; /* optional styling */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}