/* =========================================================
   ABOUT PAGE — component styles
   Reskinned onto the shared portfolio design system (css/styles.css).
   Tokens/fonts/reset live in styles.css; this file is about-only:
   hero, spark accordion, flip cards, work-style grid, bento boxes,
   interests pills, contact section, mouse-mascot animation.
   Organization: layout shell -> hero -> sections -> spark accordion
   -> flip cards -> work style -> bento grid -> interests -> contact
   -> mouse animation -> media queries (1024 / 768 / 480)
   ========================================================= */

/* ===== LAYOUT SHELL ===== */
/* About has its own narrower measure than the portfolio's .container
   (800px vs --content-width 72rem) — kept as a local literal because
   this page reads as a single long-form column, not a wide grid. */
.about-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-lg);
  /* The spark/lamp decorative pseudo-elements below sit at large negative
     offsets (-350px/-375px) so they can overflow the viewport and force
     horizontal scroll on narrower desktop/tablet widths (~769-1024px,
     before they're display:none on mobile). overflow-x:clip contains them
     without affecting the .about-hero full-bleed breakout, which expands
     via negative margin calc, not by painting outside its own box. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ===== TABLE OF CONTENTS — sticky left-gutter rail =====
   .about-toc reuses the Figure case study's .cs-toc visual language
   (styles.css:1264-1322: mono label, border-left rail, scroll-spy
   .is-active state) but needs different positioning math: About's
   .about-container is a single centered 800px column (no .cs-layout
   grid track to give the rail its own column), and that column must
   stay visually centered in the viewport per spec.
   Technique: position: fixed, anchored to the viewport's horizontal
   center rather than to .about-container. position: fixed escapes
   .about-container's overflow-x: clip (set above for the hero's
   decorative pseudo-elements) because clip only clips fixed-position
   descendants when the clipping ancestor is also a containing block
   for fixed elements (i.e. has a transform/filter/will-change) —
   .about-container has none, so this is safe. Centering math:
   left edge of rail = 50vw - half the content measure (25rem) - a
   gap - the rail's own width. This keeps the 800px column exactly
   centered (untouched) while the rail floats in the empty gutter.
   Revealed only at >=90rem (see media query at file end) — the
   narrowest width where 50vw - 25rem leaves enough room for the
   11rem rail + gap without crowding the viewport edge or the
   content column.
   Two cross-file dependencies to keep in mind when editing:
   1. The block-level .cs-toc__* visuals (label, border-left rail,
      link, .is-active) live in styles.css:1278-1322, gated at
      >=64rem. Our >=90rem reveal sits inside that range, so they
      apply — but narrowing that media query would silently strip
      this rail's styling.
   2. The element carries both classes (cs-toc about-toc), so it
      inherits .cs-toc { position: sticky } from styles.css:1271.
      position: fixed below wins only because about.css loads after
      styles.css (about/index.html:51-52) at equal specificity. */
.about-toc {
  position: fixed;
  top: calc(4rem + var(--space-3xl)); /* clear the sticky .site-header, matches Figure */
  width: var(--toc-width);
  max-height: calc(100vh - 4rem - var(--space-3xl) - var(--space-xl));
  overflow-y: auto;
}

/* ===== FOCUS STYLES =====
   styles.css already sets a:focus-visible / button:focus-visible globally;
   about adds focus-visible to elements styles.css doesn't cover (inputs via
   labels, custom widgets), reusing the same treatment. */
.about-container :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===== LINKS ===== */
.highlight-link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-bottom-color var(--transition);
}

.highlight-link:hover,
.highlight-link:focus {
  border-bottom-color: var(--color-primary);
}

/* ===== TYPOGRAPHY ===== */
.about-container h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-lg);
  color: var(--color-white);
  margin-block-end: var(--space-sm);
  letter-spacing: -0.025em;
}

.about-container h2 {
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  color: var(--color-primary);
  margin-block-end: var(--space-lg);
  position: relative;
}

.about-container .czech {
  font-family: var(--font-sans);
  font-weight: 900;
}

.about-container h2::after {
  content: "";
  position: absolute;
  inset-block-end: -0.5rem;
  inset-inline-start: 0;
  inline-size: var(--space-3xl);
  block-size: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

.intro-text {
  font-size: var(--font-size-lg);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-block-end: var(--space-sm);
}

.about-container p {
  margin-block-end: var(--space-md);
}

.about-container p:last-child {
  margin-block-end: 0;
}

.about-container strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ===== HERO SECTION ===== */
/* Named .about-hero (not .hero) — styles.css already owns the bare
   .hero class for the homepage hero band; reusing that name caused
   its `min-height: 85svh` to leak onto this element since about.css
   never redeclared min-height to override it. */
.about-hero {
  position: relative;
  height: 500px;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-4xl)
    calc(-1 * var(--space-lg));
  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.4) 60%,
      rgba(0, 0, 0, 0.7) 100%
    ),
    url("../about/images/romanluks.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-2xl) var(--space-5xl) var(--space-3xl);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  overflow: hidden;
}

.hero-text {
  font-family: var(--font-display);
  color: var(--color-primary);
  /* Hero main type size has no portfolio token equivalent at this scale
     for a 500px hero band — kept as a local literal. */
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: left;
  max-width: 600px;
  margin-bottom: var(--space-md);
  /* Parallax offset is a dynamic, scroll-computed value set by about.js via
     element.style.setProperty(); the property itself (and its default) is
     static, so it's declared here rather than as an inline style. */
  transform: translateY(var(--parallax-y, 0));
}

/* Wraps the "Hello, I'm Roman" spans so the hero has a real <h1>;
   resets the browser default heading margin/size since the visual
   sizing/animation is already handled by the child spans. */
.hero-text-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  display: contents;
}

.hero-text-white {
  color: var(--color-white);
  opacity: 0;
  transform: translateY(30px);
}

.hero-p1 {
  animation: about-slide-up-fade-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

.hero-p2 {
  animation: about-slide-up-fade-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.hero-p3 {
  animation: about-slide-up-fade-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
}

.hero-text-orange {
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(30px);
  animation: about-slide-up-fade-in 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.hero-text span {
  font-family: var(--font-display);
  font-size: 3rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.02em;
}

.hero-subtitle {
  margin-top: -1rem;
}

.hero-subtitle span {
  font-family: var(--font-sans);
  font-size: 1.915rem;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  line-height: 1;
}

@keyframes about-slide-up-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== LAYOUT SECTIONS ===== */
.about-container section {
  margin-bottom: var(--space-5xl);
}

/* Smaller spacing for less important sections */
.about-container section[aria-labelledby="contact-heading"] {
  margin-bottom: var(--space-3xl);
}

.about-container section:last-of-type {
  margin-bottom: var(--space-5xl);
}

/* Alternating section backgrounds for visual rhythm.
   about's "complementary blue" accent has no portfolio token — kept as a
   local literal palette since it's a deliberate secondary accent, distinct
   from the primary orange, used only on these alternating bands. */
.section-alt {
  background: #e9eef8;
  margin-left: calc(-1 * var(--space-lg));
  margin-right: calc(-1 * var(--space-lg));
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
  transition: all var(--transition-slow);
  text-align: center;
}

.section-alt h2 {
  color: #2563eb;
  position: relative;
}

.section-alt h2::after {
  background: linear-gradient(90deg, #2563eb 0%, rgba(37, 99, 235, 0.6) 100%);
  left: 50%;
  transform: translateX(-50%);
}

.section-alt .intro-text {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.section-alt a {
  color: #1e40af;
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 99, 235, 0.3);
  transition: all var(--transition);
}

.section-alt a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-primary-tint);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  margin: -2px -4px;
}

.section-alt .contact-email {
  color: #2563eb;
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  /* No tint fill: blue text on the rgba(37,99,235,0.1) chip measured
     APCA Lc 56 (below the Lc 60 floor for 20px/600 text); on the plain
     section-alt band (#e9eef8) it measures Lc 65, which clears it. */
  background: transparent;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* ===== BACKGROUND DECORATIONS ===== */
.spark-grid::before,
.about-container section:has(.work-style-grid)::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 400px;
  height: 560px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
  pointer-events: none;
}

/* ===== SPARK SECTION (ACCORDION) ===== */
.spark-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
  position: relative;
}

.spark-grid::before {
  left: -350px;
  top: 0;
  transform: translateY(0);
  background-image: url("../about/images/sparkle.svg");
}

.spark-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.spark-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}

.spark-header {
  padding: var(--space-lg);
  display: block;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Native <summary> ships a default disclosure triangle in most browsers;
     the spark-header h3::after below supplies our own indicator instead. */
  list-style: none;
}

.spark-header::-webkit-details-marker {
  display: none;
}

.spark-header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background: var(--color-primary-tint);
}

.spark-header:hover {
  background: var(--color-primary-tint);
}

.spark-item:hover .spark-header h3 {
  color: var(--color-primary);
}

.spark-item:hover .spark-header h3::before {
  transform: scale(1.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.spark-header h3 {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-md);
}

.spark-header h3::before {
  content: attr(data-icon);
  font-size: 1.625rem;
  flex-shrink: 0;
}

.spark-header h3::after {
  content: "▼";
  font-size: var(--font-size-base);
  color: var(--color-primary);
  transition: transform 0.3s ease-out;
  margin-left: auto;
}

.spark-content {
  color: var(--color-text-muted);
  line-height: 1.7;
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 var(--space-2xl);
  transition: grid-template-rows 0.25s ease-out, padding 0.25s ease-out;
  overflow: hidden;
}

.spark-content > div {
  min-height: 0;
}

.spark-content a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(229, 107, 12, 0.3);
  transition: all var(--transition);
}

.spark-content a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-primary-tint);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  margin: -2px -4px;
}

.spark-item[open] .spark-content {
  grid-template-rows: 1fr;
  padding: 0 var(--space-2xl) var(--space-2xl) var(--space-2xl);
}

.spark-item[open] .spark-header h3::after {
  transform: rotate(180deg);
}

/* ===== FLIP CARDS ===== */
.flip-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: auto;
  perspective: 1000px;
}

.flip-card:hover .flip-card-inner {
  transform: translateY(-6px);
}

.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.flip-card input[type="checkbox"] {
  display: none;
}

.flip-card input[type="checkbox"]:checked + .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-inner {
  position: relative;
  inline-size: 100%;
  block-size: 300px;
  text-align: center;
  transition: transform var(--transition-slow);
  transform-style: preserve-3d;
  cursor: pointer;
  display: block;
}

.flip-card-inner:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inline-size: 100%;
  block-size: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: var(--space-md);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  text-align: left;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card-front {
  background: var(--color-white);
  border-inline-start: 4px solid var(--color-primary);
}

.flip-card-back {
  background: var(--color-white);
  color: var(--color-text-primary);
  border-inline-start: 4px solid #2563eb;
  transform: rotateY(180deg);
}

.flip-card-front h3,
.flip-card-back h3 {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
}

.flip-card-front h3 {
  color: var(--color-text-primary);
}

.flip-card-front p,
.flip-card-front ul,
.flip-card-back p,
.flip-card-back ul {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: left;
  width: 100%;
}

.flip-card ul {
  margin: var(--space-md) 0 0 var(--space-md);
  padding: 0;
}

.flip-card-back p + ul {
  margin-top: var(--space-xs);
}

.flip-card-back p:last-of-type {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.flip-card li {
  margin-bottom: var(--space-xs);
}

.card-indicator {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-size: 1.5rem;
}

/* ===== WORK STYLE SECTION ===== */
.work-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.about-container section:has(.work-style-grid) {
  position: relative;
}

.about-container section:has(.work-style-grid)::after {
  right: -375px;
  background-image: url("../about/images/lamp.svg");
}

.work-style-desc {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.work-style-column {
  background: var(--color-white);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition), box-shadow var(--transition);
}

.work-style-column:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Keyboard-only focus ring: :has(:focus-visible) keeps the card outline for
   keyboard users tabbing to the mouse mascot, but suppresses it on pointer
   click (which would otherwise fire :focus-within and ring the whole card). */
.work-style-column:has(:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.work-style-column h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.work-style-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.work-style-column li {
  padding: var(--space-sm) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  position: relative;
  padding-left: var(--space-xl);
}

.work-style-column li:first-child {
  padding-top: var(--space-sm);
}

.work-style-column li:last-child {
  padding-bottom: 0;
}

.work-style-column li::before {
  content: "•";
  color: var(--color-primary);
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  font-weight: bold;
  font-size: var(--font-size-lg);
}

/* ===== TEAM FEEDBACK SECTION ===== */
/* A single-column stack of theme cards — deliberately not a 3-col grid
   (work-style-grid) or a flip-card grid (flip-cards-grid), since this
   section reads as a different voice (others' feedback, not mine) and
   should look distinct from the sections immediately above/below it. */
.feedback-themes {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  list-style: none;
  padding: 0;
  text-align: left;
}

.feedback-theme {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-inline-start: 4px solid #2563eb;
}

.feedback-theme strong {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

/* ===== BENTO BOX GRID (PROJECTS SECTION) ===== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  grid-template-areas:
    "large large large small"
    "medium medium large2 large2";
}

.bento-box {
  background: linear-gradient(145deg, #ffffff 0%, rgba(249, 250, 251, 0.6) 100%);
  border: none;
  border-radius: var(--radius-md);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: default;
  padding: var(--space-xl);
}

.bento-box p {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  font-weight: 450;
}

.bento-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary-ghost) 20%,
    var(--color-primary-glow) 50%,
    var(--color-primary-ghost) 80%,
    transparent 100%
  );
  transition: all var(--transition);
}

.bento-box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px var(--color-primary-tint);
  background: linear-gradient(145deg, #ffffff 0%, rgba(255, 248, 243, 0.3) 100%);
}

.bento-box:hover::before {
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(229, 107, 12, 0.4) 15%,
    rgba(229, 107, 12, 0.8) 50%,
    rgba(229, 107, 12, 0.4) 85%,
    transparent 100%
  );
}

.bento-box:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  transform: translateY(-2px);
}

.bento-box .highlight-link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-ring);
  transition: all var(--transition);
  font-weight: 500;
}

.bento-box .highlight-link:hover {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary-hover);
  background: var(--color-primary-tint);
  padding: 1px 3px;
  border-radius: 3px;
  margin: -1px -3px;
}

.bento-box-large {
  padding: var(--space-3xl);
}

.bento-box-large:first-of-type {
  grid-area: large;
}

.bento-box-large:nth-of-type(3) {
  grid-area: large2;
}

.bento-box-large p {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text-primary);
}

.bento-box-medium {
  grid-area: medium;
  padding: var(--space-2xl);
}

.bento-box-small {
  grid-area: small;
  padding: var(--space-lg);
}

.bento-box-small p {
  font-size: var(--font-size-sm);
}

/* ===== INTERESTS SECTION ===== */
.interests-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.interest-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.interest-pill:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.interest-pill:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

a.interest-pill {
  text-decoration: none;
  cursor: pointer;
}

/* ===== CONTACT SECTION ===== */
.contact-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
}

.contact-email {
  color: var(--color-white);
  font-weight: 500;
  font-size: var(--font-size-lg);
}

.contact-map {
  margin-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  text-align: center;
}

.czechia-map {
  width: auto;
  height: 13.875rem;
  max-width: 100%;
  margin: 0 auto var(--space-lg);
}

/* ===== SCROLL ANIMATIONS ===== */
.slide-in {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in.visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-delay-1 { transition-delay: 0.1s; }
.slide-in-delay-2 { transition-delay: 0.2s; }
.slide-in-delay-3 { transition-delay: 0.3s; }
.slide-in-delay-4 { transition-delay: 0.4s; }
.slide-in-delay-5 { transition-delay: 0.5s; }
.slide-in-delay-6 { transition-delay: 0.6s; }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Flip cards stagger in together with their .reveal wrapper
   (.flip-cards-grid); js/main.js toggles .is-visible on that wrapper once
   it enters the viewport, and the existing .stagger-N classes (already on
   each card) stagger the transition via transition-delay. */
.js-enabled .flip-cards-grid .flip-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-enabled .flip-cards-grid.is-visible .flip-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== MOUSE-MASCOT ANIMATION ===== */
.mouse-animated {
  display: block;
  width: 100px;
  height: 68px;
  margin: 0 auto var(--space-md);
}

/* Cursor state mirrors the click interaction in about.js: clickable by
   default once JS attaches the handler, default (non-interactive) cursor
   while the click animation sequence is playing. */
.mouse-animated.is-clickable {
  cursor: pointer;
}

.mouse-animated.is-animating {
  cursor: default;
}

.mouse-animated #belly {
  animation: about-mouse-breathe 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes about-mouse-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.mouse-animated #inner-eye {
  animation: about-mouse-blink 4s ease-in-out infinite;
}

@keyframes about-mouse-blink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.1; }
}

.mouse-animated #whisker-A {
  animation: about-mouse-whisker-twitch-1 5s ease-in-out infinite;
  transform-origin: 2.72px 19.2px;
}

.mouse-animated #whisker-B {
  animation: about-mouse-whisker-twitch-2 4.5s ease-in-out infinite 0.5s;
  transform-origin: 3.82px 19.43px;
}

.mouse-animated #whisker-C {
  animation: about-mouse-whisker-twitch-3 3.8s ease-in-out infinite 1s;
  transform-origin: 4.99px 19.43px;
}

@keyframes about-mouse-whisker-twitch-1 {
  0%, 85%, 100% { transform: rotate(0deg); }
  87%, 89% { transform: rotate(2deg); }
  88% { transform: rotate(-1deg); }
}

@keyframes about-mouse-whisker-twitch-2 {
  0%, 80%, 100% { transform: rotate(0deg); }
  82%, 84% { transform: rotate(-2deg); }
  83% { transform: rotate(1deg); }
}

@keyframes about-mouse-whisker-twitch-3 {
  0%, 75%, 100% { transform: rotate(0deg); }
  77%, 79% { transform: rotate(1.5deg); }
  78% { transform: rotate(-0.5deg); }
}

.mouse-animated #inner-ear {
  animation: about-mouse-ear-wiggle 6s ease-in-out infinite;
  transform-origin: 21px 8px;
}

@keyframes about-mouse-ear-wiggle {
  0%, 94%, 100% { transform: rotate(0deg); }
  95%, 97% { transform: rotate(3deg); }
  96% { transform: rotate(-1deg); }
}

.mouse-animated #tail {
  animation: about-mouse-tail-sway 4s ease-in-out infinite;
  transform-origin: 44px 24px;
}

@keyframes about-mouse-tail-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

/* Click interaction: ear-perk alert + sniff sequence */
.mouse-animated.clicked {
  animation-play-state: paused;
}

.mouse-animated.clicked #inner-ear {
  animation: about-mouse-ear-flick 0.8s ease-in-out;
  transform-origin: 22px 12px;
}

.mouse-animated.clicked #outer-ear {
  animation: about-mouse-outer-ear-flick 0.8s ease-in-out;
  transform-origin: 21px 12px;
}

.mouse-animated.clicked #head {
  animation: about-mouse-alert-head 0.8s ease-in-out, about-mouse-sniff-head 1.2s ease-in-out 0.6s;
}

.mouse-animated.clicked #nose {
  animation: about-mouse-sniff-nose 1.2s ease-in-out 0.6s;
  transform-origin: 4px 18px;
}

.mouse-animated.clicked #whisker-A {
  animation: about-mouse-sniff-whiskers 1.2s ease-in-out 0.65s;
  transform-origin: 2.72px 19.2px;
}

.mouse-animated.clicked #whisker-B {
  animation: about-mouse-sniff-whiskers 1.2s ease-in-out 0.7s;
  transform-origin: 3.82px 19.43px;
}

.mouse-animated.clicked #whisker-C {
  animation: about-mouse-sniff-whiskers 1.2s ease-in-out 0.75s;
  transform-origin: 4.99px 19.43px;
}

.mouse-animated.clicked #belly {
  animation: about-mouse-sniff-breathe 1.2s ease-in-out 0.6s;
}

.mouse-animated.clicked #tail {
  animation: about-mouse-alert-tail-wag 1.8s ease-in-out;
  transform-origin: 44px 24px;
}

@keyframes about-mouse-ear-flick {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-15deg); }
  25% { transform: rotate(10deg); }
  37% { transform: rotate(-12deg); }
  50% { transform: rotate(8deg); }
  62% { transform: rotate(-8deg); }
  75% { transform: rotate(5deg); }
  87% { transform: rotate(-3deg); }
}

@keyframes about-mouse-outer-ear-flick {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-8deg); }
  25% { transform: rotate(5deg); }
  37% { transform: rotate(-6deg); }
  50% { transform: rotate(4deg); }
  62% { transform: rotate(-4deg); }
  75% { transform: rotate(2deg); }
  87% { transform: rotate(-1deg); }
}

@keyframes about-mouse-alert-head {
  0%, 100% { transform: rotate(0deg); }
  25%, 75% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes about-mouse-sniff-nose {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-12deg); }
  25% { transform: rotate(0deg); }
  40% { transform: rotate(-12deg); }
  50% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(0deg); }
}

@keyframes about-mouse-sniff-whiskers {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-8deg); }
  25% { transform: rotate(0deg); }
  40% { transform: rotate(-8deg); }
  50% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(0deg); }
}

@keyframes about-mouse-sniff-head {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-3deg); }
  25% { transform: rotate(0deg); }
  40% { transform: rotate(-3deg); }
  50% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(0deg); }
}

@keyframes about-mouse-sniff-breathe {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(0.98); }
  25% { transform: scale(1.01); }
  40% { transform: scale(0.98); }
  50% { transform: scale(1.01); }
  60%, 100% { transform: scale(1); }
}

@keyframes about-mouse-alert-tail-wag {
  0%, 100% { transform: rotate(0deg); }
  8% { transform: rotate(8deg); }
  16% { transform: rotate(-6deg); }
  24% { transform: rotate(7deg); }
  32% { transform: rotate(-5deg); }
  40% { transform: rotate(6deg); }
  48% { transform: rotate(-4deg); }
  56% { transform: rotate(4deg); }
  64% { transform: rotate(-3deg); }
  72% { transform: rotate(3deg); }
  80% { transform: rotate(-2deg); }
  88% { transform: rotate(1deg); }
}

/* Respect reduced motion: styles.css's global reduced-motion rule already
   collapses all animation/transition durations to ~0, so the mouse and
   flip-card stagger effects above are automatically neutralized.
   .slide-in (spark items) is about-only and starts from opacity:0 /
   translateX(-30px) — a ~0ms transition still means it briefly renders that
   hidden state before about.js's .visible class lands, so we explicitly
   force the visible end-state here rather than rely on the transition
   timing collapse alone.
   Hero entrance text (.hero-text-white / .hero-text-orange) has the same
   gap, but via animation-delay rather than duration: styles.css's global
   rule zeroes animation-duration/iteration-count but not animation-delay,
   so these elements would sit at their from{opacity:0} state for up to 1s
   (their declared delay) before snapping visible — forcing the end-state
   directly avoids that flash of hidden content. */
@media (prefers-reduced-motion: reduce) {
  .slide-in,
  .hero-text-white,
  .hero-text-orange {
    opacity: 1;
    transform: none;
  }
}

/* ===== RESPONSIVE — large tablets (769–1024px), 3-col bento ===== */
@media (max-width: 1024px) and (min-width: 769px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "large large medium"
      "small large2 large2";
    gap: var(--space-lg);
  }

  .bento-box-large:first-of-type { grid-area: large; }
  .bento-box-medium { grid-area: medium; }
  .bento-box-small { grid-area: small; }
  .bento-box-large:nth-of-type(3) { grid-area: large2; }

  .bento-box-large { padding: var(--space-2xl); }
  .bento-box-medium { padding: var(--space-xl); }
  .bento-box-small { padding: var(--space-lg); }
}

/* ===== RESPONSIVE — mobile and tablets (max 768px) ===== */
@media (max-width: 768px) {
  .about-container {
    padding: var(--space-md);
  }

  .about-hero {
    height: 300px;
    margin: calc(-1 * var(--space-md)) calc(-50vw + 50%) var(--space-3xl)
      calc(-50vw + 50%);
    padding: var(--space-md) var(--space-md) var(--space-2xl);
    justify-content: center;
    align-items: flex-end;
    background-attachment: scroll;
    background-position: center center;
    border-radius: 0;
  }

  .hero-text {
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
    max-width: 85%;
    margin-bottom: var(--space-md);
  }

  .hero-text span {
    font-size: 2rem;
  }

  .hero-subtitle {
    margin-top: -0.667rem;
  }

  .hero-subtitle span {
    font-size: 1.2rem;
  }

  .about-container h1 {
    font-size: var(--type-display-md);
  }

  .about-container h2 {
    font-size: 30px;
  }

  .flip-cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .flip-card-inner {
    block-size: auto;
    min-height: 300px;
  }

  .flip-card-front,
  .flip-card-back {
    height: auto;
    min-height: 300px;
  }

  .work-style-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .work-style-column {
    padding: var(--space-md);
  }

  .work-style-column h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
  }

  .feedback-theme {
    padding: var(--space-md);
  }

  .feedback-theme strong {
    font-size: var(--font-size-base);
  }

  .mouse-animated {
    width: 80px;
    height: 54px;
    margin-bottom: var(--space-lg);
  }

  .contact-links {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
  }

  .interests-grid {
    gap: 8px;
  }

  .interest-pill {
    font-size: var(--font-size-xs);
    padding: var(--space-sm) var(--space-md);
  }

  .section-alt {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
    border-radius: var(--radius-md);
  }

  .section-alt:hover {
    transform: none;
  }

  .section-alt .contact-email {
    padding: var(--space-sm);
    font-size: var(--font-size-base);
    display: block;
    text-align: center;
    margin-top: var(--space-sm);
  }

  .spark-grid::before,
  .about-container section:has(.work-style-grid)::after {
    display: none;
  }

  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "large"
      "large2"
      "medium"
      "small";
    gap: var(--space-lg);
    margin-top: var(--space-xl);
  }

  .bento-box-small,
  .bento-box-medium,
  .bento-box-large {
    grid-column: 1;
    grid-row: auto;
  }

  .bento-box-large:first-of-type { grid-area: large; }
  .bento-box-medium { grid-area: medium; }
  .bento-box-large:nth-of-type(3) { grid-area: large2; }
  .bento-box-small { grid-area: small; }

  .bento-box-large { padding: var(--space-2xl); }
  .bento-box-medium { padding: var(--space-xl); }
  .bento-box-small { padding: var(--space-lg); }

  .bento-box p {
    font-size: var(--font-size-base);
    line-height: 1.65;
  }

  .bento-box-large:hover {
    transform: translateY(-2px);
  }

  .bento-box-medium:hover,
  .bento-box-small:hover {
    transform: translateY(-1px);
  }

  .czechia-map {
    height: 10rem;
    max-width: 90%;
  }
}

/* ===== RESPONSIVE — small mobile (max 480px) ===== */
@media (max-width: 480px) {
  .bento-grid {
    gap: var(--space-md);
    margin-top: var(--space-lg);
  }

  .bento-box-large { padding: var(--space-xl); }
  .bento-box-medium { padding: var(--space-lg); }
  .bento-box-small { padding: var(--space-md); }

  .bento-box p {
    font-size: var(--font-size-sm);
    line-height: 1.6;
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  .bento-box {
    min-height: 44px; /* Accessibility - minimum touch target */
  }

  .bento-box:hover {
    transform: none;
  }

  .bento-box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* ===== FOOTER ALIGNMENT =====
   The shared footer (.site-footer, css/styles.css) pads horizontally with
   var(--gutter) and centers a 72rem .container inside it, but the about
   page reads as a single 800px column inset by .about-container's own
   padding instead. Re-create that exact box geometry on the footer's inner
   container — and drop the footer's own horizontal gutter — so the
   signature's left edge lands on the same offset as the page copy at every
   breakpoint. (cf. css/writing.css, which solves the same bug for its
   narrower 65ch measure.) */
.site-footer {
  padding-inline: 0;
}

.site-footer .container {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* ===== RESPONSIVE — wide desktop (>=90rem), reveal TOC rail =====
   90rem chosen so 50vw - 400px (half the 800px column) leaves >= 200px
   of left gutter — enough for the 11rem rail + a 3rem (--space-3xl)
   gap with margin to spare before crowding the content column or the
   viewport edge. Below this, .about-toc stays display: none (set in
   styles.css:858, shared with Figure) — no rail on laptop-width
   screens where the gutter is too tight. */
@media (min-width: 90rem) {
  .about-toc {
    display: block;
    left: calc(50% - 25rem - var(--space-3xl) - var(--toc-width));
  }
}

@media (max-width: 768px) {
  .site-footer .container {
    padding-inline: var(--space-md);
  }
}