/* Student stories (stories.html): 3D and animation (stories-fx.js, founder 2026-10-09). Square corners stay
   (square.css); true circles use border-radius:50% !important. */
.stx-host { position: relative; isolation: isolate; overflow: hidden; }
.stx-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; animation: stxFade 1.4s ease both; }
@keyframes stxFade { from { opacity: 0; } }
:root[data-theme="light"] .stx-sky { filter: brightness(.5) saturate(1.5); opacity: .7; }

/* "N stories from M places" */
.stx-count { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin: -8px auto 22px; font-size: .92rem; color: var(--text-muted, #9aa3c0); animation: stxUp .6s ease both; }
.stx-count[hidden] { display: none; }
.stx-count b { font: 700 1.3rem/1 var(--font-head, inherit); color: var(--text, #fff); font-variant-numeric: tabular-nums; margin-right: 4px; }
.stx-count i { width: 5px; height: 5px; border-radius: 50% !important; background: var(--accent-2, #4cc9ff); box-shadow: 0 0 8px var(--accent-2, #4cc9ff); }
.stx-add { padding: 6px 12px; font-weight: 600; font-size: .84rem; color: var(--text, #fff); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent, #7c6cff) 55%, var(--border, #2a3050)); background: color-mix(in srgb, var(--accent, #7c6cff) 12%, transparent); transition: background .2s, transform .2s; }
.stx-add:hover { background: color-mix(in srgb, var(--accent, #7c6cff) 24%, transparent); transform: translateY(-1px); color: var(--text, #fff); }
@keyframes stxUp { from { opacity: 0; transform: translateY(8px); } }

/* The spotlight: 3D turn on each new story, lean toward the pointer */
.stx { perspective: 1400px; }
.stx .stories-stage { transform: var(--stx-t, none); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .8s ease, box-shadow .4s; transform-style: preserve-3d; }
.stx .stories-stage.stx-turn { animation: stxTurn .8s cubic-bezier(.2, .8, .2, 1); }
@keyframes stxTurn { 0% { transform: rotateY(-14deg) translateZ(-40px); opacity: .55; } 60% { transform: rotateY(3deg); opacity: 1; } 100% { transform: var(--stx-t, none); } }
.stx .stories-stage:hover { box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--tone, #7c6cff) 80%, transparent); }
.stx .stories-mark { transition: transform .4s; }
.stx .stories-stage:hover .stories-mark { transform: translateZ(30px) scale(1.06); }
.stx-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* The student list */
.stx .stories-person { position: relative; transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .25s; }
.stx .stories-person:hover { transform: translateX(4px); box-shadow: -3px 0 0 var(--p, #7c6cff); }
.stx .stories-person[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; padding: 1px; background: conic-gradient(from var(--stxA), transparent 0 62%, var(--p, #7c6cff) 78%, #fff 86%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: stxBorder 4s linear infinite; }
@property --stxA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes stxBorder { to { --stxA: 360deg; } }
.stx .stories-ring { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.stx .stories-person:hover .stories-ring { transform: scale(1.08) rotate(-6deg); }

/* "Have a Success Story?" */
.stx-share { position: relative; overflow: hidden; transform: var(--stx-t, none); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.stx-share:hover { box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--accent, #7c6cff) 70%, transparent); }
.stx-share input, .stx-share textarea { transition: border-color .2s, box-shadow .2s; }
.stx-share input:focus, .stx-share textarea:focus { border-color: var(--accent-2, #4cc9ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2, #4cc9ff) 20%, transparent), 0 0 22px -8px var(--accent-2, #4cc9ff); }
.stx-share button[type="submit"] { position: relative; overflow: hidden; }
.stx-share button[type="submit"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%); transform: translateX(-120%); animation: stxShine 3.4s ease-in-out infinite 1s; pointer-events: none; }
@keyframes stxShine { 55%, 100% { transform: translateX(120%); } }
.stx-conf { position: fixed; z-index: 1300; width: 7px; height: 11px; pointer-events: none; animation: stxConf 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes stxConf { to { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rz)); opacity: 0; } }

@media (max-width: 900px) { .stx .stories-person:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  .stx-sky, .stx-count, .stx .stories-stage.stx-turn, .stx .stories-person[aria-selected="true"]::after, .stx-share button[type="submit"]::after { animation: none !important; }
  .stx .stories-stage, .stx-share { transform: none !important; }
}