@import 'https://unpkg.com/open-props' layer(design.system);
@import 'https://unpkg.com/open-props/normalize.dark.min.css'
  layer(base.normalize);

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&family=Pacifico&display=swap');

@import 'https://www.unpkg.com/layout-craft@0.1.1/dist/utilities.css'
  layer(design.utilities);

/* 
Source code of these utilities: 
https://github.com/mobalti/layout-craft/blob/main/lib/utilities.css 
*/

@layer base.normalize-overrides {
  :root {
    font-family: 'Inter', sans-serif;

    --brand: oklch(64% 0.24 18);

    --nav-block-size: 4.625rem;
  }

  body {
    -webkit-font-smoothing: antialiased;
  }

  ul {
    list-style: none;
  }

  :is(ul, li) {
    padding: 0;
  }

  li {
    max-inline-size: unset;
  }

  figure {
    all: unset;
  }
}

@layer base.app {
  body {
    background: black;
  }

/* CSS StyleSheet */
  .italic-text {
    font-style: italic;
  }
}

@layer base.containers {
  .Navbar {
    min-block-size: var(--nav-block-size);
    justify-items: center;
    padding-inline: var(--size-fluid-3);
    background-color: black;
  }

  .Menu {
    @media (width < 1024px) {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: var(--nav-block-size);
      overflow-x: auto;
 
      .ItemContent {
        display: none;
      }
    }

    @media (width >= 768px) {
      .NavIcon {
        display: none;
      }
    }

    @media (width < 768px) {
      .NavLink:hover {
        text-decoration: none;
      }
      .NavLinkTitle {
        display: none;
      }
    }
  }
  .NavItem {
    block-size: 100%;
    position: relative;
  }

  .ItemContent {
    background-color: white;
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-4);
    inline-size: max(100%, 370px);
    inset-block-start: var(--nav-block-size);
    opacity: 0;
    padding: var(--size-8);
    position: absolute;
    transition: 0.2s ease;
    visibility: hidden;
    z-index: 99;		/*  var(--layer-3);  */

    a {
      color: black;
      text-decoration: none;
      display: flex;
      justify-content: space-between;
      gap: var(--size-5);
      transition: 0.2s ease;

      &::after {
        font-family: 'Inter', sans-serif;
        content: '\2191';
        font-weight: bold;
        color: var(--brand);
        display: inline-flex;
        rotate: 90deg;
        opacity: 0;
        transform: translateY(10px);
        transition: 0.2s ease;
      }

      &:is(:focus-visible, :hover) {
        color: var(--brand);

        &::after {
          opacity: 1;
          transform: translateY(0px);
        }
      }
    }

    .NavItem:hover & {
      visibility: visible;
      opacity: 1;
    }

    .NavItem:focus-within & {
      visibility: visible;
      opacity: 1;
    }
  }

 
/*  MAIN CAROUSEL WRAPPER STARTS HERE  */


.main { 
  flex: 1;	
  height: 80dvh; 	
  width: 100%;
  overflow: hidden; 
}

.CarouselWrapper {
  grid-row: 1; 		
  position: relative;
  width: 100%;
  height: 100%; 
  min-height: 0;
  overflow: hidden;
}

.Carousel { 
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--gradient-8, #000);
  overflow: hidden; 
}

.slider-container,
.carousel-container { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

/* ==========================================================================
   2. SLIDE LAYER & KEYFRAME TIMELINE
   ========================================================================== */
.Carousel .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
  animation: pureCssSlides 48s infinite;
}

/* Fixed using negative delays to keep loop seamlessly synchronized */
.Carousel .slide:nth-of-type(1) { animation-delay: 0s; }
.Carousel .slide:nth-of-type(2) { animation-delay: -42s; } /* 48 - 6 */
.Carousel .slide:nth-of-type(3) { animation-delay: -36s; } /* 48 - 12 */
.Carousel .slide:nth-of-type(4) { animation-delay: -30s; } /* 48 - 18 */
.Carousel .slide:nth-of-type(5) { animation-delay: -24s; } /* 48 - 24 */
.Carousel .slide:nth-of-type(6) { animation-delay: -18s; } /* 48 - 30 */
.Carousel .slide:nth-of-type(7) { animation-delay: -12s; } /* 48 - 36 */
.Carousel .slide:nth-of-type(8) { animation-delay: -6s; }  /* 48 - 42 */

@keyframes pureCssSlides {
  0%, 12.5% { opacity: 1; z-index: 2; pointer-events: auto; }
  14.5%, 100% { opacity: 0; z-index: 1; pointer-events: none; }
}

/* ==========================================================================
   3. NAVIGATION DOTS SETUP & TIMELINE
   ========================================================================== */
.nav-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10; 
}

.nav-dots .dot {
  display: block; 
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  animation: pureCssDots 48s infinite;
}

/* Fixed using negative delays matching the slides above */
.nav-dots .dot:nth-child(1) { animation-delay: 0s; }
.nav-dots .dot:nth-child(2) { animation-delay: -42s; }
.nav-dots .dot:nth-child(3) { animation-delay: -36s; }
.nav-dots .dot:nth-child(4) { animation-delay: -30s; }
.nav-dots .dot:nth-child(5) { animation-delay: -24s; }
.nav-dots .dot:nth-child(6) { animation-delay: -18s; }
.nav-dots .dot:nth-child(7) { animation-delay: -12s; }
.nav-dots .dot:nth-child(8) { animation-delay: -6s; }

@keyframes pureCssDots {
  0%, 12.5% {
    background-color: #00ffc8;
    transform: scale(1.35);
    box-shadow: 0 0 10px #00ffc8, 0 0 20px #00ffc8;
  }
  14.5%, 100% {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1);
    box-shadow: none;
  }
}

.nav-dots:hover .dot {
  animation-play-state: paused;
}



/* ==========================================================================
   4. INTERACTION STYLES (RADIO BUTTON BINDINGS)
   ========================================================================== */
input[name="carousel-control"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/*  4.  INTERACTION STYLES (RADIO BUTTON BINDINGS) - FIXED  */
input[name="carousel-control"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Kill animations safely ONLY when a user actively clicks */
input[name="carousel-control"]:checked ~ .slide { 
  animation: none !important; 
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
input[name="carousel-control"]:checked ~ .nav-dots .dot { 
  animation: none !important; 
}


/* Force show targeted active manual slide */
#dot-1:checked ~ .slide:nth-of-type(1),
#dot-2:checked ~ .slide:nth-of-type(2),
#dot-3:checked ~ .slide:nth-of-type(3),
#dot-4:checked ~ .slide:nth-of-type(4),
#dot-5:checked ~ .slide:nth-of-type(5),
#dot-6:checked ~ .slide:nth-of-type(6),
#dot-7:checked ~ .slide:nth-of-type(7),
#dot-8:checked ~ .slide:nth-of-type(8) {
  opacity: 1 !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

/* Force glow on manual active dot selection */
#dot-1:checked ~ .nav-dots .dot:nth-child(1),
#dot-2:checked ~ .nav-dots .dot:nth-child(2),
#dot-3:checked ~ .nav-dots .dot:nth-child(3),
#dot-4:checked ~ .nav-dots .dot:nth-child(4),
#dot-5:checked ~ .nav-dots .dot:nth-child(5),
#dot-6:checked ~ .nav-dots .dot:nth-child(6),
#dot-7:checked ~ .nav-dots .dot:nth-child(7),
#dot-8:checked ~ .nav-dots .dot:nth-child(8) {
  background-color: #00ffc8 !important;
  transform: scale(1.35) !important;
  box-shadow: 0 0 10px #00ffc8, 0 0 20px #00ffc8 !important;
}

/* ==========================================================================
   5. MEDIA, FIGURES & TEXT OVERLAYS
   ========================================================================== */
.Carousel .slide figure {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.Carousel .slide figure img {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;		
  height: 100%;
  object-fit: contain;			
  object-position: center center;
  z-index: 2;
}

.Carousel .container { 
  position: absolute;		
  bottom: 50px;			
  left: 0;
  width: 100%;
  z-index: 10; 
  pointer-events: none;
  max-height: 45%;  		
  overflow-y: visible;  	
}

.Carousel .text-overlay { 
  width: 100%; 
  padding: 3rem 1.5rem 1.5rem 1.5rem; 
  background: 0;	
  text-align: center;
  pointer-events: auto;
}

.text-overlay h2 { 
  font-size: calc(1.1rem + 0.4vw); 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 
  margin: 0 0 8px 0; 
  line-height: 1.3; 
}

.text-overlay p { 
  font-size: calc(0.85rem + 0.2vw); 
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); 
  margin: 0 0 4px 0;
  line-height: 1.4;
}



/*  	END OF ACTIVE CAROUSEL WRAPPER    */



@layer base.components {
  .Logo {
    inline-size: var(--size-11);

    margin: 0;
    padding: 0;
  }

  .NavLink {
    padding-inline: var(--size-4);
    block-size: 100%;

    color: white;
    background-color: inherit;
    font-size: var(--font-size-2);

    text-decoration-color: currentColor;
    font-weight: var(--font-weight-6);
    text-underline-offset: 1ex;

    @media (width > 1024px) {
      :is(.NavItem:focus-within, .NavItem:hover) & {
        text-decoration: underline;
        color: var(--brand);
      }
    }
  }

  .ButtonLink {
    color: white;

    background: var(--gradient-21);

    font-size: var(--font-size-2);
    font-weight: var(--font-weight-6);
    padding: var(--size-relative-2) var(--size-relative-5);
    border-radius: var(--radius-4);
    text-decoration: none;
    transition: filter 0.2s ease;

    &:hover {
      filter: contrast(200%);
    }
  }

  .ItemTitle {
    color: var(--brand);
  }

  .NavIcon {
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-4);

    .NavLink:focus & {
      color: var(--brand);
    }
  }

  .CodePen {
    padding-inline: var(--size-fluid-3);
    block-size: 100%;
  }
}