/* Showcase 2: Cinematic — Ken Burns + light leaks */
.sp-showcase-cinematic{position:relative;width:100%;min-height:100vh;overflow:hidden;background:var(--sp-background);color:var(--sp-foreground);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.sp-cin-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.sp-cin-bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2s ease;backdrop-filter:blur(8px) saturate(50%);filter:brightness(0.35)}
.sp-cin-bg-layer.active{opacity:1;animation:kenBurns 12s ease-in-out infinite alternate}
@keyframes kenBurns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.15) translate(-2%,-3%)}}
.sp-cin-lightleak{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity .8s ease}
.sp-cin-lightleak.flash{opacity:.12;transition:opacity .3s ease}
.sp-cin-lightleak.flash.done{opacity:0;transition:opacity 2s ease}
.sp-cin-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.04}
.sp-cin-grain::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:150px;animation:grainShift .5s steps(5) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}100%{transform:translate(10px,10px)}}
/* CONTRAST FIX: stronger vignette + overlay for readable text */
.sp-cin-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.7) 100%)}
.sp-cin-overlay{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.92) 100%)}
.sp-cin-scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.03;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.5) 2px,rgba(0,0,0,.5) 4px)}
.sp-cin-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding:5rem 1.5rem}
.sp-cin-header{text-align:center;margin-bottom:3rem;max-width:700px}
.sp-cin-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:100px;background:hsla(190,100%,50%,.12);border:1px solid hsla(190,100%,50%,.25);color:hsl(190,100%,55%);font-size:.8rem;font-weight:600;margin-bottom:1.5rem}
/* CONTRAST FIX: ensure heading text is bright white */
.sp-cin-header h2{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:1rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.sp-cin-header h2 .gradient{background:linear-gradient(135deg,hsl(190,100%,50%),hsl(200,100%,70%),hsl(260,80%,65%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
/* CONTRAST FIX: subtitle uses near-white instead of muted */
.sp-cin-header p{font-size:1.1rem;color:hsl(215,20%,80%);line-height:1.65;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.sp-cin-preview-cards{position:absolute;z-index:5;pointer-events:none}
.sp-cin-preview-left{left:3%;top:35%}.sp-cin-preview-right{right:3%;top:40%}
.sp-cin-preview-card{position:absolute;border-radius:8px;overflow:hidden;background:hsl(240,10%,8%);border:1px solid hsl(240,10%,14%);box-shadow:0 15px 40px -10px rgba(0,0,0,.4);animation:floatCard 6s ease-in-out infinite;opacity:.65;backdrop-filter:blur(8px);filter:brightness(0.6)}
.sp-cin-preview-card:nth-child(2){animation-delay:-2s;margin-top:120px}
.sp-cin-preview-card:nth-child(3){animation-delay:-4s;margin-top:240px}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(1deg)}}
.sp-cin-preview-card .chrome-sm{height:16px;background:hsl(240,8%,10%);display:flex;align-items:center;padding:0 6px;gap:4px}
.sp-cin-preview-card .chrome-sm .dot{width:5px;height:5px;border-radius:50%}
.sp-cin-preview-card .chrome-sm .dot.r{background:#ff5f56}.sp-cin-preview-card .chrome-sm .dot.y{background:#ffbd2e}.sp-cin-preview-card .chrome-sm .dot.g{background:#27c93f}
.sp-cin-preview-card .body-sm{aspect-ratio:16/10}
.sp-cin-preview-card .body-sm img{width:100%;height:100%;object-fit:cover}
/* CONTRAST FIX: trust bar has stronger background */
.sp-cin-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;padding:1.5rem 2.5rem;background:hsla(240,10%,4%,.85);border:1px solid hsl(240,10%,14%);border-radius:16px;backdrop-filter:blur(20px);margin-bottom:2rem;max-width:900px;width:100%}
.sp-cin-trust-item{text-align:center}
.sp-cin-trust-val{font-size:1.4rem;font-weight:800;color:hsl(190,100%,50%)}
.sp-cin-trust-label{font-size:.7rem;color:hsl(215,20%,70%);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.sp-cin-cta{text-align:center;margin-top:1rem}
.sp-cin-cta .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.2rem;background:hsl(190,100%,50%);color:hsl(240,12%,3%);font-size:1rem;font-weight:700;border-radius:12px;text-decoration:none;box-shadow:0 4px 30px hsla(190,100%,50%,.15);transition:all .3s ease}
.sp-cin-cta .btn:hover{transform:translateY(-2px);box-shadow:0 8px 40px hsla(190,100%,50%,.3)}
@media(max-width:768px){.sp-cin-content{padding:3rem 1rem}.sp-cin-preview-left,.sp-cin-preview-right{display:none}.sp-cin-trust{gap:1.25rem;padding:1rem}}

@media(prefers-reduced-motion:reduce){.sp-showcase-cinematic *,.sp-showcase-cinematic *::before,.sp-showcase-cinematic *::after{animation:none!important;transition:none!important}}
@media(max-width:480px){.sp-cin-content{padding:2rem .75rem}.sp-cin-header h2{font-size:clamp(1.6rem,8vw,2.2rem)}.sp-cin-trust{gap:.75rem;padding:.75rem 1rem}.sp-cin-cta .btn{padding:.7rem 1.5rem;font-size:.9rem}}