Depth Fade

import { ScrollDepthFade } from '@/components/ui/scroll-depth-fade'

import { ScrollDepthFade } from '@/components/ui/scroll-depth-fade'

export default function ScrollDepthFadeDemo() {
  return (
    <div className="py-16 sm:py-24">
      <ScrollDepthFade>
        <header className="space-y-4">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
            Field notes · issue 14
          </p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-4xl">
            Why Meridian stopped rewarding the loudest exception
          </h2>
          <p className="max-w-prose text-base leading-relaxed text-muted-foreground sm:text-lg">
            A reading instrument for controllers: the block you are in stays
            crisp; everything already decided steps one notch back, never
            blur, never ghosted.
          </p>
        </header>

        <section className="max-w-prose space-y-4 border-t border-border/60 pt-10 sm:pt-14">
          <h3 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
            Stand-ups were status theater
          </h3>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            Every morning, twelve people recited open lines from personal
            spreadsheets. The loudest gap won airtime. Quiet mismatches,
            wrong cost center, missing receipt, dual-approval stall, sat
            until Friday. Close age told the real story: 41 hours median
            before anyone owned the line.
          </p>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            We stopped asking “what are you working on?” and started asking
            “which exception is oldest on the board?” The board became the
            agenda. Personal slides disappeared.
          </p>
        </section>

        <section className="max-w-prose space-y-4 border-t border-border/60 pt-10 sm:pt-14">
          <h3 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
            Depth, not drama
          </h3>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            Readers do not need entrance choreography. They need the
            paragraph under their eyes to hold contrast while yesterday’s
            argument softens just enough to mark progress. That is the
            whole instrument: opacity floor at 0.6, scale at 0.98, reversible
            in both directions.
          </p>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            Scroll back up. The section you re-enter snaps crisp again.
            Nothing is once-only. Nothing leaves the accessibility tree.
          </p>
        </section>

        <section className="max-w-prose space-y-4 border-t border-border/60 pt-10 sm:pt-14">
          <h3 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
            What the board measures now
          </h3>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            Owner, age, policy reference, and source hash. No “almost
            done.” No screenshot audits. When an external auditor asks how
            a line closed, the pack already answers, decisions, overrides,
            and the rule that allowed them.
          </p>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            Close fell from nine calendar days to three. The controller’s
            only remaining complaint: the board is almost too quiet.
          </p>
        </section>

        <section className="max-w-prose space-y-4 border-t border-border/60 pt-10 sm:pt-14">
          <h3 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
            Keep the active page sharp
          </h3>
          <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
            Treat focus as a depth cue, not a spotlight stunt. Clamp the
            recede so body copy never dips below readable contrast. Let
            upcoming sections wait at full opacity, punishing reading
            ahead is how long-form tools lose trust.
          </p>
        </section>
      </ScrollDepthFade>
    </div>
  )
}