/* User-approved A14 comparison, 2026-10-28: reuse the official site's cat
   backdrops. These display colors are not replacements for palette tokens.
   Use A09’s fade position with the shared 110deg / 56% gradient and grain. */
#watch-complications,
:is(#watch-mvp, #watch-care-draft) [data-rhythm-state],
#version-a14[data-brand="catus"] {
  --a14-purple-sky-start: #8065c2;
  --a14-purple-sky-middle: #9178c9;
  --a14-purple-sky-end: #a08dd3;
  --a09-sky-start: var(--a14-purple-sky-start);
  --a09-sky-middle: var(--a14-purple-sky-middle);
  --a09-sky-end: var(--a14-purple-sky-end);
}
:is(#watch-mvp, #watch-care-draft, #watch-complications) [data-rhythm-state="high"],
#version-a14[data-brand="catus"][data-rhythm-state="high"] {
  --a09-sky-start: #87966f;
  --a09-sky-middle: #a0b187;
  --a09-sky-end: #b9c7a3;
}
:is(#watch-mvp, #watch-care-draft, #watch-complications) [data-rhythm-state="low"],
#version-a14[data-brand="catus"][data-rhythm-state="low"] {
  --a09-sky-start: #ce9b6d;
  --a09-sky-middle: #e2b587;
  --a09-sky-end: #edcda9;
}
:is(#watch-mvp, #watch-care-draft, #watch-complications) [data-rhythm-state="rest"],
#version-a14[data-brand="catus"][data-rhythm-state="rest"] {
  --a09-sky-start: #c67b96;
  --a09-sky-middle: #d994ad;
  --a09-sky-end: #e8b3c4;
}

/* Keep the cat backdrop intact before it fades into the reading surface, as in A09. */
#version-a14[data-brand="catus"] .screen:not(:has(.rhythm-main[hidden])) {
  --a09-fade-start: 230px;
}

/* Preserve the colored header; match settings' clean white reading background below. */
#version-a14[data-brand="catus"].perch-ready:not(.insight-detail-open) .phone .screen:not(:has(.rhythm-main[hidden])) {
  --a14-energy-background: linear-gradient(180deg, transparent 230px, color-mix(in srgb, var(--c-surface) 55%, transparent) 320px, var(--c-surface) 480px),
    url('./three-preview/purple-grain.svg?v=4') repeat,
    linear-gradient(110deg, var(--a09-sky-start), var(--a09-sky-middle) 56%, var(--a09-sky-end));
  background: var(--a14-energy-background);
  background-blend-mode: normal, soft-light, normal;
}
#version-a14[data-brand="catus"].perch-ready:not(.insight-detail-open) .phone .screen .rhythm-main:not([hidden]) {
  background: var(--a14-energy-background);
  background-blend-mode: normal, soft-light, normal;
  background-attachment: local;
}

/* Shared content material; preserve this page's approved layout. */
#version-a14[data-brand="catus"] .phone .screen .rhythm-main :is(.energy-section .energy-card, .a12-daily-card.a12-approved-overview) {
  background: var(--zoomie-glass-background);
  -webkit-backdrop-filter: var(--zoomie-glass-blur);
  backdrop-filter: var(--zoomie-glass-blur);
  box-shadow: var(--zoomie-glass-shadow);
  outline: var(--zoomie-glass-outline);
  outline-offset: -1px;
}