/*
 * PictureFramework theme for TNN.Common.Blazor.
 * Visual language carried over from the PictureFrameworkArchive application
 * UI: warm amber accent (hue 35) on warm dark neutrals, cool paper-white in
 * light mode, soft radii, glass topbar. Seeds cascade through the library's
 * token ladder (tnn-semantics.css); the light ladder is inherited from the
 * library :root, dark remaps below.
 */
[data-theme="pictureframework"] {
    color-scheme: light dark;

    --tnn-seed-accent-h: 35;
    --tnn-seed-accent-c: 0.16;
    --tnn-seed-neutral-h: 240;
    --tnn-seed-neutral-c: 0.012;

    --tnn-radius-sm: 0.25rem;
    --tnn-radius-md: 0.375rem;
    --tnn-radius-lg: 0.5rem;
    --tnn-radius-xl: 0.75rem;

    --tnn-glass-blur: 12px;
    --tnn-glass-opacity: 0.85;
    --tnn-glass-saturate: 1.8;

    --tnn-glow-sm: 0 0 0 1px oklch(85% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.12),
                   0 2px 8px -2px oklch(60% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.16);
    --tnn-glow-md: 0 0 0 1px oklch(80% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.15),
                   0 4px 16px -4px oklch(58% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.22);
    --tnn-glow-lg: 0 0 0 1px oklch(75% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.18),
                   0 8px 32px -4px oklch(55% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.28);
}

@media (prefers-color-scheme: dark) {
    [data-theme="pictureframework"] {
        --tnn-seed-neutral-h: 30;
        --tnn-seed-neutral-c: 0.015;

        --tnn-color-surface:         oklch(15% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));
        --tnn-color-surface-raised:  oklch(19% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));
        --tnn-color-surface-sunken:  oklch(12% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));
        --tnn-color-surface-overlay: oklch(23% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));

        --tnn-color-border:        oklch(27% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));
        --tnn-color-border-strong: oklch(40% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));

        --tnn-color-text:           oklch(96% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));
        --tnn-color-text-muted:     oklch(70% calc(var(--tnn-seed-neutral-c) * 2) var(--tnn-seed-neutral-h));
        --tnn-color-text-faint:     oklch(50% var(--tnn-seed-neutral-c) var(--tnn-seed-neutral-h));
        --tnn-color-text-on-accent: oklch(15% 0 0);

        --tnn-color-accent:        oklch(68% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h));
        --tnn-color-accent-hover:  oklch(74% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h));
        --tnn-color-accent-active: oklch(80% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h));
        --tnn-color-accent-faint:  oklch(30% calc(var(--tnn-seed-accent-c) * 0.7) var(--tnn-seed-accent-h));
        --tnn-color-accent-text:   oklch(80% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h));

        --tnn-color-success: oklch(70% 0.14 150);
        --tnn-color-warning: oklch(78% 0.16 75);
        --tnn-color-danger:  oklch(68% 0.19 25);
        --tnn-color-info:    oklch(70% 0.14 230);

        --tnn-color-success-faint: oklch(26% 0.05 150);
        --tnn-color-warning-faint: oklch(28% 0.06 75);
        --tnn-color-danger-faint:  oklch(28% 0.06 25);
        --tnn-color-info-faint:    oklch(26% 0.05 230);

        --tnn-color-success-text: oklch(82% 0.13 150);
        --tnn-color-warning-text: oklch(85% 0.14 75);
        --tnn-color-danger-text:  oklch(80% 0.15 25);
        --tnn-color-info-text:    oklch(82% 0.13 230);

        --tnn-color-focus-ring: oklch(72% 0.18 var(--tnn-seed-accent-h));

        --tnn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40);
        --tnn-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.45), 0 4px 8px -2px rgb(0 0 0 / 0.35);
        --tnn-shadow-lg: 0 8px 16px -4px rgb(0 0 0 / 0.55), 0 4px 8px -2px rgb(0 0 0 / 0.40);
        --tnn-shadow-overlay: 0 16px 48px -8px rgb(0 0 0 / 0.70);

        --tnn-glass-blur: 16px;
        --tnn-glass-opacity: 0.7;
        --tnn-glass-saturate: 2;

        --tnn-glow-sm: 0 0 0 1px oklch(75% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.16),
                       0 2px 12px -2px oklch(68% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.27);
        --tnn-glow-md: 0 0 0 1px oklch(70% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.20),
                       0 4px 20px -4px oklch(65% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.32);
        --tnn-glow-lg: 0 0 0 1px oklch(65% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.24),
                       0 8px 40px -4px oklch(62% var(--tnn-seed-accent-c) var(--tnn-seed-accent-h) / 0.38);
    }
}

:root {
    --page-pad: max(var(--tnn-space-6), calc((100vw - 69rem) / 2));
}

body {
    margin: 0;
    font-family: var(--tnn-font-sans);
    font-size: var(--tnn-text-base);
    line-height: var(--tnn-leading-normal);
    background: var(--tnn-color-surface);
    color: var(--tnn-color-text);
}

::selection {
    background: var(--tnn-color-accent-faint);
}

main {
    max-width: 44rem;
    margin: 0 auto;
    padding: 4rem var(--tnn-space-6);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10; /* the page's only stacking layer: keep the glass bar above the hero */
    display: flex;
    align-items: center;
    gap: var(--tnn-space-3);
    padding: var(--tnn-space-4) var(--page-pad);
    border-bottom: 1px solid var(--tnn-color-border);
    background: var(--tnn-color-surface);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .topbar {
        background: color-mix(in oklab, var(--tnn-color-surface) calc(var(--tnn-glass-opacity) * 100%), transparent);
        -webkit-backdrop-filter: blur(var(--tnn-glass-blur)) saturate(var(--tnn-glass-saturate));
        backdrop-filter: blur(var(--tnn-glass-blur)) saturate(var(--tnn-glass-saturate));
    }
}

.mark {
    display: block;
    flex-shrink: 0;
}

.wordmark {
    font-weight: var(--tnn-font-weight-semibold);
    letter-spacing: var(--tnn-tracking-tight);
}

main.landing {
    max-width: none;
    margin: 0;
    padding: 0 var(--page-pad) var(--tnn-space-16);
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
    gap: var(--tnn-space-12);
    align-items: center;
    padding: var(--tnn-space-16) 0 var(--tnn-space-12);
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.25rem, 5.5vw, 3.6rem);
    line-height: var(--tnn-leading-tight);
    letter-spacing: -0.02em;
    font-weight: var(--tnn-font-weight-bold);
}

.hero-sub {
    margin: var(--tnn-space-5) 0 0;
    font-size: clamp(1.05rem, 1.9vw, 1.2rem);
    line-height: var(--tnn-leading-relaxed);
    color: var(--tnn-color-text-muted);
    max-width: 32rem;
}

.hero-frame {
    margin: var(--tnn-space-8) 0 0;
}

.device {
    border: 12px solid oklch(22% 0.012 30);
    border-radius: var(--tnn-radius-lg);
    background: oklch(22% 0.012 30);
    box-shadow: var(--tnn-shadow-lg);
}

.device img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    filter: saturate(0.7) contrast(1.03);
}

.hero-frame figcaption {
    margin-top: var(--tnn-space-3);
    font-size: var(--tnn-text-sm);
    color: var(--tnn-color-text-muted);
}

.cycle {
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tnn-space-8);
    padding: var(--tnn-space-10) 0;
    border-top: 1px solid var(--tnn-color-border);
}

.cycle li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tnn-space-1);
}

/* The icon svg itself becomes the accent tile: the box is the chip, the
 * padding sizes the glyph inside it. */
.cycle .tnn-icon {
    box-sizing: border-box;
    width: 3rem;
    height: 3rem;
    padding: 0.8125rem;
    border-radius: var(--tnn-radius-xl);
    background: var(--tnn-color-accent-faint);
    color: var(--tnn-color-accent-text);
    margin-bottom: var(--tnn-space-2);
}

.cycle strong {
    font-weight: var(--tnn-font-weight-semibold);
}

.cycle span {
    font-size: var(--tnn-text-sm);
    color: var(--tnn-color-text-muted);
}

.split {
    border-top: 1px solid var(--tnn-color-border);
    padding: var(--tnn-space-12) 0;
}

.split h2 {
    margin: 0 0 var(--tnn-space-8);
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    letter-spacing: var(--tnn-tracking-tight);
    font-weight: var(--tnn-font-weight-semibold);
}

.split-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tnn-space-10);
}

.split-columns > div:last-child {
    border-left: 1px solid var(--tnn-color-border);
    padding-left: var(--tnn-space-10);
}

.split h3 {
    margin: 0 0 var(--tnn-space-2);
    font-size: var(--tnn-text-lg);
    font-weight: var(--tnn-font-weight-semibold);
}

.split p {
    margin: 0 0 var(--tnn-space-3);
}

.pointer-note {
    font-size: var(--tnn-text-sm);
    color: var(--tnn-color-text-muted);
}

.availability {
    max-width: 40rem;
    padding-top: var(--tnn-space-4);
}

.availability-title {
    margin: 0;
    font-size: var(--tnn-text-base);
    font-weight: var(--tnn-font-weight-semibold);
}

.availability-body {
    margin: 0;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tnn-space-4);
    border-top: 1px solid var(--tnn-color-border);
    padding: var(--tnn-space-6) var(--page-pad);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--tnn-space-2);
    color: var(--tnn-color-text-muted);
}

.footer-brand .wordmark {
    font-size: var(--tnn-text-sm);
    font-weight: var(--tnn-font-weight-medium);
}

.footer-status {
    font-size: var(--tnn-text-sm);
    color: var(--tnn-color-text-muted);
}

/* Entrance motion: hero only, staggered, CSS-only. `backwards` fill keeps
 * the pre-delay frames at the from-state; without the media query (or in
 * old browsers) everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes pf-fade-up {
        from {
            opacity: 0;
            transform: translateY(1rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero h1,
    .hero-sub,
    .hero-frame {
        animation: pf-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    }

    .hero-sub {
        animation-delay: 0.1s;
    }

    .hero-frame {
        animation-delay: 0.2s;
    }
}

@media (max-width: 767px) {
    .hero {
        grid-template-columns: 1fr;
        gap: var(--tnn-space-8);
        padding-top: var(--tnn-space-10);
    }

    .hero-frame {
        margin-top: 0;
    }

    .cycle {
        grid-template-columns: 1fr;
        gap: var(--tnn-space-6);
    }

    .split-columns {
        grid-template-columns: 1fr;
        gap: var(--tnn-space-6);
    }

    .split-columns > div:last-child {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--tnn-color-border);
        padding-top: var(--tnn-space-6);
    }
}