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

html {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #333;
}

body {
  min-height: 100vh;
}

/* ---- Page ---- */
.page {
  padding: 80px 120px 80px;
  margin: 0 auto;
}

/* ---- Intro (fixed background layer) ---- */
.intro {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 80px 120px;
  z-index: 0;
}

.intro-text {
  font-size: 64px;
  font-weight: 300;
  line-height: 1.2;
  color: #333;
  margin-bottom: 24px;
}

/* ---- Selection colours ---- */
p::selection, h1::selection, h2::selection, h3::selection {
  background: #333;
  color: #fff;
}
a::selection {
  background: #FF624C;
  color: #fff;
}
span::selection {
  color: #fff;
}
.highlight-1::selection { background: #FF624C; }
.highlight-2::selection { background: #6F99FF; }
.highlight-3::selection { background: #3ED2FF; }
.highlight-4::selection { background: #FFBD30; }
.highlight-5::selection { background: #FF7700; }

/* ---- Highlight colours ---- */
.highlight {
  font-weight: 300;
  transition: color 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.highlight-1 { color: #FF624C; }
.highlight-1:hover { color: #FF7700; }
.highlight-2 { color: #6F99FF; }
.highlight-2:hover { color: #3ED2FF; }
.highlight-3 { color: #3ED2FF; }
.highlight-3:hover { color: #6F99FF; }
.highlight-4 { color: #FFBD30; }
.highlight-4:hover { color: #FF7700; }
.highlight-5 { color: #FF7700; }
.highlight-5:hover { color: #FF624C; }

.intro-links {
  display: flex;
  gap: 24px;
}

.intro-links a {
  font-size: 19px;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.intro-links a:hover {
  opacity: 1;
}

/* ---- Frost layer (covers screen between intro and projects) ---- */
.frost-layer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: none;
}

@supports (backdrop-filter: blur(1px)) {
  .frost-layer {
    background: rgba(255, 255, 255, 0.7);
  }
}

/* ---- Projects (scrolls over the intro) ---- */
.projects {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 72px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: calc(100vh - 200px);
}

.projects-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.projects-col--right {
  padding-top: 260px;
}

/* ---- Card ---- */
.project-card {
  cursor: default;
}

/* ---- Card ---- */
.project-card {
  cursor: default;
}

.card-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1),
              filter 0.3s cubic-bezier(0.2, 0, 0, 1);
}


/* ---- Organic blob shapes with breathing ---- */
.blob-1 {
  border-radius: 45% 55% 52% 48% / 52% 45% 55% 48%;
  animation: breathe-1 8s ease-in-out infinite;
  background: #6F99FF;
}
.blob-2 {
  border-radius: 52% 48% 45% 55% / 48% 52% 48% 55%;
  animation: breathe-2 9s ease-in-out infinite;
  background: #FF624C;
}
.blob-3 {
  border-radius: 48% 52% 55% 45% / 55% 48% 52% 45%;
  animation: breathe-3 10s ease-in-out infinite;
  background: #3ED2FF;
}
.blob-4 {
  border-radius: 55% 45% 48% 52% / 45% 55% 45% 52%;
  animation: breathe-4 7s ease-in-out infinite;
  background: #FFBD30;
}

@keyframes breathe-1 {
  0%   { border-radius: 42% 58% 52% 48% / 52% 42% 58% 48%; }
  50%  { border-radius: 55% 45% 42% 58% / 45% 55% 45% 58%; }
  100% { border-radius: 42% 58% 52% 48% / 52% 42% 58% 48%; }
}
@keyframes breathe-2 {
  0%   { border-radius: 55% 45% 42% 58% / 45% 55% 45% 58%; }
  50%  { border-radius: 42% 58% 55% 45% / 58% 42% 58% 45%; }
  100% { border-radius: 55% 45% 42% 58% / 45% 55% 45% 58%; }
}
@keyframes breathe-3 {
  0%   { border-radius: 48% 52% 58% 42% / 58% 48% 52% 42%; }
  50%  { border-radius: 58% 42% 45% 55% / 42% 58% 42% 55%; }
  100% { border-radius: 48% 52% 58% 42% / 58% 48% 52% 42%; }
}
@keyframes breathe-4 {
  0%   { border-radius: 58% 42% 48% 52% / 42% 58% 42% 52%; }
  50%  { border-radius: 45% 55% 58% 42% / 55% 45% 55% 42%; }
  100% { border-radius: 58% 42% 48% 52% / 42% 58% 42% 52%; }
}

/* ---- Card Image ---- */
.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}


/* ---- Slideshow (rotating images) ---- */
.card-slideshow .slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.2, 0, 0, 1);
}

.card-slideshow .slide.is-visible {
  opacity: 1;
}

/* ---- Footer ---- */
.footer {
  position: relative;
  z-index: 2;
  margin-top: 120px;
  padding-bottom: 40px;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 19px;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.footer-links a:hover {
  opacity: 1;
}

/* ---- Project link ---- */
.card-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.card-link:hover {
  opacity: 1;
}

/* ---- Card Text ---- */
.card-text {
  padding: 28px 4px;
}

.card-title {
  font-size: 19px;
  font-weight: 400;
  color: #111;
  letter-spacing: -0.01em;
}

.card-year {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  opacity: 0.5;
  display: block;
  margin-bottom: 4px;
}

.card-body {
  font-size: 19px;
  font-weight: 300;
  opacity: 0.6;
  margin-top: 12px;
  line-height: 1.5;
  max-width: 44ch;
}

.card-body + .card-body {
  margin-top: 8px;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================

   NOTE ON TOUCH DEVICES & SMOOTH SCROLL:
   The smooth-scroll JS in cards.js calls e.preventDefault() on the
   'wheel' event (line 14, { passive: false }). This hijacks native
   scroll on desktop to apply lerp easing. On touch devices this is
   safe -- 'wheel' does not fire during finger swipes, so native
   touch scrolling works normally. However, two things to watch for:

   1. If you ever add a 'touchmove' listener with preventDefault(),
      native iOS/Android scrolling will break entirely.
   2. Some Android browsers synthesize 'wheel' events from touch
      input in rare cases. If you see janky scroll on specific
      Android devices, wrap the wheel listener in a
      matchMedia('(pointer: fine)') check to limit it to mouse/
      trackpad users only.

   All existing CSS animations (@keyframes breathe-*, transitions)
   are unaffected by these media queries -- they continue running
   at every viewport size.

   ============================================================ */

/* ---- Tablet: <= 768px ---- */
@media (max-width: 768px) {

  /* Reduce page padding from 120px to 40px */
  .page {
    padding: 48px 40px;
  }

  /* Intro section: match reduced padding, scale down text */
  .intro {
    padding: 48px 40px;
  }

  .intro-text {
    font-size: 40px;
  }

  .intro-links a {
    font-size: 17px;
  }

  /* Switch from 2-column masonry to single column */
  .projects {
    flex-direction: column;
    gap: 48px;
    margin-top: calc(100vh - 160px);
  }

  /* Remove the staggered offset on the right column */
  .projects-col--right {
    padding-top: 0;
  }

  .projects-col {
    gap: 48px;
  }

  /* Let body text fill available width on narrower screens */
  .card-body {
    max-width: none;
  }

  .card-text {
    padding: 20px 4px;
  }

  /* Tighten footer spacing */
  .footer {
    margin-top: 80px;
  }
}

/* ---- Mobile: <= 480px ---- */
@media (max-width: 480px) {

  /* Minimal side padding for small screens */
  .page {
    padding: 32px 20px;
  }

  .intro {
    padding: 32px 20px;
  }

  /* Scale intro text down from 40px (tablet) to 24px */
  .intro-text {
    font-size: 24px;
    margin-bottom: 16px;
  }

  /* Allow links to wrap if they overflow */
  .intro-links {
    gap: 16px;
    flex-wrap: wrap;
  }

  .intro-links a {
    font-size: 15px;
  }

  /* Further reduce spacing between project cards */
  .projects {
    gap: 36px;
    margin-top: calc(100vh - 120px);
  }

  .projects-col {
    gap: 36px;
  }

  /* Smaller card text for readability at this size */
  .card-text {
    padding: 16px 0;
  }

  .card-title {
    font-size: 17px;
  }

  .card-body {
    font-size: 18px;
  }

  .card-year {
    font-size: 13px;
  }

  .card-link {
    font-size: 13px;
  }

  /* Footer */
  .footer {
    margin-top: 60px;
    padding-bottom: 24px;
  }

  .footer-links {
    gap: 16px;
    flex-wrap: wrap;
  }

  .footer-links a {
    font-size: 16px;
  }
}