/* brevily website — the app's OWN additions on top of the design's
   files. Everything in assets/{brevily,site}.css is copied verbatim
   from design/demo and must never be hand-edited here: a rule that
   belongs to the design goes into the design and comes back on the next
   export. This file is for what only the app knows.

   Keep it small. */

/* The error page is the only screen rapid renders with no layout — no
   navbar, no footer — so it centres itself in the viewport rather than
   sitting under a header that is not there. `.layout--auth` (the
   library) does the centring; this sets the measure and the alignment
   inside it. */
.brv-s-errorpage {
  width: 100%;
  max-width: 36rem;
  text-align: center;
}

.brv-s-errorpage .error-page__actions,
.brv-s-errorpage .navbar__brand {
  display: flex;
  justify-content: center;
}

.brv-s-errorpage .navbar__brand {
  margin-bottom: var(--space-6);
}

/* Reveal-on-scroll. site-app.js marks an element `data-brv-revealed`
   as it enters the viewport; until then it waits below its place,
   invisible. The theme's own `.brv-reveal` is a 6px, 260ms rise made
   for list rows — too small to register on a section, so this is the
   same idea at section scale: 24px over the theme's slow duration and
   its ease. Anything not yet marked stays hidden ONLY while scripting
   is available: without JS `[data-brv-revealed]` never appears, so the
   `:not()` here would hide the page. The `.js` class is set by the
   same script. Reduced motion: everything simply shows. */
@keyframes brv-s-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js [data-brv-reveal]:not([data-brv-revealed]) {
  opacity: 0;
}

.js [data-brv-revealed] {
  animation: brv-s-rise var(--brv-dur-slow) var(--brv-ease-out) both;
}

/* Marked as already past — scrolled by before the script looked — so it
   shows at once with no motion. */
.js [data-brv-revealed='seen'] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-brv-reveal]:not([data-brv-revealed]) {
    opacity: 1;
  }
  .js [data-brv-revealed] {
    animation: none;
  }
}

/* The hero card drifts up a little slower than the page (site-app.js
   sets the transform); the hint lets the compositor own it. */
[data-brv-parallax] {
  will-change: transform;
}

/* The `+` in the trust section is a real button: same glyph as the
   inline `.brv-s-plus`, with a dotted rule so it reads as pressable. */
.brv-s-plus--go {
  all: unset;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  border-bottom: 2px dotted currentColor;
  padding-inline: 0.15em;
}

.brv-s-plus--go:hover,
.brv-s-plus--go:focus-visible {
  border-bottom-style: solid;
  outline: var(--ring-width) solid var(--color-accent);
  outline-offset: 3px;
}

/* The link-preview demo in the trust section: the card the edge serves
   for a `+` link, shown inline so the claim is demonstrable rather than
   just stated. */
.brv-s-demo {
  margin-block: var(--space-6) var(--space-8);
}

/* The home page: one screen per section, alternating tone.
   `--bleed` runs a background edge to edge the way the design's
   `.brv-s-band` does (negative gutter margin, gutter padding back) with
   the measure kept by an inner `.brv-s-wrap`. `--alt` is the theme's
   second surface, so it follows light and dark on its own; the inverse
   band stays the single dark moment. `--fill` is a MINIMUM height: a
   section with more content than a screen grows, never clips, and
   `svh` is the small viewport so a phone's toolbar does not push the
   fold. Candidates for the design export once they settle. */
.brv-s-section--bleed {
  max-width: none;
  margin-inline: calc(var(--layout-gutter) * -1);
  padding-inline: var(--layout-gutter);
}

.brv-s-section--alt {
  background: var(--color-surface-alt);
}

.brv-s-section--fill,
.brv-s-home .brv-s-band {
  min-height: 100svh;
  display: grid;
  align-content: center;
}

/* The first screen is the hero AND the facts strip: the hero centres in
   what is left, the strip sits on the fold. The navbar is 4rem tall. */
.brv-s-home {
  --brv-s-nav-h: 4rem;
}

/* The layout's content column pads its top and puts a gap between its
   children. Full-bleed bands must touch: the home collapses both. */
.layout__content:has(> .brv-s-home) {
  padding-top: 0;
  gap: 0;
}

.brv-s-home__top {
  min-height: calc(100svh - var(--brv-s-nav-h));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.brv-s-home .brv-s-hero {
  display: grid;
  align-content: center;
  /* The grid centres it; the design's padding is only a floor here, and
     the smaller floor keeps the facts on a 800px screen. */
  padding-block: var(--space-8);
}

/* The navbar is sticky, so an anchor jump stops short of it, with a
   breath of the section's own padding above the heading. */
.brv-s-home [id] {
  scroll-margin-top: calc(var(--brv-s-nav-h) + var(--space-8));
}

/* Matches the breakpoint at which the design stops the band's bleed. */
@media screen and (max-width: 767px) {
  .brv-s-section--bleed {
    margin-inline: 0;
  }
}