*,
*::before,
*::after {
   box-sizing: border-box;
}

:root {
   --ff-primary: 'Source Sans Pro', sans-serif;
   --ff-secondary: 'Source Code Pro', monospace;

   --fw-reg: 300;
   --fw-semi-bold: 600;
   --fw-bold: 900;

   --clr-light: #fff;
   --clr-dark: #1d222e;
   --clr-accent: #16e0bd;

   --fs-h1: 3rem;
   --fs-h2: 2.25rem;
   --fs-h3: 1.25rem;
   --fs-body: 1rem;

   --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
         0.125em 0.125em 0.25em rgba(0,0,0,.15);
}

@media (min-width: 800px) {
   :root {    
       --fs-h1: 4.5rem;
       --fs-h2: 3.75rem;
       --fs-h3: 1.5rem;
       --fs-body: 1.125rem;
   }
}

html {
   scroll-behavior: smooth;
}

body {
   background-color: var(--clr-light);
   color: var(--clr-dark);
   margin: 0;
   font-family: var(--ff-primary);
   font-size: var(--fs-body);
   line-height: 1.6;
   overflow-x: hidden;
}

section {
   padding: 5em 2em;
}

.intro__img,
.about-me__img,
.portfolio__img {
   display: block;
   max-width: 100%;
}

strong { font-weight: var(--fw-bold); }

:focus {
   outline: 3px solid var(--clr-accent);
   outline-offset: 3px;
}

h1,
h2,
h3 {
   line-height: 1;
   margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.section__title {
   margin-bottom: .25em;
}

.section__title--intro {
   font-weight: var(--fw-reg);
   font-size: 3rem;
   text-align: center;
   color: var(--clr-accent)
}

.section__title--intro strong {
   display: block;
}

.section__subtitle {
   margin: 0;
   font-size: var(--fs-h3);
   color: var(--clr-dark);
}

.section__subtitle--intro {
   color: var(--clr-light);
   letter-spacing: 10px;
   font-size: 1rem;
   margin-bottom: .3em;
}

.section__subtitle--about {
   background: var(--clr-accent);
   padding: .25em 1em;
   font-family: var(--ff-secondary);
   margin-bottom: 1em;
}

.section__subtitle--work {
   color: var(--clr-accent);
   font-weight: var(--fw-bold);
   margin-bottom: 2em;
}

header {
   display: block;
   position: sticky;
   top: 0;
   justify-content: space-between;
   z-index: 1000;
}

.nav {
   width: 100%;
   line-height: 0;
   display: block;
   margin: 0;
   align-items: center;
   justify-content: space-between;
   background-color: #282e3e;
   color: var(--clr-dark);
   padding: 1em 2em;
   transition: transform 0.3s ease-in-out;
}

.nav__list {
   display: flex;
   list-style: none;
   gap: 2em;
   justify-content: center;
   align-items: center;
   padding: 0;
   transition: transform 0.5s ease-in-out;
}

.nav__link {
   letter-spacing: 2px;
   color: var(--clr-light);
   font-weight: var(--fw-semi-bold);
   font-size: var(--fs-body);
   text-decoration: none;
   text-transform: uppercase;
}

.nav__link:hover {
   color: var(--clr-accent);
}

.nav__link.nav__link--selected {
   color: var(--clr-light);
}

.nav__signature {
   width: 80px;
   display: block;
   margin: 0 auto;
   margin-bottom: 1.5em;

}

.intro {
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   background: var(--clr-dark);
   height: 300px;
}

.section__subtitle--intro {
   display: inline-block;
}

@media (min-width: 600px) {

   .nav__signature {
       margin-bottom: 0;
   
   }

   .nav {
      display: flex;
       position: sticky;
       top: 0;
       align-items: center;
       flex-direction: row;
       align-self: flex-start;
       z-index: 100;
   }

.nav__list {
   display: flex;
   list-style: none;
   gap: 2em;
   justify-content: space-between;
   align-items: center;
   padding: 0;
}

   .section__title--intro {
       font-size: 7rem;
   }

.section__subtitle--intro {
   font-size: 2rem;
}

   .intro {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       margin: 0 auto;
       margin-top: -5em;
       padding-top: 10em;
       height: 500px;
       width: 100%;
   }

   .intro__img {
       height: 100%;
   }

   .section__subtitle--intro {
       align-self: center;
       text-align: center;
       position: relative;
       margin-top: 1em;
   }
}

.about-me {
   background: var(--clr-light);
}

.about-me__content {
   position: relative;
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
}

.about-me__body {
   margin-top: 2em;
   color: var(--clr-dark);
   text-align: left;
}

.signature-container {
   text-align: left;
}

.about-me__signature {
   
   margin-top: 1em;
   margin-left: -.25em;
   width: 100px;
}

.section__title--about {
   color: var(--clr-dark);
   grid-area: title;
   position: relative;
   z-index: 1;
   display: inline-block;
}

.section__title--about:before {
       content: '';
       display: inline;
       position: absolute;
       width: 100%;
       height: 20px;
       margin: .5em 0;
       margin-left: .3em;
       padding: 0;
       background: var(--clr-accent);
       z-index: -1;
}

@media (min-width: 800px) {

   .about-me__content {
       position: relative;
       max-width: 800px;
       margin: 0 auto;
       text-align: left;
   }

   .section__title--about {
       display: block;
   }

   .section__title--about:before {
           height: 30px;
           background: var(--clr-accent);
   }

   .section__subtitle--about {
       grid-column: 1 / -1;
       grid-row: 2;
       position: relative;
       left: -1em;
       width: calc(100% + 2em);
       padding-left: 1em;
       padding-right: calc(200px + 4em);
   }

   .about-me__img {
       float: right;
       width: 300px;
       margin: -100px 0 1.5em 1.5em; 
       position: relative;           
       z-index: 1;             
     }

}

.my-customers {
   background-color: #1d222e;
}

/* Portfolio Logo Scroller */
.portfolio-tag-list {
   margin: 0;
   padding-inline: 0;
   list-style: none;
   display: flex;
}

.portfolio-tag-list li {
   flex-shrink: 0;
   padding: 1rem;
}

.portfolio-tag-list img {
   display: block;
   height: 150px;
   width: auto;
}

.portfolio-scroller {
   padding: 1em 0;
   max-width: 80%;
   background-color: var(--clr-dark);
   margin: 0 auto;
   overflow: hidden;
   mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
   -webkit-mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
}
  
.portfolio-scroller__inner {
   display: flex;
   flex-wrap: nowrap;
   gap: 5rem;
   width: max-content;
   will-change: transform; /* Optimize for animation */
   transform: translateZ(0); /* Force GPU acceleration */
}

.portfolio-scroller .portfolio-scroller__inner {
   animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.portfolio-scroller[data-direction="right"] {
   --_animation-direction: reverse;
} 

.portfolio-scroller[data-direction="left"] {
   --_animation-direction: forwards;
} 

.portfolio-scroller[data-speed="slow"] {
   --_animation-duration: 60s;
} 

.portfolio-scroller[data-speed="fast"] {
   --_animation-duration: 40s;
}

@keyframes scroll {
   from {
       transform: translateX(0);
   }
   to {
       transform: translateX(calc(-50%));
   }
}

.my-work {
   background: var(--clr-light);
   color: var(--clr-dark);
   text-align: center;
}

.section__title--my-work {
   display: inline-block;
position: relative;
z-index: 1;
margin-bottom: 1em;
}

.section__title--my-work:before {
   content: '';
   display: inline;
   position: absolute;
   width: 100%;
   height: 20px;
   margin: .5em 0;
   margin-left: .3em;
   padding: 0;
   z-index: -1;
   background: var(--clr-accent);
}

.portfolio {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 2em;
}

.portfolio__roles {
   display: flex;
   flex-wrap: wrap;
   gap: 1em;
}

.portfolio__role {
   border: 1px solid grey;
   background-color: #f1f1f1;
   border-radius: 20px;
   font-size: .8rem;
   font-weight: var(--fw-semi-bold);
   padding: .5em 1em;
   box-shadow: 3px 3px 0px var(--clr-accent);

}

@media (max-width: 1200px) {
   .portfolio {
     grid-template-columns: 1fr 1fr;
   }

 }

@media (max-width: 800px) {
   .portfolio {
     grid-template-columns: 1fr;
   }

   .section__title--my-work:before {
       height: 20px;
   }

   .section__title--about:before {
       height: 20px;
   }
 }

.portfolio__item {
   position: relative;
   background: var(--clr-dark);
   overflow: hidden;
   transition: all 0.3s ease;
   box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
}

.portfolio__img {
   transition:
       transform 750ms cubic-bezier(.5, 0, .5, 1),
       opacity 250ms linear;
}

.portfolio__text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: var(--clr-light); /* adjust color as needed */
   font-weight: var(--fw-semi-bold);
   opacity: 0; /* hidden by default */
   transition: opacity 0.3s ease;
   pointer-events: none; /* ensures hover still triggers the image */
 }

 .portfolio__item:hover .portfolio__text,
.portfolio__item:focus .portfolio__text {
 opacity: 1;
}

.portfolio__item:hover {
   box-shadow: 10px 10px 0px var(--clr-accent);
}

.portfolio__item:focus {
   position: relative;
   z-index: 2;
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
   transform: scale(1.2);
   opacity: .5;
}

.footer {
   display: flex;
   flex-direction: column;
   gap: 2em;
   background: var(--clr-dark);
   color: var(--clr-accent);

   padding: 2.5em 0;
   font-size: var(--h3);
   align-items: center;
   justify-content: center;
}

.footer__icons {
   display: flex;
   gap: 2em;
  align-items: center;
  justify-content: center;
}

.footer__icons--wrapper {
   display: flex;
   gap: .5em;
   flex-direction: row;
  align-items: center;
  justify-content: center;
}

.footer__icon {
   margin: 0;
   padding: 0;
   width: 20px;
   filter: invert();
}

.footer__body {
   margin: 0 3em;
   color: var(--clr-light);
   font-weight: var(--fw-reg);
}

.footer__title {
   color: var(--clr-light);
   margin: 0;
   padding: 0;
}

.footer__subtitle {
   color: var(--clr-light);
   margin: 0;
   margin-top: 1.5em;
   padding: 0;
}

.footer__subsection {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.footer a {
   line-height: 0;
   margin: 0;
   padding: 0;
   color: inherit;
   text-decoration: none;
}

.footer__link {
   line-height: 0;
   margin: 0;
   padding: 0;
   font-weight: var(--fw-bold);
}

.footer__info {
   margin: 0;
   padding: 0;
   font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
   opacity: .7;
}

.footer__link:hover {
   text-decoration: underline;
}

.social-list {
   list-style: none;
   display: flex;
   justify-content: center;
   margin: 2em 0 0;
   padding: 0;
}

.social-list__item {
   margin: 0 .5em;
}

.social-list__link {
   padding: .5em;
}

.portfolio-item-individual {
   position: relative;
   padding: 4em 0;
   max-width: 800px;
   margin: 0 auto;
}

.featured-video {
margin-top: 2em;
width: 100%;
margin-bottom: 2em;
/* box-shadow: 10px 10px 0px var(--clr-accent); */
}

.portfolio__category {
   list-style: none;
   display: flex;
   gap: 2em;
   padding: 0;
   margin-bottom: 0;
}

.portfolio__intro {
   margin-bottom: 2em;
   padding: 0;
   width: 100%;
}

.portfolio__content {
   display: flex;
   gap: 2em;
   margin: 0;
   padding: 0;
}

.portfolio__brand {
display: block;
text-transform: uppercase;
font-size: var(--fs-body);
}

.portfolio__project {
   white-space: nowrap;
   font-size: var(--fs-h3);
}

@media (max-width: 800px) {

   .portfolio__brand {
       font-size: 1.5rem;
       }
       
       .portfolio__project {
           font-size: 2rem;
       }

}

@media (max-width: 600px) {

   .portfolio__brand {
       font-size: 1.2rem;
       }
       
       .portfolio__project {
           font-size: 1.6rem;
       }

}

.portfolio__content--item {
   flex: 1;
}

.portfolio__content--title:after {
   content: '';
   display: block;
   width: 2em;
   height: 3px;
   margin: .75em 0;
   background: var(--clr-accent);
}

.portfolio__title {
   display: inline-block;
position: relative;
z-index: 1;

}

.portfolio__title:before {
   content: '';
   display: inline;
   position: absolute;
   width: 100%;
   height: 20px;
   margin: .5em 0;
   margin-left: .3em;
   padding: 0;
   z-index: -1;
   background: var(--clr-accent);
}

@media (min-width: 800px) {

   .portfolio__title:before {
       height: 30px;
   }

   .section__title--my-work:before {
       height: 30px;
   }

}

.button-container {
   max-width: 800px;
   display: flex;
   justify-content: flex-start;
   gap: .5em;
   margin: 0 auto;
   text-align: center;
   padding: 1em 0;
 }

 .button-container .btn {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #282830;
   border: none;
   border-radius: 50%;
   cursor: pointer;
   z-index: 100;
 }
 
 .button-container .btn:hover {
   background-color: #3c3c47;
 }
 
 .button-container .btn:hover .arrow-nav {
   border-left: 2px solid var(--clr-accent);
   border-bottom: 2px solid var(--clr-accent);
 }

 
 
 
 .image-gallery {
   position: relative;
     max-width: 100%;
     margin: 0 auto 2em;
     overflow-x: hidden;
   }

 .image-gallery__items {
     margin: 0;
     max-width: 800px;
 }
   
 .image-gallery__inner {
   display: flex;
   gap: 2em;
 }
 
 .image-gallery__item {
   padding: 0;
   margin: 0;
   flex: 0 0 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }

   /* .image-gallery__item:focus {
outline: 10px solid var(--clr-accent);
outline-offset: 3px;
 } */

 .image-gallery__item video, .image-gallery__item img {
   width: 100%;
   object-fit: contain;
   aspect-ratio: 16 / 9;
   display: block;
 }

 @media (max-width: 1000px) {

   .image-gallery__item {
       flex: 0 0 80%;
     }

 }

 
 .arrow-nav {
width: 12px;
height: 12px;
border-left: 2px solid var(--clr-light);
border-bottom: 2px solid var(--clr-light);
transform: rotate(45deg);
display: inline-block;
}

.arrow-nav-right {
transform: translateX(-3px) rotate(-135deg);
}

.arrow-nav-left {
transform: translateX(1px) rotate(45deg);
}

@media (max-width: 1000px) {

:focus {
   outline: none;
   outline-offset: 0;
}

   .portfolio-item-individual {
       padding: 4em 1em;
   }

   .button-container {
       padding: 1em;
   }

}

@media (max-width: 600px) {
   .portfolio__content {
       flex-direction: column;
       margin: 0 auto;
       gap: 1em;
   }

   .portfolio-item-individual {
       padding: 2em 1em;
   }

}

/* === LIGHTBOX BASE === */
.lightbox {
   position: fixed;
   inset: 0;
   background-color: rgba(255, 255, 255, 1);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   padding: 2rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
   isolation: isolate; /* Create stacking context */
}
 
.lightbox[aria-hidden="false"] {
   opacity: 1;
   pointer-events: auto;
}
 
.lightbox__close {
   position: absolute;
   top: 1rem;
   right: 1rem;
   width: 50px;
   height: 50px;
   border: none;
   cursor: pointer;
   background: none;
   z-index: 10; /* Ensure it's above content */
}
 
.lightbox__close::before,
.lightbox__close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 36px;
   height: 2px;
   background: var(--clr-dark);
}
 
.lightbox__close::before {
   transform: translate(-50%, -50%) rotate(45deg);
}
 
.lightbox__close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}
 
.lightbox__nav {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   border: none;
   background-color: var(--clr-dark);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   position: absolute;
   z-index: 10; /* Higher than content */
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
}

.lightbox__nav--prev {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 1rem;
   z-index: 10; /* Ensure it's above content */
}

.lightbox__nav--next {
   position: absolute;
   top: 50%;
   right: 1rem;
   transform: translateY(-50%);
   z-index: 10; /* Ensure it's above content */
}
 
.lightbox__nav:hover {
   background-color: #3c3c47;
}

.lightbox__nav:hover .arrow-nav {
   border-left: 2px solid var(--clr-accent);
   border-bottom: 2px solid var(--clr-accent);
}
 
/* === VIDEO CONTAINER === */
.lightbox__content {
   max-width: 100%;
   max-height: 80vh;
   margin: 0;
   padding: 0;
   aspect-ratio: 16 / 9;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 1;
}
 
.lightbox__content video {
   width: 100%;
   height: 100%;
   object-fit: contain;
   aspect-ratio: 16 / 9;
   pointer-events: none; /* This prevents the video from capturing clicks */
}

.lightbox__content img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   aspect-ratio: 16 / 9;
   pointer-events: none; /* This prevents the image from capturing clicks */
}
 
/* disable all pointer events (click, focus) on non-active slides */
.image-gallery__item[tabindex="-1"]:not(:has(video)),
.image-gallery__item[tabindex="-1"]:not(:has(video)) * {
   pointer-events: none;
}

/* if you ever do get focus on a non-active item, hide its outline */
.image-gallery__item[tabindex="-1"]:focus,
.image-gallery__item[tabindex="-1"] *:focus {
   outline: none;
}

.video-thumb {
   position: relative;
   cursor: pointer;
}

.play-icon {
   position: absolute;
   width: 60px;
   height: 60px;
   background: rgba(0,0,0,0.6);
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.play-icon::before {
   content: '';
   position: absolute;
   left: 23px;
   top: 18px;
   width: 0;
   height: 0;
   border-left: 18px solid white;
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
}

/* Mobile-specific improvements */
@media (max-width: 768px) {
/* Make the nav buttons slightly larger on mobile for easier tapping */
.lightbox__nav {
  width: 56px;
  height: 56px;
}

/* Keep arrow styling consistent with desktop */
.arrow-nav {
  width: 12px;
  height: 12px;
  border-left: 2px solid var(--clr-light);
  border-bottom: 2px solid var(--clr-light);
  padding: 0; /* Remove the padding we added earlier */
  box-sizing: border-box; /* Use border-box instead of content-box */
}

/* Ensure videos with controls are still interactive */
.image-gallery__item video[controls] {
  pointer-events: auto;
}

/* But ensure the lightbox content videos don't block navigation */
.lightbox__content video {
  pointer-events: none;
}
}