/* Kiki's NFT studio, and the two-column hero that makes room for it.
   Kept apart from styles.css so the room can be changed without touching the
   rest of the site. */

/* ── the hero: copy on the left, the studio on the right ── */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,44%);gap:34px;align-items:center;margin:0 0 30px;text-align:left}
.hero-intro{min-width:0}
.hero-intro h1{font-size:clamp(20px,2.55vw,31px);margin:16px 0;text-shadow:4px 4px 0 #321407}
.hero-intro>p{color:var(--muted);font-size:16px;line-height:1.65;max-width:520px;margin:0}
.kiki-studio{min-width:0}

@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:22px;text-align:center}
  .hero-intro h1{font-size:clamp(20px,5vw,34px)}
  .hero-intro>p{margin:0 auto}
  .kiki-studio{width:100%;max-width:520px;margin:0 auto}
}

/* ── the window, in the manner of the YAYA HQ ── */
.ks-window{border:1px solid #6b4a1e;border-radius:10px;overflow:hidden;background:#0b0916;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ks-chrome{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#15102a;border-bottom:1px solid #2a2046;font-family:'Press Start 2P';font-size:7px;line-height:1;color:#f5c542;letter-spacing:.06em}
.ks-chrome i{flex:none;width:7px;height:7px;border-radius:50%;background:#e5534b}
.ks-chrome i:nth-child(2){background:#f5c542}
.ks-chrome i:nth-child(3){background:#4b4470}
.ks-title{margin-left:6px;font-weight:400;white-space:nowrap}
.ks-status{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#6ee7a0;font-size:6px}

.ks-scene{position:relative;aspect-ratio:176/124;container-type:inline-size;overflow:hidden;line-height:0}
.ks-room{display:block;width:100%;height:100%}

/* ── the room's moving parts ── */
.ks-stage{display:none}
.ks-scene:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"]) .ks-s1,
.ks-scene:is([data-stage="2"],[data-stage="3"],[data-stage="4"]) .ks-s2,
.ks-scene:is([data-stage="3"],[data-stage="4"]) .ks-s3,
.ks-scene[data-stage="4"] .ks-s4{display:inline}

.ks-neon{animation:ks-neon 3.6s steps(1) infinite}
@keyframes ks-neon{0%,45%,49%,53%,100%{opacity:1}47%{opacity:.35}51%{opacity:.55}}

.ks-bar{transform-box:fill-box;transform-origin:left center;transform:scaleX(.3)}
.ks-scene[data-doing="mint"] .ks-bar{animation:ks-mint 2.4s steps(8) infinite}
@keyframes ks-mint{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.ks-scene[data-doing="print"] .ks-led{animation:ks-blink .5s steps(1) infinite}
@keyframes ks-blink{50%{opacity:0}}
.ks-scene[data-doing="print"] .ks-paper{animation:ks-print 2.2s steps(11) infinite}
@keyframes ks-print{from{transform:translateY(-11px)}to{transform:translateY(0)}}

/* ── Kiki ── */
.ks-duck{position:absolute;left:0;top:0;aspect-ratio:16/18;z-index:2;transition:left linear,top linear}
.ks-duck-in{position:absolute;inset:0}
.ks-duck-in::before{content:'';position:absolute;left:14%;right:14%;bottom:-3%;height:10%;border-radius:50%;background:rgba(0,0,0,.26)}
.ks-body{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ks-body:focus-visible{outline:2px solid #7cf3ff;outline-offset:2px}
.ks-v{position:absolute;inset:0;display:none;width:100%;height:100%}
.ks-duck[data-view="front"] .ks-v-front,
.ks-duck[data-view="side"] .ks-v-side,
.ks-duck[data-view="back"] .ks-v-back{display:block}
.ks-duck.flip .ks-v{transform:scaleX(-1)}

.ks-duck.walking .ks-body{animation:ks-step .34s steps(2,jump-none) infinite}
@keyframes ks-step{to{transform:translateY(-6%)}}
.ks-scene:is([data-doing="paint"],[data-doing="mix"]) .ks-kiki:not(.walking) .ks-body{animation:ks-dab .6s steps(2,jump-none) infinite}
@keyframes ks-dab{to{transform:translateX(6%)}}
.ks-duck.hop .ks-duck-in{animation:ks-hop .26s steps(2,jump-none) 2}
@keyframes ks-hop{50%{transform:translateY(-22%)}}

.ks-tag{position:absolute;left:50%;top:106%;transform:translateX(-50%);padding:2px 4px;border-radius:2px;background:rgba(10,8,20,.82);color:#fff;font:400 clamp(5px,1.45cqw,8px)/1.3 'Press Start 2P';white-space:nowrap}
.ks-say{position:absolute;left:50%;bottom:118%;z-index:3;transform:translateX(-50%);width:max-content;max-width:64cqw;padding:5px 6px 4px;border:2px solid #15102a;background:#fff;color:#15102a;box-shadow:2px 2px 0 rgba(21,16,42,.55);font:400 clamp(5px,1.55cqw,8px)/1.6 'Press Start 2P',monospace;text-align:center;white-space:normal;opacity:0;transition:opacity .2s;pointer-events:none}
/* The tail: two stacked squares, so it stays on the pixel grid. */
.ks-say::before,.ks-say::after{content:'';position:absolute;left:50%;top:100%;width:6px;height:3px;margin-left:-3px;background:#15102a}
.ks-say::after{width:2px;height:5px;margin-left:-1px}
.ks-say.show{opacity:1}
/* Yaya, the boss: gold name, and his words sit above Kiki's when both talk. */
.ks-boss .ks-tag{color:#f5c542}
.ks-boss .ks-say{bottom:150%}
/* Near either wall the bubble grows inward, so it is never cut off by the frame. */
.ks-duck[data-say="start"] .ks-say{left:-60%;transform:none}
.ks-duck[data-say="start"] .ks-say::before,.ks-duck[data-say="start"] .ks-say::after{left:10cqw}
.ks-duck[data-say="end"] .ks-say{left:auto;right:-60%;transform:none}
.ks-duck[data-say="end"] .ks-say::before,.ks-duck[data-say="end"] .ks-say::after{left:auto;right:10cqw;margin-left:0;margin-right:-3px}
.ks-duck[data-say="end"] .ks-say::after{margin-right:-1px}

@media(prefers-reduced-motion:reduce){
  .ks-neon,.ks-bar,.ks-led,.ks-paper,.ks-body,.ks-duck-in{animation:none!important}
  .ks-duck{transition:none}
}