/* Static audience frame and finite text caret, with event-driven feedback. */
.plasma-feature { min-width: 0; }
.plasma-feature .card-anchor { position: relative; width: min(440px, calc(100% - 44px)); }
.plasma-feature .hologram { position: relative; min-height: 308px; }
/* Also keep the source decoration absent when JS or optional APIs are unavailable.
   With JS, neural-expansion removes these nodes; no card signal loop is created. */
.plasma-feature :is(.arrival-svg, .trace-head, .idle-signal, .incoming-panel-head, .handoff-tail, .particle-wake) { display: none; }
.plasma-feature .panel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plasma-feature .rim-halo, .plasma-feature .rim, .plasma-feature .violet-accent { fill: none; }
.plasma-feature .rim-halo { stroke: #6ef5ff; stroke-width: 6; opacity: .13; filter: blur(4px); }
.plasma-feature .rim { stroke: url(#rim); stroke-width: 1.15; }
.plasma-feature .trace { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.plasma-feature .violet-accent { stroke: #b293f3; stroke-width: 1.5; opacity: .8; }
.plasma-feature .card-content { position: relative; padding: 42px 32px 34px; }
.plasma-feature .book { display: block; stroke: #8aebef; stroke-width: 1.25; filter: drop-shadow(0 0 4px #59e5ef70); margin-bottom: 28px; }
.plasma-feature .hologram h3 { font-size: 25px; line-height: 1.22; letter-spacing: -.025em; margin: 0 0 15px; font-weight: 720; color: #f1f8ff; }
.plasma-feature .support { color: #ccdae9; font-size: 16px; line-height: 1.45; margin: 0; }
.plasma-feature .type-caret { position: absolute; top: 0; left: 0; width: 1px; background: #70f5ff; box-shadow: 0 0 4px #70f5ff80; pointer-events: none; }

.plasma-feature .card-anchor { width: 100%; }
.plasma-feature .hologram { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0; overflow: visible; color: #f1f8ff; }
.plasma-feature .hologram .small-label { color: #8cefff; position: relative; z-index: 1; }
.plasma-feature .hologram h3 { margin: 18px 0 12px; color: #f1f8ff; }
.plasma-feature .hologram p.support { margin: 0; color: #ccdae9; line-height: 1.45; }
.plasma-feature .plasma-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 0; }
.plasma-feature button { min-height: 40px; padding: 7px 11px; border: 1px solid #39718c; background: #102a3c; color: #e5f9ff; border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; }
.plasma-feature button:focus-visible { outline: 3px solid #91f5ff; outline-offset: 3px; }
.plasma-feature button:disabled { opacity: .6; cursor: default; }
.plasma-feature #status { flex-basis: 100%; color: #385064; font-size: 11px; line-height: 1.4; }
.plasma-feature [hidden] { display: none !important; }
@media (max-width: 560px) { .plasma-feature .card-content { padding: 38px 25px 32px; } .plasma-feature .hologram h3 { font-size: 22px; } .plasma-feature .hologram p.support { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) {
 .plasma-feature .trace { stroke-dashoffset: 0 !important; }
 .plasma-feature .glass, .plasma-feature .hologram h3, .plasma-feature .support, .plasma-feature .violet-accent { opacity: 1 !important; filter: none !important; clip-path: none !important; }
 .plasma-feature .type-caret { display: none !important; }
}

/* Tier 2: the shared choreography on pearl glass, with restrained bloom. */
.plasma-light .hologram { color: #18374b; }
.plasma-light .hologram h3 { color: #18374b; font-size: 23px; }
.plasma-light .hologram p.support { color: #385568; }
.plasma-light .hologram .small-label { color: #236778; }
.plasma-light .rim-halo { opacity: .07; filter: blur(2px); }
.plasma-light .rim { stroke: url(#light-rim); }
.plasma-light .violet-accent { stroke: #91bccd; opacity: .5; }
.plasma-light .type-caret { background: #2b718a; box-shadow: none; }
.plasma-light button { color: #244b60; background: #f5fbff; border-color: #8fb6c7; }
.plasma-feature [role="status"] { flex-basis: 100%; color: #385064; font-size: 11px; line-height: 1.4; }
/* The dedicated choreography owns these cards; suppress the earlier generic reveal. */
.plasma-feature .hologram.neural-active,
.plasma-feature .hologram.neural-active > h3,
.plasma-feature .hologram.neural-active > p { animation: none; }

/* Tier 3: independent transform properties keep reveal choreography intact. */
.future-card { --edge-x: 50%; --edge-y: 0%; position: relative; }
.future-card:not(.journey-step):not(.crisis-flow > div)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 1px #75cce06b; background: radial-gradient(180px circle at var(--edge-x) var(--edge-y), #8be5f51a, transparent 85%); }
.future-card:focus-visible, .future-card:focus-within { outline: 2px solid #25849f; outline-offset: 5px; }
.future-card:not(.journey-step):not(.crisis-flow > div):focus-visible::after, .future-card:not(.journey-step):not(.crisis-flow > div):focus-within::after { opacity: 1; }
.plasma-feature .future-card:not(.journey-step):not(.crisis-flow > div)::after { clip-path: polygon(22px 6px, calc(100% - 28px) 6px, calc(100% - 6px) 28px, calc(100% - 6px) calc(100% - 28px), calc(100% - 28px) calc(100% - 6px), 28px calc(100% - 6px), 6px calc(100% - 28px), 6px 22px); }
@media (prefers-reduced-motion: no-preference) {
 .future-card { transition: translate 260ms ease, rotate 320ms ease, filter 260ms ease; }
 .future-card:not(.journey-step):not(.crisis-flow > div)::after { transition: opacity 260ms ease; }
 .future-card:focus-visible, .future-card:focus-within { filter: drop-shadow(0 5px 9px #21536b18); }
}
@media (hover: hover) and (pointer: fine) {
 .future-card:not(.journey-step):not(.crisis-flow > div):hover::after { opacity: 1; }
 @media (prefers-reduced-motion: no-preference) {
  .future-card:hover { translate: 0 -3px; rotate: x var(--depth-x, 0deg); filter: drop-shadow(0 7px 12px #21536b20); }
  .plasma-feature:not(.plasma-light) .future-card:hover { translate: 0 -4px; filter: drop-shadow(0 7px 14px #51dbea22); }
 }
}
@media (prefers-reduced-motion: reduce) { .future-card { translate: none !important; rotate: none !important; } }
/* Semantic card focus remains visible even when scripting is unavailable. */
.plasma-feature .hologram:focus-visible { outline: 2px solid #25849f; outline-offset: 5px; }