/* assets/css/sections/hobbies.css — Section styles and local responsive rules. */
/* Hobbies */
.hobbies-section { position: relative; min-height: calc(100vh - var(--header-height)); padding-block: 2.6rem; overflow: hidden; }
.hobbies-container { position: relative; }
.hobbies-heading { display: block; width: 100%; max-width: none; margin-bottom: 2rem; }
.hobbies-heading .section-kicker { margin-bottom: 0.75rem; }
.hobbies-heading__row { display: block; width: 100%; max-width: none; }
.hobbies-heading__row h2 { width: max-content; max-width: none; margin: 0; white-space: nowrap; }
.hobbies-heading__row span { width: max-content; max-width: none; margin: 0; color: var(--color-primary); }
.hobbies-heading__row p { width: max-content; max-width: none; margin: 0.8rem 0 0; white-space: nowrap; }
.hobbies-wall { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.hobbies-photo-strip {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, var(--color-border-primary-subtle), transparent 38%),
    linear-gradient(145deg, var(--surface-inset-soft), transparent 54%),
    rgba(8, 10, 14, 0.92);
  border: 1px solid var(--color-border-primary-emphasis);
  border-radius: 24px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.hobbies-photo-strip::before {
  position: absolute;
  inset: 0;
  content: "";
  background-image: linear-gradient(45deg, rgba(255, 90, 0, 0.055) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 90, 0, 0.055) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 90, 0, 0.055) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 90, 0, 0.055) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
  opacity: 0.18;
  pointer-events: none;
}
/* Navigation */
.hobbies-photo-strip__header { position: relative; z-index: 2; display: flex; gap: 0.65rem; padding: 1rem 1rem 0.75rem; align-items: center; }
.hobbies-photo-strip__header span {
  width: 9px;
  height: 9px;
  background: var(--color-primary);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 90, 0, 0.55);
}
.hobbies-photo-strip__header p {
  margin: 0;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Hobbies */
.hobbies-photo-strip__viewport { position: absolute; inset: 3.2rem 0 0; overflow: hidden; }
.hobbies-photo-strip__track { display: grid; gap: 0.65rem; padding: 0 0.8rem; animation: hobbiesPhotoScroll 20s linear infinite; will-change: transform; }
.hobbies-photo {
  position: relative;
  margin: 0;
  padding: 0.55rem;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  transform: rotate(var(--photo-rotation, -1deg));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hobbies-photo--orange { --photo-rotation: -1deg; }
.hobbies-photo--dark { --photo-rotation: 1.3deg; }
.hobbies-photo--blue { --photo-rotation: -0.7deg; }
.hobbies-photo--green { --photo-rotation: 1deg; }
.hobbies-photo__placeholder { display: grid; height: 210px; place-items: center; border-radius: 14px; overflow: hidden; }
.hobbies-photo__placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.hobbies-photo__placeholder span { color: rgba(255, 255, 255, 0.76); font-size: 2.7rem; font-weight: 950; letter-spacing: -0.08em; }
.hobbies-photo figcaption {
  margin-top: 0.55rem;
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.hobbies-photo--orange .hobbies-photo__placeholder {
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(255, 90, 0, 0.78), rgba(35, 9, 0, 0.92));
}
.hobbies-photo--dark .hobbies-photo__placeholder {
  background: radial-gradient(circle at 70% 20%, var(--color-border-primary-emphasis), transparent 35%),
    linear-gradient(135deg, rgba(20, 24, 32, 0.95), rgba(4, 5, 8, 0.95));
}
.hobbies-photo--blue .hobbies-photo__placeholder {
  background: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(32, 74, 114, 0.85), rgba(5, 9, 15, 0.95));
}
.hobbies-photo--green .hobbies-photo__placeholder {
  background: radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.14), transparent 35%),
    linear-gradient(135deg, rgba(48, 92, 63, 0.86), rgba(5, 9, 7, 0.95));
}
@keyframes hobbiesPhotoScroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(-50% - 0.325rem), 0);
  }
}
.creative-book__page span:nth-of-type(even) { width: 82%; }
.puzzle-piece {
  position: absolute;
  width: 38px;
  height: 38px;
  clip-path: polygon(
    0 0,
    38% 0,
    38% 14%,
    48% 22%,
    60% 20%,
    68% 11%,
    68% 0,
    100% 0,
    100% 38%,
    88% 38%,
    79% 48%,
    82% 60%,
    90% 68%,
    100% 68%,
    100% 100%,
    0 100%
  );
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.34));
}
.coding-terminal__dot:nth-child(1) { left: 0.65rem; }
.coding-terminal__dot:nth-child(2) { left: 1.15rem; background: rgba(255, 170, 85, 0.9); }
.coding-terminal__dot:nth-child(3) { left: 1.65rem; background: rgba(255, 215, 170, 0.82); }
@keyframes gamepadFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}
@keyframes gamepadButtonsPulse {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}
.hobbies-wall { gap: 0.75rem; }
.hobbies-photo-strip { width: 300px; height: 617px; min-height: 617px; border-color: var(--color-border-primary-strong); }
@keyframes roadMarksMove {
  to {
    background-position-x: -45px;
  }
}
@keyframes carRide {
  from {
    transform: translateX(-50%) translateY(0);
  }

  to {
    transform: translateX(-50%) translateY(-1px);
  }
}
.volunteering-item, .volunteering-item:nth-child(2) {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.45rem;
  min-height: 24px;
  margin: 0;
  padding: 0.1rem 0;
  align-items: center;
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hobbies-wall { --hobbies-height: 560px; align-items: start; }
.hobbies-wall .hobbies-photo-strip { box-sizing: border-box; width: 100%; height: var(--hobbies-height); min-height: 0; }
.hobbies-photo figcaption small {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.hobbies-photo-strip:hover .hobbies-photo-strip__track { animation-play-state: running; }
.hobby-moodboard {
  --mb-orange: #ff5a00;
  --mb-text: #f2f0eb;
  --mb-muted: #a3a7ad;
  --mb-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: var(--hobbies-height);
  min-width: 0;
  color: var(--mb-text);
  background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(
      circle at 80% 15%,
      rgba(255,90,0,.07),
      transparent 50%
    ),
    #090c10;
  background-size: 28px 28px, 28px 28px, auto, auto;
  border: 1px solid rgba(255,90,0,.3);
  border-radius: 24px;
}
.hobby-moodboard h3, .hobby-moodboard p, .hobby-moodboard figure { margin: 0; }
.hobby-moodboard h3 { color: var(--mb-text); font-size: .8rem; line-height: 1.3; }
.hobby-moodboard p { color: var(--mb-muted); font-size: .65rem; line-height: 1.5; }
.mb-object {
  position: absolute;
  box-sizing: border-box;
  z-index: var(--layer, 2);
  transform: rotate(var(--tilt, 0deg));
  transform-origin: center;
  transition: transform 180ms ease, filter 180ms ease;
}
.mb-object:hover { z-index: 20; transform: rotate(0deg) translateY(-3px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.mb-paper { padding: .8rem; background: #1a1e24; border: 1px solid rgba(255,255,255,.16); border-radius: 2px; box-shadow: 0 8px 16px rgba(0,0,0,.3); }
.mb-pin {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 12px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffae7c;
  border-radius: 50%;
  background: var(--mb-orange);
  box-shadow: 1px 3px 4px #000;
}
.mb-tape { position: absolute; top: -7px; left: calc(50% - 19px); width: 38px; height: 15px; background: rgba(210,215,222,.23); transform: rotate(-5deg); }
.mb-ticket {
  --tilt: -3deg;
  left: 2%;
  top: 30px;
  width: 42%;
  display: grid;
  grid-template-columns: minmax(0,1fr) 43px;
  background: #171d24;
  border: 1px solid rgba(255,90,0,.45);
  border-radius: 8px;
  box-shadow: 0 10px 18px rgba(0,0,0,.3);
  -webkit-mask: radial-gradient(circle at calc(100% - 43px) 0,
      transparent 6px, #000 6.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - 43px) 100%,
      transparent 6px, #000 6.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at calc(100% - 43px) 0,
      transparent 6px, #000 6.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - 43px) 100%,
      transparent 6px, #000 6.5px) bottom / 100% 51% no-repeat;
}
.mb-ticket__main { position: relative; min-width: 0; padding: .8rem; }
.hobby-moodboard .mb-label { color: var(--mb-orange); font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mb-ticket h3 {
  position: relative;
  z-index: 1;
  margin-top: .5rem;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 900;
  line-height: .98;
  text-transform: uppercase;
}
.mb-ticket__car { position: absolute; right: 8px; top: 35px; width: 49%; height: 65px; color: var(--mb-orange); }
.hobby-moodboard .mb-ticket__series {
  position: absolute;
  right: .8rem;
  bottom: .65rem;
  left: .8rem;
  padding-top: .4rem;
  border-top: 1px dashed rgba(255,255,255,.25);
  color: #c5c8cc;
  font-size: .6rem;
  line-height: 1.55;
}
.mb-ticket__stub {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #161a20;
  background: #d8dadd;
  border-left: 2px dashed #757b83;
  border-radius: 0 7px 7px 0;
}
.mb-ticket__stub > span { writing-mode: vertical-rl; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.mb-drawing { --tilt: 6deg; left: 45%; top: 30px; width: 14%; padding: .65rem; }
.mb-drawing svg { display: block; width: 100%; height: 68px; fill: none; stroke: var(--mb-orange); stroke-width: 2; stroke-linecap: round; }
.mb-painting { --tilt: -5deg; left: 61%; top: 24px; width: 12%; padding: .6rem; }
.mb-canvas { position: relative; height: 70px; margin-bottom: .4rem; overflow: hidden; background: #10141a; border: 3px solid #30353d; }
.mb-canvas i { position: absolute; left: 8%; width: 85%; height: 15px; border-radius: 50%; }
.mb-canvas i:nth-child(1) { top: 9px; background: var(--mb-orange); transform: rotate(-12deg); }
.mb-canvas i:nth-child(2) { top: 28px; background: #e0e2e5; transform: rotate(14deg); }
.mb-canvas i:nth-child(3) { top: 46px; background: #803411; transform: rotate(-4deg); }
.mb-country-icons { display: flex; justify-content: center; gap: .35rem; margin-top: .3rem; }
.mb-country-icons img { width: 13px; height: 13px; filter: brightness(0) invert(1); opacity: .8; }
.mb-countries {
  --tilt: -2deg;
  left: 74%;
  top: 340px;
  width: 24%;
  padding: .55rem;
  font-family: var(--mb-hand);
  font-size: .75rem;
  line-height: 1.6;
  text-align: center;
}
.mb-active h3:not(:first-child) { margin-top: .5rem; }
.mb-book { --tilt: -5deg; --layer: 4; left: 27%; top: 210px; width: 19%; height: 105px; display: flex; filter: drop-shadow(0 8px 8px rgba(0,0,0,.3)); }
.mb-book__page { width: 50%; padding: .8rem .55rem; background: #1e232b; border: 1px solid #424751; }
.mb-book__page:first-child { border-radius: 6px 0 0 6px; box-shadow: inset -8px 0 12px #11151a; }
.mb-book__page:nth-child(2) { border-radius: 0 6px 6px 0; box-shadow: inset 8px 0 12px #11151a; }
.mb-book h3, .mb-book small { display: block; margin-bottom: .6rem; font-size: .55rem; text-align: center; }
.mb-book small { color: var(--mb-orange); }
.mb-book__page > span { display: block; height: 2px; margin-top: 6px; background: #555c65; }
.mb-book__page > span:nth-of-type(even) { width: 80%; }
.mb-book__bookmark {
  position: absolute;
  top: -4px;
  left: 48%;
  width: 12px;
  height: 34px;
  background: var(--mb-orange);
  clip-path: polygon(0 0,100% 0,100% 100%,50% 77%,0 100%);
}
.mb-gaming { --tilt: -7deg; left: 24%; top: 326px; width: 17%; text-align: center; }
.mb-gaming svg { display: block; width: 85%; height: 59px; margin: 0 auto; fill: none; stroke: #dddfe3; stroke-width: 3; stroke-linecap: round; }
.mb-gaming h3 { font-family: var(--mb-hand); font-weight: 400; }
.mb-gaming p { margin-top: .3rem; }
.mb-code {
  --tilt: 4deg;
  left: 49%;
  top: 230px;
  width: 22%;
  padding: .8rem 1rem .8rem 1.2rem;
  background: linear-gradient(
      90deg,
      transparent 10px,
      rgba(255,90,0,.35) 10px 11px,
      transparent 11px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 23px,
      rgba(190,200,215,.13) 23px 24px
    ),
    #191e26;
}
.mb-code h3 { font-family: var(--mb-hand); font-size: .9rem; font-weight: 400; }
.hobby-moodboard .mb-code pre, .hobby-moodboard .mb-code code {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #e0e2e6;
  font-family: var(--mb-hand);
  font-size: .8rem;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  white-space: pre;
  letter-spacing: normal;
}
.hobby-moodboard .mb-code pre { margin-top: .5rem; }
.mb-music {
  --tilt: -3deg;
  --layer: 5;
  left: 50%;
  top: 150px;
  width: 21%;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem;
  background: #12171d;
  border: 1px solid rgba(255,90,0,.3);
  border-radius: 9px;
}
.mb-music__cover {
  display: grid;
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg,#4a2112,#ff5a00);
  border-radius: 4px;
  font-size: 1.5rem;
}
.mb-music > div:last-child { flex: 1; }
.mb-music__progress {
  height: 3px;
  margin-top: .4rem;
  background: linear-gradient(
    to right,
    var(--mb-orange) 40%,
    #424851 40%
  );
}
.mb-music__controls { display: block; margin-top: .25rem; color: var(--mb-orange); font-size: .7rem; text-align: center; }
.mb-puzzles { --tilt: 7deg; left: 5%; top: 451px; width: 12%; text-align: center; }
.mb-puzzles svg { width: 70px; height: 44px; }
.mb-puzzles path:first-child { fill: var(--mb-orange); }
.mb-puzzles path:last-child { fill: #626a76; }
.mb-puzzles h3 { font-size: .7rem; }
.mb-help { --tilt: -3deg; left: 48%; top: 435px; width: 48%; padding: .75rem 1rem; }
.mb-help h3 { font-family: var(--mb-hand); font-weight: 400; font-size: .9rem; }
.mb-help ul { display: grid; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.mb-help li { display: flex; align-items: flex-start; gap: .5rem; color: #c3c7cd; font-size: .7rem; line-height: 1.4; }
.mb-check {
  display: grid;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  place-items: center;
  border: 1px solid #767d87;
  color: var(--mb-orange);
  font-size: .7rem;
}
@media (max-width: 1399px) {
  /* Hobbies */
  .hobbies-wall .hobby-moodboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    align-items: center;
    gap: 1.5rem 1rem;
    height: auto;
    min-height: 560px;
    padding: 1.5rem;
  }
  .hobby-moodboard > .mb-object { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; min-width: 0; }
  .mb-ticket, .mb-help { grid-column: span 2; }
  .mb-code { grid-column: span 2; }
}
@media (max-width: 1000px) {
  /* Hobbies */
  .hobbies-section .hobbies-wall { grid-template-columns: minmax(0,1fr); }
  .hobbies-wall .hobbies-photo-strip { height: 380px; }
}
@media (max-width: 600px) {
  /* Hobbies */
  .hobbies-wall .hobby-moodboard { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 1.2rem; gap: 1.4rem 1rem; }
  .mb-countries { grid-column: span 2; }
  .hobby-moodboard .mb-code code { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  /* Hobbies */
  .mb-object { transition: none; }
  .hobbies-photo-strip__track { animation: none; }
  .hobbies-photo-strip__viewport { overflow-y: auto; }
}
.mb-book h3 { font-size: .72rem; font-weight: 850; color: #fff; letter-spacing: .01em; }
.mb-book small { font-size: .5rem; }
.mb-music { border-color: rgba(255,255,255,.16); }
.mb-painting, .mb-code, .mb-countries { border-color: rgba(255,90,0,.45); }
.mb-travel { --tilt: 0deg; left: 75%; top: 30px; width: 23%; height: 290px; }
.mb-travel:hover { transform: none; filter: none; }
.mb-travel__image { position: absolute; top: 0; left: 8%; width: 84%; height: 215px; }
.mb-travel__image > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mb-travel__threads { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mb-travel__threads path { fill: none; stroke: #542812; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mb-travel__threads circle { fill: #542812; stroke: #ffc099; stroke-width: 1; }
.mb-travel__note {
  position: absolute;
  top: 234px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 44%;
  min-height: 40px;
  padding: .4rem;
  background: #542812;
  border: 1px solid rgba(255,90,0,.5);
  box-shadow: 0 5px 10px rgba(0,0,0,.25);
}
.mb-travel__note--france { left: 0; transform: rotate(-4deg); }
.mb-travel__note--uk { right: 0; transform: rotate(4deg); }
.mb-travel__note strong { font-family: var(--mb-hand); font-size: .8rem; }
.mb-travel__note .mb-country-icons { margin: 0; }
@media (min-width: 1400px) {
  /* Hobbies */
  .mb-gaming { left: 5%; top: 242px; width: 17%; }
  .mb-puzzles { left: 29%; top: 340px; width: 12%; }
  .mb-help { left: 64%; width: 32%; }
}
@media (max-width: 1399px) {
  /* Hobbies */
  .hobby-moodboard > .mb-travel { grid-column: span 2; width: min(100%, 280px); height: 290px; justify-self: center; }
}
.mb-code-lines { margin-top: .5rem; color: #e0e2e6; font-family: var(--mb-hand); font-size: .8rem; line-height: 24px; text-align: left; }
.mb-code-lines > span { display: block; }
.mb-code-lines > .is-indented { padding-left: .8rem; }
.mb-sports-note { --tilt: 3deg; left: 4%; top: 420px; width: 35%; }
.mb-sports-note ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mb-sports-note li { display: flex; align-items: baseline; gap: .5rem; font-size: .8rem; }
.mb-sports-note li::before { content: "•"; color: var(--mb-orange); }
.mb-sports-note li small { margin-left: auto; color: var(--mb-muted); font-size: .7rem; }
.mb-ticket { height: 164px; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.mb-ticket__stub { position: relative; display: block; box-sizing: border-box; min-height: 0; height: 100%; padding: 0; }
.mb-ticket__stub > span { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
@media (max-width: 1399px) {
  /* Hobbies */
  .hobby-moodboard > .mb-sports-note { grid-column: span 2; width: 100%; }
}
@media (min-width: 1400px) {
  /* Hobbies */
  .mb-sports-note { top: 380px; --layer: 4; border-color: rgba(255,90,0,.45); }
  .mb-help { top: 421px; --layer: 4; }
  .mb-code { top: 290px; }
  .mb-music { top: 170px; }
  .mb-painting { left: 715px; }
  .mb-drawing { left: 530px; }
  .mb-countries { top: 325px; }
}
.hobby-moodboard .mb-puzzles svg { display: block; width: 100%; height: auto; }
@media (min-width: 1400px) {
  /* Hobbies */
  .hobby-moodboard .mb-puzzles { left: 40%; top: 435px; width: 23%; --tilt: 0deg; pointer-events: none; }
  .hobby-moodboard .mb-book { width: 17%; height: 135px; left: 28%; top: 215px; }
}
.hobby-moodboard .mb-puzzles { pointer-events: auto; }
.hobby-moodboard .mb-travel:hover { z-index: 20; transform: rotate(0deg) translateY(-3px); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }