/* Layout & Box Model */
/* Flex/Grid properties  */
/* Visual Appearance */
/* Typography */
/* Miscellaneous/Behavior */
/* px ≈ 1.33 * pt */

:root {
  --bs-warning-rgb: 255, 118, 2;
  --bs-secondary-rgb: 117, 130, 141;
  --bs-secondary-bg-subtle: #ebebec;
  --navbar-height: 4rem;
  scroll-padding-top: var(--navbar-height)
}

body {
  padding-top: var(--navbar-height);
  font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p {
  font-family: inherit;
}

/* Decorations */
.corner-shape {
  position: absolute;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  z-index: 10;
}

.corner-shape-figure {
  background-color: rgb(var(--bs-warning-rgb, 255, 118, 2));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 50%, 0% 50%);
}

.hero__corner-shape {
  top: -30px;
  right: -30px;
}

.hero__corner-shape-figure {
  width: 125px;
  height: 125px;
}

@media (max-width: 992px) {
  .hero__corner-shape {
    top: -5px;
    right: -5px;
  }

  .hero__corner-shape-figure {
    width: 80px;
    height: 80px;
  }
}

.slide__corner-shape--top {
  top: -20px;
  right: -20px;
}

.slide__corner-shape--bottom {
  bottom: -20px;
  right: -20px;
}

.slide__corner-shape-figure {
  width: 80px;
  height: 80px;
}

@media (max-width: 992px) {
  .slide__corner-shape--top {
    top: -10px;
    right: -10px;
  }
  
  .slide__corner-shape--bottom {
    bottom: -10px;
    right: -10px;
  }
  
  .slide__corner-shape-figure {
    width: 40px;
    height: 40px;
  }
}

.corner-shape-figure--bottom {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%);
}

.corner-shape__text {
  color: white;
  font-size: 2rem;
}

.corner-shape__text--bottom {
  margin: 0.5rem;
  position: absolute;
  left: 0;
  bottom: 0;
}



/* Navbar */
.navbar__icon--brand {
  width: 4rem;
  height: auto;
}

.navbar__icon--social {
  width: 2rem;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.navbar__icon--social:hover,
.navbar__icon--social:focus {
  filter: brightness(110%);
  transform: scale(1.1);
}

/* Hero sections */
.hero {
  position: relative;
  height: calc(100vh - var(--navbar-height, 4rem));
  padding: 1rem;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: 2rem;
  text-align: center;
  background-color: rgb(var(--bs-secondary-rgb, 117, 130, 141));
  border: 3vw solid white;
  border-radius: 2rem;
  color: white;
}

.hero h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.hero__image {
  max-width: 100%;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
  }

.hero__text {
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 768px) {
  .hero {
    padding-left: 10vw;
    padding-right: 10vw;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text-left ."
      "image     image"
      ".         text-right";
    border-radius: 4rem;
  }

  .hero__text--left {
    grid-area: text-left;
    text-align: end;
  }

  .hero__image {
    max-width: 45vw;
    grid-area: image;
  }

  .hero__text--right {
    grid-area: text-right;
    text-align: start;
  }
}

@media screen and (min-width: 1200px) {
  .hero {
    padding-left: 24vw;
    padding-right: 24vw;
  }
}

/* Hero animation */
.hero > * {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.6s ease forwards;
}

.hero > *:nth-child(2) {
  animation-delay: 0.2s;
}
/* etc. */

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Slides */
.slide {
  position: relative;
}

.slide__text {
  padding: 1rem;
  border-radius: 4px;
  background-color: var(--bs-secondary-bg-subtle);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3);
  text-align: justify;
}

.slide__img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media screen and (min-width: 768px) {
  .grid--top-2cols {
    grid-template-areas:
      "top top"
      "left right";
    gap: 2rem;
    align-items: top;
  }

  .slide__top {
    grid-area: top;
  }
  
  .slide__left {
    grid-area: left;
  }

  .slide__right {
    grid-area: right;
  }
}

/* grids */
.grid-4cols {
  display: grid;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  .grid-4cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 992px) {
  .grid-4cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.grid-3cols {
  display: grid;
  gap: 1rem;
}

@media screen and (min-width: 768px) {
  .grid-3cols {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media screen and (min-width: 992px) {
  .grid-3cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 
  #slide-projects-1{
    grid-template-areas:
      ".    top    ."
      "left center right";
    column-gap:  2rem;
    row-gap: 1rem;
  }
  #slide-projects-1 > :nth-child(1) {
    position: relative;
    grid-area: top;
    background-color: rgb(var(--bs-secondary-rgb));
    color: white;
  }
  #slide-projects-1 > :nth-child(2) {grid-area: left;}
  #slide-projects-1 > :nth-child(3) {
    grid-area: center;
    background-color: rgb(var(--bs-secondary-rgb));
    color: white;
  }
  #slide-projects-1 > :nth-child(4) {grid-area: right;}
} 
*/

/* Footer */
.footer__icon--brand {
  width: 10rem;
  height: auto;
}

.footer__icon--social {
  width: 2rem;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: invert();
}

/* Animations */
@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }
  92%, 100% {
    transform: scale3d(1, 1, 1); /* final state held static */
  }
}

.tada {
  animation-name: tada;
  animation-duration: 2s;           /* Adjust duration here */
  animation-timing-function: ease;  /* You can use linear, ease-in-out, etc. */
  animation-delay: 0s;              /* Add delay if needed */
  animation-fill-mode: both;        /* Keeps the final state */
  animation-iteration-count: infinite;
}

.tada--delay {
  animation-delay: 1s;
}

/* Video gallery */
.ratio iframe {
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.ratio iframe:hover {
  transform: scale(1.02);
}