/* ============================================================
   RESET & BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0d0f14;
  --ink: #f3f1ea;
  --ink-dim: rgba(243, 241, 234, 0.68);
  --accent: #e8b04b;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.5;
}

/* Filmic grain over the whole page — ties the hero illustration and the
   project panels together into one consistent, textured surface. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
}

section { position: relative; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent);
  z-index: 200;
  transition: width 0.1s linear;
}

/* ============================================================
   HEADER / TOP NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 5vw;
  mix-blend-mode: difference;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.top-nav {
  display: flex;
  gap: 2.25rem;
}

.top-nav a {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.top-nav a:hover { opacity: 1; }

.header-right {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* Language switch — a small EN / FR pill toggle. */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(243, 241, 234, 0.4);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
}

.lang-toggle span {
  padding: 4px 7px;
  border-radius: 999px;
  opacity: 0.5;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.lang-toggle span.is-active {
  opacity: 1;
  background: var(--accent);
  color: #0d0f14;
}

@media (max-width: 560px) {
  .header-right { gap: 1rem; }
  .top-nav { gap: 1.1rem; }
  .top-nav a { font-size: 0.72rem; letter-spacing: 0.05em; }
}

/* ============================================================
   DOT NAVIGATION
   ============================================================ */
.dot-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dot-nav .dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(243, 241, 234, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
}

.dot-nav .dot::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: rgba(13, 15, 20, 0.85);
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dot-nav .dot:hover::after { opacity: 1; }

.dot-nav .dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* Category markers read as small squares rather than dots */
.dot-nav .dot-cat {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(243, 241, 234, 0.55);
}
.dot-nav .dot-cat.active {
  background: var(--accent);
  transform: rotate(45deg) scale(1.25);
}

@media (max-width: 800px) {
  .dot-nav { display: none; }
}

/* ============================================================
   HERO — layered parallax (Firewatch style)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.hero-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #17182c 0%, #4b3f66 16%, #b3597a 42%, #f4845f 62%, #ffb26b 78%, #ffd39a 100%);
  z-index: 0;
}

.hero-layer {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  will-change: transform;
  z-index: 1;
}

/* Firewatch-style layered ranges: flat angular peaks, each split into a
   warm sun-lit face and a cool shadow face. Ranges read cool and pale in
   the distance, then warm and darken toward the foreground, with one
   dominant sunlit peak in the mid ground. */
.mtn-far      { fill: #6f7099; }
.mtn-mid1-sh  { fill: #33566b; }
.mtn-mid1-lt  { fill: #5ea08f; }
.mtn-mid2-sh  { fill: #2b3a55; }
.mtn-mid2-lt  { fill: #c96a37; }
.mtn-mid2-fac { fill: #b0582f; }
.mtn-near     { fill: #1f2b3f; }
.mtn-near-lt  { fill: #6b4030; opacity: 0.55; }
.hero-trees g { fill: #141c2c; }

/* Star field — three independently-twinkling sub-layers plus a couple of
   bright, haloed stars, all masked so they only show in the upper
   (night-into-dusk) part of the sky. */
.hero-stars {
  top: 0;
  height: 66%;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 92%);
  overflow: visible;
}

/* Base layer: dense fine dust + a few brighter, softly-haloed stars. */
.hero-stars {
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 15%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 18% 40%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 27% 10%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 38% 30%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 48% 8%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 58% 22%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 68% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 76% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 85% 6%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 93% 26%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 12% 55%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 62% 48%, #fff, transparent),
    radial-gradient(3px 3px at 22% 18%, #fff 0%, rgba(255,255,255,0.35) 42%, transparent 72%),
    radial-gradient(3.4px 3.4px at 71% 24%, #fff 0%, rgba(255,236,214,0.4) 40%, transparent 72%),
    radial-gradient(2.6px 2.6px at 45% 40%, #fff 0%, rgba(214,224,255,0.4) 42%, transparent 74%);
  animation: twinkle 6s ease-in-out infinite;
}

/* Two more offset layers — different positions, sizes and twinkle rhythm
   so the field shimmers star-by-star instead of pulsing as one block. */
.hero-stars::before,
.hero-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.hero-stars::before {
  background-image:
    radial-gradient(1.4px 1.4px at 5% 28%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 15% 8%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 24% 46%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 33% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 43% 33%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 53% 12%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 64% 40%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 73% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 82% 44%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90% 14%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 97% 36%, #fff, transparent);
  opacity: 0.85;
  animation: twinkle 4.2s ease-in-out infinite;
  animation-delay: -1.6s;
}

.hero-stars::after {
  background-image:
    radial-gradient(1.2px 1.2px at 10% 38%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 21% 24%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 30% 6%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 40% 50%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 51% 28%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 61% 16%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 70% 52%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 79% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 50%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 95% 20%, #fff, transparent);
  opacity: 0.7;
  animation: twinkle 5.3s ease-in-out infinite;
  animation-delay: -3.1s;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

/* Shooting stars — a bright head with a tapering tail, streaking across
   on a long cycle so they stay a rare, pleasing surprise. */
.shooting-star {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: rotate(18deg);
  animation: shoot 11s ease-in infinite;
}
.shooting-star::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 220px;
  height: 1.5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
}
.shooting-star--2 {
  top: 26%;
  left: 44%;
  animation-duration: 17s;
  animation-delay: -7s;
}

@keyframes shoot {
  0%       { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  3%       { opacity: 1; }
  12%      { opacity: 1; }
  18%      { opacity: 0; transform: translate(46vw, 20vh) rotate(18deg); }
  100%     { opacity: 0; transform: translate(46vw, 20vh) rotate(18deg); }
}

/* Clouds — flat cartoon shapes drifting slowly across the sky:
   pink body, white crest, mauve underside, loose swirl-line accents. */
.hero-clouds {
  top: 0;
  height: 80%;
}

.hero-clouds svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 24px rgba(90, 55, 100, 0.20));
}

.cc-body   { fill: #d98fae; }
.cc-hi     { fill: #f4eaf0; }
.cc-shadow { fill: #af6a8e; opacity: 0.55; }
.cc-lines path {
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cc-lines-in path {
  stroke: rgba(150, 92, 122, 0.45);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.cloud {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.cloud-1 { animation: cloudDrift1 90s ease-in-out infinite; }
.cloud-2 { animation: cloudDrift2 120s ease-in-out infinite; }
.cloud-3 { animation: cloudDrift3 150s ease-in-out infinite; }
.cloud-4 { animation: cloudDrift1 108s ease-in-out infinite reverse; }
.cloud-5 { animation: cloudDrift2 168s ease-in-out infinite; }

@keyframes cloudDrift1 {
  0%, 100% { transform: translate(-32px, 0); }
  50%      { transform: translate(32px, -12px); }
}

@keyframes cloudDrift2 {
  0%, 100% { transform: translate(26px, 4px); }
  50%      { transform: translate(-26px, -10px); }
}

@keyframes cloudDrift3 {
  0%, 100% { transform: translate(-20px, 0); }
  50%      { transform: translate(22px, -8px); }
}

/* Birds — a couple of simple chevrons flying slow loops across the sky */
.hero-birds {
  top: 12%;
  height: 40%;
  overflow: visible;
}

.bird {
  position: absolute;
  width: 22px;
  height: 11px;
  opacity: 0.8;
  mix-blend-mode: difference;
}

.bird path { stroke: #fff; }

.bird-1 { top: 18%; animation: fly 34s linear infinite; }
.bird-2 { top: 32%; width: 16px; height: 8px; opacity: 0.65; animation: fly 42s linear infinite; animation-delay: -12s; }
.bird-3 { top: 22%; width: 14px; height: 7px; opacity: 0.6; animation: fly 50s linear infinite; animation-delay: -28s; }

@keyframes fly {
  0%   { transform: translate(-10vw, 0); }
  50%  { transform: translate(55vw, -3vh); }
  100% { transform: translate(120vw, 0); }
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(9, 10, 16, 0.45) 100%);
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  color: var(--ink);
  will-change: transform;
  padding: 0 1.5rem;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}

/* ---- Anagram title — "Marino" is "Romain" with the same six letters ----
   Each of the six letter identities gets its own hue, so the eye can see
   the same palette reappear, reshuffled, in the surname. A one-time
   scramble on load (JS) riffles the letters of "Romain" before they
   settle into "Marino". */
.hero-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.32em;
  perspective: 700px;
}
.hero-title .name-word {
  display: inline-flex;
  white-space: nowrap;
}
.hero-title .ltr {
  display: inline-block;
  will-change: transform, opacity;
  transition: transform 0.18s ease;
}
.hero-title .ltr[data-l="r"] { color: #e8b04b; }
.hero-title .ltr[data-l="o"] { color: #67c8d6; }
.hero-title .ltr[data-l="m"] { color: #b49be8; }
.hero-title .ltr[data-l="a"] { color: #ee8a9e; }
.hero-title .ltr[data-l="i"] { color: #83ce9d; }
.hero-title .ltr[data-l="n"] { color: #edaa6a; }

/* letters mid-scramble: faintly blurred + knocked askew */
.hero-title .ltr.is-shuffling {
  filter: blur(0.6px);
  opacity: 0.85;
}

@keyframes ltrSettle {
  from { opacity: 0; transform: translateY(0.5em) rotateX(-85deg); }
  to   { opacity: 1; transform: none; }
}
.hero-title.settle .name-last .ltr {
  animation: ltrSettle 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero-title.settle .name-last .ltr:nth-child(1) { animation-delay: 0.04s; }
.hero-title.settle .name-last .ltr:nth-child(2) { animation-delay: 0.10s; }
.hero-title.settle .name-last .ltr:nth-child(3) { animation-delay: 0.16s; }
.hero-title.settle .name-last .ltr:nth-child(4) { animation-delay: 0.22s; }
.hero-title.settle .name-last .ltr:nth-child(5) { animation-delay: 0.28s; }
.hero-title.settle .name-last .ltr:nth-child(6) { animation-delay: 0.34s; }

.anagram-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 0.9rem;
  font-size: clamp(0.7rem, 1.2vw, 0.82rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.anagram-note b {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.anagram-swap {
  display: inline-block;
  color: var(--accent);
  font-size: 1.15em;
  animation: anagramSwap 3.6s ease-in-out infinite;
}
.anagram-tail {
  letter-spacing: 0.1em;
  opacity: 0.75;
}
@keyframes anagramSwap {
  0%, 42%, 100% { transform: rotate(0); }
  50%, 92%      { transform: rotate(180deg); }
}

@media (max-width: 560px) {
  .anagram-tail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title.settle .name-last .ltr { animation: none; }
  .anagram-swap { animation: none; }
}

.hero-sub {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,0.85);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.scroll-cue span {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
}

.scroll-cue span::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ============================================================
   ABOUT STRIP
   ============================================================ */
.about {
  padding: 9rem 8vw;
  background: var(--bg);
  display: flex;
  justify-content: center;
}

.about-inner {
  max-width: 42rem;
  text-align: center;
}

/* Stylised circular portrait — a slowly rotating gradient ring (the same
   violet / cyan / amber / rose the suite marks use), a soft accent glow and
   a dashed outer orbit. */
.about-avatar {
  --size: clamp(9rem, 24vw, 13rem);
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto 2.75rem;
  border-radius: 50%;
  isolation: isolate;
}

.about-avatar::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 140deg, #a78bfa, #22d3ee, #fbbf24, #fb7185, #a78bfa);
  box-shadow: 0 0 46px rgba(167, 139, 250, 0.28), 0 18px 40px -12px rgba(0, 0, 0, 0.65);
  z-index: -1;
  animation: avatarSpin 22s linear infinite;
}

.about-avatar::after {
  content: "";
  position: absolute;
  inset: -1.5rem;
  border-radius: 50%;
  border: 1px dashed rgba(243, 241, 234, 0.18);
  z-index: -2;
}

.about-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--bg);
  display: block;
}

/* Halo: two rings that expand and fade out, pulsing continuously once the
   About section has scrolled into view (also triggered on hover). */
.about-avatar-halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(232, 176, 75, 0.75);
  box-shadow: 0 0 22px rgba(232, 176, 75, 0.45);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.about-inner.in-view .about-avatar-halo,
.about-avatar:hover .about-avatar-halo {
  animation: aboutHalo 3s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.about-inner.in-view .about-avatar-halo--2,
.about-avatar:hover .about-avatar-halo--2 {
  animation-delay: 1.5s;
}

@keyframes aboutHalo {
  0%   { opacity: 0.9; transform: scale(1); }
  50%  { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes avatarSpin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .about-avatar::before { animation: none; }
  .about-avatar-halo { animation: none !important; }
}

.about-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.about h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 1.25rem;
}

.about-text {
  color: var(--ink-dim);
  font-size: 1.05rem;
}

.about-harp {
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.45em;
  vertical-align: -0.28em;
  color: var(--accent);
  opacity: 0.85;
}

/* ============================================================
   CV / CAREER TIMELINE — a horizontal history that scrolls
   sideways: work experience sits above the centre axis,
   study below it, both ordered left -> right by start date.
   The dot-nav + scroll-reveal pick this section up automatically
   (it has an id and a .reveal inner), so no JS changes needed.
   ============================================================ */
.career {
  padding: 8rem 0 8.5rem;
  background: var(--bg);
  overflow: hidden;
}

.career-inner { text-align: center; }

.career-inner > .about-kicker,
.career-inner > h2,
.career-lead,
.career-scrollhint,
.career-tags { padding-left: 8vw; padding-right: 8vw; }

.career h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 1.1rem;
}

.career-lead {
  color: var(--ink-dim);
  font-size: 1.02rem;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

/* Scroll viewport */
.timeline {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 176, 75, 0.4) transparent;
}
.timeline::-webkit-scrollbar { height: 8px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb {
  background: rgba(232, 176, 75, 0.35);
  border-radius: 999px;
}

/* The rail: a flex row wider than the viewport, with the axis drawn
   as a full-width pseudo-element through the vertical centre. */
.timeline-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  padding: 0 max(8vw, 2.5rem);
}

.timeline-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    transparent,
    rgba(232, 176, 75, 0.55) 10%,
    rgba(232, 176, 75, 0.55) 90%,
    transparent);
}

/* One milestone column. Fixed height so the card can sit fully above
   (experience) or below (education) the centred node. */
.tl-item {
  position: relative;
  flex: 0 0 16rem;
  height: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
}

.tl-node {
  position: relative;
  z-index: 2;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(232, 176, 75, 0.14), 0 0 16px rgba(232, 176, 75, 0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tl-item--edu .tl-node {
  background: #6ec8dc;
  box-shadow: 0 0 0 5px rgba(110, 200, 220, 0.14), 0 0 16px rgba(110, 200, 220, 0.55);
}

.tl-date {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.tl-item--exp .tl-date { top: calc(50% + 1.1rem); }
.tl-item--edu .tl-date { bottom: calc(50% + 1.1rem); color: #8ed7e8; }

.tl-card {
  position: absolute;
  left: 0;
  right: 0;
  text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.05rem 1.15rem 1.2rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.tl-item--exp .tl-card { bottom: calc(50% + 3.2rem); }
.tl-item--edu .tl-card { top: calc(50% + 3.2rem); }

/* Stalk pointing from the card toward its node. */
.tl-card::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 3rem;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.16);
}
.tl-item--exp .tl-card::after { top: 100%; }
.tl-item--edu .tl-card::after { bottom: 100%; }

.tl-item:hover .tl-card {
  transform: translateY(-4px);
  border-color: rgba(232, 176, 75, 0.5);
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.75);
}
.tl-item--edu:hover .tl-card { border-color: rgba(110, 200, 220, 0.5); }
.tl-item:hover .tl-node { transform: scale(1.25); }

.tl-kind {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.tl-item--edu .tl-kind { color: #8ed7e8; }

.tl-card h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.tl-card h3 sup { font-size: 0.62em; }

.tl-org {
  font-size: 0.82rem;
  color: var(--ink);
  opacity: 0.9;
  margin-bottom: 0.55rem;
}

.tl-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.career-scrollhint {
  margin-top: 1.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 241, 234, 0.4);
}

.career-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 46rem;
  margin: 2.25rem auto 0;
}
.career-tags li {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(243, 241, 234, 0.25);
  border-radius: 999px;
  color: var(--ink-dim);
}

@media (max-width: 620px) {
  .tl-item { flex-basis: 13.5rem; height: 28rem; }
  .tl-card { padding: 0.9rem 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-card, .tl-node { transition: none; }
}

/* ============================================================
   SECTION STAR FIELD — faint, randomly-scattered stars that
   flash and fade independently behind the About and Career
   sections. Three sub-layers, each with its own scatter and
   twinkle rhythm, so the field shimmers star-by-star rather
   than pulsing as one block. Sits behind the content, which is
   lifted with position/z-index below.
   ============================================================ */
.about,
.career { position: relative; }

.about-inner,
.career-inner {
  position: relative;
  z-index: 1;
}

.section-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 6% 12%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 14% 61%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 23% 33%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 31% 82%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 39% 19%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 47% 54%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 56% 8%,  #fff, transparent),
    radial-gradient(1.1px 1.1px at 63% 74%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 71% 41%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 79% 88%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 86% 26%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 93% 63%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 97% 15%, #fff, transparent);
  opacity: 0.14;
  animation: sectionTwinkleA 5.6s ease-in-out infinite;
}
.section-stars::before,
.section-stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.section-stars::before {
  background-image:
    radial-gradient(1.2px 1.2px at 9% 44%,  #fff, transparent),
    radial-gradient(1.1px 1.1px at 19% 17%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 27% 68%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 36% 37%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 44% 91%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 53% 25%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 61% 58%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 69% 11%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 77% 49%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 84% 79%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 91% 33%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 96% 70%, #fff, transparent);
  opacity: 0.1;
  animation: sectionTwinkleB 7.3s ease-in-out infinite;
  animation-delay: -2.4s;
}
.section-stars::after {
  background-image:
    radial-gradient(1.1px 1.1px at 12% 29%, #fff, transparent),
    radial-gradient(1px 1px    at 22% 52%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 34% 9%,  #fff, transparent),
    radial-gradient(1px 1px    at 42% 64%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 51% 39%, #fff, transparent),
    radial-gradient(1px 1px    at 59% 84%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 67% 22%, #fff, transparent),
    radial-gradient(1px 1px    at 74% 57%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 82% 14%, #fff, transparent),
    radial-gradient(1px 1px    at 89% 46%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 95% 77%, #fff, transparent);
  opacity: 0.08;
  animation: sectionTwinkleC 9.1s ease-in-out infinite;
  animation-delay: -5.7s;
}

@keyframes sectionTwinkleA {
  0%, 100% { opacity: 0.14; }
  50%      { opacity: 0.55; }
}
@keyframes sectionTwinkleB {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.4; }
}
@keyframes sectionTwinkleC {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
  .section-stars,
  .section-stars::before,
  .section-stars::after { animation: none; }
}

/* ============================================================
   WORK CATEGORY DIVIDERS — a short dark strip that titles each
   group of project panels (Webapps / Games / Professional).
   ============================================================ */
.work-cat {
  padding: 7rem 8vw;
  background: var(--bg);
  display: flex;
  justify-content: center;
  text-align: center;
}

.work-cat-inner {
  max-width: 40rem;
}

.work-cat-index {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.work-cat h2 {
  font-size: clamp(2rem, 6vw, 3.75rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.work-cat-inner p {
  color: var(--ink-dim);
  font-size: 1.02rem;
  max-width: 34rem;
  margin: 0 auto;
}

/* ============================================================
   PROJECT PANELS — full-bleed fixed-background parallax
   ============================================================ */
.project {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.project-bg {
  position: absolute;
  top: -16%;
  left: 0;
  width: 100%;
  height: 132%;
  background-position: center;
  background-size: cover;
  z-index: 0;
  will-change: transform;
}

/* Topographic contour-line texture — echoes the hero's mountain motif and
   gives every panel a bit of hand-drawn depth instead of a flat gradient. */
.project-pattern {
  position: absolute;
  top: -24%;
  left: 0;
  width: 100%;
  height: 148%;
  z-index: 1;
  opacity: 0.15;
  mix-blend-mode: overlay;
  will-change: transform;
  background-repeat: repeat;
  background-size: 420px 420px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M0,40 Q52,10 105,40 T210,40 T315,40 T420,40'/%3E%3Cpath d='M0,125 Q52,95 105,125 T210,125 T315,125 T420,125'/%3E%3Cpath d='M0,210 Q52,180 105,210 T210,210 T315,210 T420,210'/%3E%3Cpath d='M0,295 Q52,265 105,295 T210,295 T315,295 T420,295'/%3E%3Cpath d='M0,380 Q52,350 105,380 T210,380 T315,380 T420,380'/%3E%3C/g%3E%3C/svg%3E");
}

/* Giant ghost index number sitting behind the copy for editorial depth */
.project-ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(243, 241, 234, 0.14);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.project:nth-child(odd) .project-ghost { right: 2vw; }
.project:nth-child(even) .project-ghost { left: 2vw; }

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,15,20,0.35) 0%, rgba(13,15,20,0.78) 100%);
  z-index: 2;
}

.project-content {
  position: relative;
  z-index: 3;
  width: min(34rem, 88vw);
  padding: 3rem;
  margin: 0 6vw;
}

.project-content.align-right { margin-left: auto; }
.project-content.align-left { margin-right: auto; }

.project-index {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.project-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.project-desc {
  color: var(--ink-dim);
  margin-bottom: 1.5rem;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.project-tags li {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(243,241,234,0.3);
  border-radius: 999px;
  color: var(--ink-dim);
}

.project-link {
  display: inline-block;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
  padding-bottom: 2px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.project-link:hover { opacity: 0.75; transform: translateX(4px); }

/* ============================================================
   UNDOSUS SUITE PANEL — one section, grouped app showcase
   ============================================================ */
/* Taller panel: the suite content can exceed one viewport, so top-align
   it and pad rather than vertically centering a tall block. */
.project--tall {
  align-items: flex-start;
  min-height: auto;
  height: auto;
  padding: 7rem 0;
}

.project-content--suite {
  width: min(72rem, 94vw);
  margin: 0 auto;
  padding: 3rem;
}

/* The intro copy sits on top; the three app cards form a responsive grid
   beneath it — the same visual language as the undosus.com homepage
   cards: a dark surface panel, a hairline gradient edge, a soft accent
   bloom, an icon tile, a mono eyebrow, chips and a tinted CTA button. */
.suite-grid {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

/* Wide screens: the dealt pile of app cards sits to the left of the
   intro copy. Source order is copy-then-deck (copy leads for reading
   order / no-CSS fallback), so swap them visually with `order`. */
@media (min-width: 900px) {
  .suite-grid {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
  .suite-grid .suite-deck {
    order: 1;
    flex: none;
    margin: 0;
  }
  .suite-grid .suite-copy {
    order: 2;
    flex: 1;
  }
}

.suite-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.suite-mark {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.suite-mark svg { display: block; width: 100%; height: 100%; }

.project-content--suite .suite-head .project-title { margin-bottom: 0; }
.suite-copy .project-index { margin-bottom: 0.6rem; }
.suite-copy .project-link { margin-top: 0.5rem; }
.suite-copy { max-width: 46rem; }

/* The three app cards sit in a stacked, offset pile — a dealt hand of
   cards. Each card behind the front one peeks up ~3.2rem (its icon tile
   shows) and is nudged aside and tilted. Hovering or focusing a card
   floats it to the top of the pile, straight and slightly enlarged;
   every hover move is upward, so the card never slides out from under
   the pointer (no flicker). Coarse-pointer / narrow screens get a plain
   readable column instead — see the fallback at the end of the block. */
.suite-deck {
  position: relative;
  width: min(19rem, 82vw);
  margin: 2rem auto 0.5rem;
  min-height: 37rem;
}

.suite-app {
  --c1: #a78bfa;
  --c2: #22d3ee;
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border-radius: 20px;
  background: #12161f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
              filter 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.suite-app[data-app="beatsy"]  { --c1: #f97316; --c2: #fbbf24; }
.suite-app[data-app="sightly"] { --c1: #ec4899; --c2: #fb7185; }

/* Resting pile: front card lowest, the other two peeking above it. */
.suite-app:nth-child(1) { transform: translateX(-40%) translateY(11rem) rotate(-2deg);  z-index: 3; }
.suite-app:nth-child(2) { transform: translateX(-50%) translateY(5.5rem) rotate(1.5deg); z-index: 2; }
.suite-app:nth-child(3) { transform: translateX(-60%) translateY(0)      rotate(3.4deg); z-index: 1; }

/* Dim the cards not being read while the pile is active. */
.suite-deck:hover .suite-app:not(:hover):not(:focus-within),
.suite-deck:focus-within .suite-app:not(:hover):not(:focus-within) {
  filter: brightness(0.78) saturate(0.88);
}

/* Hairline gradient edge (mask-composite border trick). */
.suite-app::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--c1) 60%, transparent), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
}

/* Soft accent bloom, upper-right. */
.suite-app::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c1) 60%, transparent), transparent 70%);
  filter: blur(12px);
  opacity: 0.3;
  z-index: -1;
  transition: opacity 0.35s ease;
}

/* Float the pointed-at card to the top of the pile — always an upward
   move, so the pointer stays over it. Placed after the :nth-child rules
   so it wins the equal-specificity tie. */
.suite-app:hover,
.suite-app:focus-within {
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1.03);
  z-index: 9;
  filter: none;
  border-color: color-mix(in srgb, var(--c1) 45%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 30px 64px -22px color-mix(in srgb, var(--c1) 55%, transparent);
}
.suite-app:hover::after,
.suite-app:focus-within::after { opacity: 0.5; }

.suite-app-logo {
  display: block;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(155deg, #171c27, #0d1119);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  margin-bottom: 1.15rem;
}
.suite-app-logo svg { display: block; width: 100%; height: 100%; }

.suite-app-eyebrow {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c1);
  margin-bottom: 0.5rem;
}

.suite-app h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.suite-app > p {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.suite-app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.15rem;
}
.suite-app-chips span {
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: #171c27;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink-dim);
}

.suite-app-link {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--c1) 20%, transparent),
    color-mix(in srgb, var(--c2) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--c1) 38%, rgba(255, 255, 255, 0.09));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  transition: gap 0.25s ease;
}
.suite-app-link svg { width: 15px; height: 15px; flex: none; transition: transform 0.25s ease; }
.suite-app-link:hover { gap: 1.1rem; }
.suite-app-link:hover svg { transform: translateX(3px); }

.project-desc a {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .suite-app, .suite-app::after, .suite-app-link, .suite-app-link svg { transition: none; }
}

/* Touch / narrow screens: the pile can't be hovered apart, so lay the
   cards out as a plain readable column. */
@media (hover: none), (max-width: 640px) {
  .suite-deck {
    width: min(22rem, 92vw);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  .suite-app,
  .suite-app:nth-child(1),
  .suite-app:nth-child(2),
  .suite-app:nth-child(3) {
    position: static;
    width: 100%;
    transform: none;
  }
  .suite-deck:hover .suite-app:not(:hover):not(:focus-within),
  .suite-deck:focus-within .suite-app:not(:hover):not(:focus-within) { filter: none; }
  .suite-app:hover,
  .suite-app:focus-within { transform: translateY(-4px) scale(1); }
}

@media (max-width: 620px) {
  .project-content--suite { padding: 2rem 1.5rem; }
}

/* ============================================================
   GAMES PANEL — itch.io game-jam cards. Intro copy on top, a
   three-up grid of cover-art cards beneath it. Same surface
   language as the suite cards (dark panel, hairline edge, accent
   lift on hover) but each card is a single link, cover-art led.
   ============================================================ */
.project-content--games {
  width: min(72rem, 94vw);
  margin: 0 auto;
  padding: 3rem;
}

.games-head {
  max-width: 46rem;
  margin-bottom: 2.75rem;
}
.games-head .project-index { margin-bottom: 0.6rem; }
.games-head .project-desc { margin-bottom: 1rem; }
.games-head em { font-style: normal; color: var(--ink); }

.games-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
}
.games-links a {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}
.games-links a:hover { opacity: 0.7; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
}

.game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  background: #12161f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.3, 1),
              border-color 0.35s ease, box-shadow 0.35s ease;
}
.game-card:hover,
.game-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, rgba(255, 255, 255, 0.16));
  box-shadow: 0 26px 54px -24px color-mix(in srgb, var(--accent) 55%, transparent);
}

.game-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 63 / 50;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.game-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem;
}

.game-card-genre {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.game-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.55rem;
}

.game-card p {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.game-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
}
.game-card-meta span {
  font-size: 0.7rem;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  background: #171c27;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--ink-dim);
}

.game-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--accent);
}
.game-card-cta svg { width: 14px; height: 14px; flex: none; transition: transform 0.25s ease; }
.game-card:hover .game-card-cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .game-card, .game-card-cta svg { transition: none; }
  .game-card:hover, .game-card:focus-visible { transform: none; }
}

@media (max-width: 860px) {
  .games-grid { grid-template-columns: 1fr; max-width: 24rem; }
  .games-head { margin-bottom: 2rem; }
}

@media (max-width: 620px) {
  .project-content--games { padding: 2rem 1.5rem; }
}

/* ============================================================
   PROFESSIONAL PANEL — square "stack" tiles: a wrapped row of
   small cards, each a monochrome brand glyph over a label, on a
   dark surface that lifts and tints to the accent on hover.
   ============================================================ */
.stack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0.25rem 0 1.9rem;
}

.stack-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 5.4rem;
  height: 5.4rem;
  padding: 0.55rem;
  border-radius: 14px;
  background: rgba(18, 22, 31, 0.72);
  border: 1px solid rgba(243, 241, 234, 0.14);
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.3, 1),
              border-color 0.3s ease, background 0.3s ease;
}
.stack-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(18, 22, 31, 0.92);
}

.stack-ico {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--ink);
  opacity: 0.9;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.stack-ico svg { display: block; width: 100%; height: 100%; }
.stack-tile:hover .stack-ico { color: var(--accent); opacity: 1; }

.stack-tile > span:last-child {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--ink-dim);
}

@media (prefers-reduced-motion: reduce) {
  .stack-tile { transition: none; }
  .stack-tile:hover { transform: none; }
}

@media (max-width: 620px) {
  .stack-tile { width: 4.7rem; height: 4.7rem; }
  .stack-ico { width: 1.4rem; height: 1.4rem; }
}

/* ============================================================
   MEALBOX PANEL — "rakugaki" doodle cards
   The vocabulary is lifted straight from the app's own hand-drawn
   skin: warm dot-grid paper, a border drawn twice by hand (dashed
   outer + tilted inner stroke), wobbly asymmetric radii, sparkle
   stickers, gentle tilts and Shantell Sans hand-lettering.
   ============================================================ */
.project-content--mealbox {
  width: min(62rem, 94vw);
  margin: 0 auto;
  padding: 3rem;
}

.mb-grid {
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
}

@media (min-width: 880px) {
  .mb-grid {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
  .mb-copy  { flex: 1 1 auto; }
  .mb-stack { flex: 0 0 44%; }
}

/* ---- the doodle card stack ---- */
.mb-stack {
  --rk-paper: #fffdf6;
  --rk-ink: #16181a;
  --rk-ink-soft: #4b5259;
  --rk-green: #2f9e64;
  --rk-green-200: #bce6cc;
  --rk-green-100: #dcf2e3;
  --rk-line: #e3ded1;
  --rk-font: 'Shantell Sans', 'Bradley Hand', 'Segoe Print', cursive;
  --rk-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.1 6.6 4.8 10.3 12 12-7.2 1.7-10.9 5.4-12 12-1.1-6.6-4.8-10.3-12-12 7.2-1.7 10.9-5.4 12-12z'/%3E%3C/svg%3E");
  --rk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f9e64' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 6L20 5'/%3E%3C/svg%3E");
  position: relative;
  width: min(21rem, 82vw);
  margin: 2.75rem auto 1.5rem;
}

.mb-card {
  padding: 1.4rem 1.5rem 1.6rem;
  background-color: var(--rk-paper);
  background-image: radial-gradient(var(--rk-line) 1.3px, transparent 1.3px);
  background-size: 17px 17px;
  background-position: -8px -8px;
  border: 2px dashed var(--rk-green-200);
  border-radius: 22px 14px 20px 12px / 14px 20px 12px 22px;
  color: var(--rk-ink-soft);
  font-family: var(--rk-font);
  box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.55);
}

/* second pen stroke — mirrored wobble, slight rotation */
.mb-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--rk-green-200);
  border-radius: 12px 20px 14px 22px / 22px 14px 20px 12px;
  opacity: 0.5;
  transform: rotate(0.7deg);
  pointer-events: none;
}

/* twinkling sparkle scribble, upper-right */
.mb-card::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 15px;
  width: 20px;
  height: 20px;
  background: var(--rk-green);
  -webkit-mask: var(--rk-sparkle) center / contain no-repeat;
  mask: var(--rk-sparkle) center / contain no-repeat;
  animation: mbTwinkle 3.4s ease-in-out infinite;
  pointer-events: none;
}

.mb-card--list {
  position: relative;
  z-index: 2;
  transform: rotate(-2.5deg);
}
.mb-card--recipe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  transform: translate(1.9rem, -1.7rem) rotate(5deg);
}
.mb-card--recipe::after { animation-delay: 1.1s; }

.mb-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.mb-badge {
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--rk-green);
  border-radius: 62% 38% 55% 45% / 55% 52% 48% 45%;
  transform: rotate(-6deg);
  box-shadow: 0 0 0 3px var(--rk-paper), 0 0 0 5px var(--rk-green-200);
}
.mb-badge svg {
  width: 1.15rem;
  height: 1.15rem;
  transform: rotate(6deg);
}

.mb-card-head h4 {
  font-family: var(--rk-font);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--rk-ink);
}

.mb-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mb-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--rk-ink);
}
.mb-check {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px dashed var(--rk-green);
  border-radius: 7px 4px 6px 3px / 3px 6px 4px 7px;
}
.mb-list li.done .mb-check {
  border-style: solid;
  background-color: var(--rk-green-100);
  background-image: var(--rk-check);
  background-size: 90% 90%;
  background-position: center;
  background-repeat: no-repeat;
}
.mb-list li.done span:last-child {
  text-decoration: line-through wavy var(--rk-green);
  color: var(--rk-ink-soft);
  opacity: 0.7;
}

.mb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mb-pill {
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  color: var(--rk-ink-soft);
  border: 1.5px dashed var(--rk-green);
  border-radius: 40px 16px 34px 18px / 18px 34px 16px 40px;
}

@keyframes mbTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(-8deg); }
  50%      { opacity: 0.9; transform: scale(1) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mb-card::after { animation: none; opacity: 0.7; }
}

@media (max-width: 620px) {
  .project-content--mealbox { padding: 2rem 1.5rem; }
}

/* Distinct placeholder "mesh gradient" per project — layered radial
   highlights over a base linear-gradient, for a richer, less flat field
   than a single gradient. Swap for a real image later by replacing the
   whole background-image with url('../assets/your-image.jpg'). */
.proj-1 .project-bg {
  background-image:
    radial-gradient(at 18% 22%, rgba(150, 195, 230, 0.55) 0px, transparent 55%),
    radial-gradient(at 85% 8%, rgba(76, 126, 166, 0.65) 0px, transparent 50%),
    radial-gradient(at 15% 88%, rgba(15, 25, 38, 0.85) 0px, transparent 55%),
    radial-gradient(at 92% 92%, rgba(100, 150, 190, 0.4) 0px, transparent 55%),
    linear-gradient(155deg, #1f3a5f, #101c2c 75%);
}
.proj-2 .project-bg {
  background-image:
    radial-gradient(at 18% 20%, rgba(150, 225, 195, 0.5) 0px, transparent 55%),
    radial-gradient(at 86% 10%, rgba(76, 166, 132, 0.6) 0px, transparent 50%),
    radial-gradient(at 14% 90%, rgba(12, 28, 22, 0.85) 0px, transparent 55%),
    radial-gradient(at 90% 90%, rgba(100, 190, 155, 0.4) 0px, transparent 55%),
    linear-gradient(155deg, #1f3d33, #0d1b16 75%);
}
.proj-3 .project-bg {
  background-image:
    radial-gradient(at 20% 18%, rgba(230, 160, 190, 0.5) 0px, transparent 55%),
    radial-gradient(at 88% 12%, rgba(166, 76, 110, 0.6) 0px, transparent 50%),
    radial-gradient(at 12% 90%, rgba(30, 12, 22, 0.85) 0px, transparent 55%),
    radial-gradient(at 90% 88%, rgba(180, 100, 130, 0.4) 0px, transparent 55%),
    linear-gradient(155deg, #3d1f2e, #170d13 75%);
}
.proj-4 .project-bg {
  background-image:
    radial-gradient(at 20% 18%, rgba(230, 200, 150, 0.5) 0px, transparent 55%),
    radial-gradient(at 88% 10%, rgba(166, 132, 76, 0.6) 0px, transparent 50%),
    radial-gradient(at 14% 90%, rgba(30, 22, 12, 0.85) 0px, transparent 55%),
    radial-gradient(at 90% 88%, rgba(190, 155, 100, 0.4) 0px, transparent 55%),
    linear-gradient(155deg, #3d321f, #1c150c 75%);
}
.proj-5 .project-bg {
  background-image:
    radial-gradient(at 18% 20%, rgba(200, 165, 230, 0.5) 0px, transparent 55%),
    radial-gradient(at 86% 10%, rgba(122, 76, 166, 0.6) 0px, transparent 50%),
    radial-gradient(at 14% 90%, rgba(22, 12, 30, 0.85) 0px, transparent 55%),
    radial-gradient(at 90% 90%, rgba(160, 110, 195, 0.4) 0px, transparent 55%),
    linear-gradient(155deg, #2a1f3d, #130d1c 75%);
}
.proj-6 .project-bg {
  background-image:
    radial-gradient(at 18% 20%, rgba(150, 200, 230, 0.5) 0px, transparent 55%),
    radial-gradient(at 86% 10%, rgba(76, 132, 166, 0.6) 0px, transparent 50%),
    radial-gradient(at 14% 90%, rgba(12, 20, 30, 0.85) 0px, transparent 55%),
    radial-gradient(at 90% 90%, rgba(100, 160, 190, 0.4) 0px, transparent 55%),
    linear-gradient(155deg, #1f2e3d, #0c141d 75%);
}

/* ============================================================
   SCROLL-REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 8vw;
  background: linear-gradient(180deg, var(--bg), #05060a);
}

.contact h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.75rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: center;
  margin-bottom: 3rem;
}

.social-links a {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  transition: color 0.2s ease;
}

.social-links a:hover { color: var(--ink); }

.footer-note {
  font-size: 0.8rem;
  color: rgba(243,241,234,0.4);
}

/* ============================================================
   RESPONSIVE / ACCESSIBILITY
   ============================================================ */
@media (max-width: 800px) {
  .project-content { margin: 0 auto; }
  .site-header { padding: 20px 6vw; }
  .project-ghost { opacity: 0.5; font-size: clamp(6rem, 34vw, 12rem); }
  .hero-birds { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-layer, .hero-content, .project-bg, .project-pattern, .project-ghost { transform: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span::after,
  .hero-stars,
  .hero-stars::before,
  .hero-stars::after,
  .shooting-star,
  .cloud-1, .cloud-2, .cloud-3, .cloud-4, .cloud-5,
  .bird-1, .bird-2, .bird-3 {
    animation: none;
  }
  .shooting-star { display: none; }
}