/* RetroByte by Igor Ovsyannykov (via 1001fonts.com), free for personal use */
@font-face {
  font-family: "RetroByte";
  src: url("assets/fonts/RetroByte.ttf") format("truetype");
  font-display: swap;
}

/* ───────────── Tokens ───────────── */
:root {
  --pink: #FAC5F4;
  --mint: #C0EDE6;
  --yellow: #FFFDC9;
  --lavender: #E6D1FF;

  --base: #1F1F1F;
  --surface: #272727;
  --surface-hover: #2D2D2D;
  --border: #353535;
  --text: #EDEDED;
  --muted: #A3A3A3;

  --radius: 16px;
  --max: 980px;
  --sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Princess Sofia", "Brush Script MT", cursive;
  --title: "RetroByte", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--lavender); outline-offset: 3px; border-radius: 6px; }

/* ───────────── Title page ───────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--base);
  isolation: isolate;
}

/* ───────────── Halftone background ─────────────
   How it works: a grid of soft white→black cells is multiplied by a slowly
   drifting grey "light field". A strong contrast filter snaps each cell into
   a hard dot, big where the field is bright and gone where it's dark. The
   white-on-black result is tinted pink and screened onto the dark page.
   Knobs: --ht-size (grid spacing), --ht-color, --ht-strength, --ht-speed. */
.hero {
  --ht-size: 14px;
  --ht-color: var(--pink);
  --ht-strength: .55;     /* how bright the dots are on the dark page */
  --ht-speed: 1;          /* 1 = one full drift cycle every 24s */
}
.halftone {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
  isolation: isolate;
  mix-blend-mode: screen;
  opacity: var(--ht-strength);
  pointer-events: none;
  /* clear the dots behind the name and photo, and toward the bottom */
  -webkit-mask: radial-gradient(ellipse 46% 34% at 50% 50%, transparent 35%, #000 100%),
                linear-gradient(#000 70%, transparent);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(ellipse 46% 34% at 50% 50%, transparent 35%, #000 100%) intersect,
                linear-gradient(#000 70%, transparent);
}
.halftone__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.halftone--gl { opacity: .9; }
.halftone--gl .halftone__ink,
.halftone--gl .halftone__tint { display: none; }
.halftone__ink {
  position: absolute; inset: 0;
  background: #000;
  overflow: hidden;
  filter: brightness(1.25) contrast(28);
}
.halftone__field {
  position: absolute;
  left: -50%; top: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(circle at 32% 38%, rgba(255,255,255,.95), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 68% 62%, rgba(255,255,255,.85), rgba(255,255,255,0) 20%),
    repeating-radial-gradient(circle at 50% 50%, #8a8a8a 0, #2a2a2a 110px, #8a8a8a 220px),
    repeating-linear-gradient(35deg, #5a5a5a 0, #1c1c1c 160px, #5a5a5a 320px);
  background-blend-mode: screen, screen, screen, normal;
  animation: ht-drift calc(24s / var(--ht-speed)) ease-in-out infinite alternate;
  will-change: transform;
}
/* a pool of light that follows the cursor, so dots swell around it */
.halftone__spot {
  position: absolute; inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
}
.halftone.is-pointer .halftone__spot { opacity: 1; }
.halftone__grid {
  position: absolute; inset: 0;
  background: radial-gradient(closest-side, #fff, #000) 0 0 / var(--ht-size) var(--ht-size);
  mix-blend-mode: multiply;
}
.halftone__tint {
  position: absolute; inset: 0;
  background: var(--ht-color);
  mix-blend-mode: multiply;
}
@keyframes ht-drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-8%, 5%) rotate(12deg) scale(1.08); }
  100% { transform: translate(6%, -6%) rotate(-10deg) scale(.96); }
}
@media (forced-colors: active) { .halftone { display: none; } }

.hero__shade {
  position: absolute; inset: 0;
  background: var(--base);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__content {
  display: flex;
  flex-direction: row;             /* photo on the left, name on the right */
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  padding: 0 16px;
  will-change: transform, opacity;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.hero__text .hero__name { margin-top: 0; }
/* the photo, like a print pinned to the page */
.pinned {
  position: relative;
  flex: none;
  margin: 0;
  width: clamp(160px, 23vw, 250px);
  transform: rotate(-3deg);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.pinned:hover { transform: rotate(-1.5deg) translateY(-3px); }
.hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 1177;
  object-fit: cover;
  border-radius: 2px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 6px 12px rgba(0,0,0,.25),
    0 18px 34px rgba(0,0,0,.35);
  transition: box-shadow .45s ease;
}
.pinned:hover .hero__photo {
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 10px 18px rgba(0,0,0,.28),
    0 26px 44px rgba(0,0,0,.4);
}
/* safety pin clipped over the top-left corner, leaning left */
.pinned__pin {
  position: absolute;
  width: 42%;
  height: auto;
  top: -10.6%;
  left: -10%;
  transform: rotate(0deg);
  transform-origin: 20% 10%;
  filter: drop-shadow(1px 3px 2px rgba(0,0,0,.45)) drop-shadow(3px 8px 6px rgba(0,0,0,.25));
  pointer-events: none;
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.pinned:hover .pinned__pin { transform: rotate(-6deg); }
.hero__name {
  margin: 18px 0 10px;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 6.5rem);
  line-height: 1.15;
  color: var(--pink);
  letter-spacing: .01em;
}

.hero__tagline {
  margin: -4px 0 20px;
  font-family: var(--title);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: .04em;
  color: var(--text);
  opacity: .8;
  -webkit-font-smoothing: none;
}
.socials { display: flex; flex-wrap: wrap; gap: 14px; }
.socials a {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.socials a:hover { transform: translateY(-3px) scale(1.06); background: var(--pink); color: var(--base); border-color: var(--pink); }
.socials svg { width: 21px; height: 21px; fill: currentColor; }
.socials a[aria-label="Email"] svg { fill: none; }

.hero__scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  width: 40px; height: 40px;
  margin-left: -20px;
  color: var(--text);
  opacity: .85;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ───────────── Nav ───────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px max(16px, calc((100vw - var(--max)) / 2));
  background: rgba(31,31,31,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.nav.is-visible { transform: translateY(0); }
.nav__home { font-family: var(--script); font-size: 1.9rem; line-height: 1; text-decoration: none; color: var(--pink); }
.nav__links { display: flex; gap: 22px; font-size: .9rem; font-weight: 400; }
.nav__links a { text-decoration: none; color: var(--muted); transition: color .2s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }

/* ───────────── Sections ───────────── */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 88px 16px 24px;
}
.section__title {
  display: inline-block;
  margin: 0 0 32px;
  font-family: var(--title);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: .02em;
  position: relative;
  -webkit-font-smoothing: none;   /* keep the pixel edges crisp */
}
.subhead {
  margin: 36px 0 16px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.subhead:first-of-type { margin-top: 0; }

/* About */
.about { max-width: 680px; display: grid; gap: 14px; font-size: 1.05rem; }
.about__hello { font-size: 1.35rem; font-weight: 500; color: var(--pink); }
/* typewriter: the untyped part stays in place but invisible, so nothing shifts */
.tw__rest { visibility: hidden; }
.tw__cursor {
  display: inline-block;
  width: 2px; height: 1.1em;
  margin: 0 1px 0 2px;
  vertical-align: -0.15em;
  background: var(--pink);
  border-radius: 1px;
  animation: tw-blink 1s steps(1) infinite;
}
.tw--typing .tw__cursor { animation: none; }   /* solid while typing, blinks when idle */
@keyframes tw-blink { 50% { opacity: 0; } }
.about em { font-style: italic; color: var(--text); }
.link { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(192,237,230,.4); transition: border-color .2s; }
.link:hover { border-color: var(--mint); }

/* Shared text bits */
.role { font-weight: 500; font-size: 1.05rem; color: var(--text); }
.at { color: var(--muted); font-weight: 400; }
.at--block { font-size: .92rem; margin-top: 2px; }
.desc { color: #C9C9C9; font-size: .95rem; margin-top: 4px; }
.date { color: var(--muted); font-size: .85rem; margin-top: 10px; }
.when { color: var(--text); opacity: .5; font-size: .85rem; margin-top: 1px; }

/* Timeline */
.timeline { position: relative; display: grid; gap: 26px; padding-left: 26px; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--pink), var(--lavender), var(--mint));
  border-radius: 2px; opacity: .6;
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: ""; position: absolute; left: -26px; top: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--base); border: 2px solid var(--pink);
}
.timeline__item:nth-child(2)::before { border-color: var(--lavender); }
.timeline__item:nth-child(3)::before { border-color: var(--mint); }

/* Cards */
.cards { display: grid; gap: 18px; }
.cards--two  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards--grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover { transform: translateY(-4px); background: var(--surface-hover); border-color: #4a4a4a; }
.card .tags { margin-top: 16px; }

/* Project cards: rotating pastel accent on hover */
.project { position: relative; overflow: hidden; }
.project::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--accent, var(--pink));
  opacity: .0; transition: opacity .25s;
}
.project:hover::before { opacity: 1; }
.project:nth-child(4n+2) { --accent: var(--mint); }
.project:nth-child(4n+3) { --accent: var(--yellow); }
.project:nth-child(4n+4) { --accent: var(--lavender); }
.project__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.project__name { margin: 0; font-size: 1.15rem; font-weight: 600; }
.gh {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  border: 1px solid var(--border);
  transition: color .2s, border-color .2s, background .2s;
}
.gh svg { width: 18px; height: 18px; fill: currentColor; }
.gh:hover { color: var(--base); background: var(--accent, var(--pink)); border-color: transparent; }

/* ───────────── Tags ───────────── */
/* Highlighter style: each phrase starts blurred and dim, sharpens, then a
   pastel marker swipes in behind it from the left. The text turns dark at
   exactly the same spot as the swipe (a matching gradient clipped to the
   letters), so it always stays readable. Triggered by script.js. */
.tags { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.tag {
  --rgb: 230, 209, 255;
  --sweep: 1s cubic-bezier(.65, 0, .35, 1) calc(.4s + var(--i, 0) * 45ms);
  font-family: "Outfit", var(--sans);
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.3;
  border-radius: 3px;
  /* the marker */
  background: linear-gradient(rgb(var(--rgb)), rgb(var(--rgb))) no-repeat left center / 0% 100%;
  filter: blur(8px);
  opacity: .3;
  transition:
    filter .8s ease calc(var(--i, 0) * 45ms),
    opacity .8s ease calc(var(--i, 0) * 45ms),
    background-size var(--sweep);
}
.tag__text {                       /* the letters: light, turning dark under the marker */
  display: block;
  padding: 1px 6px;
  color: transparent;
  background:
    linear-gradient(var(--base), var(--base)) no-repeat left center / 0% 100%,
    linear-gradient(var(--text), var(--text));
  background-origin: border-box;
  -webkit-background-clip: text;
          background-clip: text;
  transition: background-size var(--sweep);
}
.tags.is-lit .tag,
.no-js .tag { filter: none; opacity: 1; background-size: 100% 100%; }
.tags.is-lit .tag__text,
.no-js .tag__text { background-size: 100% 100%, auto; }
.tag--ml   { --rgb: 250, 197, 244; }
.tag--sys  { --rgb: 192, 237, 230; }
.tag--data { --rgb: 255, 253, 201; }
.tag--web  { --rgb: 230, 209, 255; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: -8px 0 28px; font-size: .85rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot--ml { background: var(--pink); }
.dot--sys { background: var(--mint); }
.dot--data { background: var(--yellow); }
.dot--web { background: var(--lavender); }

.skills { display: grid; gap: 30px; }
.skills .subhead { margin: 0 0 12px; }

/* ───────────── Footer ───────────── */
.footer { text-align: center; padding: 80px 16px 40px; color: #777; font-size: .85rem; }

/* ───────────── Scroll reveal ───────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ───────────── Small screens ───────────── */
@media (max-width: 640px) {
  .nav__links { gap: 14px; font-size: .8rem; overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__home { display: none; }
  .nav { justify-content: center; }
  .section { padding-top: 64px; }
  .socials a { width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .hero__content { flex-direction: column; text-align: center; gap: 18px; }
  .hero__text { align-items: center; }
  .socials { justify-content: center; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .halftone__field { animation: none; }
  .hero__scroll { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .card:hover { transition: none; transform: none; }
  .tag { transition: none; filter: none; opacity: 1; background-size: 100% 100%; }
  .tag__text { transition: none; background-size: 100% 100%, auto; }
}

/* ───────────── Projects: album rail (rail.js) ───────────── */
.rail { --cover: clamp(170px, 30vw, 260px); position: relative; outline: none; overflow-x: clip; padding-bottom: 4px; }
.rail:focus-visible { outline: 2px solid var(--lavender); outline-offset: 8px; border-radius: 12px; }
.rail.is-ready .rail__items { display: none; }

/* without JavaScript the projects show as a simple list */
.rail__items { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rail__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.rail__item h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; }
.rail__item p { color: #C9C9C9; font-size: .95rem; }
.rail__item a { display: inline-block; margin-top: 10px; color: var(--mint); }

.rail__stage {
  position: relative;
  height: calc(var(--cover) * 1.12);
  perspective: 1100px;
  perspective-origin: 50% 45%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}
.rail__stage:active { cursor: grabbing; }
.rail__card {
  --cc: var(--pink);
  --shade: 0;
  position: absolute;
  left: 50%; top: calc(var(--cover) * .04);
  width: var(--cover); height: var(--cover);
  margin-left: calc(var(--cover) / -2);
  transition: opacity .3s ease;
  will-change: transform;
}
.cover--pink     { --cc: var(--pink); }
.cover--mint     { --cc: var(--mint); }
.cover--yellow   { --cc: var(--yellow); }
.cover--lavender { --cc: var(--lavender); }

/* the sleeve */
.rail__cover {
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cc);
  color: #1F1F1F;
  box-shadow: 0 22px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.25);
}
.rail__cover::before {                      /* the pattern */
  content: "";
  position: absolute; inset: 0;
  opacity: .9;
}
.rail__cover::after {                       /* darkens side covers */
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: #000;
  opacity: var(--shade);
  transition: opacity .25s ease;
}
.rail__card:hover .rail__cover::after { opacity: 0; }
.rail__card.is-active .rail__cover { cursor: pointer; }
/* a small arrow on the front cover, so it reads as clickable */
.cover__open {
  position: absolute; z-index: 3;
  right: 12px; bottom: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1F1F1F; color: var(--cc);
  font-family: "Outfit", var(--sans); font-size: 1rem; line-height: 1;
  opacity: 0; transform: scale(.7);
  transition: opacity .25s ease, transform .25s ease;
}
.rail__card.is-active .cover__open { opacity: .85; transform: none; }
.rail__card.is-active:hover .cover__open { opacity: 1; transform: scale(1.1); }
.cover__no, .cover__artist, .cover__title { position: absolute; z-index: 1; }
.cover__no { top: 12px; left: 14px; font-family: "Outfit", var(--sans); font-size: .8rem; font-weight: 400; }
.cover__artist { top: 12px; right: 14px; font-family: "Outfit", var(--sans); font-size: .7rem; letter-spacing: .06em; text-transform: lowercase; opacity: .75; }
.cover__title {
  left: 14px; right: 14px; bottom: 12px;
  font-family: var(--title);
  font-size: calc(var(--cover) * .13);
  line-height: .95;
  -webkit-font-smoothing: none;
  text-shadow: 0 0 0 transparent;
}
.cover__title { background: var(--cc); padding: 4px 6px 2px; margin: 0 -6px; width: fit-content; max-width: 100%; }

/* cover patterns */
.motif--dots::before {
  background: radial-gradient(circle, #1F1F1F 30%, transparent 32%) 0 0 / 16px 16px;
  -webkit-mask: radial-gradient(circle at 75% 25%, #000, transparent 70%);
          mask: radial-gradient(circle at 75% 25%, #000, transparent 70%);
}
.motif--grid::before {
  background:
    linear-gradient(#1F1F1F 1.5px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(90deg, #1F1F1F 1.5px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(160deg, #000 10%, transparent 75%);
          mask: linear-gradient(160deg, #000 10%, transparent 75%);
}
.motif--rings::before {
  background: repeating-radial-gradient(circle at 72% 38%, #1F1F1F 0 2px, transparent 2px 13px);
  -webkit-mask: radial-gradient(circle at 72% 38%, #000 30%, transparent 62%);
          mask: radial-gradient(circle at 72% 38%, #000 30%, transparent 62%);
}
.motif--stripes::before {
  background: repeating-linear-gradient(-45deg, #1F1F1F 0 7px, transparent 7px 18px);
  -webkit-mask: linear-gradient(200deg, #000 20%, transparent 70%);
          mask: linear-gradient(200deg, #000 20%, transparent 70%);
}
.motif--arch::before {
  background:
    radial-gradient(circle at 50% 100%, transparent 0 22%, #1F1F1F 22.5% 30%, transparent 30.5% 38%, #1F1F1F 38.5% 46%, transparent 46.5%),
    radial-gradient(circle at 76% 22%, #1F1F1F 0 7%, transparent 7.5%);
}
.motif--checker::before {
  background: conic-gradient(#1F1F1F 25%, transparent 0 50%, #1F1F1F 0 75%, transparent 0) 0 0 / 26px 26px;
  -webkit-mask: linear-gradient(135deg, #000 15%, transparent 65%);
          mask: linear-gradient(135deg, #000 15%, transparent 65%);
}
.motif--bars::before {                      /* a barcode, for the barcode scanner */
  background: repeating-linear-gradient(90deg, #1F1F1F 0 3px, transparent 3px 6px, #1F1F1F 6px 11px, transparent 11px 14px, #1F1F1F 14px 15px, transparent 15px 20px);
  inset: 22% 14% 40% 14%;
}

.motif--news::before {                      /* newspaper columns */
  background: repeating-linear-gradient(#1F1F1F 0 3px, transparent 3px 10px);
  inset: 16% 14% 40% 14%;
  -webkit-mask: linear-gradient(90deg, #000 0 46%, transparent 46% 54%, #000 54%);
          mask: linear-gradient(90deg, #000 0 46%, transparent 46% 54%, #000 54%);
}

/* caption + controls */
.rail__caption { text-align: center; max-width: 560px; margin: 26px auto 0; min-height: 96px; }
.rail__caption.is-in { animation: rail-caption .45s ease both; }
@keyframes rail-caption { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rail__title { margin: 0; font-family: "Outfit", var(--sans); font-weight: 400; font-size: 1.45rem; color: var(--text); }
.rail__desc { margin-top: 6px; color: #BDBDBD; font-size: .95rem; }

.rail__ruler { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.rail__ticks { display: flex; align-items: flex-end; gap: 10px; height: 22px; }
.rail__tick {
  width: 3px; height: 10px; padding: 0; border: 0; border-radius: 2px;
  background: #555; cursor: pointer;
  transition: height .25s ease, background .25s ease;
}
.rail__tick:hover { background: #888; }
.rail__tick.is-active { height: 22px; background: var(--pink); }
.rail__tick::before { content: ""; display: block; margin: -8px -6px; height: calc(100% + 16px); }   /* bigger tap target */
.rail__arrow {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.rail__arrow:hover { background: var(--pink); color: var(--base); }

@media (prefers-reduced-motion: reduce) {
  .rail__card { transition: none; }
}