/*
  ____  ______        __  _   _                   __  __          _ _            
 / ___|| __ ) \      / / | \ | | ___ _   _  ___  |  \/  | ___  __| (_) ___ _ __  
 \___ \|  _ \\ \ /\ / /  |  \| |/ _ \ | | |/ _ \ | |\/| |/ _ \/ _` | |/ _ \ '_ \ 
  ___) | |_) |\ V  V /   | |\  |  __/ |_| |  __/ | |  | |  __/ (_| | |  __/ | | |
 |____/|____/  \_/\_/    |_| \_|\___|\__,_|\___| |_|  |_|\___|\__,_|_|\___|_| |_|
                                                                                 
 */

/* MARK: - Global Styles and Variables */

@font-face {
  font-family: "Geomanist";
  font-weight: 900;
  src: url(./fonts/geomanist-black-webfont.woff2) format("woff2");
  font-display: fallback;
}

@font-face {
  font-family: "Intro";
  font-weight: 200;
  src: url(./fonts/intro-light.woff2);
  font-display: fallback;
}

:root {
  --color-snow: hsl(170, 42%, 96%);
  --color-xmas: hsl(0, 100%, 50%);
  --color-shadow: hsl(0, 0%, 80%);
}

h1,
h2 {
  font-family: "Geomanist";
  text-wrap-style: balance;
}

/* MARK: - Layout Styles */
body {
  font-family: Geomanist, system-ui;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header,
footer {
  color: var(--color-snow);
}

/* MARK: - Header */

header {
  padding: 20px;
  background-image: url('./backgrounds/header-desktop.svg');
  background-position: top;
  background-size: cover;
  display: flex;
  flex-direction: column;
  height: 35vw;
}

#icon-wrapper,
#title-wrapper {
  max-width: 1200px;
  width: 100%;
  display: flex;
  margin-top: 0.5lh;
  margin-inline: auto;
  justify-content: end;
}

#icon {
  height: 5vw;
}

#title-wrapper h1 {
  font-size: 3vw;
  line-height: 1.2;
  color: var(--color-snow);
  text-align: center;
  text-shadow: 0 0 3em black;
}

/* MARK: - Footer */
.subtitle {
  font-family: "Intro";
  font-weight: 100;
  text-align: center;
  font-size: 2vw;
  margin-top: 2vw;
  margin-bottom: 4vw;
}
footer {
  font-family: "Intro";
  height: 40vw;
  background-image: url('./backgrounds/footer-desktop.svg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

footer .social-links {
  display: flex;
  gap: 1.5vw;
  justify-content: center;
}

footer .social-links img {
  width: 4vw;

  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  vertical-align: middle;
  background-color: var(--color-snow);
}

.credits {
  display: flex;
  justify-content: center;
  gap: 5vw;
  margin-top: 10px;
  color: var(--color-snow);
  font-family: "Intro";
  font-weight: light;
  font-size: 2vw;
  line-height: 1.5;
}

/* MARK: - Tiles Grid */

#tiles-wrapper {
  display: block;
  height: fit-content;
  min-height: 100vh;
  background-color: transparent;
}

#tiles-container {
  --tile-count-width: 5;
  --tile-count-height: 6;
  --tile-gap: 0.8rem;
  display: grid;
  grid-template-columns: repeat(var(--tile-count-width), 1fr);
  grid-template-rows: repeat(var(--tile-count-height), 1fr);
  gap: var(--tile-gap);

  max-width: 1200px;
  margin-block: var(--tile-gap);
  margin-inline: auto;
}

#tiles-container>div {
  position: relative;
  aspect-ratio: 1 / 1;

}

#tiles-container>div .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* height: fit-content; /* var(--tile-size-height); */
  background-color: var(--color-shadow);
  transform-origin: top left;

  img {
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  &:not(.placeholder) {
    cursor: grabbing;
  }
}

#tiles-container>div.large {
  grid-column: span 2;
  grid-row: span 2;
}

@keyframes zoom {
  from {
    top: 25%;
    left: 25%;
    width: 50%;
  }

  to {
    top: 0;
    left: 0;
    width: 100%;
  }

}

#tiles-container>div.large .inner {
  animation: zoom 0.1s ease-out forwards;
}

/* MARK: - Lightbox Styles */

#lightbox {
  position: fixed;
  z-index: 1;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);

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

  transform: scale(0);
  transition: transform 400ms ease-in-out,
    opacity 600ms ease-in-out;

  /* Hide from screen readers when not visible */
  visibility: hidden;

  &.visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }
}

#lightbox .close-btn {
  position: absolute;
  top: 1rem;
  right: 4rem;
  font-size: 4vw;
  color: var(--color-snow);
  cursor: pointer;
}

#lightbox .lightbox-image {
  margin: 0;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#lightbox .lightbox-image img {
  display: block;
  max-width: 90vw;
  max-height: 80vh;
  height: auto;
  width: auto;
}

#lightbox .lightbox-image .caption {
  color: var(--color-snow);
  font-size: clamp(0.5rem, 2vw, 3vh);
  line-height: 2;
  font-family: "Intro";
  backdrop-filter: blur(10px);
}

/* MARK: - Responsive Styles */

@media (max-width: 768px) {
  header {
    height: 50vw;
  }

  #title-wrapper h1 {
    font-size: 6vw;
  }

  #icon {
    height: 8vw;
  }

  footer {
    height: 60vw;
  }

  footer .social-links img {
    width: 8vw;
  }

  .credits {
    flex-direction: column;
    text-align: center;
    font-size: 4vw;
    gap: 0;
  }

  .credits p {
    margin-block: 0;
  }

  #tiles-container {
    --tile-count-width: 2;
    --tile-count-height: 10;
    --tile-gap: 4vw;
  }

}

.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -10;
}

.snowflake {
  position: absolute;
  top: -50%;
  width: 2vw;
  height: 2vw;
  z-index: -10;
  background-size: contain;
  background-repeat: no-repeat;
  animation: fall 15s linear infinite, rotate 5s linear infinite;
}

.snowflake--1 {
  left: 10%;
  animation-delay: 0s, 0s;
}

.snowflake--2 {
  left: 30%;
  animation-delay: 2s, 1s;
}

.snowflake--3 {
  left: 50%;
  animation-delay: 5s, 2s;
}

.snowflake--4 {
  left: 70%;
  animation-delay: 9s, 3s;
}

.snowflake--5 {
  left: 90%;
  animation-delay: 12s, 4s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes fall {
  0% {
    top: -40%;
    opacity: 1;
  }

  75% {
    top: 0;
    opacity: 50%;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}