/* Kivo Multimedia showcase on /kivo: a full-width stage cycling through families
   and a row of hover-to-play cards. Builds on kivo.css and media.css (cards).
   View: resources/views/landing/kivo/showcase.blade.php */
.showcase{padding-block:40px 100px}
.showcase-stage{position:relative;width:min(1400px,calc(100% - 48px));margin-inline:auto;height:clamp(520px,72vh,760px);overflow:hidden;border-radius:20px;background:#0d0c1a;isolation:isolate}
.showcase-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.showcase-slide.is-active{opacity:1;z-index:1}
.showcase-slide img,.showcase-slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showcase-slide video{opacity:0;transition:opacity .6s}
.showcase-slide.is-playing video{opacity:1}
.showcase-slide figcaption{position:absolute;right:48px;top:32px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;opacity:0;transform:translateY(-6px);transition:opacity .6s .4s,transform .6s .4s}
.showcase-slide.is-active figcaption{opacity:1;transform:none}
.showcase-slide figcaption span{color:rgba(240,239,255,.7);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.showcase-slide figcaption a{color:#f5f3ff;font-size:15px;font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.showcase-slide figcaption a:hover{color:var(--accent)}
.showcase-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(13,12,26,.88) 0%,rgba(13,12,26,.55) 38%,rgba(13,12,26,0) 70%),linear-gradient(0deg,rgba(20,20,38,1) 0%,rgba(20,20,38,0) 28%)}
.showcase-copy{position:absolute;left:0;right:0;bottom:clamp(56px,9vh,96px);z-index:3}
.showcase-copy h2{max-width:640px;color:#f5f3ff;font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.055em}
.showcase-intro{max-width:470px;margin-top:20px;color:#d6d3ee;font-size:17px}
.showcase-copy .actions{flex-wrap:wrap;gap:14px 24px}
.showcase-kinds{color:rgba(240,239,255,.72);font-size:13px}
.showcase-dots{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;gap:8px}
.showcase-dots button{display:grid;place-items:center;width:34px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.showcase-dots button span{display:block;width:100%;height:3px;border-radius:3px;background:rgba(240,239,255,.28);overflow:hidden;position:relative}
.showcase-dots button span:after{content:"";position:absolute;inset:0;background:#f0efff;transform:scaleX(0);transform-origin:left}
.showcase-dots button[aria-current="true"] span:after{animation:showcase-progress var(--showcase-interval,7s) linear forwards}
.showcase-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.showcase-stage.is-paused .showcase-dots button[aria-current="true"] span:after{animation-play-state:paused}
@keyframes showcase-progress{to{transform:scaleX(1)}}
.showcase-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;margin-top:-28px;position:relative;z-index:4}
@media(max-width:1000px){.showcase-row{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-slide figcaption{right:24px}}
@media(max-width:700px){
  .showcase{padding-block:24px 70px}
  .showcase-stage{width:calc(100% - 32px);height:auto;min-height:0;display:flex;flex-direction:column;border-radius:14px;padding-bottom:22px;background:#141426}
  .showcase-slide{position:relative;inset:auto;aspect-ratio:16/9;display:none}
  .showcase-slide.is-active{display:block}
  .showcase-slide figcaption{right:16px;top:14px}
  .showcase-shade{background:linear-gradient(0deg,rgba(20,20,38,1) 0%,rgba(20,20,38,0) 45%);height:calc((100vw - 32px) * 9 / 16)}
  .showcase-copy{position:relative;bottom:auto;padding-top:8px}
  .showcase-dots{position:relative;bottom:auto;padding-top:18px}
  .showcase-row{margin-top:28px;gap:18px 14px}
}
@media(prefers-reduced-motion:reduce){.showcase-slide,.showcase-slide video,.showcase-slide figcaption{transition:none}.showcase-dots button span:after{animation:none!important}}