/* Command Center hero: the Transmission card.
   One card that retunes between Verse products: a screenshot (or video, for COSMOS)
   above the product's line and a link to its page. Markup and copy live in home.html
   (#ccx-tx) so the i18n dictionaries can translate them; js/home-transmission.js runs
   the rotation. Each channel carries its product's own accent (data-accent), and the
   card eases --tx-acc between them, so the hairline, glow, tag, link and progress all
   retune together. */

@property --tx-acc { syntax: '<color>'; inherits: true; initial-value: #6fd6ff; }

@keyframes ccxTxScan  { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ccxTxBeam  { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes ccxTxDim   { to { filter: brightness(.42) saturate(.35); } }
@keyframes ccxTxOut   { to { opacity: 0; } }
@keyframes ccxTxTune  { from { opacity: 0; transform: translateY(7px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ccxTxDrift { from { transform: scale(1.015) translate3d(0, 0, 0); } to { transform: scale(1.085) translate3d(-1.4%, -1.8%, 0); } }

#cc-container .ccx-tx {
    --tx-acc: #6fd6ff;
    position: relative;
    align-self: end;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    border-color: color-mix(in srgb, var(--tx-acc) 24%, rgba(255, 255, 255, .08));
    background: rgba(9, 15, 27, .68);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 34px 90px -56px var(--tx-acc);
    transition: --tx-acc .8s ease;
}
/* top hairline: the "carrier" of the current channel */
#cc-container .ccx-tx::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--tx-acc), transparent);
    opacity: .85;
}

/* ── Stage: every channel stacked in one cell, so the card is as tall as its
      tallest channel and never jumps when the copy length changes ── */
#cc-container .ccx-tx-stage { position: relative; display: grid; }
#cc-container .ccx-ch { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; visibility: hidden; }
#cc-container .ccx-ch.is-on,
#cc-container .ccx-ch.is-leaving { visibility: visible; }
#cc-container .ccx-ch.is-on { z-index: 2; }
#cc-container .ccx-ch.is-leaving { z-index: 1; }

/* ── Media: the product's own page ── */
#cc-container .ccx-ch-media {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: #0a1120;
    text-decoration: none;
}
#cc-container .ccx-ch-media img,
#cc-container .ccx-ch-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
    transform-origin: 28% 18%;
}
/* a slow push-in while a channel is on air (paused with the rotation) */
#cc-container .ccx-ch:is(.is-on, .is-leaving) .ccx-ch-media > :is(img, video) {
    animation: ccxTxDrift var(--tx-dwell, 7000ms) linear both;
}
#cc-container .ccx-tx.is-held .ccx-ch-media > :is(img, video) { animation-play-state: paused; }
/* fold the bottom of the screenshot into the card body */
#cc-container .ccx-ch-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(9, 15, 27, .9) 0%, rgba(9, 15, 27, 0) 34%),
                linear-gradient(to bottom, rgba(4, 6, 13, .35), transparent 22%);
}

/* the page's address, so it reads as a window onto a real page */
#cc-container .ccx-ch-url {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 6px 10px 6px 9px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(4, 6, 13, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font: 500 10.5px/1.1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .02em;
    color: rgba(233, 240, 248, .84);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#cc-container .ccx-ch-url::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tx-acc);
    box-shadow: 0 0 8px var(--tx-acc);
}

/* ── Body: what it is, and the way in ── */
#cc-container .ccx-ch-body { display: flex; flex-direction: column; padding: 16px 20px 18px; }
#cc-container .ccx-ch-tag {
    font: 400 10px/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tx-acc);
}
#cc-container .ccx-ch-title {
    margin: 10px 0 0;
    font: 600 21px/1.2 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: -.015em;
    text-transform: none;
    color: #eef4fa;
    text-wrap: balance;
}
#cc-container .ccx-ch-body p {
    margin: 7px 0 0;
    max-width: 54ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(233, 240, 248, .64);
    text-align: left;
}
#cc-container .ccx-ch-cta {
    align-self: flex-start;
    margin-top: 12px;
    padding: 4px 0;
    font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tx-acc);
    text-decoration: none;
    transition: color .2s ease;
}
#cc-container .ccx-ch-cta:hover { color: #fff; }
#cc-container .ccx-ch-cta:focus-visible,
#cc-container .ccx-ch-media:focus-visible { outline: 2px solid var(--tx-acc); outline-offset: 3px; border-radius: 4px; }

/* ── Retune: the new page is scanned in under a beam of its own colour while the
      old one dims, and the copy comes into focus line by line ── */
#cc-container .ccx-tx-beam {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 2 / 1;
    pointer-events: none;
}
#cc-container .ccx-tx-beam::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    opacity: 0;
    background: var(--tx-acc);
    box-shadow: 0 0 22px 4px var(--tx-acc), 0 0 2px 1px rgba(255, 255, 255, .9);
}
#cc-container .ccx-tx.is-scanning .ccx-tx-beam::before { animation: ccxTxBeam .72s cubic-bezier(.65, 0, .25, 1) both; }
#cc-container .ccx-ch.is-entering .ccx-ch-media { animation: ccxTxScan .72s cubic-bezier(.65, 0, .25, 1) both; }
#cc-container .ccx-ch.is-leaving .ccx-ch-media { animation: ccxTxDim .72s ease both; }
#cc-container .ccx-ch.is-leaving .ccx-ch-body { animation: ccxTxOut .16s ease both; }
#cc-container .ccx-ch.is-entering .ccx-ch-body > * { animation: ccxTxTune .55s cubic-bezier(.2, .7, .2, 1) both; }
#cc-container .ccx-ch.is-entering .ccx-ch-body > :nth-child(1) { animation-delay: .14s; }
#cc-container .ccx-ch.is-entering .ccx-ch-body > :nth-child(2) { animation-delay: .2s; }
#cc-container .ccx-ch.is-entering .ccx-ch-body > :nth-child(3) { animation-delay: .26s; }
#cc-container .ccx-ch.is-entering .ccx-ch-body > :nth-child(4) { animation-delay: .32s; }

/* ── Tuner bar, along the top like a receiver's tuning strip (it stays clear of the
      floating Versona guide in the bottom-right corner): one segment per channel, the
      tuned one widening and filling while it is on air, the channel number, and
      prev / pause / next ── */
#cc-container .ccx-tx-bar { display: none; align-items: center; gap: 12px; padding: 9px 10px 9px 18px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
#cc-container .ccx-tx.is-live .ccx-tx-bar { display: flex; }
#cc-container .ccx-tx-segs { flex: 1; display: flex; gap: 4px; min-width: 0; }
#cc-container .ccx-tx-seg {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    transition: flex-grow .5s cubic-bezier(.2, .7, .2, 1);
}
#cc-container .ccx-tx-seg.is-on { flex-grow: 2.6; }
#cc-container .ccx-tx-seg::before,
#cc-container .ccx-tx-seg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 2px;
}
#cc-container .ccx-tx-seg::before { right: 0; background: rgba(255, 255, 255, .13); transition: background .2s ease; }
#cc-container .ccx-tx-seg::after {
    width: calc(var(--p, 0) * 100%);
    background: var(--tx-acc);
    box-shadow: 0 0 10px -1px var(--tx-acc);
}
#cc-container .ccx-tx-seg:hover::before { background: rgba(255, 255, 255, .3); }
#cc-container .ccx-tx-seg:focus-visible { outline: 2px solid var(--tx-acc); outline-offset: 1px; }
#cc-container .ccx-tx-count {
    flex: none;
    font: 400 10.5px/1 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: rgba(233, 240, 248, .5);
}
#cc-container .ccx-tx-now { color: #e9f0f8; }
#cc-container .ccx-tx-ctrls { flex: none; display: flex; gap: 4px; }
#cc-container .ccx-tx-btn {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    color: rgba(233, 240, 248, .72);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
#cc-container .ccx-tx-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: color-mix(in srgb, var(--tx-acc) 50%, transparent); }
#cc-container .ccx-tx-btn:focus-visible { outline: 2px solid var(--tx-acc); outline-offset: 2px; }
#cc-container .ccx-tx-btn svg { width: 12px; height: 12px; }
#cc-container .ccx-tx-btn .ccx-i-play { display: none; }
#cc-container .ccx-tx-btn[aria-pressed="true"] .ccx-i-play { display: block; }
#cc-container .ccx-tx-btn[aria-pressed="true"] .ccx-i-pause { display: none; }

#cc-container .ccx-tx-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Responsive ── */
@media (max-width: 980px) {
    #cc-container .cc-hero .ccx-tx { margin-top: 28px; max-width: 540px; }
}
@media (max-width: 768px) {
    #cc-container .cc-hero .ccx-tx { max-width: none; }
}
@media (max-width: 480px) {
    #cc-container .ccx-ch-body { padding: 14px 16px 16px; }
    #cc-container .ccx-ch-title { font-size: 19px; }
    #cc-container .ccx-tx-bar { gap: 10px; padding: 8px 8px 8px 16px; }
    #cc-container .ccx-tx-count { display: none; }
}

/* Reduced motion: no scan, drift or blur; the script also starts the card paused
   and swaps channels in place. */
@media (prefers-reduced-motion: reduce) {
    #cc-container .ccx-tx { transition: none; }
    #cc-container .ccx-tx *,
    #cc-container .ccx-tx *::before,
    #cc-container .ccx-tx *::after { animation: none !important; transition: none !important; }
}