/* 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 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;
  padding-right: 1rem;
}

.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 */


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

.title {
  font-size: 2rem;
  color: #FF2600;
  font-weight: 600;
  margin-right: 2rem;
  margin-bottom: -1rem;
}


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



/* ----------------------------------------------------------------------------------------- */
/* Layout (Left + Right split) */
main.content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7rem 2rem  3rem;
  gap: 2rem;
  position: relative;
}

/* Gallery */
.masonry-column {
  column-count: 2;
  padding: 0.1rem;
}

.masonry-column img {
  background: #f0f0f0; /* placeholder background */
  aspect-ratio: attr(width) / attr(height); /* reserve space */
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.masonry-column img:hover {
  transform: scale(1.01);
}

/*Responsive adjustments */

@media (max-width: 500px) {
  .masonry-column {
  padding: -15rem;
  column-count: 3;
 }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.47);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647;   /* max-ish, guarantees top */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  padding: 2rem; /* Add breathing room */
  overflow-y: auto; /* 🔧 Allows scrolling for tall images */
}

.lightbox.show {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 10000;  
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh; /* 🔧 Leave space for caption */
  border-radius: 2px;
  box-shadow: 0 0 45px rgba(0,0,0,0.4);
  transform: scale(0.84);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.7s ease;
}

.lightbox.show img {
  transform: scale(1);
  opacity: 1;
}

/* Lightbox Captions */
.lightbox-caption {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #000000;
  max-width: 90%;
  backdrop-filter: blur(4px); /* optional: adds subtle glassy feel */
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox.show .lightbox-caption {
  opacity: 1;
  transform: translateY(0);
} 





/* ----------------------------------------------------------------------------------------- */
/* 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; }
}











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

/* Responsive */
@media (max-width: 900px) {
  main.content {
    flex-direction: column;
    height: auto;
  }
  .top-left-content {
    max-width: 100%;
    overflow-y: visible;
  }
  .right-gallery {
    max-width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    margin-top: 2rem;
  }
}





/* 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);
  }
}







/* Common Button */
.common {
  margin-bottom: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.common button{
    text-decoration: none;
  color: #333333;
  padding: 0.6rem 1rem;
  border: 1px solid #333333;
  border-radius: 4px;
  background-color: #ffffff;
  transition: background 0.3s, color 0.3s; 
}

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









/* Quick Links */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: left;
}

.quick-links a {
  text-decoration: none;
  color: #333333;
  padding: 0.5rem 1rem;
  border: 1px solid #333333;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

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

.quick-links a .icon {
  width: 16px;
  height: 16px;
  margin-left: 0.3rem;
  vertical-align: -0.1rem;
  transition: filter 0.1s ease-in-out transform 0.2s ease-in-out;
}

.quick-links1 a .icon{
  width: 16px;
  height: 16px;
  margin-left: 0.3rem;
  vertical-align: -0.1rem;
  transition: filter 0.1s ease-in-out transform 0.3s ease-in-out;
  filter: grayscale(100%) brightness(100); /* make them monochrome */
}

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

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







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;
}




.tools-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: -2rem;
  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
}


/* 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;
}


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

.photos {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: inline-block;
  vertical-align: left;
}

.figure {
  margin-top: -0.4rem;
  margin-bottom: -0.4rem; 
  
}