/* Ditto — letter page in the system font.
   White page, the system's label grays, the app's orange accent on the button, and the same type as
   the app: San Francisco, regular for reading and bold for the wordmark, headline, and button. The app's
   HUD introduces the page with a soft blur-and-scale entrance and exit. */

:root {
    color-scheme: light dark;

    --bg: #ffffff;
    --ink: #1d1d1f;
    --ink-2: #6e6e73; /* the system's secondary label */
    --ink-3: #86868b;
    --ink-4: #86868b;
    --accent: #ff8d28;       /* systemOrange in light appearance, the app's AccentColor */
    --red: #ff3b30;          /* systemRed, the HUD's recording dot */
    --green: #28cd41;        /* systemGreen, the HUD's check */

    /* The HUD's glass: a faint tint so it reads as a platter, and the rim from HUD.swift's GlassRim. */
    --glass: rgba(246, 246, 248, 0.72);
    --glass-shadow: rgba(0, 0, 0, 0.2);
    --rim-bloom: rgba(255, 255, 255, 0.25);
    --rim-line: rgba(255, 255, 255, 0.6);
}

/* Dark appearance: the same roles in their dark-mode system values. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c1c1e;
        --ink: #f5f5f7;
        --ink-2: #98989d;
        --ink-3: #8e8e93;
        --ink-4: #8e8e93;
        --accent: #ff9f0a;   /* systemOrange in dark appearance */
        --red: #ff453a;
        --green: #30d158;

        --glass: rgba(58, 58, 60, 0.72);
        --glass-shadow: rgba(0, 0, 0, 0.8);
        --rim-bloom: rgba(255, 255, 255, 0.1);
        --rim-line: rgba(255, 255, 255, 0.2);
    }
}

* { box-sizing: border-box; }

html {
    background: var(--bg);
    color: var(--ink);
    font: 400 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-synthesis: none;
    scrollbar-gutter: stable; /* Avoid a horizontal shift when intro scrolling unlocks. */
}

body { margin: 0; }

/* Hidden copy reserves its layout, but must not create a scrollable intro.
   Fix the body as well for mobile Safari and browser scroll restoration. */
html.intro-scroll-locked,
.intro-scroll-locked body {
    overflow: hidden;
    overscroll-behavior: none;
}
.intro-scroll-locked body { position: fixed; inset: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }

h1, p { margin: 0; }

/* ---------- top: just the logo ---------- */

.top {
    max-width: 658px;
    margin: 0 auto;
    padding: 64px 34px 0;
    text-align: center;
}

/* Supplied logo at its original 69 × 20 size. */
.logo { display: inline-flex; transition: opacity 0.65s ease-out; }
.intro-logo-hidden .logo { visibility: hidden; opacity: 0; transition: none; }
.logo img { display: block; width: 69px; height: 20px; }
@media (prefers-color-scheme: dark) {
    .logo img { filter: invert(1); }
}

/* ---------- page ---------- */

.page {
    max-width: 658px;
    margin: 32px auto 0;
    padding: 0 34px 80px;
}

/* Let the centered hero extend beyond the left-aligned letter column on desktop. */
.hero { text-align: center; margin: 0 -40px; }

.hero-title { position: relative; }

.hero h1,
.intro-placeholder {
    font-size: 64px;
    line-height: 1.05;
    font-weight: 700;
}

/* The empty text target only exists visually while the opening sequence plays. */
.intro-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    color: color-mix(in srgb, var(--ink-3) 40%, transparent);
    pointer-events: none;
    user-select: none;
}

.intro-pending .intro-placeholder { display: block; }
.intro-placeholder span { display: inline-block; position: relative; white-space: nowrap; }
.intro-placeholder span::before,
.title-caret {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.17em; /* Match the native caret’s height in the reference. */
    border-radius: 999px;
    background: var(--accent);
    animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.intro-placeholder span::before { right: calc(100% - 2px); }

/* Reveal the intact heading without changing its typography at completion. */
.title-caret { pointer-events: none; animation: none; }
/* Keep the same compositing mode when the temporary typing offset is removed. */
.hero h1,
.intro-pending .hero h1[data-intro] { transform: translate3d(0, 0, 0); }
.intro-revealing .hero h1[data-intro] { transition: none; }

.lead {
    margin-top: 23px;
    font-size: 23px;
    line-height: 1.45;
    color: var(--ink-2);
}

.actions { margin-top: 30px; }

.button {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 16px 68px 16px 56px; /* Match Pip’s icon-and-label optical alignment. */
    background: linear-gradient(180deg, #ffad3d, #ff8d28); /* Bright orange throughout, like the app icon; no muddy black mix. */
    color: #fff;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    box-shadow:
        0 1px 1px rgb(0 0 0 / 10%),
        0 2px 4px rgb(0 0 0 / 5%),
        inset 0 0.5px 0 rgb(255 255 255 / 45%);
    transition: transform .12s ease-out, box-shadow .12s ease-out;
}

.button > svg { flex: none; color: rgb(255 255 255 / 48%); }
.button:active {
    transform: translateY(2px);
    box-shadow:
        0 0 0 transparent,
        0 0 0 transparent,
        inset 0 0.5px 0 rgb(255 255 255 / 45%);
}

@media (prefers-color-scheme: dark) {
    .button > svg { color: rgb(255 255 255 / 60%); }
}

.meta {
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-3);
}

/* ---------- letter ---------- */

.letter {
    max-width: 590px;
    margin-top: 44px;
    font-size: 20px;
    line-height: 1.5;
}

.letter p + p { margin-top: 22px; }
.letter .sign {
	color: var(--ink-4);
	text-align: center;
	transform: translateX(calc(-16px + 6pt));
}

/* Keep layout reserved while the intro plays. Hidden content cannot receive focus. */
.intro-pending [data-intro] {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-18px);
}

.intro-revealing [data-intro] {
    transition:
        opacity 0.65s ease-out var(--intro-delay, 0ms),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--intro-delay, 0ms);
}

/* ---------- the HUD ---------- */

.hud {
    display: flex;
    justify-content: center;
    height: 52px;
    margin-bottom: 34px; /* Keep the headline still while the capsule disappears. */
    pointer-events: none;
}

.hud-capsule {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 20px 0 12px;
    border-radius: 26px;
    color: var(--ink);
    font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 8px 30px var(--glass-shadow);
    width: 243px;
    flex: none;
    transition:
        opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s; /* Let outgoing content fade before resizing. */
}

.intro-preparing .hud-capsule,
.hud-capsule.is-hidden { opacity: 0; transform: scale(1.1); filter: blur(12px); }
.hud-capsule.no-width-transition { transition-property: opacity, transform, filter; }

/* The lens rim from HUD.swift's GlassRim: a soft bloom just inside the edge with a crisp hairline on
   top, strongest along the straight top and bottom edges and fading over one cap radius at each end. */
.hud-capsule::before,
.hud-capsule::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: plus-lighter;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), #000 26px, #000 calc(100% - 26px), rgba(0, 0, 0, 0.2));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), #000 26px, #000 calc(100% - 26px), rgba(0, 0, 0, 0.2));
}

.hud-capsule::before { box-shadow: inset 0 0 0 3px var(--rim-bloom); filter: blur(2px); }
.hud-capsule::after { box-shadow: inset 0 0 0 1px var(--rim-line); }

/* Preserve the app's original rim and shadow. A slight tonal roll and broad reflection
   add curvature to the light surface without introducing a new edge treatment. */
.hud-core { display: none; }
@media (prefers-color-scheme: light) {
    .hud-capsule {
        /* Local, normal-alpha highlights make these opacity controls predictable.
           The page behind this capsule is plain white, so backdrop filtering adds no detail. */
        isolation: isolate;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        /* A faint inset follows the rounded caps, joining the top and bottom shading. */
        box-shadow:
            0 8px 30px var(--glass-shadow),
            inset 5px 0 8px -5px rgba(85, 100, 125, 0.18),
            inset -5px 0 8px -5px rgba(85, 100, 125, 0.18);
        --rim-bloom: rgba(255, 255, 255, 0.5);
        --rim-line: rgba(255, 255, 255, 1);
        background: linear-gradient(180deg,
            rgba(234, 235, 238, 0.72),
            rgba(255, 255, 255, 0.85) 24%,
            rgba(252, 253, 254, 0.80) 82%,
            rgba(231, 233, 237, 0.72));
    }
    .hud-capsule::before,
    .hud-capsule::after,
    .hud .dot::before { mix-blend-mode: normal; }
    /* Carry both highlights farther around the caps before they fade. */
    .hud-capsule::before,
    .hud-capsule::after {
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), #000 20px, #000 calc(100% - 20px), rgba(0, 0, 0, 0.35));
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), #000 20px, #000 calc(100% - 20px), rgba(0, 0, 0, 0.35));
    }
    .hud-core {
        display: block;
        position: absolute;
        inset: 6px 12px 12px;
        border-radius: 50%;
        background: radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.35) 50%, transparent 80%);
        filter: blur(6px);
        pointer-events: none;
    }
}

/* Clip only content, preserving the capsule’s glass rim and outer shadow. */
.hud-viewport {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.hud-content {
    position: absolute;
    left: 12px;
    top: 0;
    width: max-content;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.hud-content.is-active { opacity: 1; transition: opacity 0.15s ease-in 0.12s; }
.hud-content[data-phase="transcribing"],
.hud-content[data-phase="inserted"] { font-size: 15px; }
.hud .secondary { opacity: 0.7; }
/* Web approximation of the native small ProgressView: stationary rounded spokes
   with a clockwise fading highlight, rather than a rotating open ring. */
.hud .spinner {
    display: block;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    color: var(--ink-2);
    flex: none;
}
.hud .spinner rect {
    opacity: 0.25;
    animation: spinner-fade 0.8s linear infinite;
    animation-delay: calc(var(--spoke) * 0.1s - 0.8s);
    animation-play-state: paused;
}
.hud-content.is-active .spinner rect { animation-play-state: running; }
@keyframes spinner-fade {
    0% { opacity: 1; }
    100% { opacity: 0.25; }
}
.hud .check { display: block; flex: none; }
.hud .check circle { fill: var(--green); }

.hud .dot {
    position: relative;
    width: 8px;
    height: 8px;
    margin: 0 -2px 0 8px; /* the app's 8 pt leading, -2 pt trailing */
    border-radius: 50%;
    background: var(--red);
    flex: none;
}

/* A soft glint from the top down to the middle of the dot, lifted with plus-lighter like the app. */
.hud .dot::before {
    content: "";
    position: absolute;
    inset: 0.5px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 50%);
    mix-blend-mode: plus-lighter;
}

.hud .dot::after {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--red);
    filter: blur(5px);
    z-index: -1;
    animation: breathe 2.2s ease-in-out infinite;
}

@keyframes breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* The script reads the canvas's `color` for the bars, so they follow the appearance too. */
.hud canvas.wave { display: block; width: 189px; height: 28px; color: var(--ink); opacity: 0.6; }

/* ---------- small screens ---------- */

@media (max-width: 720px) {
    .top { padding: 30px 24px 0; }
    .page { margin-top: 42px; padding: 0 24px 64px; }
    .hero { margin: 0; }
    .hero h1 { font-size: clamp(40px, 11.5vw, 58px); }
    .intro-placeholder { font-size: min(58px, 10vw); } /* Keep the placeholder on one line, including its caret. */
    .lead { font-size: 21px; }
    .letter { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .intro-pending .intro-placeholder { display: none; }
    .hud .dot::after, .hud .spinner rect { animation: none; }
    .title-caret { display: none; }
    .hero h1 { clip-path: none !important; }
    .logo, .hud-capsule, .hud-content, .button,
    .intro-revealing [data-intro], .intro-revealing .hero h1[data-intro] { transition: none; }
    .intro-pending [data-intro] { visibility: visible; opacity: 1; transform: none; }
}