/*
 * Landing page styles (anonymous "/").
 *
 * Tailwind utilities cover layout; this file holds what utilities cannot express:
 * keyframes, the hero "reader page" choreography, the paper grain, flip cards and
 * the sync illustration. Every animation is gated behind a class toggled from
 * landing.ts (`landing-js`, `is-visible`, `is-playing`), so prerendered HTML,
 * crawlers and reduced-motion users get the final, fully visible state.
 */

:root {
    --landing-paper: #f6f1e7;
    --landing-paper-deep: #ece4d3;
    --landing-ink: #1f1a17;
    --landing-ink-muted: #5c534b;
    --landing-tail: #b8412f;
    --landing-tail-soft: #f3d9d2;
    --landing-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Responsive switches ─────────────────────────────────────── */
/*
 * GreyParrot.Common ships an unlayered Tailwind v3 sheet after ours; its base
 * utilities (.hidden, .flex, .grid-cols-2, .flex-col …) beat layered md:/sm: variants.
 * The few responsive display switches on the landing therefore live here.
 */

.landing-nav-desktop { display: none; }
.landing-nav-mobile { display: inline-flex; }
.landing-nav-menu { display: block; }

/* Six links plus two CTAs need the lg breakpoint; tablets keep the sheet menu. */
@media (min-width: 1024px) {
    .landing-nav-desktop { display: flex; }
    .landing-nav-mobile,
    .landing-nav-menu { display: none; }
}

.landing-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .landing-cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.landing-row-sm {
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .landing-row-sm {
        flex-direction: row;
        align-items: center;
    }
}

/* ── Paper grain ─────────────────────────────────────────────── */

.landing-grain {
    position: relative;
    isolation: isolate;
}

.landing-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../_content/GreyParrot.Reader.Client/textures/reader-parchment.webp");
    background-size: 640px 640px;
    background-repeat: repeat;
    opacity: .12;
    mix-blend-mode: multiply;
}

/* ── Scroll reveal ───────────────────────────────────────────── */

/* Only elements that landing.ts explicitly queued are hidden; anything rendered later
   (hydrated demos) stays visible even if the observer never sees it. */
.landing-js [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(14px);
}

.landing-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .55s var(--landing-ease), transform .55s var(--landing-ease);
}

.landing-js [data-reveal="1"].is-visible { transition-delay: .08s; }
.landing-js [data-reveal="2"].is-visible { transition-delay: .16s; }
.landing-js [data-reveal="3"].is-visible { transition-delay: .24s; }

/* ── Hero reader page ────────────────────────────────────────── */

.landing-hero-page {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    border-radius: 1.25rem;
    background: var(--landing-paper);
    color: var(--landing-ink);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .6) inset,
        0 24px 60px -24px rgba(31, 26, 23, .45),
        0 8px 20px -12px rgba(31, 26, 23, .25);
    border: 1px solid rgba(31, 26, 23, .1);
    font-family: "Merriweather", Georgia, "Times New Roman", serif;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .landing-hero-page {
        transform: rotate(-1.5deg);
    }
}

.landing-hero-page__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid rgba(31, 26, 23, .08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--landing-ink-muted);
}

.landing-hero-page__pair {
    display: inline-grid;
    grid-template-areas: "stack";
    flex: none;
    white-space: nowrap;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: rgba(31, 26, 23, .06);
    font-weight: 600;
    letter-spacing: .06em;
}

.landing-hero-page__pair > span { grid-area: stack; }

.landing-hero-page__body {
    padding: 1.15rem 1.25rem 1.25rem;
    font-size: 1.02rem;
    line-height: 1.7;
}

@media (min-width: 640px) {
    .landing-hero-page__body { font-size: 1.08rem; padding: 1.4rem 1.6rem 1.5rem; }
}

.landing-hero-page__body p { margin: 0; }

.landing-hero-page__stack {
    display: grid;
    grid-template-areas: "stack";
    margin-top: .9rem;
}

.landing-hero-page__stack > * { grid-area: stack; }

.landing-hero-page__translation {
    font-style: italic;
    font-size: .92em;
    line-height: 1.6;
    color: #6f5a43;
}

/* Tapped word */

.landing-hero-word {
    position: relative;
    white-space: nowrap;
    background-image: linear-gradient(var(--landing-tail), var(--landing-tail));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 1px;
}

.landing-hero-word__ring {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 2.2em;
    height: 2.2em;
    margin: -1.1em 0 0 -1.1em;
    border-radius: 999px;
    border: 2px solid var(--landing-tail);
    opacity: 0;
    pointer-events: none;
}

.landing-hero-inline {
    display: inline-grid;
    grid-template-areas: "stack";
    margin-left: .3em;
    color: var(--landing-tail);
    font-style: italic;
    font-weight: 500;
    font-size: .92em;
    vertical-align: baseline;
}

.landing-hero-inline > i,
.landing-hero-page__pair > span,
.landing-hero-page__stack > p,
.landing-hero-chip__stack > span {
    grid-area: stack;
    font-style: inherit;
}

.landing-hero-inline > i::before { content: "(\00a0"; }
.landing-hero-inline > i::after { content: "\00a0)"; }

/* Language variants: final (non-playing) state shows the first one only. */

[data-lang="2"],
[data-lang="3"] { opacity: 0; }

/* Highlighted phrase */

.landing-hero-highlight {
    background-color: transparent;
    background-image: linear-gradient(rgba(251, 191, 36, .42), rgba(251, 191, 36, .42));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    color: inherit;
    border-bottom: 2px solid #fbbf24;
}

/* Saved chip */

.landing-hero-chip {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: var(--landing-ink);
    color: var(--landing-paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 10px 24px -10px rgba(31, 26, 23, .6);
}

.landing-hero-chip__stack {
    display: inline-grid;
    grid-template-areas: "stack";
}

.landing-hero-chip svg { width: .9rem; height: .9rem; flex: none; }

/* Sequence (9 s per loop, 3 loops cycle the target language) */

.is-playing .landing-hero-word {
    animation: landing-hero-underline 9s linear infinite;
}

.is-playing .landing-hero-word__ring {
    animation: landing-hero-ring 9s var(--landing-ease) infinite;
}

.is-playing .landing-hero-inline {
    animation: landing-hero-inline 9s var(--landing-ease) infinite;
}

.is-playing .landing-hero-page__translation {
    animation: landing-hero-paragraph 9s var(--landing-ease) infinite;
}

.is-playing .landing-hero-highlight {
    animation: landing-hero-highlight 9s var(--landing-ease) infinite;
}

.is-playing .landing-hero-chip {
    animation: landing-hero-chip 9s var(--landing-ease) infinite;
}

.is-playing [data-lang="1"] { animation: landing-hero-lang-1 27s steps(1, end) infinite; }
.is-playing [data-lang="2"] { animation: landing-hero-lang-2 27s steps(1, end) infinite; }
.is-playing [data-lang="3"] { animation: landing-hero-lang-3 27s steps(1, end) infinite; }

@keyframes landing-hero-ring {
    0%, 3%   { opacity: 0; transform: scale(.4); }
    6%       { opacity: .9; transform: scale(.7); }
    12%      { opacity: 0; transform: scale(1.35); }
    100%     { opacity: 0; transform: scale(1.35); }
}

@keyframes landing-hero-underline {
    0%, 10%  { background-size: 0 2px; }
    14%      { background-size: 100% 2px; }
    95%      { background-size: 100% 2px; }
    100%     { background-size: 0 2px; }
}

@keyframes landing-hero-inline {
    0%, 13%  { opacity: 0; transform: translateX(-.35em); }
    19%      { opacity: 1; transform: none; }
    94%      { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateX(-.35em); }
}

@keyframes landing-hero-paragraph {
    0%, 29%  { opacity: 0; transform: translateY(6px); }
    36%      { opacity: 1; transform: none; }
    94%      { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(6px); }
}

@keyframes landing-hero-highlight {
    0%, 47%  { background-size: 0 100%; border-bottom-color: transparent; }
    56%      { background-size: 100% 100%; border-bottom-color: #fbbf24; }
    95%      { background-size: 100% 100%; border-bottom-color: #fbbf24; }
    100%     { background-size: 0 100%; border-bottom-color: transparent; }
}

@keyframes landing-hero-chip {
    0%, 63%  { opacity: 0; transform: translateY(8px) scale(.94); }
    68%      { opacity: 1; transform: none; }
    92%      { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: translateY(8px) scale(.94); }
}

@keyframes landing-hero-lang-1 { 0%, 33.33% { opacity: 1; } 33.34%, 100% { opacity: 0; } }
@keyframes landing-hero-lang-2 { 0%, 33.33% { opacity: 0; } 33.34%, 66.66% { opacity: 1; } 66.67%, 100% { opacity: 0; } }
@keyframes landing-hero-lang-3 { 0%, 66.66% { opacity: 0; } 66.67%, 100% { opacity: 1; } }

/* ── Demo reader frame ───────────────────────────────────────── */

.landing-reader-frame {
    border-radius: 1.25rem;
    border: 1px solid rgba(31, 26, 23, .12);
    background: #fffdf8;
    box-shadow: 0 24px 60px -30px rgba(31, 26, 23, .45);
    overflow: hidden;
}

.landing-reader-frame .read-presenter {
    /* Fallback only: the Typography tab's font choice (SmartStyleBoundary) must win. */
    font-family: var(--parrot-reader-font-family, "Merriweather", Georgia, serif);
}

/* ── Flashcards ──────────────────────────────────────────────── */

.landing-flashcard {
    perspective: 1200px;
    min-height: 9.5rem;
}

.landing-flashcard__inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transform-style: preserve-3d;
    transition: transform .55s var(--landing-ease);
}

.landing-flashcard.is-flipped .landing-flashcard__inner {
    transform: rotateY(180deg);
}

.landing-flashcard__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1rem;
    border: 1px solid rgba(31, 26, 23, .12);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.landing-flashcard__face--front {
    background: #fffdf8;
}

.landing-flashcard__face--back {
    background: var(--landing-ink);
    color: var(--landing-paper);
    transform: rotateY(180deg);
}

.landing-flashcard--new .landing-flashcard__face--front {
    animation: landing-card-in .6s var(--landing-ease);
}

@keyframes landing-card-in {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ── Typography sample ───────────────────────────────────────── */

.landing-type-sample {
    font-family: var(--parrot-reader-font-family, "Merriweather", serif);
    font-size: var(--parrot-reader-font-size, 18px);
    color: var(--parrot-reader-text-color, #1f1a17);
    background-color: var(--parrot-reader-background-color, #f6f1e7);
    line-height: var(--parrot-reader-line-height, 1.6);
    text-align: var(--parrot-reader-text-align, start);
    transition: background-color .35s var(--landing-ease), color .35s var(--landing-ease);
}

.landing-type-sample p {
    margin: 0 0 var(--parrot-reader-paragraph-spacing, 1em);
    text-indent: var(--parrot-reader-paragraph-indent, 0);
}

.landing-type-sample p:last-child { margin-bottom: 0; }

.landing-type-sample .landing-type-inline {
    color: var(--parrot-reader-inline-translation-result-color, #b8412f);
    font-style: var(--parrot-reader-inline-translation-result-font-style, italic);
    font-weight: var(--parrot-reader-inline-translation-result-font-weight, 500);
}

.landing-type-sample .landing-type-paragraph {
    color: var(--parrot-reader-paragraph-translation-color, #6f5a43);
    font-style: var(--parrot-reader-paragraph-translation-font-style, italic);
    font-size: .92em;
}

/* ── Demo settings editor ─────────────────────────────────────── */

.smart-demo-tabs {
    display: inline-flex;
    gap: .25rem;
    padding: .25rem;
    border-radius: .75rem;
    background: rgba(31, 26, 23, .06);
}

.smart-demo-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.25rem;
    padding: 0 .9rem;
    border-radius: .55rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--landing-ink-muted);
    transition: background-color .2s var(--landing-ease), color .2s var(--landing-ease);
}

.smart-demo-tab:hover { background: rgba(255, 255, 255, .6); }

.smart-demo-tab.is-active {
    background: #fffdf8;
    color: var(--landing-ink);
    box-shadow: 0 1px 2px rgba(31, 26, 23, .12);
}

.smart-demo-tab:focus-visible {
    outline: 2px solid var(--landing-tail);
    outline-offset: 2px;
}

/* Cards from the shared editor and from GreyParrot.Common's AreaStyleEditor get one look.
   The theme sheet repaints `.bg-white` with `--gp-surface-raised` (!important), so the
   variable is redefined for the settings panel as well. */
.smart-demo-settings {
    --gp-surface-raised: #fffdf8;
    --gp-surface: #fffdf8;
}

.smart-demo-settings .app-settings-card,
.smart-demo-settings .smart-demo-editor-panel .rounded-xl.border {
    background: #fffdf8 !important;
    border-color: rgba(31, 26, 23, .1) !important;
    border-radius: var(--gp-radius-lg, .75rem);
    box-shadow: none !important;
}

.smart-demo-settings .smart-demo-editor-panel .bg-gray-50 {
    background-color: rgba(31, 26, 23, .04) !important;
}

.smart-demo-settings .smart-demo-editor-panel .rounded-md.bg-white {
    background-color: #fff !important;
}

/* Ink sample on the dark card: translation colours readable on #141516. */
.landing-ink-story {
    --parrot-reader-inline-translation-result-color: #f3d9d2;
    --parrot-reader-inline-translation-result-font-style: italic;
    --parrot-reader-inline-translation-result-font-weight: 500;
    --parrot-reader-inline-translation-source-color: inherit;
    --parrot-reader-inline-translation-source-font-style: normal;
    --parrot-reader-inline-translation-source-font-weight: inherit;
    --parrot-reader-paragraph-translation-color: #b9b0a4;
    --parrot-reader-paragraph-translation-font-style: italic;
    --parrot-reader-paragraph-translation-font-weight: 400;
    --parrot-reader-frame-background-color: #1f1a17;
    --parrot-reader-frame-text-color: #f6f1e7;
    --parrot-reader-frame-muted-text-color: #b9b0a4;
    --parrot-reader-frame-border-color: rgba(246, 241, 231, .18);
    --parrot-reader-frame-accent-color: #f3d9d2;
}

/* SmartBoundary's theme scope paints the app foreground (dark ink); the Ink card is dark. */
.landing-ink-story .smart-boundary-theme-scope,
.landing-ink-story .read-presenter {
    color: #e8e2d6;
    font-family: "Merriweather", Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.7;
}

.landing-ink-story .read-presenter p + p { margin-top: .75rem; }

/* ── Devices scene (Everywhere) ──────────────────────────────── */

.landing-devices {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.is-visible .landing-devices__progress {
    animation: landing-devices-progress 5s var(--landing-ease) infinite;
    transform-box: fill-box;
    transform-origin: left center;
}

.is-visible .landing-devices__links path {
    animation: landing-devices-dash 2.4s linear infinite;
}

.is-visible .landing-devices__badge {
    animation: landing-devices-badge 5s var(--landing-ease) infinite;
}

@keyframes landing-devices-progress {
    0%, 20%  { transform: scaleX(.86); }
    50%, 100% { transform: scaleX(1); }
}

@keyframes landing-devices-dash {
    to { stroke-dashoffset: -20; }
}

@keyframes landing-devices-badge {
    0%, 35%  { opacity: 0; transform: translateY(6px); }
    50%, 90% { opacity: 1; transform: none; }
    100%     { opacity: 0; transform: translateY(6px); }
}

/* ── News mock ───────────────────────────────────────────────── */

.landing-news {
    border-radius: 1.25rem;
    border: 1px solid rgba(31, 26, 23, .12);
    background: #fffdf8;
    box-shadow: 0 24px 60px -30px rgba(31, 26, 23, .45);
    overflow: hidden;
}

.landing-news__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid rgba(31, 26, 23, .08);
    background: var(--landing-paper);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--landing-ink-muted);
}

.landing-news__unread {
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--landing-tail);
    color: var(--landing-paper);
    letter-spacing: .02em;
    text-transform: none;
}

.landing-news__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(31, 26, 23, .08);
}

.landing-news__card {
    padding: .9rem 1rem 1rem;
    background: #fffdf8;
    min-width: 0;
}

.landing-news__card--lead {
    grid-column: 1 / -1;
    background: var(--landing-paper);
}

.landing-news__source {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--landing-ink-muted);
}

.landing-news__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.1rem;
    padding: 0 .3rem;
    border-radius: .3rem;
    background: var(--landing-ink);
    color: var(--landing-paper);
    font-size: .6rem;
    letter-spacing: .06em;
}

.landing-news__headline {
    margin: .45rem 0 0;
    font-family: "Merriweather", Georgia, serif;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.35;
    color: var(--landing-ink);
}

.landing-news__card--lead .landing-news__headline { font-size: 1.15rem; }

.landing-news__excerpt {
    margin: .5rem 0 0;
    font-family: "Merriweather", Georgia, serif;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--landing-ink);
}

.landing-news__inline i {
    color: var(--landing-tail);
    font-weight: 500;
}

.landing-news__translation {
    margin: .4rem 0 0;
    font-size: .85rem;
    line-height: 1.55;
    font-style: italic;
    color: #6f5a43;
}

@media (min-width: 640px) {
    .landing-news__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .landing-news__card--lead { grid-column: 1 / -1; }
}

/* ── Ink story ───────────────────────────────────────────────── */

.landing-ink-choice {
    transition: transform .2s var(--landing-ease), background-color .2s, border-color .2s;
}

.landing-ink-choice:not(:disabled):hover {
    transform: translateX(4px);
}

.landing-ink-step p + p { margin-top: .75rem; }

/* Format badges: long extensions (inkparrot, mdpack) shrink instead of overflowing the tile. */
.landing-format-badge--long {
    font-size: .5rem;
    letter-spacing: 0;
}

/* ── Narrow screens ──────────────────────────────────────────── */

/* Justified reader text produces rivers at phone widths; the demos read left-aligned there. */
@media (max-width: 640px) {
    .landing-reader-frame .read-presenter,
    .landing-reader-frame .read-presenter-apply-text,
    .landing-type-sample,
    .landing-type-sample .read-presenter-apply-text {
        text-align: left !important;
        text-justify: auto !important;
    }
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .landing-js [data-reveal].is-pending {
        opacity: 1;
        transform: none;
    }

    .is-playing .landing-hero-word,
    .is-playing .landing-hero-word__ring,
    .is-playing .landing-hero-inline,
    .is-playing .landing-hero-page__translation,
    .is-playing .landing-hero-highlight,
    .is-playing .landing-hero-chip,
    .is-playing [data-lang],
    .is-visible .landing-devices__progress,
    .is-visible .landing-devices__links path,
    .is-visible .landing-devices__badge,
    .landing-flashcard--new .landing-flashcard__face--front {
        animation: none !important;
    }

    .landing-flashcard__inner,
    .landing-type-sample,
    .landing-ink-choice {
        transition: none !important;
    }
}