/* Cueby Studio — ภาพเปิดเว็บ (cueby-intro.js) ใช้ที่ /cueby และ /cueby/read · สีพื้น / สีคำว่า Studio ตามธีมของแต่ละหน้า */
.cueby-intro { --ci-bg: #fff; --ci-ink: #333; --ci-gold: #fbbb21; position: fixed; inset: 0; z-index: 2000; background: var(--ci-bg); display: grid; place-items: center; cursor: pointer; transition: opacity .4s ease; }
html[data-cueby-theme="dark"] .cueby-intro { --ci-bg: #0f1012; --ci-ink: #e5e7eb; }  /* /cueby = --cd-bg */
:root[data-theme="dark"] .cueby-intro { --ci-bg: #0e1013; --ci-ink: #e5e7eb; }  /* /cueby/read = --bg */
.cueby-intro.out { opacity: 0; pointer-events: none; }
.cueby-intro svg { width: min(560px, 78vw); height: auto; overflow: visible; }
.cueby-intro .ci-l { fill: var(--ci-gold); }
.cueby-intro .ci-r { fill: var(--ci-ink); }
.cueby-intro .ci-cover { fill: var(--ci-bg); transform-box: fill-box; }
.cueby-intro .ci-cover-l { transform-origin: left center; animation: ci-reveal .85s cubic-bezier(.65,0,.35,1) .55s both; }
.cueby-intro .ci-cover-r { transform-origin: right center; animation: ci-reveal .85s cubic-bezier(.65,0,.35,1) .55s both; }
.cueby-intro .ci-caret-l { fill: var(--ci-gold); animation: ci-blink .55s steps(1) 0s 1 both, ci-caret-l .85s cubic-bezier(.65,0,.35,1) .55s both, ci-fade .2s ease 1.4s forwards; }
.cueby-intro .ci-caret-r { fill: var(--ci-ink); animation: ci-caret-r .85s cubic-bezier(.65,0,.35,1) .55s both, ci-fade .2s ease 1.4s forwards; }
.cueby-intro .ci-y { animation: ci-rise .75s cubic-bezier(.34,1.56,.64,1) .95s both; }
@keyframes ci-blink { 0%, 100% { opacity: 1; } 33%, 66% { opacity: 0; } }
@keyframes ci-reveal { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ci-caret-l { from { transform: translateX(0); } to { transform: translateX(-487px); } }
@keyframes ci-caret-r { from { transform: translateX(0); } to { transform: translateX(527px); } }
@keyframes ci-fade { to { opacity: 0; } }
@keyframes ci-rise { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .cueby-intro { display: none; } }