/* ==========================================================================
   Collsta website — layout shell & primitives
   Section-agnostic foundation. Every future section (Save anything,
   Mixed-source Board, Together, Remix, Discover, Final CTA, Footer) should
   reuse `.section`, `.container`, `.btn`, `.eyebrow` from here and ship its
   own `assets/css/<section>.css`.
   ========================================================================== */

/* ---- Site-level variables (layout & motion, not brand) ---- */
:root{
  --nav-h:68px;
  --nav-h-compact:58px;

  --shell-pad:clamp(20px,4vw,40px);
  --section-pad-y:clamp(88px,11vw,150px);

  /* The vertical beat between a section's copy block and the visual scene
     under it. Owned here rather than per-section so sections 2 and 3 cannot
     drift apart: they read the same value at the same breakpoints. */
  --section-copy-gap:clamp(52px,8vh,96px);

  /* Motion curves — calm, no overshoot, per DS "Motion: calm. No bounce." */
  --ease-out:cubic-bezier(.22,.68,.28,1);
  --ease-inout:cubic-bezier(.55,.06,.2,.98);
  --dur-fast:.15s;
  --dur-mid:.28s;
  --dur-slow:.6s;
}

/* A phone frame has nowhere near the surplus a desktop one does — the desktop
   beat is most of a thumb-scroll here. */
@media (max-width:820px){
  :root{--section-copy-gap:clamp(26px,4.4vh,40px)}
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text-body);
  background:var(--surface-page);
  /* The hero scene bleeds off-canvas by design; never let it scroll sideways.
     `clip` is preferred over `hidden` because `overflow-x:hidden` forces
     `overflow-y` to compute as `auto`, which turns the body into a scroll
     container and breaks `position: sticky` inside it. */
  overflow-x:hidden;
}
@supports (overflow:clip){
  body{overflow-x:clip}
}
body.is-locked{overflow:hidden}

/* ---- Layout shell ---- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}

.section{
  position:relative;
  padding-block:var(--section-pad-y);
}
/* Sticky nav must not cover an anchored section's first line. */
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ==========================================================================
   Cinematic wrapper
   Sections that belong to one continuous scene sit inside `.cine` and stay
   transparent, so a shared atmosphere layer can run behind all of them.
   `.cine__seam` is a zero-height marker placed between two sections; blobs
   inside it overflow into both, which is the only way to get a glow across a
   junction where each section has to clip its own sticky pin.
   ========================================================================== */
.cine{
  position:relative;
  background:var(--surface-page);
}
/* Contains the seam blobs, which bleed off the right edge by design.
   `clip` only — `hidden` here would make this a scroll container and kill
   `position: sticky` on both section pins inside it. */
@supports (overflow:clip){
  .cine{overflow:clip}
}
/* Sections paint above the shared atmosphere. */
.cine > .hero-stage,
.cine > .sa,
.cine > .bc{z-index:1}

.cine__seam{
  position:relative;
  z-index:0;
  height:0;
  pointer-events:none;
}
.cine__blob{
  position:absolute;
  filter:blur(30px);
}
/* Offsets are derived from each blob's own diameter rather than from vh, so
   the field always straddles the junction — a vh offset against a vw-sized
   blob leaves it entirely on one side at narrow widths. */
.cine__blob--purple{
  --d:clamp(320px,50vw,640px);
  width:var(--d);height:var(--d);
  right:-9%;
  top:calc(var(--d) * -.62);
  opacity:.5;
}
.cine__blob--coral{
  --d:clamp(260px,42vw,540px);
  width:var(--d);height:var(--d);
  right:3%;
  top:calc(var(--d) * -.3);
  opacity:.42;
}

/* ---- Save anything → Board customize junction ----
   The page colour changes here (white → soft). Carrying that change on a
   layer BELOW the glow — rather than as an opaque section background — is
   what lets one continuous atmosphere run across the boundary. The gradient
   stop is in vh so the fade stays the same length whatever the element's
   own height is. */
.cine__floor{
  position:absolute;
  left:0;right:0;
  top:-14vh;
  height:460vh;
  z-index:0;
  background:linear-gradient(to bottom,rgba(245,243,250,0) 0,var(--bg-soft) 26vh);
}
.cine__seam--boards .cine__blob{z-index:1}

.cine__blob--l-purple{
  --d:clamp(320px,46vw,600px);
  width:var(--d);height:var(--d);
  left:-9%;
  top:calc(var(--d) * -.56);
  opacity:.46;
}
.cine__blob--l-coral{
  --d:clamp(240px,34vw,450px);
  width:var(--d);height:var(--d);
  left:5%;
  top:calc(var(--d) * -.26);
  opacity:.34;
}

/* ---- Typography primitives ---- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  /* `--purple` rather than `--purple-bright`: at 11px the brighter tone
     measures 4.3:1 on the page surface and misses AA. Both are palette
     colours, so this is a usage choice, not a new one. */
  color:var(--purple);
}
.eyebrow::before{
  content:"";width:18px;height:1.5px;border-radius:2px;
  background:var(--grad-underline);
}

/* ---- Buttons — mirrors components/forms/Button.jsx ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  letter-spacing:.01em;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  transition:transform var(--dur-fast) ease,box-shadow var(--dur-mid) ease,
             background var(--dur-mid) ease,color var(--dur-mid) ease;
}
.btn:active{transform:scale(.97)}

.btn--sm{padding:9px 18px;font-size:14px}
.btn--md{padding:13px 26px;font-size:16px}
.btn--lg{padding:16px 32px;font-size:17px;border-radius:var(--radius-lg)}

.btn--primary{background:var(--purple-bright);color:#fff;box-shadow:var(--glow-purple)}
.btn--primary:hover{background:#6450F0;box-shadow:0 28px 68px -12px rgba(115,92,255,.55)}

.btn--secondary{background:var(--surface);color:var(--navy);border-color:var(--border);box-shadow:var(--shadow-sm)}
.btn--secondary:hover{border-color:var(--lavender);box-shadow:var(--shadow-md)}

.btn--ghost{background:transparent;color:var(--purple-bright)}
.btn--ghost:hover{color:var(--coral)}

/* ---- Focus ---- */
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}

/* ---- Utilities ---- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--shell-pad);top:10px;z-index:200;
  padding:10px 18px;border-radius:var(--radius-md);
  background:var(--surface);color:var(--navy);
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:14px;
  box-shadow:var(--shadow-md);
  transform:translateY(-160%);
  transition:transform var(--dur-mid) var(--ease-out);
}
.skip-link:focus-visible{transform:translateY(0)}

/* ---- Entry reveal ----
   Elements start hidden and animate in once `is-ready` lands on <html>.
   `--d` staggers them. Under reduced motion they are simply visible.
   Scoped to `.js` so that if the script never runs, nothing is left invisible. */
.js .reveal{opacity:0}
.is-ready .reveal{
  animation:co-rise .85s var(--ease-out) both;
  animation-delay:var(--d,0s);
}
@keyframes co-rise{
  from{opacity:0;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   Next-section mount point
   Placeholder styling only — delete `.section--mount` when the real
   "Save anything" section replaces it.
   ========================================================================== */
.section--mount{
  padding-block:clamp(80px,10vw,120px);
  background:var(--surface-page);
}
.mount-note{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(28px,4vw,44px);
  border:1.5px dashed var(--border);
  border-radius:var(--radius-lg);
  color:var(--text-meta);
}
.mount-note__label{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lavender);
}
.mount-note__title{
  font-family:var(--font-display);font-weight:var(--fw-extrabold);
  font-size:var(--fs-h3);letter-spacing:var(--ls-tight);color:var(--navy);
}
.mount-note__text{font-size:var(--fs-small);max-width:52ch}

/* ==========================================================================
   Reduced motion — global
   Everything still reads as a finished, composed page; only movement stops.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.js .reveal,.is-ready .reveal{opacity:1;animation:none;transform:none}
}