#carousel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(40px,6vw,120px);padding:0 5vw;pointer-events:none;opacity:0;z-index:10}#carousel-track{position:relative;width:clamp(200px,22vw,380px);height:clamp(300px,55vh,560px);perspective:900px;pointer-events:auto;flex-shrink:0}.proj-card{position:absolute;inset:0;overflow:visible;cursor:pointer;will-change:transform,opacity;background-size:contain;background-position:center;background-repeat:no-repeat}#carousel-info{position:relative;width:clamp(220px,26vw,400px);display:flex;flex-direction:column;pointer-events:none;font-family:Barlow Condensed;flex-shrink:1;min-width:0}.info-num{font-size:clamp(14px,1.6vw,25px);color:#0000004d;letter-spacing:.08em;font-family:Outfit,Arial,sans-serif}.info-name{font-family:Outfit,Arial,sans-serif;font-weight:900;font-size:clamp(20px,2.4vw,30px);color:#111;line-height:1.15;margin-top:6px}.info-desc{font-family:Barlow Condensed;font-size:clamp(14px,1.6vw,25px);color:#00000073;line-height:1.5;margin-top:5px}#scroll-hint{position:fixed;right:clamp(16px,5%,60px);top:50%;transform:translateY(-50%);z-index:11;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:Outfit,Arial,sans-serif;font-size:clamp(9px,.9vw,11px);font-weight:900;letter-spacing:.06em;color:#0000004d;pointer-events:none;opacity:0;transition:opacity .4s ease}#scroll-hint span{writing-mode:vertical-rl;text-orientation:mixed}#scroll-hint.is-ready{opacity:1}#scroll-hint.is-ready.is-hidden{opacity:0}#scroll-hint svg{width:clamp(10px,1vw,12px);height:clamp(10px,1vw,12px);animation:scrollHintBounce 1.4s infinite ease-in-out}@keyframes scrollHintBounce{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}#carousel-dots{position:fixed;right:clamp(16px,5%,60px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(6px,.8vw,8px);pointer-events:none}.carousel-dot{width:clamp(4px,.5vw,5px);height:clamp(4px,.5vw,5px);border-radius:50%;background:#00000026;transition:background .3s,transform .3s}.carousel-dot.active{background:#00000080;transform:scale(1.4)}@media(max-width:900px){#carousel{flex-direction:column;gap:clamp(16px,3vh,32px)}#carousel-track{width:clamp(180px,40vw,280px);height:clamp(260px,38vh,400px)}#carousel-info{width:clamp(220px,70vw,380px);text-align:center;align-items:center}#scroll-hint,#carousel-dots{right:12px}}
