/* ==========================================================================
   Collsta website — Section 6: Discover / People + Discovery

   The quiet one. Sections 1 and 3 are pinned cinematic scenes and 5 is a
   transformation loop; after those the page needs a calm, magazine-like beat,
   so this is a fixed, curated wall of seven boards rather than a feed.

   The product principle drives the card: the COVER and TITLE own the card,
   and the creator is a byline under it at 12px. No follower counts, no faces
   larger than the work, nothing that would make this read profile-first.

   Motion is the same contract as sections 2 and 5 — CSS keyframes parked at
   `animation-play-state: paused`, with site.js deciding only when they may
   run. Nothing moves off screen or in a background tab. No images are loaded
   at all: every cover is a gradient plus an emoji.

   The loop, as fractions of --dc-cycle:
     0 → 12%    calm
     12 → 34%   the featured board lifts, its Save/Remix reveal, and its
                "Most remixed" flag arrives
     34 → 46%   it settles back
     40 → 56%   another board's save/remix count ticks up
     52 → 70%   @mia's "Barcelona weekend" — the board section 5 just built —
                arrives in the wall as "Recently shared"
     68 → 82%   its creator byline takes a brief focus
     82 → 100%  the wall returns to rest
   ========================================================================== */

.dc{
  --dc-cycle:10s;

  /* Same darkened purple as sections 4 and 5 so the primary chip is one
     colour across the page, and so white label text clears AA on it. */
  --dc-purple-ink:#5A4FA8;

  position:relative;
  /* Opaque like sections 4 and 5: this sits outside the `.cine` wrapper, so
     it paints the page colour itself. */
  background:var(--surface-page);
  padding-block:clamp(48px,6vw,84px) clamp(56px,7vw,100px);
  overflow:hidden;
  isolation:isolate;
}
@supports (overflow:clip){
  .dc{overflow:clip}
}
@supports (color:color-mix(in oklab,red,blue)){
  .dc{--dc-purple-ink:color-mix(in oklab,var(--purple-bright) 72%,var(--navy))}
}

/* ---- Background ---- */
.dc__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dc__blob{filter:blur(30px)}
.dc__blob--a{width:min(36vw,470px);aspect-ratio:1;top:4%;left:-9%;opacity:.3}
.dc__blob--b{width:min(30vw,400px);aspect-ratio:1;bottom:5%;right:-8%;opacity:.3}

/* ==========================================================================
   Copy
   ========================================================================== */
.dc__copy{position:relative;z-index:2;max-width:54rem}
.dc__eyebrow-row{
  display:flex;align-items:center;
  gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(12px,1.6vw,18px);
}
.dc__status{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--lavender-pale);
  color:var(--navy);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.dc__status::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--lavender);
}
.dc__title{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:var(--fs-h2);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-wrap:balance;
}
.dc__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.dc__sub{
  margin:clamp(14px,1.8vw,20px) 0 0;
  max-width:44rem;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}
.dc__sub b{font-weight:var(--fw-semibold);color:var(--navy)}

/* ==========================================================================
   Browse entry — search + categories
   Shown, not built: this is the visual promise that Discover will be
   searchable, so nothing here is interactive.
   ========================================================================== */
.dc__browse{
  position:relative;z-index:2;
  margin-top:clamp(26px,3.2vw,44px);
  display:flex;align-items:center;
  gap:clamp(12px,1.6vw,22px);
  flex-wrap:wrap;
}
.dc-search{
  display:inline-flex;align-items:center;gap:10px;
  flex:1 1 clamp(240px,26vw,340px);
  min-width:0;
  padding:11px 16px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  color:var(--text-meta);
}
.dc-search__text{
  font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
ul.dc-cats{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;
}
.dc-cat{
  display:inline-flex;align-items:center;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:12px;
  color:var(--text-meta);
  white-space:nowrap;
}
.dc-cat--on{
  background:var(--lavender-pale);
  border-color:transparent;
  color:var(--navy);
}

/* ==========================================================================
   The wall
   Seven boards in a fixed, deliberate arrangement — two of them wide. The
   varied spans are what stop this reading as a uniform grid, without needing
   a masonry library or ragged column heights.
   ========================================================================== */
.dc__wall-wrap{position:relative;z-index:2;margin-top:clamp(24px,3vw,40px)}
ul.dc-wall{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px);
  align-items:start;
}
.dc-card--wide{grid-column:span 2}

.dc-card{
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  /* Hover lives on the card and the loop lives on the frame inside it, so a
     pointer never fights the animation for the same transform. */
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out);
}
@media (hover:hover){
  .dc-card:hover{transform:translate3d(0,-5px,0);box-shadow:var(--shadow-lg)}
}
.dc-card__frame{position:relative}

.dc-card__cover{
  position:relative;
  height:clamp(112px,11vw,152px);
  display:grid;place-items:center;
  overflow:hidden;
}
.dc-card--wide .dc-card__cover{height:clamp(132px,13vw,184px)}
.dc-card__emoji{font-size:clamp(30px,3.2vw,44px);line-height:1}

/* Board characters — gradients only, so the wall costs no image bytes. */
.dc-cover--eats{background:linear-gradient(150deg,#FFE7E9,#FF7A85 62%,#0D0F3C)}
.dc-cover--rome{background:linear-gradient(150deg,#E4ECFF,#B8ABF2 60%,#0D0F3C)}
.dc-cover--home{background:linear-gradient(150deg,#F5F3FA,#C9BEF7 58%,#5A4FA8)}
.dc-cover--run{background:linear-gradient(150deg,#DFF0E6,#B8ABF2 60%,#0D0F3C)}
/* Deliberately the same cover @mia's remix ends on in section 5 — this is
   that board, arriving in Discover. */
.dc-cover--bcn{background:linear-gradient(150deg,#E4ECFF,#735CFF 58%,#0D0F3C)}
.dc-cover--date{background:linear-gradient(150deg,#FFB3B9,#B8ABF2 60%,#0D0F3C)}
.dc-cover--gift{background:linear-gradient(150deg,#EDE8FF,#FFB3B9 58%,#0D0F3C)}

/* Mixed-source hint — three marks, not three full badges. Enough to say the
   board holds links from different places without turning the cover into a
   badge shelf. */
.dc-src{
  position:absolute;left:10px;bottom:10px;
  display:inline-flex;
}
.dc-src__dot{
  width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:8.5px;
  box-shadow:var(--shadow-sm);
}
.dc-src__dot + .dc-src__dot{margin-left:-6px}
.dc-src__dot.badge__mark--ig{font-size:6.5px}

/* ---- Social proof flags — three states, on three cards only ---- */
.dc-flag{
  position:absolute;top:10px;left:10px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.94);
  color:var(--navy);
}
.dc-flag--remixed{opacity:0}

.dc-card__body{padding:clamp(11px,1.1vw,15px)}
.dc-card__title{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:clamp(13px,1.1vw,15px);
  line-height:1.28;
  color:var(--navy);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
}
.dc-card__foot{
  margin-top:9px;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;flex-wrap:wrap;
}
/* The creator is a byline: small, muted, under the board's own name. */
.dc-by{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-meta);
  border-radius:var(--radius-pill);
  transition:color var(--dur-mid) var(--ease-out);
}
.dc-avatar{
  width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:8px;color:#fff;
}
.dc-avatar--anna{background:linear-gradient(160deg,#FFB3B9,#FF7A85)}
.dc-avatar--luca{background:linear-gradient(160deg,#C9BEF7,#735CFF)}
.dc-avatar--noor{background:linear-gradient(160deg,#B8ABF2,#0D0F3C)}
.dc-avatar--dani{background:linear-gradient(160deg,#DFF0E6,#665EE6)}
.dc-avatar--mia{background:linear-gradient(160deg,#C9BEF7,#735CFF)}
.dc-avatar--sofia{background:linear-gradient(160deg,#FFE7E9,#FF9AA3)}
.dc-avatar--tom{background:linear-gradient(160deg,#E4ECFF,#B8ABF2)}

.dc-stat{font-size:11.5px;color:var(--text-meta);white-space:nowrap}
/* The two counts share one box so the tick cannot reflow the footer. */
.dc-stat--live{position:relative;display:inline-block}
.dc-count--to{position:absolute;inset:0;opacity:0}

/* ---- Save / Remix ---- */
.dc-card__acts{
  position:absolute;
  right:10px;top:10px;
  display:inline-flex;gap:6px;
  opacity:0;
  transform:translate3d(0,-4px,0);
  transition:opacity var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
@media (hover:hover){
  /* Hover always wins over the loop: without this the focused card's own
     animation would keep driving opacity while the pointer is on it. */
  .dc-card:hover .dc-card__acts{animation:none;opacity:1;transform:none}
}
.dc-act{
  display:inline-flex;align-items:center;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11.5px;
  white-space:nowrap;
}
.dc-act--save{
  background:rgba(255,255,255,.94);
  color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.dc-act--remix{
  background:var(--dc-purple-ink);
  color:#fff;
  box-shadow:var(--glow-purple);
}

/* ==========================================================================
   Closing line — a sentence, not another CTA section
   ========================================================================== */
.dc__closer{
  position:relative;z-index:2;
  margin-top:clamp(26px,3.2vw,44px);
  text-align:center;
  font-size:var(--fs-body-lg);
  color:var(--text-body);
}
.dc__closer b{font-family:var(--font-display);font-weight:var(--fw-extrabold);color:var(--navy)}

/* ==========================================================================
   Entrance
   ========================================================================== */
.js .dc__copy,
.js .dc__browse,
.js .dc__wall-wrap,
.js .dc__closer{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.dc.is-in .dc__copy,
.dc.is-in .dc__browse,
.dc.is-in .dc__wall-wrap,
.dc.is-in .dc__closer{opacity:1;transform:none}
.dc.is-in .dc__browse{transition-delay:.07s}
.dc.is-in .dc__wall-wrap{transition-delay:.14s}
.dc.is-in .dc__closer{transition-delay:.2s}

/* ==========================================================================
   The gallery loop
   Every animation is one cycle long and infinite, so they share one clock.
   ========================================================================== */
.dc-card--focus .dc-card__frame,
.dc-card--focus .dc-card__acts,
.dc-flag--remixed,
.dc-count--from,
.dc-count--to,
.dc-card--arriving .dc-card__frame,
.dc-by--focus{
  animation-duration:var(--dc-cycle);
  animation-timing-function:var(--ease-inout);
  animation-iteration-count:infinite;
  animation-play-state:paused;
}
.dc.is-live .dc-card--focus .dc-card__frame,
.dc.is-live .dc-card--focus .dc-card__acts,
.dc.is-live .dc-flag--remixed,
.dc.is-live .dc-count--from,
.dc.is-live .dc-count--to,
.dc.is-live .dc-card--arriving .dc-card__frame,
.dc.is-live .dc-by--focus{animation-play-state:running}

/* 12 → 46% — the featured board lifts and offers its actions */
.dc-card--focus .dc-card__frame{animation-name:dc-lift}
.dc-card--focus .dc-card__acts{animation-name:dc-acts}
.dc-flag--remixed{animation-name:dc-flag}
@keyframes dc-lift{
  0%,12%{transform:none}
  24%,34%{transform:translate3d(0,-6px,0)}
  46%,100%{transform:none}
}
@keyframes dc-acts{
  0%,14%{opacity:0;transform:translate3d(0,-4px,0)}
  24%,36%{opacity:1;transform:none}
  46%,100%{opacity:0;transform:translate3d(0,-4px,0)}
}
@keyframes dc-flag{
  0%,16%{opacity:0;transform:translate3d(0,-3px,0)}
  26%,90%{opacity:1;transform:none}
  100%{opacity:0;transform:translate3d(0,-3px,0)}
}

/* 40 → 56% — a count ticks up on another board */
.dc-count--from{animation-name:dc-count-out}
.dc-count--to{animation-name:dc-count-in}
/* Short crossfade on purpose. The two strings differ by one digit and sit in
   the same box, so a long dissolve reads as blurred text rather than a count
   ticking; and the return to the old value is snapped into the last 1% so it
   lands with the loop restart instead of morphing back in view. */
@keyframes dc-count-out{
  0%,40%{opacity:1}
  46%,99%{opacity:0}
  100%{opacity:1}
}
@keyframes dc-count-in{
  0%,44%{opacity:0}
  48%,99%{opacity:1}
  100%{opacity:0}
}

/* 52 → 70% — the board section 5 just built arrives in the wall */
.dc-card--arriving .dc-card__frame{animation-name:dc-arrive}
@keyframes dc-arrive{
  0%,52%{opacity:0;transform:translate3d(0,14px,0) scale(.975)}
  70%,93%{opacity:1;transform:none}
  100%{opacity:0;transform:translate3d(0,10px,0) scale(.985)}
}

/* 68 → 82% — its creator gets a short beat of attention. A colour change
   only: the byline must never outgrow the board it belongs to. */
.dc-by--focus{animation-name:dc-by}
@keyframes dc-by{
  0%,68%{color:var(--text-meta)}
  76%,88%{color:var(--purple)}
  96%,100%{color:var(--text-meta)}
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:1100px){
  ul.dc-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dc-card--wide{grid-column:span 2}
}

/* A four- or two-column grid of boards becomes a wall of thumbnails on a
   phone, which is the opposite of "the board is the hero". Below this the
   wall becomes a snap gallery: one board at reading size with the next one
   peeking, so the character survives. */
@media (max-width:820px){
  .dc__browse{gap:12px}
  .dc-search{flex:1 1 100%}
  /* The chips run off the edge rather than wrapping into three rows. */
  ul.dc-cats{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    /* Full-bleed so the row can start at the shell padding and still scroll
       to the screen edge. */
    margin-inline:calc(-1 * var(--shell-pad));
    padding-inline:var(--shell-pad);
    scroll-padding-left:var(--shell-pad);
  }
  ul.dc-cats::-webkit-scrollbar{display:none}

  ul.dc-wall{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin-inline:calc(-1 * var(--shell-pad));
    padding-inline:var(--shell-pad);
    scroll-padding-left:var(--shell-pad);
    padding-bottom:6px;
  }
  ul.dc-wall::-webkit-scrollbar{display:none}
  .dc-card{scroll-snap-align:start}
  .dc-card--wide{grid-column:auto}
  .dc-card__cover,
  .dc-card--wide .dc-card__cover{height:clamp(140px,38vw,200px)}

  /* No hover on touch, so the actions are simply present — otherwise Save and
     Remix would be unreachable information on a phone. The focused card's
     own animation would otherwise keep driving them, since an animation wins
     over a plain declaration however late it is declared. */
  .dc-card__acts{opacity:1;transform:none}
  .dc-card--focus .dc-card__acts{animation:none;opacity:1;transform:none}

  /* Restrained motion here: with one board filling the screen, lifting it
     6px is movement without meaning. The arrival, the count tick and the
     flag stay — those carry information. */
  .dc-card--focus .dc-card__frame{animation:none;transform:none}
}

@media (max-width:480px){
  ul.dc-wall{grid-auto-columns:86%}
  .dc-card__foot{gap:6px}
  .dc-stat{font-size:11px}
}

/* ==========================================================================
   Reduced motion
   No loop. The wall is already the point, so it simply renders at rest with
   every flag, count and byline in its resting state — and the featured
   board's Save/Remix left visible, so what you can do with a found board is
   legible without any movement.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .dc__copy,
  .js .dc__browse,
  .js .dc__wall-wrap,
  .js .dc__closer{opacity:1;transform:none;transition:none}

  .dc-card--focus .dc-card__frame,
  .dc-card--focus .dc-card__acts,
  .dc-flag--remixed,
  .dc-count--from,
  .dc-count--to,
  .dc-card--arriving .dc-card__frame,
  .dc-by--focus{animation:none}

  .dc-card{transition:none}
  .dc-card--focus .dc-card__frame{transform:none}
  .dc-card--focus .dc-card__acts{opacity:1;transform:none}
  .dc-flag--remixed{opacity:1;transform:none}
  .dc-count--from{opacity:1}
  .dc-count--to{opacity:0}
  .dc-card--arriving .dc-card__frame{opacity:1;transform:none}
  .dc-by--focus{color:var(--text-meta)}
}