/**
 * Auto Heal, as a 10 s loop (home page #heal, played by js/home.js).
 *
 * One timeline, written as keyframe percentages of --hs-t:
 *   0–19 %   the frame is scanned against the source
 *   22–46 %  the difference is found and boxed
 *   33–42 %  the pointer clicks Auto Heal
 *   46–57 %  the badge is restored in place
 *   60–94 %  restored, and added to the PDF report; then it loops
 *
 * The frame is te20-05; the "before" is a simulated smear over the real
 * badge until a real before/after pair replaces it (TEMP, home-heal-pair).
 */

.heal-scene {
    --hs-t: 10s;
    --hs-ok: #43c283;
    --hs-warn: #fbbf24;
    --hs-accent: #05c7bb;
    --hs-surface: #232526;
    --hs-border: rgba(255, 255, 255, 0.10);
    --hs-text: #dde0e2;
    --hs-muted: #989ea1;

    position: relative;
    overflow: hidden;
    border: 1px solid var(--hs-border);
    border-radius: 1.1rem;
    background: #1b1c1d;
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
    color: var(--hs-text);
    font: 13px/1.45 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.hs-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 14px;
    border-bottom: 1px solid var(--hs-border);
    background: var(--hs-surface);
    white-space: nowrap;
}

.hs-bar__dots { display: inline-flex; gap: 6px; flex: none; }
.hs-bar__dots i { width: 9px; height: 9px; border-radius: 50%; background: #343739; }
.hs-bar__title { flex: none; font-size: 12.5px; font-weight: 600; }
.hs-bar__src { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--hs-muted); }

.hs-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13.5rem;
}

/* ── The frame ─────────────────────────────────────────────────────────── */

.hs-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111;
}

.hs-frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The badge sits at 46–75 % across, 26–56 % down in this crop. */
.hs-garble,
.hs-box {
    position: absolute;
    left: 46%;
    top: 26%;
    width: 29%;
    height: 30%;
}

.hs-garble {
    -webkit-backdrop-filter: blur(2.8px) contrast(1.15);
    backdrop-filter: blur(2.8px) contrast(1.15);
    border-radius: 6px;
    animation: hsGarble var(--hs-t) linear infinite;
}

.hs-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 18%;
    margin-top: -18%;
    background: linear-gradient(180deg, transparent, rgba(5, 199, 187, 0.22) 70%, rgba(5, 199, 187, 0.9) 100%);
    border-bottom: 1.5px solid var(--hs-accent);
    animation: hsScan var(--hs-t) linear infinite;
}

.hs-box {
    color: var(--hs-warn);
    animation: hsBox var(--hs-t) var(--hs-ease, cubic-bezier(0.16, 1, 0.3, 1)) infinite;
}

/* Four corner brackets in the box's colour */
.hs-box i {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
}

.hs-box i:nth-child(1) { left: -4px; top: -4px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.hs-box i:nth-child(2) { right: -4px; top: -4px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.hs-box i:nth-child(3) { left: -4px; bottom: -4px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.hs-box i:nth-child(4) { right: -4px; bottom: -4px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

/* While it heals, a shimmer runs over the region. */
.hs-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.28) 50%, transparent 80%) 0 0 / 220% 100%;
    animation: hsShimmer var(--hs-t) linear infinite;
}

/* Under the box, ending at the frame's right edge: started at 46% across,
   the label ran out of a narrow frame. */
.hs-tag {
    position: absolute;
    right: 8px;
    top: calc(56% + 10px);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.hs-tag--found { background: rgba(251, 191, 36, 0.92); color: #1b1407; animation: hsTagFound var(--hs-t) ease infinite; }
.hs-tag--fixed { background: rgba(67, 194, 131, 0.95); color: #06150d; animation: hsTagFixed var(--hs-t) ease infinite; }

/* ── The Heal panel ────────────────────────────────────────────────────── */

.hs-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-left: 1px solid var(--hs-border);
}

.hs-seg {
    display: flex;
    padding: 2px;
    border: 1px solid var(--hs-border);
    border-radius: 7px;
    background: #1b1c1d;
}

.hs-seg > span {
    flex: 1;
    padding: 3px 0;
    border-radius: 5px;
    font-size: 11px;
    text-align: center;
    color: var(--hs-muted);
}

.hs-seg > span.is-on { background: #343739; color: #fff; font-weight: 600; }

.hs-ref { display: flex; align-items: center; gap: 10px; }

.hs-ref img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    object-position: 60% 45%;
    filter: grayscale(1) contrast(1.1);
}

.hs-ref span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--hs-text); }
.hs-ref b { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-muted); }

.hs-status { display: grid; font-size: 12px; font-weight: 600; }
.hs-status > span { grid-area: 1 / 1; }
.hs-status__a { color: var(--hs-muted); animation: hsStatusA var(--hs-t) linear infinite; }
.hs-status__b { color: var(--hs-warn); animation: hsStatusB var(--hs-t) linear infinite; }
.hs-status__c { color: var(--hs-ok); animation: hsStatusC var(--hs-t) linear infinite; }

.hs-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    border-radius: 8px;
    background: var(--hs-accent);
    font-size: 12px;
    font-weight: 600;
    color: #0b1215;
    animation: hsBtn var(--hs-t) linear infinite;
}

.hs-report {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(5, 199, 187, 0.12);
    font-size: 11px;
    font-weight: 600;
    color: var(--hs-accent);
    animation: hsReport var(--hs-t) ease infinite;
}

/* The pointer: it moves in from below and clicks Auto Heal. */
.hs-cursor {
    position: absolute;
    left: 58%;
    top: 45%;
    width: 18px;
    height: 22px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M2 1.5v16.2l4.3-4.1 2.9 6.6 2.8-1.2-2.9-6.5H15z' fill='%23fff' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: hsCursor var(--hs-t) cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.hs-cursor::after {
    content: '';
    position: absolute;
    left: -9px;
    top: -9px;
    width: 22px;
    height: 22px;
    border: 2px solid var(--hs-accent);
    border-radius: 50%;
    opacity: 0;
    animation: hsClick var(--hs-t) ease-out infinite;
}

/* The TEMP mark: small, in the corner */
.heal-scene .hs-temp {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    padding: 3px 7px;
}

/* ── Timeline ──────────────────────────────────────────────────────────── */

@keyframes hsScan {
    0% { top: 0; opacity: 0; }
    2% { opacity: 1; }
    18% { top: 118%; opacity: 1; }
    19%, 100% { top: 118%; opacity: 0; }
}

@keyframes hsGarble {
    0%, 46% { opacity: 1; }
    56%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes hsBox {
    0%, 19% { opacity: 0; transform: scale(1.3); color: var(--hs-warn); }
    23% { opacity: 1; transform: none; color: var(--hs-warn); }
    55% { color: var(--hs-warn); }
    58% { color: var(--hs-ok); }
    94% { opacity: 1; transform: none; color: var(--hs-ok); }
    100% { opacity: 0; color: var(--hs-ok); }
}

@keyframes hsShimmer {
    0%, 45% { opacity: 0; background-position: 120% 0; }
    47% { opacity: 1; }
    56% { opacity: 1; background-position: -120% 0; }
    58%, 100% { opacity: 0; background-position: -120% 0; }
}

@keyframes hsTagFound {
    0%, 22% { opacity: 0; transform: translateY(4px); }
    25%, 45% { opacity: 1; transform: none; }
    48%, 100% { opacity: 0; transform: none; }
}

@keyframes hsTagFixed {
    0%, 57% { opacity: 0; transform: translateY(4px); }
    61%, 94% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes hsStatusA { 0%, 19% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes hsStatusB { 0%, 20% { opacity: 0; } 22%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes hsStatusC { 0%, 57% { opacity: 0; } 59%, 95% { opacity: 1; } 100% { opacity: 0; } }

@keyframes hsBtn {
    0%, 28% { opacity: 0.4; transform: none; }
    31% { opacity: 1; }
    39.5% { transform: none; }
    40.5% { transform: scale(0.93); }
    42% { opacity: 1; transform: none; }
    47%, 100% { opacity: 0.4; transform: none; }
}

@keyframes hsReport {
    0%, 61% { opacity: 0; transform: translateY(4px); }
    65%, 94% { opacity: 1; transform: none; }
    100% { opacity: 0; }
}

@keyframes hsCursor {
    0%, 27% { opacity: 0; transform: translate(48px, 46px); }
    31% { opacity: 1; }
    38% { transform: translate(0, 0); }
    48% { opacity: 1; transform: translate(0, 0); }
    54%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes hsClick {
    0%, 39.5% { opacity: 0; transform: scale(0.4); }
    40% { opacity: 0.9; transform: scale(0.4); }
    44% { opacity: 0; transform: scale(1.4); }
    100% { opacity: 0; }
}

/* Plays only while on screen (js/home.js adds .is-playing to the grid, so
   the window and the report stay on one clock). */
[data-heal-scene]:not(.is-playing) :is(.heal-scene, .heal-sheet) *,
[data-heal-scene]:not(.is-playing) :is(.heal-scene, .heal-sheet) *::before,
[data-heal-scene]:not(.is-playing) :is(.heal-scene, .heal-sheet) *::after { animation-play-state: paused; }

/* ── The PDF report, page one (.heal-sheet) ────────────────────────────── */
/* The page itself is css/defect-report.css; it runs on this clock. */
.heal-sheet {
    --hs-t: 10s;
}

/* ── Phone: the panel goes under the frame ─────────────────────────────── */

@media (max-width: 767px) {
    .hs-body { grid-template-columns: minmax(0, 1fr); }
    .hs-panel { border-left: 0; border-top: 1px solid var(--hs-border); display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
    .hs-seg, .hs-ref { grid-column: 1 / -1; }
    .hs-report { grid-column: 1 / -1; }
    .hs-bar__src { display: none; }
}

/* ── Reduced motion: the end state, nothing moves ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .heal-scene *,
    .heal-scene *::before,
    .heal-scene *::after,
    .heal-sheet * { animation: none !important; }
    .hs-garble, .hs-scan, .hs-tag--found, .hs-status__a, .hs-status__b, .hs-cursor { opacity: 0; }
    .hs-box { color: var(--hs-ok); }
    .hs-btn { opacity: 0.4; }
}