/* ===== Hero card: flip, model card, view modes, shine, night grade ===== */
.avatar-card { background: transparent; box-shadow: none; container-type: inline-size; cursor: pointer; }
.card-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,1.25,.4,1); }
.avatar-card.flipped .card-flip { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; border-radius: 28px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-front { box-shadow: var(--shadow); border-radius: 28px; }
.card-back { transform: rotateY(180deg); overflow: hidden; color: #E9E7F2;
  background:
    radial-gradient(circle at 85% 0%, rgba(198,255,61,.18), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(31,59,255,.45), transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
    #0E0F1C;
  box-shadow: 0 30px 60px -30px rgba(31,59,255,.7), inset 0 0 0 1px rgba(255,255,255,.08); }

/* flip button on the front */
.flip-btn { position: absolute; top: 14px; right: 14px; z-index: 4; padding: .35rem .7rem; border-radius: 999px; background: rgba(14,15,28,.55); backdrop-filter: blur(6px); color: #FAF6EE; font-family: var(--mono); font-size: .7rem; font-weight: 600; transition: background .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.flip-btn:hover { background: var(--lime); color: #16161D; transform: rotate(-4deg) scale(1.05); }
.fx-tag { position: absolute; top: 16px; left: 16px; z-index: 4; padding: .2rem .5rem; border-radius: 5px; background: rgba(198,255,61,.92); color: #16161D; font-size: .62rem !important; font-weight: 600; }
.fx-tag[hidden] { display: none; }

/* model card (back) */
.mc { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7cqi 7cqi 5.5cqi; font-family: var(--mono); }
.mc-head { border-bottom: 1px dashed rgba(255,255,255,.18); padding-bottom: 3.5cqi; margin-bottom: 3cqi; }
.mc-kicker { display: inline-block; font-size: 2.9cqi; text-transform: uppercase; letter-spacing: .14em; color: #16161D; background: var(--lime); padding: .15em .55em; border-radius: 4px; }
.mc-title { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 10.5cqi; line-height: 1; color: #fff; margin-top: 2.5cqi; }
.mc-sub { font-size: 2.9cqi; color: #8A89A0; }
.mc-rows { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 2.2cqi 3.5cqi; align-content: start; overflow: hidden; font-size: 3.4cqi; line-height: 1.35; }
.mc-rows dt { color: #8A89A0; white-space: nowrap; }
.mc-rows dt::after { content: ":"; }
.mc-rows dd { color: #E9E7F2; }
.mc-rows dd.list { display: flex; flex-direction: column; gap: .2em; }
.mc-rows dd.list span::before { content: "▸ "; color: var(--orange); }
.mc-rows dd.ok { color: var(--lime); font-weight: 600; }
.mc-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3cqi; padding-top: 3cqi; border-top: 1px dashed rgba(255,255,255,.18); }
.mc-dl { font-size: 3.2cqi; font-weight: 600; color: var(--lime); }
.mc-dl small { color: #8A89A0; font-weight: 400; }
.mc-dl:hover { text-decoration: underline; }
.mc-back { width: 9cqi; height: 9cqi; min-width: 30px; min-height: 30px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 4.5cqi; transition: transform .3s; }
.mc-back:hover { transform: rotate(-90deg); background: var(--orange); }

/* view-mode canvas + scan transition */
.avatar-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: none; z-index: 1; }
.avatar[data-mode="edges"] .avatar-fx, .avatar[data-mode="heatmap"] .avatar-fx, .avatar[data-mode="ascii"] .avatar-fx { display: block; }
.avatar[data-mode="heatmap"] .avatar-fx { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { filter: saturate(1.25) brightness(1.08); } }
.avatar-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: var(--lime); box-shadow: 0 0 18px 4px rgba(198,255,61,.7); opacity: 0; pointer-events: none; }
.avatar.scanning .avatar-fx { animation: reveal .7s cubic-bezier(.4,0,.2,1); }
.avatar.scanning .avatar-scan { animation: scanline .7s cubic-bezier(.4,0,.2,1); }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scanline { 0% { top: 0; opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.avatar[data-mode="rgb"].scanning .avatar-scan { animation: scanline .5s ease; }

/* mode tabs under the card */
.view-modes { display: inline-flex; gap: 2px; margin-top: 1rem; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); }
.view-modes button { padding: .4rem .85rem; border-radius: 999px; font-family: var(--mono); font-size: .72rem; font-weight: 600; color: var(--ink-2); transition: background .2s, color .2s; }
.view-modes button:hover { color: var(--ink); }
.view-modes button.on { background: var(--ink); color: var(--bg); }
.view-modes button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* moving light reflection while tilting */
.card-shine { position: absolute; inset: 0; z-index: 6; border-radius: 28px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.38), rgba(255,255,255,.08) 28%, transparent 55%);
  mix-blend-mode: overlay; }
.avatar-card.lit .card-shine { opacity: 1; }
.avatar-card.flipped .card-shine { opacity: 0; }

/* night-mode colour grade */
[data-theme="dark"] .card-front { box-shadow: 0 0 0 1px rgba(124,140,255,.25), 0 30px 70px -25px rgba(124,140,255,.55); }
[data-theme="dark"] .avatar.has-photo .avatar-photo { filter: saturate(1.1) contrast(1.06) brightness(.92); }
[data-theme="dark"] .avatar.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(160deg, rgba(31,59,255,.55), rgba(198,255,61,.25) 70%, rgba(255,90,31,.3)); }

/* boxes stay crisp above the view modes, hide while flipped */
.card-front .bbox { z-index: 3; }
.avatar-meta { z-index: 4; }
@media (max-width: 860px) { .view-modes { margin-top: .9rem; } }
@media (prefers-reduced-motion: reduce) { .card-flip { transition: none; } }
/* the MS letters float on a 3D layer (translateZ) — hide them while a view mode is showing */
.avatar[data-mode="edges"] .avatar-initials, .avatar[data-mode="heatmap"] .avatar-initials, .avatar[data-mode="ascii"] .avatar-initials,
.avatar[data-mode="edges"] .avatar-grid, .avatar[data-mode="heatmap"] .avatar-grid, .avatar[data-mode="ascii"] .avatar-grid { visibility: hidden; }
/* small cards: the meta label is hidden here, so the view-mode tag moves to the bottom-left */
@media (max-width: 520px) { .fx-tag { display: none !important; } }

/* ===== with a portrait ===== */
/* labels stack bottom-left so they never cover the face or the watch */
.avatar-card.with-photo .avatar-meta { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; right: auto; }
.avatar-card.with-photo .avatar-meta .mono { background: rgba(0,0,0,.45); padding: .2rem .55rem; border-radius: 6px; }
.avatar-card.with-photo .fx-tag { left: auto; right: 14px; top: 52px; }
.avatar-card.with-photo .avatar-photo { object-position: 50% 0; }
/* the photo's dark background suits a softer, lime-tinted frame */
.avatar-card.with-photo .card-front { box-shadow: 0 0 0 1px rgba(198,255,61,.18), 0 30px 60px -28px rgba(31,59,255,.6); }
@media (max-width: 520px) { .avatar-card.with-photo .avatar-meta .mono { display: none; } }
/* small phones: the flip button becomes an icon so it never touches the face label */
@media (max-width: 520px) {
  .flip-btn { font-size: 0; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; top: 10px; right: 10px; }
  .flip-btn::before { content: "↻"; font-size: 1rem; }
}

/* ===== detection boxes (positions come from the admin box editor) ===== */
.card-front .bbox { right: auto; }
.bbox.c-orange { border-color: var(--orange); }
.bbox.c-orange span { background: var(--orange); color: #fff; }
.bbox.c-blue { border-color: #7C8CFF; }
.bbox.c-blue span { background: #1F3BFF; color: #fff; }
.bbox.label-in span { top: 3px; left: 3px; border-radius: 3px; }
.card-front .bbox { animation-name: bboxSoft; }
@keyframes bboxSoft { 0%, 100% { transform: none; } 50% { transform: translate(1px, -2px); } }