/* ==========================================================================
   Collsta website — Section 8: Final CTA

   The quietest section on the page and deliberately so. Seven sections have
   just argued the product; this one only asks a question and offers a button.
   No pinned scene, no staged reveal, no new object — the only moving things
   are four small board covers breathing very slightly.

   It is the page's brand exhale: the widest breathing room, the softest glow,
   and a single centred column. It does NOT repeat the hero's composition —
   the hero is a message over a live product scene, this is a message over
   nothing at all.

   id="early-access" on the section resolves the three CTAs that point at it
   (nav, mobile panel, hero).
   ========================================================================== */

.fc{
  --fc-cycle:14s;

  position:relative;
  background:var(--surface-page);
  /* The most generous block on the page. After seven dense sections the close
     earns the space, and it is the last thing before the footer. */
  padding-block:clamp(72px,9vw,132px) clamp(76px,9.5vw,140px);
  overflow:hidden;
  isolation:isolate;
  text-align:center;
}
@supports (overflow:clip){
  .fc{overflow:clip}
}

/* ==========================================================================
   Background — soft, light, centred
   ========================================================================== */
.fc__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* One wide, very low-contrast wash behind the headline. Kept well inside the
   section's own box: this block clips, and a glow that reached an edge would
   be sliced along it — the mistake that produced the visible seam at the
   hero → Save anything boundary. */
.fc__glow{
  position:absolute;
  left:50%;top:42%;
  width:min(92vw,1180px);
  aspect-ratio:1.9;
  transform:translate3d(-50%,-50%,0);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(184,171,242,.34) 0%,
    rgba(255,154,163,.16) 46%,
    rgba(184,171,242,0) 72%);
}
.fc__blob{filter:blur(30px)}
.fc__blob--a{width:min(30vw,400px);aspect-ratio:1;top:8%;left:-6%;opacity:.26}
.fc__blob--b{width:min(26vw,340px);aspect-ratio:1;bottom:10%;right:-5%;opacity:.24}

/* ==========================================================================
   Copy
   ========================================================================== */
.fc__inner{position:relative;z-index:2}

.fc__title{
  margin-inline:auto;
  max-width:22ch;
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  /* One step above the section headings: this is the page's closing line, so
     it outranks the seven h2s that came before it without reaching --fs-h1,
     which belongs to the hero alone. */
  font-size:clamp(34px,4.6vw,58px);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  text-wrap:balance;
}
.fc__title-accent{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.fc__sub{
  margin:clamp(16px,2vw,24px) auto 0;
  max-width:40rem;
  font-size:var(--fs-body-lg);
  line-height:var(--lh-body);
  color:var(--text-body);
  text-wrap:pretty;
}

.fc__cta{margin-top:clamp(22px,2.8vw,36px)}
/* The button itself is the shared .btn .btn--primary .btn--lg from base.css —
   identical to the hero's. No new CTA style is introduced here. */

.fc__note{
  margin-top:clamp(10px,1.2vw,14px);
  font-size:var(--fs-small);
  color:var(--text-meta);
}

/* ==========================================================================
   Board teasers
   Four covers, not four boards. They exist to say "any next thing", so they
   carry a character and a word and nothing else — no counts, no sources, no
   creators. Anything more would read as an eighth feature section.
   ========================================================================== */
ul.fc-teasers{
  list-style:none;
  margin:clamp(40px,5vw,72px) auto 0;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(12px,1.8vw,28px);
}
.fc-teaser{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:clamp(88px,10vw,132px);
}
.fc-teaser__cover{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:clamp(16px,1.8vw,22px);
  display:grid;place-items:center;
  border:3px solid #fff;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.fc-teaser__emoji{font-size:clamp(26px,3vw,40px);line-height:1}
.fc-teaser__label{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(11.5px,1vw,13px);
  color:var(--text-body);
}

/* Characters drawn from the palette, one per mood. Gradients only — the close
   should not cost a single image request. */
.fc-cover--trip{background:linear-gradient(150deg,#FFE7E9,#FF7A85 62%,#0D0F3C)}
.fc-cover--place{background:linear-gradient(150deg,#F5F3FA,#C9BEF7 58%,#5A4FA8)}
.fc-cover--night{background:linear-gradient(150deg,#E4ECFF,#735CFF 58%,#0D0F3C)}
.fc-cover--run{background:linear-gradient(150deg,#DFF0E6,#B8ABF2 60%,#0D0F3C)}

/* A little depth: the row is set slightly off a straight line so it reads as
   four objects rather than a control strip. Static offsets, not motion. */
.fc-teaser--1{transform:translate3d(0,6px,0) rotate(-3deg)}
.fc-teaser--2{transform:translate3d(0,-4px,0) rotate(2deg)}
.fc-teaser--3{transform:translate3d(0,2px,0) rotate(-1.5deg)}
.fc-teaser--4{transform:translate3d(0,-6px,0) rotate(3deg)}

/* ==========================================================================
   Entrance
   ========================================================================== */
.js .fc__inner{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.fc.is-in .fc__inner{opacity:1;transform:none}

/* ==========================================================================
   Micro-motion
   Atmosphere only. The headline, the copy and the button never move — a CTA
   that drifts is a CTA that is harder to click. Only the four covers breathe,
   on a long cycle with staggered delays so they never pulse in unison.

   Same contract as every other loop on the page: parked at
   `animation-play-state: paused`, started by site.js only while on screen.
   ========================================================================== */
.fc-teaser__cover{
  animation:fc-float var(--fc-cycle) var(--ease-inout) infinite;
  animation-play-state:paused;
}
.fc.is-live .fc-teaser__cover{animation-play-state:running}
.fc-teaser--1 .fc-teaser__cover{animation-delay:-1.2s}
.fc-teaser--2 .fc-teaser__cover{animation-delay:-5.4s}
.fc-teaser--3 .fc-teaser__cover{animation-delay:-8.1s}
.fc-teaser--4 .fc-teaser__cover{animation-delay:-11.6s}
@keyframes fc-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-7px,0) scale(1.012)}
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:820px){
  .fc__title{max-width:16ch}
  /* 2 x 2 rather than a scroller: four items fit a phone comfortably and a
     horizontal scroller at the very end of the page invites a swipe that
     goes nowhere. */
  ul.fc-teasers{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(14px,4vw,22px);
    max-width:340px;
  }
  .fc-teaser{width:100%}
  /* The scattered rotations read as sloppy in a tight grid. */
  .fc-teaser--1,.fc-teaser--2,.fc-teaser--3,.fc-teaser--4{transform:none}
}

@media (max-width:480px){
  .fc__cta .btn{width:100%;justify-content:center}
  ul.fc-teasers{max-width:none}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .fc__inner{opacity:1;transform:none;transition:none}
  .fc-teaser__cover{animation:none}
}