/*
COLOR PALETTE

Original Hue: oklch(0% 0.011 36.92)
oklch(from var(--colour) 95% c h) - BG colour
oklch(from var(--colour) 85% c h)
oklch(from var(--colour) 75% c h)
oklch(from var(--colour) 65% c h)
oklch(from var(--colour) 55% c h)
oklch(from var(--colour) 45% c h) - Text color
oklch(from var(--colour) 35% c h)
oklch(from var(--colour) 25% c h)
oklch(from var(--colour) 15% c h)

Accents:
Pink: oklch(0.9243 0.053 338.78)
Burgundy: oklch(0.2966 0.1171 2.31)
Light Green: oklch(0.9016 0.50587 115.96)
Dark Green: oklch(0.4419 0.0537 116.59)
White: oklch(1 0 0)
Brown: oklch(0.3528 0.0516 49.99)
Off white: oklch(0.9564 0.0201 97.53)
Blue: oklch(0.8362 0.046 239.66)
Yellow: oklch(0.9313 0.0653 85.82)
Green: oklch(0.8633 0.0612 112.42)

*/

/* GLOBAL STYLES 
------------------------------------*/
:root {
  --neutral-100: oklch(95% 0.011 36.92);
  --neutral-200: oklch(85% 0.011 36.92);
  --neutral-300: oklch(75% 0.011 36.92);
  --neutral-400: oklch(65% 0.011 36.92);
  --neutral-500: oklch(55% 0.011 36.92);
  --neutral-600: oklch(45% 0.011 36.92);
  --neutral-700: oklch(35% 0.011 36.92);
  --neutral-800: oklch(25% 0.011 36.92);
  --neutral-900: oklch(15% 0.011 36.92);
  --color: oklch(0% 0.011 36.92);
  --color-green: oklch(0 0.0612 112.42);
  --color-pink: oklch(0.9243 0.053 338.78);
  --color-burgundy: oklch(0.2966 0.1171 2.31);
  --color-light-green: oklch(0.9016 0.50587 115.96);
  --color-dark-green: oklch(0.4419 0.0537 116.59);
  --color-white: oklch(1 0 0);
  --color-yellow: oklch(0.9313 0.0653 85.82);
  --off-white: oklch(0.9564 0.0201 97.53);
  --body-text: "questrial", sans-serif;
  --heading-text: "quattrocento", serif;
}

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html,
body {
  block-size: 100%;
}
body {
  background: oklch(from var(--color) 95% c h);
  margin-inline: 0;
  margin-block: 0;
  font-family: var(--body-text);
  font-size: 1rem;
  line-height: 1.5;
  color: oklch(from var(--color) 45% c h);
}

h1,
h2,
h3 {
  font-family: var(--heading-text);
  font-weight: 400;
  margin-inline: 0;
  margin-block: 0;
}
h1 {
  font-size: 3.125rem;
  line-height: 0.85;
}
h2 {
  font-size: 1.625rem;
}
h3 {
  font-size: 1.5rem;
}

/* links */
a {
  color: oklch(from var(--color-pink) l c h);
  text-decoration: none;
}
a:hover {
  color: oklch(from var(--color-pink) l c h);
  text-decoration: none;
}
footer a {
  color: oklch(from var(--off-white) l c h);
  transition: 0.14s ease-in-out;
}
footer a:hover {
  color: oklch(from var(--color-pink) l c h);
}
.btn {
  background: none;
  border: 1px solid oklch(from var(--color-dark-green) l c h);
  color: oklch(from var(--color-dark-green) l c h);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  display: inline-block;
  padding-inline: 0.438rem;
  padding-block: 0.438rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  border-radius: 0.25rem;
}

.contact-btn {
  background: none;
  border: 2px solid oklch(from var(--off-white) l c h);
  color: oklch(from var(--off-white) l c h);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  display: inline-block;
  padding-inline: 0.438rem;
  padding-block: 0.438rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  border-radius: 0.25rem;
}

.content-wrapper {
  margin-block: 0;
  margin-inline: auto;
  padding-block: 1.875rem;
  padding-inline: 1.875rem;
  max-inline-size: 56.25rem;
}
/* ############ 3. Navigation ############ */
.logo {
  max-inline-size: 5.625rem;
  color: oklch(from var(--neutral-100) l c h);
  text-decoration: none;
  animation: softBlur 2s ease-in;
  animation-fill-mode: forwards;
}
@keyframes softBlur {
  0% {
    filter: blur(0.5rem);
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    filter: blur(0);
    opacity: 0.72;
    transform: scale(1.5);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }
}

.logo:hover {
  color: oklch(from var(--color-pink) l c h);
}
.navWrap {
  position: sticky; /*  ** note the menu will not be sticky until we add more page content */
  inset-block-start: 0;
  z-index: 99;
  block-size: 3rem;
  inline-size: 100%;
  background-color: oklch(from var(--color-burgundy) l c h);
  border-block-end: 1px solid oklch(from var(--neutral-100) l c h);
  box-shadow: 0px 1px 8px oklch(from var(--neutral-800) l c h);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-wrap: nowrap;
}

input#navToggle {
  display: none;
}

input#navToggle ~ label {
  position: relative;
  padding: 0.25rem;
  inline-size: 2rem;
  block-size: 1.25rem;
  block-size: 2rem;
}

input#navToggle ~ label > span,
input#navToggle ~ label > span::before,
input#navToggle ~ label > span::after {
  content: "";
  display: block;
  position: absolute;
  inset-block-start: 0.75rem;
  block-size: 0.125rem;
  inline-size: 1.75rem;
  opacity: 1;
  background: oklch(from var(--off-white) l c h);
  transition: 0.14s ease-in-out;
}

input#navToggle ~ label > span::before {
  inset-block-start: -0.5rem;
}

input#navToggle ~ label > span::after {
  inset-block-start: 0.5rem;
}

#navToggle:checked ~ label > span {
  inline-size: 0;
  background: oklch(from var(--off-white) l c h);
}

#navToggle:checked ~ label > span::before {
  transform: rotateZ(45deg);
  inset-block-start: 0;
}

#navToggle:checked ~ label > span::after {
  transform: rotateZ(-45deg);
  inset-block-start: 0;
}

#navToggle:checked ~ nav {
  inset-inline-start: 0;
}

nav {
  position: absolute;
  z-index: -1;
  inset-block-start: 3rem;
  inset-inline-start: -110%;
  inline-size: 100%;
  transition: 0.22s ease-in-out;
}

nav::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  z-index: -1;
  block-size: 100vh;
  inline-size: 100vw;
  background-color: oklch(from var(--neutral-400) l c h);
  background-size: cover;
}

nav ul {
  list-style-type: none;
}

nav ul li a {
  display: inline-block;
  text-decoration: none;
  inline-size: 100%;
  padding: 0.75rem 1rem;
  color: oklch(from var(--neutral-100) l c h);
  border-block-end: solid 1px oklch(from var(--neutral-100) l c h);
  transition: 0.14s ease-in-out;
}

nav ul li a:hover {
  color: oklch(from var(--color-pink) l c h);
  transform: skew(-20deg);
}

nav ul li:last-of-type::before {
  content: "";
  display: block;
  padding: 0.5rem;
}

nav .btn {
  background: oklch(from var(--color-green) 75% c h);
  border-block-end: none;
  border-radius: 0.25rem;
  color: oklch(from var(--neutral-100) l c h);
  inline-size: 40%;
  padding: 0.5rem 0.6rem;
  letter-spacing: 0.063rem;
  text-shadow: 0 0 0.063rem oklch(from var(--color-green) 95% c h);
  display: flex;
  justify-content: center;
  margin: auto;
}

nav .btn:hover {
  background-color: oklch(from var(--color-pink) l c h);

  color: oklch(from var(--neutral-100) l c h);
}
.active {
  color: oklch(from var(--color-pink) l c h);
  text-decoration: underline;
}
/* HOME
------------------------------------*/
.home {
  background: url(../images/design-color.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
.home .content-wrapper {
  flex: 1 0 auto;
  padding-inline: 0.625rem;
  padding-block: 0.625rem;
}
.content-bg {
  background: oklch(from var(--color-white) l c h / 90%);
  padding-inline: 1.25rem;
  padding-block: 1.25rem;
}

/* RESUME
------------------------------------*/
.resume header::before {
  background: url(../images/design-color.jpg) center;
  background-size: cover;
  content: "";
  display: block;
  block-size: 12.5rem;
}
.resume-section {
  margin-block-end: 3.125rem;
}
.resume-section h2 {
  border-block-end: 2px dashed oklch(from var(--color) 75% c h);
}

/* Work Experience
------------------------------------*/
.work-item {
  margin-block: 1.875rem;
  margin-inline: 0;
}
.work-summary p:first-child {
  margin-block-start: 0;
}

/* Education
------------------------------------*/
.education-item {
  margin-block: 1.875rem;
  margin-inline: 0;
}
.education-item p {
  margin-inline: 0;
  margin-block: 0;
}
/*----- ANIMATION ----*/
.animation header::before {
  background: url(../images/design-color.jpg) center;
  background-size: cover;
  content: "";
  display: block;
  block-size: 12.5rem;
}

/* FOOTER
------------------------------------*/
footer {
  background: oklch(from var(--color-burgundy) l c h);
  color: oklch(from var(--off-white) l c h);
  text-align: center;
  padding-inline: 0.625rem;
  padding-block: 0.625rem;
}
.socials {
  list-style-type: none;
  padding-inline: 0;
  padding-block: 0;
}
.socials li {
  display: inline-block;
  margin-inline-start: 0.625rem;
}
.socials img {
  inline-size: 2rem;
}
.socials img:hover {
  opacity: 0.5;
}
/* PROJECTS PAGE */
.projects header::before {
  background: url(../images/design-color.jpg) center;
  background-size: cover;
  content: "";
  display: block;
  block-size: 12.5rem;
}
.project-item .btn {
  inline-size: 50%;
  padding: 0.625rem;
  text-align: center;
  justify-self: center;
}
.project-item {
  margin-block-start: 1.875rem;
  margin-inline: 0;
  background-color: oklch(from var(--color-white) l c h/ 60%);
  padding: 1.25rem;
  border-radius: 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0.313rem;
}
.project-item img {
  inline-size: 100%;
  margin-block-end: 0.625rem;
}
.projects h3 {
  text-align: center;
  border-block-end: 1px dashed oklch(from var(--color) 75% c h);
}
/* MEDIA QUERIES */

/* Tablets and up */

@media screen and (min-width: 34rem) {
  .resume header::before {
    block-size: 23.438rem;
  }
  h1 {
    font-size: 4.375rem;
  }
  h2 {
    font-size: 2.25rem;
  }
  .project-item img {
    float: inline-start;
  }
}

@media screen and (min-width: 34rem) {
  .home .content-wrapper {
    padding-block: 1.875rem;
    padding-inline: 1.875rem;
  }
  .content-bg {
    padding-inline: 1.875rem;
    padding-block: 1.875rem;
  }
  .btn {
    transition: 0.5s;
    position: relative;
    z-index: 1;
  }
  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: oklch(from var(--color-dark-green) l c h);
    transition: 0.5s ease-in-out;
    z-index: -1;
  }

  .btn:hover::before {
    width: 100%;
  }
  .contact-btn {
    transition: color 0.5s;
    position: relative;
    z-index: 1;
  }
  .contact-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: oklch(from var(--off-white) l c h);
    transition: 0.5s ease-in-out;
    z-index: -1;
  }
  .contact-btn:hover::before {
    width: 100%;
  }
  .contact-btn:hover {
    color: oklch(from var(--color-dark-green) l c h);
  }
}
@media screen and (min-width: 34rem) and (max-width: 67.9rem) {
  .project-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.25rem;
  }
}

/* Laptops and larger */

@media screen and (min-width: 68rem) {
  footer {
    display: flex;
    justify-content: space-between;
    padding-block: 0;
    padding-inline: 1.25rem;
  }
  .work-item {
    display: grid;
    grid-template-columns: 18.75rem 1fr;
    column-gap: 1.25rem;
  }
  .work-summary p:first-child {
    margin-block-start: 0;
  }
  .project-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.25rem;
    margin-block-end: 0;
    margin-block-start: 1.25rem;
  }
  .project-item img {
    margin-block-end: 0.625rem;
    margin-inline: 0;
  }
  .projects header::before {
    block-size: 23.438rem;
  }
  .navWrap {
    display: grid;
    justify-content: center;
    grid-template-columns: 6.25rem minmax(auto, 68.75rem);
    block-size: auto;
  }

  .navToggleLabel {
    display: none;
  }

  nav {
    position: initial;
  }

  nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul li a {
    border-block-end: none;
  }

  nav ul li a:hover {
    background: transparent;
  }

  nav::after,
  nav ul li:last-of-type::before {
    display: none;
    padding: initial;
  }
  .animation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }
  /*-------- POPOVER -------*/
}
#contact-popover::backdrop {
  background: oklch(from var(--neutral-200) l c h / 50%);
}
.contact-card img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 0.625rem;
}
.contact-btn {
  anchor-name: --contact-anchor;
}
.contact-container {
  position: fixed;
  position-anchor: --contact-anchor;
  inset: auto;
  position-area: y-end span-left;
  margin: 0;
  container-name: contactContainer;
  container-type: inline-size;
  inline-size: min(100vi, max(33vi, 26rem));
  resize: horizontal;
  overflow: auto;
  direction: rtl;
  border: none;
  border-radius: 0.625rem 0.625rem 0.625rem 0;
  background-color: oklch(from var(--neutral-100) l c h);
}
.contact-card {
  direction: ltr;
}
.contact-card h3 {
  border: none;
}
.close-btn {
  border: none;
  background: none;
  inset-inline-end: 0.25rem;
  inset-block-start: 0.5rem;
  filter: grayscale();
}
.contact-details a {
  color: oklch(from var(--color-burgundy) l c h);
}

/* ----- CONTAINER QUERIES ----*/

@container contactContainer (max-width: 24rem) {
  .contact-card {
    padding: 0.625rem;
  }
}

@container contactContainer (min-width: 24rem) and (max-width: 28rem) {
  .contact-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.625rem;
    padding: 0.625rem;
    align-items: center;
  }
  .bio {
    display: none;
  }
  .contact-details {
    grid-column: 2 / 3;
  }
  .contact-card img {
    grid-row: 1 / 3;
  }
}

@container contactContainer (min-width: 28rem) {
  .contact-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
    padding: 0.625rem;
    align-items: center;
  }
  .contact-details {
    grid-column: 2 / 3;
  }
  .bio {
    grid-column: 2 / 3;
  }
  .contact-card img {
    grid-row: 1 / 4;
  }
}

/*----- ANIMATION ----*/

.animation-card {
  margin-block-start: 1.875rem;
  margin-inline: 0;
  background-color: oklch(from var(--color-white) l c h/ 60%);
  padding: 1.25rem;
  border-radius: 1rem;
  justify-items: center;
  display: grid;
  grid-row: subgrid;
}
.animation-card h3 {
  margin-block-end: 0.625rem;
  border-block-end: 2px dashed oklch(from var(--color) 75% c h);
}
.animations h2 {
  border-block-end: 2px dashed oklch(from var(--color) 75% c h);
}
/*-------- CLIP PATH ANIMATION --------*/

.image-container img {
  inline-size: 14.5rem;
  block-size: 14.5rem;
  object-fit: cover;
  animation: circlePath 6s ease-in-out infinite alternate;
  border-radius: 1.25rem;
}

.image-container {
  background-color: oklch(from var(--color-dark-green) l c h);
  border-radius: 1.25rem;
}

@keyframes circlePath {
  0% {
    clip-path: circle(3.125rem at 10% 10%);
  }
  50% {
    clip-path: circle(7rem at 70% 50%);
  }
  100% {
    clip-path: circle(3.125rem at 10% 90%);
  }
}

/*----- FILTER ANIMATION -----*/

.flower {
  inline-size: 12.5rem;
  block-size: 12.5rem;
  position: relative;
  animation: flower-animation 7s ease infinite;
  animation-fill-mode: forwards;
}

.centre {
  inline-size: 5rem;
  block-size: 5rem;
  background-color: oklch(from var(--color-yellow) l c h);
  border-radius: 50%;
  position: absolute;
  top: 3.75rem;
  left: 3.75rem;
  z-index: 1;
}

.petal {
  inline-size: 6.25rem;
  block-size: 6.25rem;
  background-color: oklch(from var(--color-pink) l c h);
  border-radius: 50%;
  position: absolute;
}

.petal-1 {
  top: 0;
  left: 3.125rem;
}
.petal-2 {
  bottom: 0;
  left: 3.125rem;
}

.petal-3 {
  left: 0;
  top: 3.125rem;
}

.petal-4 {
  right: 0;
  top: 3.125rem;
}

.filter {
  background-color: oklch(from var(--color-dark-green) l c h);
  padding: 1rem;
  border-radius: 1.25rem;
}

@keyframes flower-animation {
  0% {
    transform: rotateZ(0);
    filter: hue-rotate(0deg);
  }
  10% {
    transform: rotateZ(45deg);
    filter: hue-rotate(45deg);
  }
  25% {
    transform: rotateZ(90deg);
    filter: hue-rotate(90deg);
  }
  40% {
    transform: rotateZ(135deg);
    filter: hue-rotate(135deg);
  }
  50% {
    transform: rotateZ(180deg);
    filter: hue-rotate(180deg);
  }
  60% {
    transform: rotateZ(225deg);
    filter: hue-rotate(225deg);
  }
  75% {
    transform: rotateZ(270deg);
    filter: hue-rotate(270deg);
  }
  100% {
    transform: rotateZ(360deg);
    filter: hue-rotate(360deg);
  }
}

/*----- BLEND MODE ANIMATION ------*/

.blend {
  inline-size: 12.5rem;
  block-size: 12.5rem;
  position: relative;
  overflow: hidden;
}
.blend-wrapper {
  background-color: oklch(from var(--color-dark-green) l c h);
  padding: 1rem;
  border-radius: 1.25rem;
}
.star1 {
  fill: oklch(from var(--color-pink) l c h);
  position: absolute;
  animation: starOne 7s ease-in-out infinite;
  mix-blend-mode: color-burn;
  animation-fill-mode: both;
  animation-direction: alternate;
}
.star2 {
  fill: oklch(from var(--color-yellow) l c h);
  position: absolute;
  mix-blend-mode: overlay;
  animation: starTwo 7s ease-in-out infinite;
  animation-fill-mode: both;
  animation-direction: alternate;
}

@keyframes starOne {
  0% {
    transform: scale(1) rotatey(0);
  }
  50% {
    transform: scale(1.5) rotatey(90deg);
  }
  100% {
    transform: scale(2) rotatey(180deg);
  }
}

@keyframes starTwo {
  0% {
    transform: rotatex(0);
  }
  25% {
    transform: rotateX(90deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotatex(0);
  }
}