/* ── Contour · free alert box by LumentoStudio ────────────────────────
   A black plate that opens from a single white line, topographic
   contours drawing across it, corner ticks. Event type shown by icon
   shape; one quiet hairline counts the alert down.
   Plate black 60 · line white 30 · grey 10 (+ one accent field).
   Colours marked (field) are overwritten from the widget settings.   */
html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
.ca {
  /* colour (field) */
  --plate: #0c0c0d; --line: #f4f4f1; --accent: #f4f4f1;
  /* fixed */
  --dim: color-mix(in srgb, var(--line) 55%, var(--plate));
  --font-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif; --font-label: "Red Hat Mono", Menlo, monospace;
  --ease-open: cubic-bezier(.76, 0, .24, 1); --ease-text: cubic-bezier(.2, .9, .1, 1); --ease-close: cubic-bezier(.6, 0, .8, .4);
  --dur: 6s; --size: 1;
  zoom: var(--size); position: absolute; left: 0; top: 0; width: calc(100vw / var(--size)); height: calc(100vh / var(--size));
  display: grid; place-items: center;
}
.ca * { box-sizing: border-box; }
.ca-al { position: relative; width: 560px; height: 150px; }
.ca-al.idle { visibility: hidden; }
.ca-plate { position: absolute; inset: 0; background: var(--plate); overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 12%, transparent) inset, 0 2px 4px #0008, 0 18px 40px #0007; }
.ca-plate svg { position: absolute; left: 140px; top: -65px; width: 420px; height: 280px; transition: none; }
.ca-plate svg path { fill: none; stroke: var(--line); stroke-width: 1; opacity: .22; stroke-dasharray: 1400; }
/* corner ticks: the signature, echoed by the credit's bracket */
.ca-plate i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--line); opacity: .75; }
.ca-plate i:nth-of-type(1) { left: 10px; top: 10px; border-width: 1.5px 0 0 1.5px; }
.ca-plate i:nth-of-type(2) { right: 10px; top: 10px; border-width: 1.5px 1.5px 0 0; }
.ca-plate i:nth-of-type(3) { left: 10px; bottom: 10px; border-width: 0 0 1.5px 1.5px; }
.ca-plate i:nth-of-type(4) { right: 10px; bottom: 10px; border-width: 0 1.5px 1.5px 0; }
.ca-time { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.ca-credit { position: absolute; right: 28px; bottom: 12px; font: 500 9px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); opacity: .8; }
.ca.no-credit .ca-credit { display: none; }
.ca-body { position: absolute; inset: 0; display: flex; align-items: center; gap: 24px; padding: 0 34px; }
.ca-glyph { width: 72px; height: 72px; flex: none; border: 1.5px solid var(--accent); border-radius: 50%; display: grid; place-items: center; }
.ca-glyph svg { width: 30px; height: 30px; fill: none; stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ca-text { min-width: 0; flex: 1; }
.ca-text small { display: block; font: 500 12px/1 var(--font-label); letter-spacing: .32em; text-transform: uppercase; color: var(--dim); }
.ca-text b { display: block; font: 900 40px/1.05 var(--font-display); letter-spacing: -.025em; color: var(--line); margin: 8px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-text span { display: block; font: 500 15px/1.3 var(--font-display); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-text span em { font-style: normal; color: var(--line); font-weight: 800; }

/* choreography: line → plate opens → contours draw → text rises.
   The exit is its own move: text drops, plate snaps shut to a line.
   Resting state (no class) is fully visible; classes only layer motion on top. */
.ca-al.in .ca-plate { animation: caOpen .7s var(--ease-open) both; }
.ca-al.in .ca-plate svg path { animation: caDraw 1.8s var(--ease-text) .35s both; }
.ca-al.in .ca-plate svg path:nth-child(2n) { animation-delay: .45s; }
.ca-al.in .ca-glyph { animation: caGlyph .7s var(--ease-text) .35s both; }
.ca-al.in .ca-text > * { animation: caRise .7s var(--ease-text) both; }
.ca-al.in .ca-text small { animation-delay: .42s; } .ca-al.in .ca-text b { animation-delay: .5s; } .ca-al.in .ca-text span { animation-delay: .58s; }
.ca-al.timing .ca-time { animation: caTime var(--dur) linear .6s both; }
.ca-al.out .ca-body { animation: caDrop .35s var(--ease-close) both; }
.ca-al.out .ca-plate { animation: caShut .5s var(--ease-open) .2s both; }
@keyframes caOpen { 0% { clip-path: inset(49% 50% 49% 50%) } 40% { clip-path: inset(49% 0 49% 0) } 100% { clip-path: inset(0) } }
@keyframes caShut { 0% { clip-path: inset(0) } 60% { clip-path: inset(49% 0 49% 0) } 100% { clip-path: inset(49% 0 49% 100%) } }
@keyframes caDraw { from { stroke-dashoffset: 1400 } to { stroke-dashoffset: 0 } }
@keyframes caGlyph { from { transform: scale(.6) rotate(-30deg); opacity: .5 } }
@keyframes caRise { from { transform: translateY(16px); opacity: .5; clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 -20% 0) } }
@keyframes caDrop { to { transform: translateY(10px); opacity: 0 } }
@keyframes caTime { from { transform: scaleX(0) } to { transform: scaleX(1) } }