/* ==========================================================================
   American Cat Breeders Association (fifeusa.org) — homepage (scroll story)
   ========================================================================== */

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: var(--panel-blue);
  transition: transform 0.9s var(--ease-out), opacity 0.6s ease;
}
.loader-inner { display: grid; justify-items: center; gap: 44px; }
.loader-cat { position: relative; width: clamp(150px, 18vw, 210px); }
.loader-cat svg { width: 100%; height: auto; image-rendering: pixelated; }
.loader-cat .px { fill: var(--cat); }
.loader-cat .px-eye { fill: var(--panel-blue); }
.loader-cat svg { animation: loaderBreath 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes loaderBreath { 50% { transform: scaleY(1.04); } }
.loader-z {
  position: absolute; left: 4%; top: -18%;
  font-family: var(--font-mono); font-size: 16px; color: var(--ink);
}
.loader-z span { position: absolute; opacity: 0; animation: zzz 2.4s steps(6) infinite; }
.loader-z span:nth-child(2) { animation-delay: 0.8s; font-size: 20px; }
.loader-z span:nth-child(3) { animation-delay: 1.6s; font-size: 24px; }
.loader-bar {
  display: flex; justify-content: space-between; gap: 80px;
  width: clamp(200px, 22vw, 260px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink);
}
.loader.is-done { transform: translateY(-100%); }
.loader.is-gone { display: none; }
.no-loader .loader { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero-pin {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  padding: calc(var(--header-h) + 6px) var(--gutter) 22px;
  overflow: hidden;
}
.hero-eyebrow { text-align: center; }
.pile {
  position: relative;
  width: min(1240px, 100%, calc((100svh - var(--header-h) - 110px) * 1.6));
  aspect-ratio: 16 / 10;
  container-type: inline-size;
}
/* The name sits on two lines on wide screens ("American Cat / Breeders
   Association") and three on phones ("American / Cat Breeders / Association") */
.hero-title, .finale-title {
  position: absolute;
  left: 0; right: 0;
  top: 27%;
  margin: 0;
  text-align: center;
  font-size: 8.4cqw;
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.06em;
  white-space: nowrap;
  z-index: 3;
  transform-origin: 50% 40%;
}
.hero-title .brA, .finale-title .brA { display: none; }
.hero-title em, .finale-title em {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--accent);
  padding-right: 0.04em;
}
.hero-tag, .finale-tag {
  position: absolute;
  left: 0; right: 0;
  top: 81%;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: max(15px, 2.35cqw);
  letter-spacing: -0.02em;
  z-index: 3;
}
.hero-after {
  position: absolute;
  left: 50%; top: 52%;
  width: min(92%, 980px);
  transform: translateX(-50%);
  text-align: center;
  font-size: max(19px, 3.1cqw);
  line-height: 1.12;
  letter-spacing: -0.05em;
  opacity: 0;
  z-index: 3;
}
.hero-after em { display: block; margin-top: 0.3em; font-family: var(--font-serif); font-size: 0.82em; line-height: 1.2; letter-spacing: -0.03em; }
.hero-foot {
  width: min(1240px, 100%);
  display: flex; justify-content: space-between; gap: 16px;
}
.pile-cat { left: var(--x); top: var(--y); width: var(--w); will-change: transform; }

@media (max-aspect-ratio: 1/1) {
  .pile { width: min(100%, calc((100svh - var(--header-h) - 150px) * 10 / 14)); aspect-ratio: 10 / 14; }
  .pile-cat { left: var(--px); top: var(--py); width: var(--pw); }
  .pile-cat.no-portrait { display: none; }
  .hero-title, .finale-title { font-size: 16cqw; line-height: 0.92; top: 24%; }
  .hero-title .brA, .finale-title .brA { display: inline; }
  .hero-title .brB, .finale-title .brB { display: none; }
  .hero-tag { top: 85%; font-size: max(14px, 4.4cqw); }
  .hero-after { font-size: max(19px, 6.4cqw); top: 56%; }
  .hero-foot { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
}

/* ---------- Chapters ---------- */
.chapters { position: relative; z-index: 2; margin-top: -30vh; }
.chapter { position: relative; padding: clamp(56px, 8vw, 110px) var(--gutter) 0; }
.chapter-inner { position: relative; width: min(1240px, 100%); margin: 0 auto; }
.chapter .panel { position: relative; z-index: 1; }
.chapter .panel .display { margin-bottom: clamp(20px, 3vw, 30px); max-width: 21ch; }
.chapter .lead { margin-bottom: clamp(28px, 4vw, 44px); }
.chapter .btn-row { margin-top: clamp(28px, 4vw, 44px); }

.tag-perch { right: 7%; top: 0; width: clamp(150px, 17vw, 230px); transform: translateY(-47%); }
.tag-perch-left { left: 7%; right: auto; }
.tag-sit { left: 9%; top: 0; width: clamp(66px, 7.5vw, 104px); transform: translateY(-97%); }
.tag-sit-right { left: auto; right: 12%; }
.tag-peek { left: 10%; top: 0; width: clamp(92px, 10vw, 136px); transform: translateY(-80%); z-index: 0; }
.tag-peek-right { left: auto; right: 10%; }

.two-notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); margin-bottom: clamp(32px, 4vw, 48px); }
.two-notes p { color: var(--ink-soft); }
.two-notes .label { display: block; margin-bottom: 8px; }
@media (max-width: 760px) { .two-notes { grid-template-columns: 1fr; } }

.topic-list { margin-bottom: clamp(32px, 4vw, 48px); }

.fund {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid var(--line);
}
.fund .h2 { margin: 8px 0 10px; }
.fund p { color: var(--ink-soft); max-width: 56ch; }
@media (max-width: 760px) { .fund { grid-template-columns: 1fr; } }

.next-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(28px, 4vw, 40px); }
.next-up .card .label { display: block; margin-bottom: 10px; }
.next-up .card .h3 { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.035em; }
.next-up .card p { color: var(--ink-soft); margin-top: 6px; font-size: 15px; }
@media (max-width: 760px) { .next-up { grid-template-columns: 1fr; } }

/* ---------- Breeds strip (horizontal scroll) ---------- */
.chapter-breeds { padding: 0; }
.breeds-pin {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 10px) 0 clamp(28px, 4vw, 48px);
  overflow: hidden;
}
.breeds-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end;
  width: min(1240px, 100% - 2 * var(--gutter)); margin: 0 auto clamp(26px, 4vh, 44px);
}
.breeds-head .eyebrow { grid-column: 1 / -1; }
.breeds-head .lead { margin: 0; }
@media (max-width: 860px) { .breeds-head { grid-template-columns: 1fr; } }
.breeds-rail { position: relative; padding-top: clamp(60px, 9vh, 92px); }
.walker {
  position: absolute; top: clamp(60px, 9vh, 92px); left: 0;
  width: clamp(110px, 11vw, 150px);
  z-index: 3;
}
.walker .cat { position: relative; width: 100%; }
.breeds-track {
  display: flex; gap: clamp(12px, 1.4vw, 18px);
  list-style: none; margin: 0;
  padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}
.breed-card {
  --c: var(--panel-blue);
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 19vw, 260px);
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  min-height: 250px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--c);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.45s var(--ease-out);
}
.breed-card:hover { transform: translateY(-6px) rotate(-0.6deg); }
.breed-card[data-cat="2"] { --c: var(--panel-wheat); }
.breed-card[data-cat="3"] { --c: var(--panel-rose); }
.breed-card[data-cat="p"] { --c: var(--bg-deep); box-shadow: inset 0 0 0 1.5px var(--ink); }
.breed-card[data-cat="4"] {
  --c: var(--panel-navy);
  --ink: var(--panel-navy-ink);
  --ink-soft: color-mix(in srgb, var(--panel-navy-ink) 75%, transparent);
}
.breed-card .top { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.breed-card .code { font-size: clamp(3.6rem, 6vw, 5.2rem); font-weight: 500; letter-spacing: -0.07em; line-height: 0.9; }
.breed-card .name { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1.1; }
.breed-card.end {
  --c: transparent;
  border: 1.5px dashed var(--ink-mute);
  justify-content: center; gap: 14px;
}
.breed-card.end .h2 { font-size: 1.8rem; }

/* ---------- EMS decoder ---------- */
.ems { display: grid; gap: 14px; }
.ems-field { display: flex; gap: 10px; flex-wrap: wrap; }
.ems-field input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: 0.04em;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-mute);
  background: color-mix(in srgb, var(--panel-bg) 70%, #000 6%);
  color: var(--ink);
}
.ems-field input:focus { outline: none; border-color: var(--ink); }
.ems-out { list-style: none; padding: 0; margin: 6px 0 0; border-top: 1px solid var(--line); min-height: 120px; }
.ems-out li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  animation: emsIn 0.45s var(--ease-out) both;
}
.ems-out li:nth-child(2) { animation-delay: 50ms; }
.ems-out li:nth-child(3) { animation-delay: 100ms; }
.ems-out li:nth-child(4) { animation-delay: 150ms; }
.ems-out li:nth-child(5) { animation-delay: 200ms; }
.ems-out code { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }
.ems-out .k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.ems-out .v { font-size: 1.05rem; letter-spacing: -0.01em; }
.ems-out .unknown .v { color: var(--ink-mute); font-style: italic; }
@keyframes emsIn { from { opacity: 0; transform: translateY(8px); } }
.panel[data-tone="navy"] .ems-out code { color: #E9A58F; }
.ems-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
@media (max-width: 860px) { .ems-grid { grid-template-columns: 1fr; } }

/* ---------- Join steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.steps li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 28px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.steps .h3 { font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.035em; }
.steps p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 760px) { .steps li { grid-template-columns: 40px minmax(0, 1fr); } .steps p { grid-column: 2; } }

/* ---------- News ---------- */
.news-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 40px); }
.news-card { display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.news-card .meta { display: flex; justify-content: space-between; gap: 10px; }
.news-card .h3 { font-weight: 400; font-size: 1.45rem; letter-spacing: -0.035em; }
.news-card p { color: var(--ink-soft); font-size: 15px; }
.news-card .more { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Finale ---------- */
.finale {
  position: relative;
  padding: clamp(80px, 10vw, 140px) var(--gutter) 0;
  display: grid; justify-items: center;
  overflow: hidden;
}
.finale .eyebrow { margin-bottom: 18px; text-align: center; }
.finale .pile { width: min(1240px, 100%); }
@media (max-aspect-ratio: 1/1) { .finale .pile { width: 100%; } }
.finale-tag { top: 79%; }
.finale { padding-bottom: 72px; }
.finale-cta { position: absolute; left: 0; right: 0; top: 88%; display: flex; justify-content: center; z-index: 7; }
@media (max-aspect-ratio: 1/1) {
  .finale-tag { top: 84%; font-size: max(14px, 4.4cqw); }
  .finale-cta { top: 91%; }
}
.home .site-footer { margin-top: 0; }
html:not(.motion) .hero-after { display: none; }