/* ============================================================
   home.css — home-only sections
   The hero's Spline scene, the roster marquee (creators we've placed
   domains for), the four-up ledger cards beneath it, and About.
   Kept in its own file so it merges cleanly alongside other work.
   ============================================================ */

/* ---------- 0. hero: the Spline scene over the capture point ----------
   hero.js pulls the drifting views into a pulsing halo on the right of
   the hero. The 3D scene sits over it, anchored to the headline rows
   rather than the hero's middle so it reads as part of the opening
   line-up. The viewer draws the cat at a near-constant pixel size about
   38% down its own box, so the box is placed by that point.
   pointer-events is off so the hero buttons and the particle canvas stay
   interactive; the scene still sees the mouse via events-target="global". */

.hero-spline {
  --cat-scale: 1.3;           /* the viewer draws the cat at a near-fixed size; scale the box */
  position: absolute;
  left: 78%;
  top: 39%;
  width: 540px;
  height: 580px;
  transform-origin: 50% 38%;  /* scale about the cat itself, so the anchor holds */
  transform: translate(-50%, -38%) scale(var(--cat-scale));
  z-index: 1;                 /* over the canvas, under the copy */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero-spline.is-ready { opacity: 1; }

.hero-spline spline-viewer {
  display: block;
  width: 100%;
  height: 100%;
}

/* narrower desktops: nudge it right so it clears the headline */
@media (max-width: 1100px) {
  .hero-spline { left: 80%; }
}

/* tablet landscape: back to the viewer's own size, tucked to the edge */
@media (max-width: 960px) {
  .hero-spline { --cat-scale: 1; left: 84%; }
}

/* phones: not shown, and spline.js never downloads the runtime */
@media (max-width: 779px) {
  .hero-spline { display: none; }
}

/* ---------- 0b. hero on phones ----------
   A clean opening screen: centred headline, a one-breath subtext, the
   three buttons — and nothing else above the fold. The readout stats
   leave the hero here (the stat strip right below carries the same
   numbers), and the long subtext swaps for the short one. Desktop is
   untouched. */

.hero-sub-short { display: none; }

@media (max-width: 779px) {
  .hero .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-title { margin-inline: auto; }
  .hero-sub:not(.hero-sub-short) { display: none; }
  .hero-sub-short { display: block; margin-inline: auto; max-width: 34ch; }
  .hero-cta { justify-content: center; width: 100%; }
  .readout { display: none; }
}

/* ---------- 0c. the wordmark logo ----------
   The cat replaces the pulse dot in the masthead (and the admin panel,
   which shares the .wordmark markup). Sized to the cap height of the
   wordmark; the source is 2x for retina. */

.wordmark-logo {
  width: auto;
  height: 30px;
  flex: none;
  transition: transform 0.35s var(--ease);
}

.wordmark:hover .wordmark-logo { transform: rotate(-6deg) scale(1.06); }

@media (max-width: 640px) {
  .wordmark-logo { height: 26px; }
}

/* ---------- 1. the roster marquee ----------
   One row of identical 3:4 cards drifting slowly across the full width
   of the page. roster.js clones the track as many times as the viewport
   needs so the loop is seamless; until it does (or if it cannot) the
   single track just sits still. */

/* the ledger cards close this section, so it can sit a little nearer
   to the panel that follows than two full section paddings would */
#roster.section { padding-bottom: clamp(48px, 6vw, 84px); }

.marquee {
  --card-w: 240px;
  --card-gap: 22px;
  --marquee-duration: 52s;
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 34px 44px;            /* room for the tilt and the hover lift */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* a soft holo stage behind the cards */
.marquee::before {
  content: "";
  position: absolute;
  inset: 22% 10% 18%;
  background:
    radial-gradient(40% 70% at 30% 50%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 70%),
    radial-gradient(40% 70% at 70% 50%, color-mix(in srgb, var(--lilac) 24%, transparent), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.marquee-rail {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee.is-ready .marquee-rail {
  animation: roster-marquee var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee-rail,
.marquee:focus-within .marquee-rail {
  animation-play-state: paused;
}

/* roster.js measures one track and sets --set-w; the slide is exactly
   one set, so the loop is seamless however many copies are on the rail */
@keyframes roster-marquee {
  to { transform: translateX(calc(-1 * var(--set-w, 50%))); }
}

.marquee-track {
  display: flex;
  gap: var(--card-gap);
  padding-right: var(--card-gap);      /* so two tracks butt up with one gap */
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* reduced motion, or JS missing: a still row the user can scroll */
.marquee.is-static {
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
  scrollbar-width: none;
}
.marquee.is-static::-webkit-scrollbar { display: none; }
.marquee.is-static .marquee-rail { animation: none; padding-inline: var(--gutter); }

/* ---------- 2. foil cards ----------
   A white card with a holographic foil edge (the "caught" views flare
   iridescent). Every card is the same size; the photo is a 3:4 crop with
   a per-image focal point. A small per-card tilt keeps the row from
   reading like a spreadsheet; hovering straightens, lifts, and sweeps a
   sheen across the photo while the whole row pauses. */

.foil {
  --tilt: 0deg;
  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  padding: 9px 9px 0;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--holo) border-box;
  background-size: auto, 320% 100%;
  animation: holoshift 9s linear infinite;         /* the edge slowly shimmers */
  box-shadow: inset 0 1px 0 #fff, var(--lift-2), 0 2px 0 rgba(30, 42, 71, 0.04);
  transform: rotate(var(--tilt));
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}

.foil:hover,
.foil:focus-within {
  transform: rotate(0deg) translateY(-8px) scale(1.03);
  z-index: 2;
  box-shadow:
    inset 0 1px 0 #fff,
    0 34px 70px -34px rgba(122, 92, 224, 0.55),
    0 14px 34px -22px rgba(226, 63, 134, 0.45);
}

.foil-pic {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  aspect-ratio: 3 / 4;
  background: var(--lilac-pale);
}

.foil-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 35%);
}

/* the sheen that sweeps across on hover */
.foil-pic::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(201, 182, 255, 0.35) 52%,
    rgba(158, 216, 255, 0.3) 56%,
    transparent 66%
  );
  transform: translateX(-70%);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.4s var(--ease);
  pointer-events: none;
  mix-blend-mode: screen;
}

.foil:hover .foil-pic::after,
.foil:focus-within .foil-pic::after {
  transform: translateX(70%);
  opacity: 1;
}

.foil-cap {
  display: grid;
  gap: 2px;
  padding: 11px 6px 12px;
}

.foil-cap b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.foil-cap span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink-deep);
}

/* ---------- 3. ledger cards ----------
   Agency runs pink, marketplace runs blue (the site's own rule), the
   overlap runs lilac. "Not us" is the odd one out on purpose: no
   fill, a dashed edge, a hollow marker. */

.ledger-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: clamp(36px, 5vw, 64px);
}

.lcard {
  --key: var(--pink-deep);
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px 24px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: linear-gradient(165deg, var(--white), var(--shell));
  box-shadow: inset 0 1px 0 #fff, var(--lift);
}

.lcard-key {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--key);
}

.lcard-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--key);
  flex: none;
}

.lcard h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 4px;
}

.lcard p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

.lcard-agency { --key: var(--pink-deep); }
.lcard-market { --key: var(--blue-deep); }
.lcard-both   { --key: var(--lilac-deep); }

.lcard-not {
  --key: var(--muted-dim);
  background: transparent;
  border: 1.5px dashed var(--line);
  box-shadow: none;
}

.lcard-not .lcard-key::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--key);
}

/* ---------- 4. about ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.about-head {
  position: sticky;
  top: 98px;
}

.about-head .section-title {
  font-size: clamp(30px, 3.7vw, 48px);
  margin-top: 18px;
}

.about-copy p {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--ink-2);
}

.about-copy p:first-child {
  font-size: clamp(18px, 1.6vw, 21.5px);
  line-height: 1.5;
  color: var(--ink);
}

.about-copy p:last-child { margin-bottom: 0; }
.about-copy strong { color: var(--ink); font-weight: 600; }

/* ---------- 4b. agency cards: Lottie visuals + the capture box ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* lottie hosts: the animation fills the box; fade in once it is drawn */
.ag-lottie svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.ag-lottie.is-ready svg { opacity: 1; }

/* card 02: the scene is square; render it at the box width and slide it
   so the 132px window is centred on the bunny (ears at ~27%, chair at
   ~87% of the scene) whatever the box width. lottie-web sets inline
   width/height on the svg, hence the !important. */
#agBeach svg {
  width: 100% !important;
  max-width: 220px;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  transform: translateY(calc(-57% + 66px)) !important;   /* lottie-web also inlines a transform */
}

/* card 04: the three platform marks, nothing else */
.ag-marks {
  display: grid;
  place-items: center;
}

.ag-logos {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.ag-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 #fff, var(--lift);
  color: var(--ink);
  animation: ag-bob 3.6s ease-in-out infinite;
}

.ag-logo:nth-child(2) { animation-delay: 0.4s; }
.ag-logo:nth-child(3) { animation-delay: 0.8s; }

.ag-logo svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

@keyframes ag-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* the application area, first thing under the heading — the lander's
   apply panel, tightened; the four cards follow it */
.ag-apply {
  margin-bottom: 0;              /* the wrap is a grid with its own 34px gap */
  padding: clamp(22px, 3vw, 34px);
  border-radius: 26px;
  gap: clamp(24px, 4vw, 48px);
}
.ag-apply .apply-title { font-size: clamp(26px, 3.2vw, 40px); margin-top: 10px; }
.ag-apply .apply-copy .lede { margin-top: 10px; font-size: 16px; }
.ag-apply .apply-form { padding: 20px; gap: 12px; }

/* ---------- 4c. marketplace: the sort control ----------
   The native select drew its own arrow and, on phones, was capped at 40%
   of the row — "Highest price" lost its tail. It is now a pill that
   matches the search box: no native chrome, a drawn chevron, the same
   focus glow, and on phones it sizes to its longest label. */

.sort-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B87' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 13px;
  color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, var(--lift);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.sort-select:hover { border-color: color-mix(in srgb, var(--blue) 55%, var(--line)); }

.sort-select:focus,
.sort-select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent);
}

/* the popup itself is the OS's, but keep its text readable where styling is honoured */
.sort-select option { font-family: var(--body); font-size: 15px; text-transform: none; letter-spacing: 0; }

@media (max-width: 760px) {
  .sort-select {
    width: auto;             /* the longest label decides */
    max-width: 50%;
    padding: 0 38px 0 14px;
    background-position: right 13px center;
    color: var(--ink);
    /* proportional face here: mono glyphs are wide, and at the 16px that
       stops iOS zooming they starved the search box of room */
    font-family: var(--body);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0;
  }
}

/* ---------- 5. responsive ---------- */

@media (max-width: 980px) {
  .ledger-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-head { position: static; }
}

@media (max-width: 640px) {
  .marquee { --card-w: 196px; --card-gap: 16px; --marquee-duration: 46s; padding-block: 26px 34px; }
  .foil { padding: 7px 7px 0; border-radius: 14px; }
  .foil-pic { border-radius: 8px; }
  .foil-cap { padding: 9px 4px 10px; }
  .foil-cap b { font-size: 15px; }
}

@media (max-width: 560px) {
  .ledger-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .foil, .foil:hover, .foil:focus-within { transform: none; animation: none; }
  .foil-pic::after { display: none; }
  .marquee.is-ready .marquee-rail { animation: none; }
  .ag-logo { animation: none; }
}