/* ..... PAINT PALETTE NAVIGATION ..... */
/*
The navigation was designed as a paint palette instead of a
traditional menu.

The goal was to make navigation feel like part of the creative
workspace while still keeping it functional and accessible.
The palette expands into individual paint swatches that represent
different pages of the portfolio.
*/

/*
The navigation stays fixed so users can access different sections
of the portfolio at any point while exploring long interactive
pages.
same as any menu lines*/
.paint-nav {
  --palette-size: clamp(3rem, 9vw, 4rem);
  --swatch-width: clamp(6rem, 13vw, 9rem);
  --swatch-height: clamp(2rem, 5vw, 3rem);

  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;

  width: var(--palette-size);
  height: var(--palette-size);

  pointer-events: none;
}

/* ..... PALETTE MENU BUTTON ..... */
/*
The palette button acts as the main trigger for opening the menu.
Hover and active states were added to make the interaction feel
more physical similar to interacting with a real object or smudging paint on a real pallete
i made sure it works for both mobileclick and hover.
*/
.paint-palette-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;

  width: var(--palette-size);
  height: var(--palette-size);

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: pointer;
  pointer-events: auto;

  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.35s ease;
}

/* Adds a small physical movement when interacting with the palette */
.paint-palette-button:hover {
  transform: scale(1.06) rotate(3deg);
}

.paint-palette-button:active {
  transform: scale(0.98) rotate(-2deg);
}

.paint-palette-button:focus-visible {
  outline: 0.15rem solid;
  outline-offset: 0.3rem;
  border-radius: 50%;
}

.palette-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* allows the badic to disapear*/
.palette-basic {
  opacity: 1;
}

.palette-colour {
  opacity: 0;
}

/* ..... PALETTE COLOUR TRANSITION ..... */
/*
The navigation uses two images for each state.
The basic version creates a neutral starting point, while the
coloured version appears during interaction to reinforce the
paint theme.
*/
/*
Each navigation item contains two image states:
a neutral version and a coloured version.
Instead of replacing images with JavaScript, I layered both
images and used opacity transitions to create a smoother hover
effect.
*/
.paint-palette-button:hover .palette-basic,
.paint-palette-button:focus-visible .palette-basic,
.paint-nav.is-open .palette-basic {
  opacity: 0;
}

.paint-palette-button:hover .palette-colour,
.paint-palette-button:focus-visible .palette-colour,
.paint-nav.is-open .palette-colour {
  opacity: 1;
}

.paint-nav.is-open .paint-palette-button {
  transform: rotate(8deg);
}

/* ..... NAVIGATION SWATCH CONTAINER ..... */
.paint-nav-swatches {
  position: absolute;
  top: 0;
  right: 0;

  width: var(--palette-size);
  height: var(--palette-size);

  pointer-events: none;
}

/* ..... EXPANDING NAVIGATION SWATCHES ..... */
/*
Each navigation item starts hidden and expands outward when the
palette opens.
I used transforms instead of changing position values because
transforms create smoother animations and better performance.
*/
.paint-swatch {
  position: absolute;
  top: 50%;
  right: 50%;
  z-index: 5;

  width: var(--swatch-width);
  height: var(--swatch-height);

  color: var(--text, #242424);
  text-decoration: none;

  opacity: 0;
  visibility: hidden;

  transform: translate(50%, -50%) translate(0, 0) rotate(0deg) scale(0.3);

  transform-origin: right center;

  pointer-events: none;

  transition:
    transform 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28),
    opacity 0.25s ease,
    visibility 0s linear 0.55s,
    filter 0.25s ease;

  transition-delay: 0s;
}

.swatch-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    opacity 0.25s ease,
    transform 0.3s ease;
}

.swatch-basic {
  opacity: 1;
}

.swatch-colour {
  opacity: 0;
}

/* Swatch text */

.paint-swatch span {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 1rem;

  color: inherit;

  font-family: inherit;
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;

  pointer-events: none;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

/* Open menu */
.paint-nav.is-open .paint-nav-swatches {
  pointer-events: auto;
}

.paint-nav.is-open .paint-swatch {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    transform 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.28),
    opacity 0.25s ease,
    visibility 0s linear 0s,
    filter 0.25s ease;
}

/*
These positions create a curved fan layout when the palette opens.
I chose this arrangement because it keeps the menu connected to
the palette idea instead of behaving like a standard dropdown menu.
It is meant to be diffrent and not organized.
*/
.paint-nav.is-open .paint-swatch-1 {
  transform: translate(50%, -50%) translate(-6rem, 0.5rem) rotate(-4deg)
    scale(1);

  transition-delay: 0.04s;
}

.paint-nav.is-open .paint-swatch-2 {
  transform: translate(50%, -50%) translate(-13rem, 0.2rem) rotate(3deg)
    scale(1);

  transition-delay: 0.08s;
}

.paint-nav.is-open .paint-swatch-3 {
  transform: translate(50%, -50%) translate(-20rem, 0.6rem) rotate(-2deg)
    scale(1);

  transition-delay: 0.12s;
}

.paint-nav.is-open .paint-swatch-4 {
  transform: translate(50%, -50%) translate(-27rem, 0.1rem) rotate(4deg)
    scale(1);

  transition-delay: 0.16s;
}

/* Swatch hover and keyboard focus position rotation */
.paint-nav.is-open .paint-swatch-1:hover,
.paint-nav.is-open .paint-swatch-1:focus-visible {
  transform: translate(50%, -50%) translate(-6rem, 0.5rem) rotate(-2deg)
    scale(1.14);
}

.paint-nav.is-open .paint-swatch-2:hover,
.paint-nav.is-open .paint-swatch-2:focus-visible {
  transform: translate(50%, -50%) translate(-13rem, 0.2rem) rotate(5deg)
    scale(1.14);
}

.paint-nav.is-open .paint-swatch-3:hover,
.paint-nav.is-open .paint-swatch-3:focus-visible {
  transform: translate(50%, -50%) translate(-20rem, 0.6rem) rotate(0deg)
    scale(1.14);
}

.paint-nav.is-open .paint-swatch-4:hover,
.paint-nav.is-open .paint-swatch-4:focus-visible {
  transform: translate(50%, -50%) translate(-27rem, 0.1rem) rotate(6deg)
    scale(1.14);
}

.paint-swatch:hover .swatch-basic,
.paint-swatch:focus-visible .swatch-basic,
.paint-swatch:active .swatch-basic {
  opacity: 0;
}

.paint-swatch:hover .swatch-colour,
.paint-swatch:focus-visible .swatch-colour,
.paint-swatch:active .swatch-colour {
  opacity: 1;
}

.paint-swatch:hover span,
.paint-swatch:focus-visible span {
  transform: scale(1.02);
}

.paint-swatch:focus-visible {
  outline: 0.15rem solid currentColor;
  outline-offset: 0.15rem;
}

/* Screen reader only text */
.visually-hidden {
  position: absolute;

  width: 1rem;
  height: 1rem;

  padding: 0;
  margin: -1rem;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  border: 0;
}

.paint-nav.is-open .paint-swatch-5 {
  transform: translate(50%, -50%) translate(-34rem, 0.5rem) rotate(-3deg)
    scale(1);

  transition-delay: 0.2s;
}
.paint-nav.is-open .paint-swatch-5:hover,
.paint-nav.is-open .paint-swatch-5:focus-visible {
  transform: translate(50%, -50%) translate(-34rem, 0.5rem) rotate(-1deg)
    scale(1.14);
}
/* ..... MOBILE NAVIGATION ADJUSTMENTS ..... */
/*
The desktop layout opens horizontally, but on smaller screens
there is less space available.
The swatches are repositioned vertically so the interaction
remains usable without covering the entire screen.
*/
@media (max-width: 48rem) {
  .paint-nav {
    --palette-size: 3.5rem;
    --swatch-width: 9rem;
    --swatch-height: 3.4rem;
    top: 0.8rem;
    right: 0.8rem;
  }

  .paint-nav.is-open .paint-swatch-1 {
    transform: translate(50%, -50%) translate(-5.8rem, 10.6rem) rotate(4deg)
      scale(1);
  }

  .paint-nav.is-open .paint-swatch-2 {
    transform: translate(50%, -50%) translate(-6rem, 7.4rem) rotate(1deg)
      scale(1);
  }

  .paint-nav.is-open .paint-swatch-3 {
    transform: translate(50%, -50%) translate(-5.8rem, 4.2rem) rotate(-3deg)
      scale(1);
  }

  .paint-nav.is-open .paint-swatch-4 {
    transform: translate(50%, -50%) translate(-5rem, 1rem) rotate(-6deg)
      scale(1);
  }

  .paint-nav.is-open .paint-swatch-1:hover,
  .paint-nav.is-open .paint-swatch-1:focus-visible {
    transform: translate(50%, -50%) translate(-5.8rem, 10.6rem) rotate(4deg)
      scale(1.04);
  }

  .paint-nav.is-open .paint-swatch-2:hover,
  .paint-nav.is-open .paint-swatch-2:focus-visible {
    transform: translate(50%, -50%) translate(-6rem, 7.4rem) rotate(1deg)
      scale(1.04);
  }

  .paint-nav.is-open .paint-swatch-3:hover,
  .paint-nav.is-open .paint-swatch-3:focus-visible {
    transform: translate(50%, -50%) translate(-5.8rem, 4.2rem) rotate(-3deg)
      scale(1.04);
  }

  .paint-nav.is-open .paint-swatch-4:hover,
  .paint-nav.is-open .paint-swatch-4:focus-visible {
    transform: translate(50%, -50%) translate(-5rem, 1rem) rotate(-6deg)
      scale(1.04);
  }
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .paint-palette-button,
  .palette-image,
  .paint-swatch,
  .swatch-image,
  .paint-swatch span {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}