/*
 * Shimmer design layer.
 *
 * Hand-written for the same reason as prose.css and admin.css: site.css is
 * compiled Tailwind output from the React source, so any utility that source
 * never used does not exist in it. Everything here is authored directly and
 * survives a future Tailwind rebuild.
 *
 * Colours come from the tokens in site.css (--aqua/--sky/--violet/--rose plus
 * the standard shadcn set), so a palette change stays a one-block edit.
 */

/* ── Display type ─────────────────────────────────────────────────────────
   Space Grotesk for headings, Inter for body — matching the reference. The
   tight negative tracking is what makes large type read as designed rather
   than merely big. */
.display,
h1.display, h2.display, h3.display {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.display-lg { font-size: clamp(2.5rem, 5.2vw, 4rem); }
.display-md { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -0.022em; line-height: 1.12; }
.display-sm { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.018em; line-height: 1.2; }

/* The one phrase picked out in aqua, as in the reference hero. */
.display .accent,
.text-aqua { color: hsl(var(--aqua)); }

/* Small caps eyebrow used above section headings. */
.eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

/* ── Iridescent ground ────────────────────────────────────────────────────
   A soft prismatic wash over the paper background. Fixed attachment so it
   reads as one continuous surface rather than repeating per section. */
.shimmer-bg {
    position: relative;
    background-color: hsl(var(--background));
    isolation: isolate;
}

.shimmer-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 44% at 12% 8%,  hsl(var(--violet) / .16) 0%, transparent 62%),
        radial-gradient(52% 40% at 88% 4%,  hsl(var(--aqua)   / .20) 0%, transparent 60%),
        radial-gradient(46% 38% at 72% 42%, hsl(var(--sky)    / .16) 0%, transparent 64%),
        radial-gradient(40% 34% at 22% 62%, hsl(var(--rose)   / .10) 0%, transparent 66%);
}

/* Diagonal prismatic streak — the signature of the reference hero. */
.shimmer-streak { position: relative; overflow: hidden; }
.shimmer-streak::after {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent 38%,
        hsl(var(--aqua)   / .30) 46%,
        hsl(var(--sky)    / .28) 50%,
        hsl(var(--violet) / .26) 54%,
        hsl(var(--rose)   / .18) 58%,
        transparent 66%
    );
    filter: blur(28px);
    opacity: .9;
}

/* ── Glass ────────────────────────────────────────────────────────────────
   Reference cards are white at ~55% over the wash with a 16px backdrop blur,
   28px radius, no border and no shadow. */
.glass {
    background: hsl(0 0% 100% / .55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 28px;
    border: 1px solid hsl(0 0% 100% / .6);
}

.glass-strong {
    background: hsl(0 0% 100% / .78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    border: 1px solid hsl(0 0% 100% / .7);
}

.glass-hover { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1); }
.glass-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px -20px hsl(var(--foreground) / .22);
}

/* ── Pills & chips ────────────────────────────────────────────────────────
   The status badge above the hero, and the feature chips. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: hsl(0 0% 100% / .7);
    border: 1px solid hsl(var(--border));
    font-size: .8125rem;
    color: hsl(var(--muted-foreground));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: hsl(var(--aqua));
    flex-shrink: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: 999px;
    background: hsl(var(--aqua) / .10);
    border: 1px solid hsl(var(--aqua) / .22);
    font-size: .75rem;
    font-weight: 500;
    color: hsl(var(--aqua));
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   Reference uses fully rounded buttons: solid ink primary, white secondary. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 3rem;
    padding: 0 1.75rem;
    border-radius: 999px;
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.btn-primary:hover { background: hsl(var(--primary) / .9); transform: translateY(-1px); }

.btn-secondary {
    background: hsl(0 0% 100% / .85);
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: hsl(0 0% 100%); transform: translateY(-1px); }

.btn-sm { height: 2.5rem; padding: 0 1.25rem; font-size: .875rem; }

/* ── Stat block (proof band) ──────────────────────────────────────────────*/
.stat-value {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -0.03em;
    line-height: 1;
    color: hsl(var(--foreground));
}

.stat-label {
    margin-top: .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
    line-height: 1.4;
}

/* ── Motion ───────────────────────────────────────────────────────────────*/
@keyframes shimmer-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.float-slow { animation: shimmer-float 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .float-slow { animation: none; }
    .glass-hover:hover { transform: none; }
    .btn:hover { transform: none !important; }
}

/* Backdrop-filter is unsupported in a few engines; fall back to opaque
   surfaces so cards never render as unreadable translucent panels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .glass-strong, .pill, .btn-secondary { background: hsl(0 0% 100% / .95); }
}

/* ── Utilities the compiled build lacks ───────────────────────────────────
 * site.css is Tailwind output generated from the React source, so it only
 * contains utilities that source happened to use. Anything this redesign
 * introduces has to be authored by hand — an unaudited class silently does
 * nothing. These are the exact Tailwind values, so if the CSS is ever
 * regenerated from a config covering them, removing this block is safe.
 *
 * Breakpoints: sm 640px, md 768px, lg 1024px.
 */
.pt-32 { padding-top: 8rem; }
.pt-10 { padding-top: 2.5rem; }
.pb-20 { padding-bottom: 5rem; }
.mt-14 { margin-top: 3.5rem; }
.mt-3  { margin-top: .75rem; }
.mb-7  { margin-bottom: 1.75rem; }
.gap-14 { gap: 3.5rem; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.h-14 { height: 3.5rem; }
.w-14 { width: 3.5rem; }
.w-fit { width: fit-content; }
.max-w-xl { max-width: 36rem; }
.left-5 { left: 1.25rem; }
.bottom-8 { bottom: 2rem; }
.bg-white\/70 { background-color: rgb(255 255 255 / .7); }
.bg-white\/80 { background-color: rgb(255 255 255 / .8); }
.group:hover .group-hover\:text-aqua { color: hsl(var(--aqua)); }

@media (min-width: 640px) {
    .sm\:items-center { align-items: center; }
    .sm\:w-auto { width: auto; }
}

@media (min-width: 768px) {
    .md\:pt-40 { padding-top: 10rem; }
    .md\:pb-28 { padding-bottom: 7rem; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

/* ── Prismatic panel ──────────────────────────────────────────────────────
 * The hero visual, drawn in CSS so the design needs no raster asset. The old
 * hero-bg.jpg is a dark navy photo that fought the light ground; an image set
 * in Settings still renders here and simply sits on top of this.
 */
.prism-panel {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(closest-side at 34% 30%, hsl(var(--aqua)   / .85), transparent 70%),
        radial-gradient(closest-side at 68% 26%, hsl(var(--sky)    / .80), transparent 72%),
        radial-gradient(closest-side at 62% 68%, hsl(var(--violet) / .70), transparent 70%),
        radial-gradient(closest-side at 30% 70%, hsl(var(--rose)   / .55), transparent 72%),
        linear-gradient(140deg, #ffffff 0%, hsl(var(--background)) 100%);
}

/* Soft caustic banding, so the surface reads as refracted light rather than
   four flat blobs. */
.prism-panel::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: repeating-linear-gradient(
        118deg,
        hsl(0 0% 100% / .30) 0px,
        hsl(0 0% 100% / .06) 26px,
        hsl(0 0% 100% / .30) 52px
    );
    mix-blend-mode: overlay;
    filter: blur(10px);
}

/* Highlight, to give the sphere a light source. */
.prism-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(46% 34% at 30% 20%, hsl(0 0% 100% / .70), transparent 60%);
}

.prism-panel > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* ── Admin utilities the compiled build lacks ─────────────────────────────
 * Same cause as the block above. Most of these predate the redesign — the
 * admin was authored against Tailwind classes the React build never emitted,
 * so `sticky`, `truncate`, `max-w-sm` and friends have silently done nothing
 * (which is why the login card was never width-constrained).
 */
.sticky { position: sticky; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overflow-x-auto { overflow-x: auto; }
.text-right { text-align: right; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.rounded { border-radius: .25rem; }

.p-5 { padding: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mr-1 { margin-right: .25rem; }

.w-32 { width: 8rem; }
.w-56 { width: 14rem; }
.w-60 { width: 15rem; }
.max-w-sm { max-width: 24rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }

.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bg-background\/90 { background-color: hsl(var(--background) / .9); }
.bg-card\/30 { background-color: hsl(var(--card) / .3); }
.bg-muted\/20 { background-color: hsl(var(--muted) / .2); }
.bg-muted\/30 { background-color: hsl(var(--muted) / .3); }
.bg-primary\/15 { background-color: hsl(var(--primary) / .15); }
.border-destructive\/40 { border-color: hsl(var(--destructive) / .4); }
.text-border { color: hsl(var(--border)); }

.hover\:text-destructive:hover { color: hsl(var(--destructive)); }
.hover\:border-destructive\/50:hover { border-color: hsl(var(--destructive) / .5); }
.last\:border-0:last-child { border-width: 0; }

/* File input button (media upload) */
.file\:mr-3::file-selector-button { margin-right: .75rem; }
.file\:rounded-md::file-selector-button { border-radius: calc(var(--radius) - 2px); }
.file\:px-4::file-selector-button { padding-left: 1rem; padding-right: 1rem; }
.file\:py-2::file-selector-button { padding-top: .5rem; padding-bottom: .5rem; }
.file\:bg-primary\/10::file-selector-button { background-color: hsl(var(--primary) / .1); }
.file\:text-primary::file-selector-button { color: hsl(var(--primary)); }
.hover\:file\:bg-primary\/20:hover::file-selector-button { background-color: hsl(var(--primary) / .2); }
::file-selector-button { border: 0; font: inherit; cursor: pointer; }

@media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .md\:flex-col { flex-direction: column; } }
@media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }