/*
 * Thrystal Annotation Platform: the product's own look, used wherever
 * thrystal.com presents it (the home page's Products section, products.html).
 *
 * It mirrors annotate.thrystal.com's sign-in page: a near-black ground,
 * traced topographic contours, emerald / sky / violet glows, emerald for
 * action. The parent site stays navy and sky blue; this palette marks the
 * product inside it. See brand/README.md, "Products".
 *
 * Colours are the Tailwind values the app uses, as hex.
 */

:root{
    --ap-ground:#030712;       /* gray-950 */
    --ap-card:#101828;         /* gray-900 */
    --ap-text:#d1d5dc;         /* gray-300 */
    --ap-muted:#99a1af;        /* gray-400 */
    --ap-faint:#6a7282;        /* gray-500 */
    --ap-emerald-200:#a7f3d0;
    --ap-emerald-300:#6ee7b7;
    --ap-emerald-400:#34d399;
    --ap-emerald-500:#10b981;
    --ap-sky-300:#7dd3fc;
    --ap-violet-300:#c4b5fd;
    --ap-amber-300:#fcd34d;
    --ap-pink-300:#f9a8d4;
}

/* ── Icons (filled in by annotate.js) ─────────── */

.ap-ico{
    display:inline-flex;
    flex-shrink:0;
    width:16px;
    height:16px;
}
.ap-ico svg{width:100%;height:100%;display:block}

/* ── The product panel ────────────────────────── */
/* A 1px gradient frame around a near-black panel, the same treatment as the
   app's sign-in card. Contours and glows sit beneath the content. */

.ap-frame{
    padding:1px;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(52,211,153,0.42), rgba(255,255,255,0.1) 50%, rgba(56,189,248,0.32));
    box-shadow:0 25px 60px -12px rgba(2,44,34,0.55), 0 8px 32px rgba(0,0,0,0.45);
}

.ap-panel{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-radius:17px;
    background:rgba(3,7,18,0.92);
    color:var(--ap-text);
    padding:32px;
}

.ap-contours{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 75%);
    mask-image:radial-gradient(ellipse 80% 70% at 60% 30%, #000 30%, transparent 75%);
    animation:ap-drift 40s ease-in-out infinite alternate;
}

.ap-aurora{
    position:absolute;
    z-index:-2;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
    animation:ap-aurora 18s ease-in-out infinite alternate;
}
.ap-aurora.emerald{background:rgba(16,185,129,0.2)}
.ap-aurora.sky{background:rgba(14,165,233,0.17);animation-delay:-8s}
.ap-aurora.violet{background:rgba(139,92,246,0.14);animation-delay:-4s}

/* Top row of a panel: the lockup, with the badge beside it or below it. */
.ap-head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px 16px;
    margin-bottom:28px;
}

/* ── Lockup: emblem · Thrystal · Annotation Platform ── */

.ap-lockup{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    line-height:1;
    white-space:nowrap;
}
.ap-lockup .ap-mark{height:26px;width:auto;flex-shrink:0;overflow:visible}
.ap-lockup b{color:#fff;font-weight:600;letter-spacing:-0.01em}
.ap-lockup span{color:var(--ap-faint);font-size:14px}

/* ── Badge with a live dot ────────────────────── */

.ap-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(52,211,153,0.22);
    background:rgba(52,211,153,0.06);
    color:var(--ap-emerald-200);
    border-radius:999px;
    padding:4px 12px;
    font-size:12px;
    line-height:1.4;
    white-space:nowrap;
}
.ap-dot{position:relative;width:8px;height:8px;flex-shrink:0}
.ap-dot::before,
.ap-dot::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:var(--ap-emerald-400);
}
.ap-dot::before{opacity:0.75;animation:ap-ping 1.6s cubic-bezier(0,0,0.2,1) infinite}

/* ── Type ─────────────────────────────────────── */

.ap-eyebrow{
    font-size:13px;
    font-weight:500;
    color:var(--ap-emerald-300);
    margin:0 0 8px;
}

/* Headings opt out of the site's monospace section-label style for h2. */
.ap-title,
.ap-h2{
    font-family:inherit;
    text-transform:none;
}

.ap-h2{
    margin:0;
    font-size:32px;
    font-weight:600;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:#fff;
}

.ap-title{
    margin:0;
    font-size:44px;
    font-weight:600;
    line-height:1.05;
    letter-spacing:-0.025em;
    color:#fff;
    text-wrap:balance;
}

.ap-shimmer{
    background:linear-gradient(90deg, var(--ap-emerald-300), var(--ap-sky-300), var(--ap-violet-300), var(--ap-emerald-300));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:ap-shimmer 6s linear infinite;
}

.ap-lede{
    margin:20px 0 0;
    max-width:560px;
    font-size:17px;
    line-height:1.65;
    color:var(--ap-muted);
}

/* ── Integration chips ────────────────────────── */

.ap-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:24px;
}
.ap-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05);
    border-radius:999px;
    padding:4px 12px;
    font-size:12px;
    line-height:1.4;
    color:var(--ap-text);
    white-space:nowrap;
}
.ap-chip .ap-ico{width:13px;height:13px;color:var(--ap-muted)}

/* ── Buttons ──────────────────────────────────── */

.ap-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:28px;
}

.ap-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    padding:10px 20px;
    font-size:14px;
    font-weight:500;
    line-height:1.3;
    text-decoration:none;
    transition:background-color 0.2s, color 0.2s;
}
.ap-btn:hover{text-decoration:none}
.ap-btn .ap-ico{transition:transform 0.2s}
.ap-btn:hover .ap-ico{transform:translateX(2px)}
.ap-btn:hover .ap-ico.up{transform:translate(2px,-2px)}

.ap-btn-primary{
    background:var(--ap-emerald-500);
    color:var(--ap-ground);
    box-shadow:0 10px 24px -6px rgba(16,185,129,0.35);
}
.ap-btn-primary:hover{background:var(--ap-emerald-400)}

.ap-btn-ghost{
    color:var(--ap-text);
    padding-left:14px;
    padding-right:14px;
}
.ap-btn-ghost:hover{color:#fff;background:rgba(255,255,255,0.06)}

.ap-btn:focus-visible{outline:2px solid var(--ap-emerald-300);outline-offset:3px}

/* ── Feature cards ────────────────────────────── */

.ap-features{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

.ap-feature{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(3,7,18,0.72);
    backdrop-filter:blur(6px);
    border-radius:16px;
    padding:22px;
    transition:border-color 0.2s, background-color 0.2s;
}
.ap-feature:hover{border-color:rgba(255,255,255,0.12);background:rgba(3,7,18,0.82)}
.ap-feature h3{margin:18px 0 0;font-size:15px;font-weight:500;color:#fff}
.ap-feature p{margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--ap-muted)}

.ap-tile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:12px;
    transition:background-color 0.2s;
}
.ap-tile .ap-ico{width:20px;height:20px}
.ap-tile.emerald{color:var(--ap-emerald-300);background:rgba(52,211,153,0.1)}
.ap-tile.violet{color:var(--ap-violet-300);background:rgba(167,139,250,0.1)}
.ap-tile.amber{color:var(--ap-amber-300);background:rgba(251,191,36,0.1)}
.ap-tile.sky{color:var(--ap-sky-300);background:rgba(56,189,248,0.1)}
.ap-tile.pink{color:var(--ap-pink-300);background:rgba(244,114,182,0.1)}
.ap-feature:hover .ap-tile{filter:brightness(1.25)}

/* ── Use-case ticker ──────────────────────────── */

.ap-ticker{
    border-block:1px solid rgba(255,255,255,0.06);
    background:rgba(3,7,18,0.55);
    padding:22px 0;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.ap-marquee{
    display:flex;
    width:max-content;
    animation:ap-marquee 45s linear infinite;
}
.ap-use{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 24px;
    color:var(--ap-muted);
    font-size:15px;
    white-space:nowrap;
}
.ap-use .ap-ico{width:18px;height:18px;color:rgba(110,231,183,0.8)}

/* ── Motion ───────────────────────────────────── */

@keyframes ap-drift{from{transform:translate(0,0)}to{transform:translate(-40px,24px)}}
@keyframes ap-aurora{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(40px,30px) scale(1.12)}
    100%{transform:translate(-30px,10px) scale(0.95)}
}
@keyframes ap-shimmer{to{background-position:200% center}}
@keyframes ap-ping{75%,100%{transform:scale(2.2);opacity:0}}
@keyframes ap-marquee{to{transform:translateX(-50%)}}
@keyframes ap-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion: reduce){
    .ap-contours,.ap-aurora,.ap-shimmer,.ap-marquee{animation:none}
    .ap-dot::before{display:none}
    .ap-marquee-copy{display:none}
    .ap-ticker{-webkit-mask-image:none;mask-image:none}
    .ap-marquee{flex-wrap:wrap;justify-content:center;width:auto;row-gap:12px}
}

/* ── Small screens ────────────────────────────── */

@media(max-width:860px){
    .ap-features{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
    .ap-title{font-size:36px}
    .ap-lede{font-size:16px}
}

@media(max-width:560px){
    .ap-panel{padding:24px 20px}
    .ap-title{font-size:30px}
    .ap-features{grid-template-columns:1fr}
    .ap-lockup span{display:none}
    /* Icon beside the title on a phone, as the app does, rather than above it. */
    .ap-feature{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:18px}
    .ap-feature h3{margin:0}
    .ap-feature p{grid-column:1 / -1;margin-top:10px}
    .ap-tile{width:36px;height:36px}
}