/**
 * TABLE OF CONTENTS
 * 
 * 1. CSS Reset & Base
 * 2. Variables & Root
 * 3. Typography
 * 4. Layout & Structure
 * 5. Components
 *    5.1 Cards
 *    5.2 Buttons & Links
 *    5.3 Form Elements
 *    5.4 Scrolling Animation
 * 6. Navigation
 * 7. Footer
 * 8. Utilities
 * 9. Project-Specific Styles
 * 10. Media Queries
 */

/* ------------------------------
   1. CSS Reset & Base
   ------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

body,
button {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--primary-font);
  text-rendering: optimizeSpeed;
  line-height: 150%;
  letter-spacing: 0.01rem;
  word-break: keep-all;
}

html:focus-within {
  scroll-behavior: smooth;
}

hr {
  border: none;
  border-top: 0.5px solid var(--color-medium-gray);
  margin: 0px;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------
   2. Variables & Root
   ------------------------------ */
:root {
  font-size: 18px;

  --color-background-dark: #1f1f1f;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-light-gray: #eaeaea;
  --color-medium-gray: #888888;
  --color-dark-gray: #343434;
  --color-purple: #5227c5;
  --color-purple-light: #c5bafa;

  --color-cmb-about-me: #c5bafa;
  --color-dark-cmb-about-me: #16075F;
  --color-lowsugar: #76BC7B;
  --color-dark-lowsugar: #214524;
  --color-ccc: #eedabf;
  --color-off-price-app: #ED8F87;
  --color-waysconf: #94BDF9;
  --color-dark-waysconf: #063A60;
  --color-beatstars: #C8C7CA;
  --color-dfw: #F3A184;
  --color-dark-dfw: #653726;
  --color-euphire: #ffd639;
  --color-dark-euphire: #665100;

  --primary-font: "Lato", sans-serif;
  --display-font: "Playfair Display", serif;
  --box-shadow: 6px 6px 0px var(--color-black);
  --border: 2px solid var(--color-black);
  --link-color: var(--color-purple);
  --link-hover-bg: var(--color-light-gray);
  --dark-link-color: var(--color-purple-light);
  --dark-link-hover-bg: var(--color-dark-gray);
  --color-shape: var(--color-black);
  
  --ccc-card-width: 345px;
  --ccc-card-height: 226px;
  --ccc-card-gap: 24px;
  --ccc-container-height: 524px;
  --ccc-track-height: 226px;
  --ccc-track-gap: 24px;
  --ccc-cards-per-track: 5;
  --ccc-duplicated-cards: 5;
  --ccc-total-cards: calc(var(--ccc-cards-per-track) + var(--ccc-duplicated-cards));
  --ccc-track-width: calc(var(--ccc-total-cards) * var(--ccc-card-width) + (var(--ccc-total-cards) - 1) * var(--ccc-card-gap));
  --ccc-scroll-distance: calc(var(--ccc-cards-per-track) * var(--ccc-card-width) + var(--ccc-cards-per-track) * var(--ccc-card-gap));
  --ccc-animation-duration: 40s;
  --ccc-top-track-delay: -2.34s;
  --ccc-middle-track-delay: -10s;
  --ccc-bottom-track-delay: -5s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --box-shadow: 6px 6px 0px var(--color-medium-gray);
    --link-color: var(--dark-link-color);
    --link-hover-bg: var(--dark-link-hover-bg);
    --color-shape: var(--color-light-gray);
  }
}

/* ------------------------------
   3. Typography
   ------------------------------ */
h1,
h2,
h3,
h4 {
  line-height: 124%;
  font-weight: 700;
}

h1 {
  font-family: var(--display-font);
  font-size: 2.441rem;
  line-height: 120%;
}

h2 {
  font-size: 1.953rem;
}

h3 {
  font-size: 1.563rem;
}

h4 {
  font-size: 1.25rem;
}

.display-heading {
  font-size: 3.5rem;
  line-height: 112%;
}

.card-tag,
.sub-header {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 120%;
}

.p-silent,
.link-silent {
  font-size: 0.9rem;
  line-height: 150%;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

figure-caption {
  text-align: end;
}

/* ------------------------------
   4. Layout & Structure
   ------------------------------ */
.gap-48,
.gap-32,
.gap-24,
.gap-16,
.gap-8 {
  display: flex;
  flex-direction: column;
}

.gap-48 {
  gap: 48px;
}

.gap-32 {
  gap: 32px;
}

.gap-24 {
  gap: 24px;
}

.gap-16 {
  gap: 16px;
}

.gap-8 {
  gap: 8px;
}

.margin-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}

.margin-bottom-32 {
  margin-bottom: 32px;
}

.figure {
  align-self: center;
  flex-direction: column;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 0;
}

.header-content {
  padding: 32px 0;
}

.content-wrap {
  margin: 32px 0;
}

/* ------------------------------
   5. Components
   ------------------------------ */
/* 5.1 Cards */
.card {
  display: flex;
  flex-direction: column;
  padding: 24px 16px 0;
  gap: 32px;
  border: var(--border);
  box-shadow: var(--box-shadow);
  color: var(--color-black);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  justify-content: space-between;
  text-decoration: none;
  border-radius: 8px;
}

.card-content {
  align-items: flex-start;
}

.project-img {
  border: var(--border);
  display: flex;
  box-shadow: var(--box-shadow);
  border-radius: 4px;
}

.in-progress {
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: 4px;
}

.in-progress {
  padding: 6px 12px;
  width: fit-content;
}

/* 5.2 Buttons & Links */
button {
  padding: 12px 24px;
  background: var(--color-white);
  border: var(--border);
  color: var(--color-black);
  box-shadow: var(--box-shadow);
  align-self: stretch;
  border-radius: 4px;
}

.link {
  padding: 4px 8px;
  display: block;
  text-decoration: none;
  color: var(--link-color);
  width: fit-content;
  font-style: normal;
}

.icon-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-always-white {
  color: var(--color-white);
}

.oval {
  height: 16px;
  width: 16px;
  border-radius: 100px;
  border: none;
  align-self: center;
  flex-shrink: 0;
  display: inline-block;
}

#icon-list-red {
  background-color: #BF2310;
}

#icon-list-yellow {
  background-color: #FBC02D;
}

#icon-list-green {
  background-color: #0E813E;
}

.icon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
}

.icon-list-item {
  display: flex;
  gap: 16px;
}

/* 5.3 Media Elements */
.header-image,
.header-image-wrap img {
  border: var(--border);
  border-radius: 4px;
  height: 100%;
  object-fit: cover;
}

.mockup-img {
  filter: drop-shadow(-8px 8px 0px rgba(0, 0, 0, 0.3));
  overflow: hidden;
  object-fit: contain;
}

.iframe-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.iframe-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: 4px;
}

/* 5.4 Scrolling Animation */
.card-animation-container {
  position: relative;
  width: 100%;
  height: var(--ccc-container-height);
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform; 
}

.track {
  position: absolute;
  height: var(--ccc-track-height);
  width: 100%;
  overflow: hidden;
  contain: content;
  transform: translateZ(0);
  will-change: transform;
}

.top-track {
  top: -76px;
}

.middle-track {
  top: 174px;
}

.bottom-track {
  top: 424px;
}

.track-inner {
  display: flex;
  gap: var(--ccc-card-gap);
  width: var(--ccc-track-width);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--ccc-animation-duration);
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.track-rtl .track-inner {
  animation-name: scrollRTL;
}

.track-ltr .track-inner {
  animation-name: scrollLTR;
}

.top-track .track-inner {
  animation-delay: var(--ccc-top-track-delay);
}
.middle-track .track-inner {
  animation-delay: var(--ccc-middle-track-delay);
}
.bottom-track .track-inner {
  animation-delay: var(--ccc-bottom-track-delay);
}

.block {
  width: var(--ccc-card-width);
  height: var(--ccc-card-height);
  flex-shrink: 0;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes scrollRTL {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--ccc-scroll-distance)));
  }
}

@keyframes scrollLTR {
  0% {
    transform: translateX(calc(-1 * var(--ccc-scroll-distance)));
  }
  100% {
    transform: translateX(0);
  }
}

/* ------------------------------
   6. Navigation
   ------------------------------ */
nav {
  padding: 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
}

.nav-items {
  display: flex;
  flex-direction: row;
  gap: 24px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  flex-wrap: nowrap;
  width: max-content;
  margin-left: auto;
}

.nav-items li {
  flex-shrink: 0;
  white-space: nowrap;
}

.nav-item {
  white-space: nowrap;
}

/* ------------------------------
   7. Footer
   ------------------------------ */
footer {
  align-items: center;
  padding: 32px 0 48px;
  gap: 4px;
  text-align: center;
}

.get-in-touch {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* ------------------------------
   8. Project-Specific Styles
   ------------------------------ */
.card-ccc {
  background-color: var(--color-ccc);
}

.card-ecommerce-app {
  background-color: var(--color-off-price-app);
}

.header-wrap-waysconf,
.card-waysconf {
  background-color: var(--color-waysconf);
}

.header-wrap-ccc {
  background-color: var(--color-black);
}

.header-wrap-beatstars,
.card-beatstars {
  background-color: var(--color-beatstars);
}

.card-cmb,
.header-wrap-cmb,
.header-wrap-about-me {
  background: var(--color-cmb-about-me);
}

.card-lowsugar,
.header-wrap-lowsugar {
  background: var(--color-lowsugar);
}

.card-dfw,
.header-wrap-dfw {
  background-color: var(--color-dfw);
}

.card-euphire,
.header-wrap-euphire {
  background-color: var(--color-euphire);
}

.euphire-image,
.ccc-image,
.e-commerce-app-image {
  object-fit: contain;
  width: 66%;
  align-self: center;
}

.lowsugar-image {
  margin-bottom: 6%;
  align-self: end;
  margin-right: -16px;
}

.waysconf-image {
  align-self: flex-end;
  overflow: hidden;
  padding: 6% 4%;
}

.cmb-image {
  align-self: flex-end;
  margin-right: -32px;
}

.beatstars-image {
  align-self: flex-end;
  margin-right: -32px;
  margin-bottom: -32px;
  overflow: hidden;
  padding-top: 2%;
}

.waysconf-image {
  padding: 0 4% 0 4%;
}

.dfw-image {
  margin-bottom: 6%;
}

/* ------------------------------
   9. Media Queries
   ------------------------------ */
@media (prefers-color-scheme: dark) {
  body {
    color: var(--color-light-gray);
    background: var(--color-background-dark);
  }

  #icon-list-red {
    background-color: #F99286;
  }

  #icon-list-yellow {
    background-color: #FDC468;
  }

  #icon-list-green {
    background-color: #9EC374;
  }
  
  .icon-dark-mode {
    color: var(--color-white);
  }

  .card-no-hover:hover {
    box-shadow: 6px 6px 0px var(--color-medium-gray);
  }
  
  .header-wrap-waysconf {
    background: var(--color-dark-waysconf);
  }

  .header-wrap-beatstars {
    background: var(--color-black);
  }

  .header-wrap-about-me,
  .header-wrap-cmb {
    background: var(--color-dark-cmb-about-me);
  }

  .header-wrap-lowsugar {
    background: var(--color-dark-lowsugar);
  }

  .header-wrap-dfw {
    background: var(--color-dark-dfw);
  }

  .header-wrap-euphire {
    background: var(--color-dark-euphire);
  }
}

@media (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }

  .btn:hover,
  .card:hover,
  .project-img:hover,
  .iframe-content:hover {
    transform: translateY(4px);
    box-shadow: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    cursor: pointer;
  }

  .link:hover {
    background-color: var(--link-hover-bg);
    text-decoration: none;
    border-radius: 4px;
  }

  .icon-always-white:hover {
    background-color: var(--dark-link-hover-bg);
  }

  .card-no-hover:hover {
    transform: translateY(0px);
    cursor: not-allowed;
    box-shadow: 6px 6px 0px var(--color-medium-gray);
  }
}

@media screen and (min-width: 1140px) {
  p,
  a,
  button,
  li {
    font-size: 20px;
    line-height: 150%;
  }

  .display-heading {
    font-size: 5rem;
    line-height: 100%;
    margin-top: 32px;
  }
}

@media screen and (max-width: 620px) {
  .display-heading {
    line-height: 104%;
  }

  .header-image-wrap {
    aspect-ratio: 1 / 1;
  }

  .header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nav-items {
    gap: 8px;
  }

  h1 {
    font-family: var(--display-font);
    font-size: 1.9528rem;
  }

  h2 {
    font-size: 1.5624rem;
  }

  h3 {
    font-size: 1.2504rem;
  }

  h4,
  .card-tag,
  .sub-header {
    font-size: 1.1rem;
  }

  .iframe-1-1-aspect-ratio {
  padding-bottom: 100%;
}
}