/* alizon-showcase.css — "Inside a practical" self-playing demo */

#azShowcaseSec{background:#0e0607;color:#fff;padding:82px 0;overflow:hidden;position:relative}
#azShowcaseSec:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(177,4,14,.28),transparent 60%)}
#azShowcaseSec .in{position:relative;max-width:1060px;margin:0 auto;padding:0 24px}
#azShowcaseSec .section-head .eyebrow{color:#e9a2a6}
#azShowcaseSec .section-head h2{color:#fff}
#azShowcaseSec .section-head p{color:rgba(255,255,255,.68)}

/* ---- window chrome ---- */
.scwin{margin-top:30px;border-radius:16px;overflow:hidden;background:#fbfaf9;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.scbar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:#efeae6;border-bottom:1px solid #e2dbd5}
.scbar i{width:11px;height:11px;border-radius:50%;background:#d8d0c9;display:block}
.scbar i:nth-child(1){background:#f0685f}.scbar i:nth-child(2){background:#f5bd4f}.scbar i:nth-child(3){background:#61c355}
.scbar span{margin-left:10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#7c736c}
.scbody{position:relative;padding:20px 22px 24px;color:#26221f;min-height:430px}

/* ---- ops bar ---- */
.scops{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.scop{background:#fff;border:1px solid #ece7e2;border-radius:11px;padding:11px 13px}
.scop b{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:#8a827b;margin-bottom:4px}
.scop span{font-family:Georgia,'Source Serif Pro',serif;font-size:20px;color:#26221f;font-variant-numeric:tabular-nums}
.scbar2{display:block;height:4px;border-radius:100px;background:#f0eae5;margin-top:7px;overflow:hidden}
.scbar2 u{display:block;height:100%;background:#12704a;border-radius:100px;transition:width .8s cubic-bezier(.2,.7,.2,1)}

/* ---- case ---- */
.sccase{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.sccase.on{opacity:1;transform:none}
.scchips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.scchips span{font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:100px;background:#f2eee9;color:#6e6a63}
.scai{border-left:3px solid #9a7b3f;background:#fdf9ef;padding:10px 14px;border-radius:0 9px 9px 0;transition:opacity .5s}
.scai.dim{opacity:.45}
.scai b{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#8a7440;margin-bottom:3px}
.scai p{margin:0;font-size:13.5px;color:#4a443f}
.scai i{color:#8a827b;font-size:12.5px}
.scscore{font-weight:800;color:#12704a}

.scopen{margin-top:13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:10px 20px;
  border-radius:100px;border:0;background:#8c1515;color:#fff;transition:.25s}
.scopen.pressed{transform:scale(.96);filter:brightness(1.15)}
.scopen.gone{opacity:0;transform:scale(.9);pointer-events:none;height:0;padding:0;margin:0;overflow:hidden}

.scchart,.scdec,.scverdict,.sclater{opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;
  transition:opacity .5s,transform .5s,max-height .6s}
.scchart.on,.scdec.on,.scverdict.on,.sclater.on{opacity:1;transform:none;max-height:420px}
.scchart{margin-top:13px}
.scchart b,.scdec b,.scverdict b,.sclater b{display:block;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#8a827b;margin-bottom:6px}
.scchart ul{margin:0;padding-left:17px}
.scchart li{font-size:13px;line-height:1.65;color:#4a443f;margin-bottom:3px}
.scchart li.scred{color:#9e0c13;font-weight:600}
.scchart li.scred u{text-decoration:none;background:rgba(177,4,14,.12);padding:0 3px;border-radius:3px}

.scdec{margin-top:14px}
.scopts{display:flex;gap:8px;flex-wrap:wrap}
.scopts span{font-size:12.5px;font-weight:600;padding:9px 15px;border-radius:100px;border:1px solid #ded6cf;
  background:#fff;color:#4a443f;transition:.3s}
.scopts span.pressed{transform:scale(.96)}
.scopts span.picked{background:#12704a;border-color:#12704a;color:#fff}
.scopts span.faded{opacity:.32}

.scverdict{margin-top:14px;background:rgba(18,112,74,.08);border:1px solid rgba(18,112,74,.28);
  border-radius:11px;padding:13px 16px}
.scverdict.on{max-height:300px}
.scverdict b{color:#12704a;font-size:13px;text-transform:none;letter-spacing:0}
.scverdict p{margin:0;font-size:13.5px;line-height:1.7;color:#3c3733}

.sclater{margin-top:12px;border-left:3px solid #8c1515;background:#fdf3f3;padding:11px 14px;border-radius:0 9px 9px 0}
.sclater p{margin:0;font-size:13.5px;line-height:1.7;color:#4a443f}

/* ---- cursor ---- */
.sccursor{position:absolute;top:0;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:rgba(140,21,21,.28);border:2px solid #8c1515;opacity:0;pointer-events:none;
  transition:transform .75s cubic-bezier(.4,.1,.2,1),opacity .3s;z-index:5}
.sccursor.tap{animation:scTap .22s ease}
@keyframes scTap{50%{transform-origin:center;box-shadow:0 0 0 9px rgba(140,21,21,.18)}}

/* ---- closing ---- */
.scend{opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;margin-top:26px;text-align:center}
.scend.on{opacity:1;transform:none}
.scend p{font-size:16px;line-height:1.75;color:rgba(255,255,255,.86);max-width:62ch;margin:0 auto 18px}
.scend b{color:#fff}
.scacts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.scacts .btn-ghost{border-color:rgba(255,255,255,.38);color:#fff;background:transparent}
.scacts .btn-ghost:hover{background:rgba(255,255,255,.12)}
.scnote{margin:20px 0 0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.42)}

@media(prefers-reduced-motion:reduce){
  .sccase,.scchart,.scdec,.scverdict,.sclater,.scend,.sccursor,.scopen,.scbar2 u{transition:none;animation:none}
}
@media(max-width:820px){ .scops{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){
  #azShowcaseSec{padding:54px 0}
  .scbody{padding:16px 15px 20px;min-height:0}
  .scop span{font-size:17px}
  .scopts span{font-size:11.5px;padding:8px 12px}
  .sccursor{display:none}
}