/* Polish: small details that make the pages feel smoother.
   Chosen with the animation and UI references in reference/ (Emil Kowalski, Jakub Krehel):
   motion only where it has a purpose, always short, always off for people who ask for less motion.
   Everything here is progressive: if a browser does not know a rule, the page just works without it. */

:root {
  /* strong ease-out for things that react to the reader; ease-in-out for movement across the screen */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---- Touch: no 300ms wait after a tap.
   (The browser's own tap flash stays on: it is the only press feedback phones get.) ---- */
a,
button,
[role="button"] {
  touch-action: manipulation;
}

/* ---- Hover effects only where a pointer can really hover ----
   On a phone a tap would leave the hover state stuck, so it is switched back off there.
   (Keyboard focus keeps its own styles.) */
@media (hover: none) {
  .menu-button:hover::after,
  .paragraph-text.link:hover::after,
  .h4.weight-400.link:hover::after,
  .link:hover::after,
  .button-text1:hover .button-text::after,
  .next-project__link:hover .next-project__title::after {
    clip-path: inset(0 100% 0 0);
  }

  .footer-left .footer-email:hover,
  .menu-cta:hover {
    transform: none;
  }

  .hashtags > div:hover,
  .hashtag-3:hover, .hashtag-5:hover, .hashtag-6:hover, .hashtag-7:hover,
  .hashtag-user-testing:hover, .hashtag-prototyping:hover, .hashtag-pd:hover,
  .hashtag-wcag:hover, .hashtag-wireframes:hover, .hashtag-uu:hover,
  .hashtag-accessibility:hover, .hashtag-design:hover, .hashtag-ia:hover,
  .hashtag-heuristic:hover {
    animation: none;
  }

  .project-title.next-project.go-back:hover img {
    transform: none;
  }
}

/* ---- Home and About me: the intro rises into place once, when the page opens ----
   Seen once per visit, so this is the one place a little entrance is welcome.
   Strength: subtle but slow: 0.75rem rise, 3px blur, 1.2s long, 0.2s between parts. It is skipped for people who prefer less motion. */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
    filter: blur(3px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .home-intro .div-block-41,
  .home-intro .h4,
  .home-intro .hero-meta,
  .home-intro .hashtags,
  .about-intro__text > *,
  .about-intro__photo {
    animation: rise-in 1200ms var(--ease-out) backwards;
  }

  .home-intro .h4 { animation-delay: 200ms; }
  .home-intro .hero-meta { animation-delay: 400ms; }
  .home-intro .hashtags { animation-delay: 600ms; }

  /* About me: label, heading, paragraph and photo in turn */
  .about-intro__text > .about-intro__heading { animation-delay: 200ms; }
  .about-intro__text > .about-intro__lead { animation-delay: 400ms; }
  .about-intro__photo { animation-delay: 600ms; }
}

/* ---- Text: headings break evenly, paragraphs avoid a lonely last word ---- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  text-wrap: balance;
}

.paragraph-text,
.feel-row__line,
.steer-row__line {
  text-wrap: pretty;
}

/* Phones: headings fill each line too ("Testing the emotional / response" instead of an even split) */
@media screen and (max-width: 47.9375em) {
  h1, h2, h3, h4,
  .h1, .h2, .h3, .h4 {
    text-wrap: wrap;
  }
}

/* Phones and tablets: "pretty" shortens lines to avoid a lone last word, which makes the right edge ragged in a narrow column; let lines fill it */
@media screen and (max-width: 61.9375em) {
  .paragraph-text,
  .feel-row__line,
  .steer-row__line {
    text-wrap: wrap;
  }
}

/* ---- Jumping within a page (back to top, skip link) glides, and stops below the sticky header ---- */
html {
  scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---- Moving between pages: a short cross-fade, with the header held still ----
   Supported in Chrome, Edge and Safari 18.2 and later; other browsers simply switch pages as before.
   The rules sit at the top level (not inside a media query) because Safari only reads them there;
   people who prefer less motion get the instant switch through the media query at the end. */
@view-transition {
  navigation: auto;
}

.header {
  view-transition-name: site-header;
}

::view-transition-group(site-header) {
  animation-duration: 0s;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ---- 404 / 401: fill the visible screen on phones, not the screen with the address bar hidden ---- */
.utility-page-wrap {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- Sticky header stays on top of the page content ----
   Giving the header a page-fade name (above) turns it into its own layer; without an explicit
   z-index, images further down the page could be painted over the menu bar. */
.header {
  position: relative;
  z-index: 1000;
}

/* ---- Running text on the case study pages: 17px, lines never longer than 88ch ----
   Plain paragraphs only. Small print, card text, details and bold lead-ins keep their own sizes.
   The list item (number column included) gets the same font settings as the paragraphs, because
   ch depends on font, weight and size, and paragraphs and lists must end at the same edge. */
.project-page .paragraph-text:not(.details):not(.smaller):not(.bold):not(.card):not(.quotes):not(.footer-email):not(.made-with) {
  font-size: 1.0625rem;
  max-width: 88ch;
}

.redesign-v2 .project-page .test-steps__text,
.redesign-v2 .project-page .test-steps__num {
  font-size: 1.0625rem;
}

.redesign-v2 .project-page .test-steps__item {
  max-width: 88ch;
  font-family: Poppins, sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
}

.redesign-v2 .project-page .test-steps__text {
  max-width: none;
}

/* the numbers in the numbered lists are a touch heavier than the text next to them */
.redesign-v2 .project-page .test-steps__num {
  font-weight: 400;
}