/* GSAP Studio — Frontend Styles */

/* ═══ Global ═══ */
.gs-char,.gs-word,.gs-line-inner{will-change:transform,opacity}

/* ═══ Cursor Image Preview ═══ */
.gsaps-cip{position:relative}
.gsaps-cip-item{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid #e5e7eb;cursor:pointer;text-decoration:none;transition:none;will-change:transform}
.gsaps-cip-item:first-child{border-top:1px solid #e5e7eb}
.gsaps-cip-title{font-size:clamp(1.2rem,3vw,2.5rem);font-weight:600;display:block}
.gsaps-cip-sub{font-size:clamp(0.8rem,1.5vw,1rem);opacity:0.6}
.gsaps-cip-preview{will-change:transform,opacity}

/* ═══ Cursor Trail ═══ */
.gsaps-trail-zone{position:relative}

/* ═══ Button Swipe ═══ */
.gsaps-btn-wrap{display:inline-block}
.gsaps-btn{position:relative;overflow:hidden;display:inline-block;border-style:solid;cursor:pointer;text-decoration:none;outline:none;background:transparent}
.gsaps-btn-fill{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.gsaps-btn-content{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}
.gsaps-btn-text{position:relative;overflow:hidden;display:inline-block}
.gsaps-btn-icon{font-size:1em;transition:transform 0.3s ease}
.gsaps-btn:hover .gsaps-btn-icon{transform:translateX(4px)}

/* ═══ Rolling Text ═══ */
.gsaps-roll{line-height:1.2}
.gsaps-roll-slot{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.gsaps-roll-slot span{will-change:transform,opacity}

/* ═══ Text Animation ═══ */
.gsaps-text{will-change:transform,opacity}

/* ═══ Horizontal Text ═══ */
.gsaps-htxt{overflow:hidden;white-space:nowrap;display:flex;width:100%}
.gsaps-htxt-track{display:flex;flex-shrink:0;align-items:center;will-change:transform}
.gsaps-htxt-item{flex-shrink:0;white-space:nowrap;font-size:clamp(2rem,8vw,8rem);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em}
.gsaps-htxt-sep{flex-shrink:0;white-space:nowrap;padding:0 0.2em}

/* ═══ Horizontal Scroll ═══ */
.gsaps-hs{overflow:hidden;width:100%}
.gsaps-hs-track{display:flex;flex-wrap:nowrap;will-change:transform}
.gsaps-hs-item{flex-shrink:0;position:relative;overflow:hidden}
.gsaps-hs-img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.gsaps-hs-caption{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;font-size:clamp(0.85rem,1.5vw,1.1rem);background:linear-gradient(transparent,rgba(0,0,0,0.7));color:#fff}

/* ═══ Image Parallax ═══ */
.gsaps-ip{overflow:hidden;position:relative}
.gsaps-ip img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}

/* ═══ Swipe Slider ═══ */
.gsaps-ss{position:relative;overflow:hidden;width:100%;user-select:none;cursor:grab}
.gsaps-ss-track{display:flex;flex-wrap:nowrap;will-change:transform}
.gsaps-ss-slide{flex-shrink:0;position:relative;overflow:hidden;width:100%}
.gsaps-ss-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gsaps-ss-slide-content{background-size:cover;background-position:center}
.gsaps-ss-overlay{position:absolute;inset:0;z-index:1}
.gsaps-ss-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(20px,5vw,60px);height:100%;color:#fff;gap:16px}
.gsaps-ss-title{font-size:clamp(1.5rem,4vw,3.5rem);font-weight:700;margin:0;line-height:1.15}
.gsaps-ss-text{font-size:clamp(0.9rem,1.5vw,1.2rem);margin:0;opacity:0.9;max-width:600px;line-height:1.6}
.gsaps-ss-btn{display:inline-block;padding:12px 28px;border:2px solid #fff;color:#fff;text-decoration:none;border-radius:4px;font-size:0.9rem;font-weight:600;transition:background 0.3s,color 0.3s;cursor:pointer;background:transparent}
.gsaps-ss-btn:hover{background:#fff;color:#111}
.gsaps-ss-caption{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;font-size:clamp(0.85rem,1.5vw,1.1rem);background:linear-gradient(transparent,rgba(0,0,0,0.6));color:#fff;z-index:2}
.gsaps-ss-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;border:none;cursor:pointer;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity 0.3s,transform 0.3s}
.gsaps-ss-arrow:hover{opacity:0.9;transform:translateY(-50%) scale(1.1)}
.gsaps-ss-prev{left:16px}
.gsaps-ss-next{right:16px}
.gsaps-ss-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.gsaps-ss-dot{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;padding:0;transition:transform 0.3s,background 0.3s}
.gsaps-ss-counter{position:absolute;top:20px;right:20px;z-index:10;color:#fff;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.gsaps-ss-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:rgba(255,255,255,0.3);z-index:10}
.gsaps-ss-progress-bar{height:100%;transform-origin:left;transform:scaleX(0)}

/* ═══ Directional Marquee ═══ */
.gsaps-dm{display:flex;flex-direction:column;overflow:hidden;width:100%}
.gsaps-dm-row{display:flex;overflow:hidden;white-space:nowrap;width:100%}
.gsaps-dm-track{display:flex;align-items:center;gap:0.5em;flex-shrink:0;will-change:transform}
.gsaps-dm-text{flex-shrink:0;white-space:nowrap;font-size:clamp(2rem,8vw,8rem);font-weight:700;text-transform:uppercase;letter-spacing:-0.02em}
.gsaps-dm-sep{flex-shrink:0;white-space:nowrap;padding:0 0.2em;opacity:0.5}
.gsaps-dm-img{flex-shrink:0;object-fit:cover;vertical-align:middle}
.gsaps-dm-stroke{-webkit-text-fill-color:transparent}

/* ═══ Background Image Animation (widget) ═══ */
.gsaps-bg{position:relative;overflow:hidden;width:100%}
.gsaps-bg-img{position:absolute;inset:0;width:100%;height:100%;background-repeat:no-repeat;will-change:transform,filter}
.gsaps-bg-overlay{position:absolute;inset:0;z-index:2;pointer-events:none}
.gsaps-bg-reveal{will-change:transform}
.gsaps-bg-content{position:relative;z-index:5;display:flex;flex-direction:column;width:100%;height:100%;gap:16px;box-sizing:border-box}
.gsaps-bg-title{font-size:clamp(1.8rem,5vw,4.5rem);font-weight:700;margin:0;line-height:1.1;letter-spacing:-0.02em}
.gsaps-bg-sub{font-size:clamp(0.95rem,1.5vw,1.3rem);margin:0;max-width:600px;line-height:1.6}
.gsaps-bg-btn{display:inline-block;padding:14px 32px;border:2px solid #fff;color:#fff;text-decoration:none;border-radius:4px;font-size:0.95rem;font-weight:600;transition:background 0.3s,color 0.3s;cursor:pointer;background:transparent;align-self:flex-start}
.gsaps-bg-btn:hover{background:#fff;color:#111}

/* ═══ Background Parallax (container controls) ═══ */
.gsaps-bgp{position:relative;overflow:hidden}
.gsaps-bgp-layer{position:absolute;inset:0;z-index:0;background-repeat:no-repeat;will-change:transform,filter;pointer-events:none}

/* ═══ Responsive ═══ */
@media(max-width:767px){
    .gsaps-cip-preview{display:none!important}
    .gs-trail-dot{display:none!important}
    .gsaps-htxt-item{font-size:clamp(1.5rem,10vw,4rem)}
    .gsaps-hs-item{width:85vw!important;min-width:85vw!important}
    .gsaps-ss-arrow{width:36px;height:36px}
    .gsaps-ss-prev{left:8px}
    .gsaps-ss-next{right:8px}
    .gsaps-dm-text{font-size:clamp(1.5rem,12vw,4rem)}
    .gsaps-bg-content{padding:24px!important}
    .gsaps-bg-title{font-size:clamp(1.5rem,8vw,2.5rem)}
}
@media(min-width:768px)and(max-width:1024px){
    .gsaps-htxt-item{font-size:clamp(2rem,6vw,5rem)}
}