/* Reset style */
@import './style/_reset.css';
@import './style/_root.css';

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5rem;

  min-height: 100%;

  padding-inline: var(--body-padding-inline);
  padding-block: var(--body-padding-block);
  margin-inline: var(--body-margin-inline);
  margin-block: var(--body-margin-block);


  font-family: 'Poppins', sans-serif;
  font-style: normal;
  color: var(--color-midnight-blue);

  background-color: var(--color-ma-white);
}

/* ========================= */
/*           FONTS           */
/* ========================= */
h1 {
  font-family: 'Rubik', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 2.25em;
  line-height: 1.5em;
}

h2 {
  font-family: 'Rubik', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 1.25em;
  line-height: 1.5rem;
}

h3 {
  font-family: 'Rubik', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5rem;
}

.subtitle {
  display: block;
  font-size: 1em;
  line-height: 1.5rem;
}

.small-text {
  display: block;
  font-size: 0.875em;
  line-height: 1.3125rem;
}

h1, h2, h3, p {
  margin-block-start: 0;
}

h2 {
  margin-block-end: 1rem;
}

@media screen and (width >= 1024px) {
  h1 {
    font-size: 3.5em;
    line-height: 4.125rem;
  }

  h2 {
    font-size: 1.5em;
    line-height: 1.5rem;
    margin-block-end: 2rem;
  }
  
  h3 {
    font-size: 1.25em;
    line-height: 1.5rem;
  }
  
  .subtitle {
    font-size: 1.25em;
    line-height: 1.5rem;
  }

  h1 + .subtitle {
    margin-block-start: 1rem;
  }
}

/* ========================= */
/*          BORDERS          */
/* ========================= */
.border {
  background: var(--border-background-color);
  position: fixed;
  z-index: var(--zindex-borders);
}

.border-block {
  height: var(--border-thick);
  left: 0;
  right: 0;
}

.border-block-start {
  top: 0;
}

.border-block-end {
  bottom: 0;
}

.border-inline {
  width: var(--border-thick);
  top: 0;
  bottom: 0;
}

.border-inline-start {
  left: 0;
}

.border-inline-end {
  right: 0;
}

/* ========================= */
/*         NAVIGATION        */
/* ========================= */

.main-nav {
  display: none;
  visibility: hidden;
}

.side-nav ul {
  justify-content: flex-end;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav .nav-link {
  color: var(--color-steel-toe);
  text-decoration: none;
  padding-block: 1rem;
  display: flex;
  transition: color .25s ease-in-out 0s;
}

nav .nav-link:is(a):hover {
  color: var(--color-midnight-blue);
}

nav .nav-link:not(:is(a)) {
  cursor: not-allowed
}

nav [aria-current=page] {
  font-weight: bold;
  color: var(--color-midnight-blue);
}

@media screen and (width >= 768px) {
  .main-nav ul,
  .social-nav ul,
  .side-nav ul {
    justify-content: unset;
    gap: 1.5rem;
  }

  .main-nav {
    display: block;
    visibility: visible;
  }
}

/* ========================= */
/*        APPLICATION        */
/* ========================= */
#app {}

@media screen and (width >= 768px) {
  #app {
    padding-inline: 4rem;
  }
}

@media screen and (width >= 1024px) {
  #app {
    padding-inline: 8rem;
  }
}

@media screen and (width >= 1280px) {
  #app {
    max-width: 1280px;
    margin-inline: auto;
  }
}

/* ========================= */
/*          HEADER           */
/* ========================= */
.header {
  padding-inline: 1rem;
  background: linear-gradient(180deg, rgba(244,249,252,1) 75%, rgba(244,249,252,0) 100%);
  position: sticky;
  top: var(--border-thick);
  z-index: var(--zindex-header);
}

@media screen and (width >= 768px) {
  .header {
    display: flex;
    justify-content: space-between;
    top: calc(var(--border-thick) - 1px);
  }
}

/* ========================= */
/*           MAIN            */
/* ========================= */
.main {}

/* ========================= */
/*          FOOTER           */
/* ========================= */
.footer {
  padding: 1rem;
}

.footer .copyright {
  display: block;
  text-align: center;
  color: var(--color-steel-toe);
}

/* ========================= */
/*         SECTIONS          */
/* ========================= */
.section {
  padding-inline: 1rem;
}

/* ========================= */
/*       SECTION HOME        */
/* ========================= */
.section__home {
  height: calc(100dvh - (2 * var(--border-thick)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.social-nav {
  margin-block-start: 1rem;
}

.social-nav ul {
  gap: 2rem;
}

.social-nav a {
  color: var(--color-midnight-blue);
  position: relative;
  padding-block: .5rem;
  padding-inline: .5rem;
}

.section__home .scroll-down-icon {
  position: absolute;
  bottom: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .section__home .scroll-down-icon {
    animation-name: bounce-7;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
  }

  @keyframes bounce-7 {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-20px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
  }
}

@media screen and (width >= 768px) {
  .section__home {
    height: calc(100dvh - var(--header-height) - (2 * var(--border-thick)));
  }
}

@media screen and (width >= 1024px) {
  .social-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 0;
    background-color: var(--color-midnight-blue);
    opacity: .10;
    transition: all 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
    border-radius: .25rem;
  }
  
  .social-nav a:hover::after {
    height: 100%;
  }
}

/* ========================= */
/*       SECTION ABOUT        */
/* ========================= */
.section__about {
  padding-block: 2rem;
}

.section__about article {
  padding-block: 1rem;
}

@media screen and (width >= 768px) {
  .section__about {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .section__about article {
    grid-column: 1 / 9;
  }

  .section__about article:nth-child(even) {
    grid-column: 5 / -1;
  }
}

@media screen and (width >= 1024px) {
  .section__about {
    padding-block: 4rem;
    row-gap: 2rem;
  }
}

@media screen and (width >= 1280px) {
  .section__about {
    padding-block: 8rem;
    row-gap: 4rem;
  }
}

/* ========================= */
/*       SECTION PROJECTS        */
/* ========================= */
.section__projects {
  padding-block: 2rem;
}

.section__projects .projects-wrapper {
  
}

.section__projects .project-wrapper {
  --project-border-color: var(--color-midnight-blue);
  --project-background-color: var(--color-midnight-blue);
  position: relative;
}

.section__projects .project-wrapper[data-project="laurence-tuina"] {
  --project-border-color: #FFE4E7;
  --project-background-color: #FFEFFF;
}

.section__projects .project-wrapper[data-project="galium-iot-hub"] {
  --project-border-color: #007CC4;
  --project-background-color: #0060BB;
}

.section__projects .project-wrapper::before,
.section__projects .project-wrapper::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  border-radius: 0.25rem;
  z-index: -1;
}

.section__projects .project-wrapper::before {
  border: solid 1px var(--project-border-color);
  rotate: -1deg;
  animation: projectWrapperBorder 4s ease-out infinite alternate-reverse;
}

.section__projects .project-wrapper::after {
  background-color: var(--project-background-color);
  rotate: 1deg;
  animation: projectWrapperBackground 4s ease-out infinite alternate-reverse;
}

@media (prefers-reduced-motion: no-preference) {
  .section__projects .project-wrapper::before {
    animation: projectWrapperBorder 4s ease-out infinite alternate-reverse;
  }
  
  .section__projects .project-wrapper::after {
    animation: projectWrapperBackground 4s ease-out infinite alternate-reverse;
  }

  @keyframes projectWrapperBorder {
    to {
      rotate: -2deg;
    }
  }
  
  @keyframes projectWrapperBackground {
    to {
      rotate: 2deg;
    }
  }
}

.section__projects .project {
  background: var(--color-pure-white);
  border-radius: 0.25rem;
  display: grid;
  grid-template-areas: 
    "project-logo project-title"
    "project-description project-description"
    "project-link project-link"
  ;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
  padding: .5rem;
}

.section__projects .project__logo {
  grid-area: project-logo;
  width: 100%;
  height: 100%;
}

.section__projects .project__title {
  grid-area: project-title;
  align-content: center;
}

.section__projects .project__link {
  grid-area: project-link;
  width: max-content;
  margin-inline: auto;
  padding-block: .5rem;
  padding-inline: 1rem;
  position: relative;
  z-index: 0;
}

.section__projects .project__link:is(a) {
  text-decoration: none;
  color: var(--color-midnight-blue);
}

.section__projects .project__link:is(a)::after {
  content: '';
  background-color: var(--project-background-color);
  opacity: .10;
  position: absolute;
  left: 1.75rem;
  bottom: .375rem;
  width: calc(100% - 1.75rem);
  height: .75rem;
  z-index: -1;
  transition: all 0.35s cubic-bezier(0.25, 0.1, 0, 2.05);
}

.section__projects .project-wrapper[data-project="laurence-tuina"] .project__link:is(a)::after {
  opacity: unset;
}

.section__projects .project__link:is(a):hover:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  }

.section__projects .project__description {
  grid-area: project-description;
}

.section__projects .project__img {
  grid-area: project-img;
  display: none;
  visibility: hidden;
}

.section__projects .project-wrapper:not(:last-child) {
  margin-block-end: 4rem;
}

@media screen and (width >= 768px) {
  .section__projects .projects-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  
  .section__projects .project-wrapper {
    grid-column: 1 / 9;
  }

  .section__projects .project-wrapper:nth-child(even) {
    grid-column: 5 / -1;
  }
}

@media screen and (width >= 1024px) {
  .section__projects {
    padding-block: 4rem;
  }

  .section__projects .project {
    padding: 1rem;
  }
}

@media screen and (width >= 1280px) {
  .section__projects {
    padding-block: 8rem;
  }

  .section__projects .project-wrapper:not(:last-child) {
    margin-block-end: 8rem;
  }

  .section__projects .project {
    padding: 2rem;
  }
}

/* ========================= */
/*     SECTION PICTURES      */
/* ========================= */
.section__pictures {
  padding-block: 2rem;
}

.section__pictures__gallery-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section__pictures .gallery__left,
.section__pictures .gallery__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section__pictures__gallery-wrapper img {
  border-radius: .25rem;
}

.section__pictures__cta-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
}

.section__pictures__cta-wrapper a {
  color: var(--color-midnight-blue);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  padding: .5rem 1.5rem;
  margin-block: 1rem;
  border-radius: 0.25rem;
  border: solid 2px var(--color-midnight-blue);
}

@media screen and (width >= 1024px) {
  .section__pictures {
    padding-block: 4rem;
  }

  .section__pictures__cta-wrapper {
    margin-block-start: 2rem;
  }
}

@media screen and (width >= 1024px) {
  .section__pictures {
    padding-block: 8rem;
  }

  .section__pictures__gallery-wrapper {
    flex-direction: unset;
  }
}

/* ========================= */
/*          SHAPES           */
/* ========================= */
.shapes {
  grid-column: 1 / -1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--zindex-shapes);
}

.shapes img {
  --top: unset;
  --left: unset;
  --right: unset;
  --bottom: unset;

  position: absolute;
  top: var(--top);
  left: var(--left);
  right: var(--right);
  bottom: var(--bottom);
}

@media (prefers-reduced-motion: no-preference) {
  .shapes img {
    animation: move ease-in-out 7s infinite alternate;
  }
}

@keyframes move {
  from {
      transform: translate(0px, 0px) scale(1);
  }
  to {
    transform: translate(15px, -25px) scale(1.1);
  }
}