/* =============================
          GLOBAL STYLES
============================== */

:root {
  /* FONT */
  --font-main: Helvetica, Arial, sans-serif;

  /* COLOUR PALETTE */
  --black: #111111;
  --dark-grey: #555555;
  --grey: #777777;
  --mid-grey: #9a9a9a;
  --soft-grey: #aaaaaa;
  --light-grey: #d5d5d5;
  --off-white: #f5f5f5;
  --white: #ffffff;

  --accent: #8a3038;

  /* SPACING SYSTEM */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* FONT SIZE SYSTEM */
  --font-10: 10px;
  --font-12: 12px;
  --font-14: 14px;
  --font-16: 16px;
  --font-18: 18px;
  --font-20: 20px;
  --font-24: 24px;
  --font-30: 30px;
  --font-36: 36px;
  --font-44: 44px;
  --font-52: 52px;
  --font-62: 62px;
  --font-74: 74px;
  --font-86: 86px;
  --font-98: 98px;

  /* GLOBAL MOTION */
  --motion-fast: 0.25s;
  --motion-medium: 0.55s;
  --motion-slow: 0.72s;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =============================
              RESET
============================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =============================
        GLOBAL TYPOGRAPHY
============================== */

html,
body {
  font-family: var(--font-main);
  color: var(--black);
  background: var(--white);
}


/* Images */

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


/* Make buttons and form elements
   use the website font */

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


/* =========================================================
   GLOBAL PAGE TRANSITIONS
   Restrained motion across the portfolio
========================================================= */


/* ---------------------------------------------------------
   PAGE ENTRY

   Only the main page content moves.
   Header/navigation remains stable.
--------------------------------------------------------- */

main {
  animation:
    globalPageEnter
    var(--motion-medium)
    var(--motion-ease)
    both;
}


@keyframes globalPageEnter {

  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ---------------------------------------------------------
   GLOBAL SCROLL REVEAL

   global.js adds these classes only to elements that do
   NOT already use your page-specific .reveal animation.
--------------------------------------------------------- */

.global-reveal {
  opacity: 0;
  transform: translateY(16px);

  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}


.global-reveal.global-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   STAGGERED CARD / GRID CONTENT

   global.js assigns --stagger-delay automatically.
--------------------------------------------------------- */

.global-stagger-item {
  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity 0.58s var(--motion-ease),
    transform 0.58s var(--motion-ease);

  transition-delay: var(--stagger-delay, 0ms);
}


.global-stagger-item.global-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------
   IMAGES

   Keep image motion almost imperceptible.
--------------------------------------------------------- */

main img {
  transition:
    opacity 0.4s ease,
    transform 0.4s var(--motion-ease);
}


figure:hover > img {
  transform: translateY(-2px);
}


/* ---------------------------------------------------------
   LINKS / BUTTONS
--------------------------------------------------------- */

main a,
main button {
  transition:
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) var(--motion-ease);
}


/* ---------------------------------------------------------
   PROJECT CARDS
--------------------------------------------------------- */

.project-card,
.overview-card,
.category-project-card {
  transition:
    transform 0.3s var(--motion-ease),
    opacity 0.3s ease,
    box-shadow 0.3s ease;
}


.project-card:hover,
.overview-card:not(.coming-soon):hover,
.category-project-card:not(.coming-soon):hover {
  transform: translateY(-3px);
}


/* =========================================================
   ACCESSIBILITY
   Respect reduced-motion preferences
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  main {
    animation: none;
  }

  .global-reveal,
  .global-stagger-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  main img,
  main a,
  main button,
  .project-card,
  .overview-card,
  .category-project-card {
    transition: none;
  }

  figure:hover > img,
  .project-card:hover,
  .overview-card:hover,
  .category-project-card:hover {
    transform: none;
  }

}