/**
 * Chamspace Intro Text Animation
 * Signature effect: lines + text slide reveal
 * Cross pattern — lines intersect from 4 directions
 */

/* ================================
   INTRO BLOCK — ảnh + chữ là 1 khối
   Glass effect + drop shadow giống web cũ
   ================================ */
.chamspace-intro-block {
    position: relative;
    width: 100%;
    border-radius: 16px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s cubic-bezier(0.2, 0.36, 0.12, 1), transform 1s cubic-bezier(0.2, 0.36, 0.12, 1);
    overflow: hidden;
}

.chamspace-intro-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.chamspace-intro-bg {
    width: 100%;
    line-height: 0;
    position: relative;
    border-radius: 16px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 17px rgba(0,0,0,0.17);
    box-sizing: border-box;
}

.chamspace-intro-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center center;
}
/* Gradient overlay — dark at bottom, like single projects cover */
.chamspace-intro-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55));
    border-radius: 16px;
    pointer-events: none;
    z-index: 2;
}
.chamspace-intro-img {
    position: relative;
    z-index: 1;
}


@media (min-width: 1024px) {
    .chamspace-intro-block {
        border-radius: 16px;
    }
    
    .chamspace-intro-bg {
        border-radius: 16px;
        overflow: hidden;
        width: 100%;
    }
    
    .chamspace-intro-img {
        height: clamp(360px, 55vh, 600px);
        object-fit: cover;
        object-position: center center;
    }
}

/* ================================
   TEXT OVERLAY — nằm đè lên ảnh
   ================================ */
.chamspace-intro-text-wrapper {
    position: absolute;
    bottom: 70px;
    left: 8px;
    right: 8px;
    pointer-events: none;
    z-index: 10;
}

.chamspace-intro-text-wrapper .animation-text {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: 2.88rem;
    line-height: 1.35;
    letter-spacing: 0.027em;
}

@media (min-width: 1024px) {
    .chamspace-intro-text-wrapper .animation-text {
        font-size: 4.61rem;
        line-height: 1.35;
        letter-spacing: 0.0414em;
        padding-left: 10px;
        padding-bottom: 10px;
    }
}

/* ================================
   SENTENCE CONTAINER
   ================================ */
.chamspace-intro-text-wrapper .js-intro-title.sentence {
    display: block;
    position: relative;
    text-align: left;
}

/* ================================
   OUTER — horizontal lines (::before top, ::after bottom)
   Lines come from opposite sides → intersect at center
   ================================ */
.chamspace-intro-text-wrapper .js-intro-title .outer {
    overflow: hidden;
    display: inline-flex;
    position: relative;
}

/* Top horizontal line — sweeps L→R */
.chamspace-intro-text-wrapper .js-intro-title .outer:before {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    background-color: currentColor;
    opacity: 0.6;
    transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(-100%, 0, 0);
}

/* Bottom horizontal line — sweeps R→L (opposite) */
.chamspace-intro-text-wrapper .js-intro-title .outer:after {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background-color: currentColor;
    opacity: 0.6;
    transition: transform 2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(100%, 0, 0);
}

/* ================================
   INNER — vertical line + accent horizontal line
   ================================ */
.chamspace-intro-text-wrapper .js-intro-title .inner {
    position: relative;
    padding: 6px 6px 6px 10px;
    overflow: hidden;
}

/* Accent horizontal line — sweeps R→L */
.chamspace-intro-text-wrapper .js-intro-title .inner:before {
    display: block;
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    top: 33%;
    background-color: currentColor;
    opacity: 0.4;
    transition: transform 2.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(100%, 0, 0);
}

/* Vertical line — sweeps T→B */
.chamspace-intro-text-wrapper .js-intro-title .inner:after {
    display: block;
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: currentColor;
    opacity: 0.6;
    transition: transform 1.6s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, -100%, 0);
}

/* ================================
   TEXT — slide + opacity
   ================================ */
.chamspace-intro-text-wrapper .js-intro-title .text {
    display: inline-flex;
    transition: transform 1.5s cubic-bezier(0.2, 0.36, 0.12, 1), opacity 1.5s cubic-bezier(0.2, 0.36, 0.12, 1);
    transform: translate3d(0.4em, 0, 0);
    opacity: 0;
}

/* ================================
   IS-SHOW — trigger all animations
   ✦ Cross intersection: 4 lines sweep from 4 directions
   ================================ */

/* Top line: L→R slides out right */
.chamspace-intro-text-wrapper .js-intro-title.is-show .outer:before {
    transform: translate3d(101%, 0, 0);
}

/* Bottom line: R→L slides out left */
.chamspace-intro-text-wrapper .js-intro-title.is-show .outer:after {
    transform: translate3d(-101%, 0, 0);
}

/* Accent horizontal: R→L slides out left */
.chamspace-intro-text-wrapper .js-intro-title.is-show .inner:before {
    transform: translate3d(-101%, 0, 0);
}

/* Vertical line: T→B slides out bottom */
.chamspace-intro-text-wrapper .js-intro-title.is-show .inner:after {
    transform: translate3d(0, 101%, 0);
}

/* Text reveals */
.chamspace-intro-text-wrapper .js-intro-title.is-show .text {
    transform: translateZ(0);
    opacity: 1;
}

/* ================================
   ANIMATION DELAYS
   ================================ */
.chamspace-intro-text-wrapper .js-intro-title .outer .inner:before,
.chamspace-intro-text-wrapper .js-intro-title .outer .inner:after,
.chamspace-intro-text-wrapper .js-intro-title .outer:before,
.chamspace-intro-text-wrapper .js-intro-title .outer:after {
    transition-delay: 0s;
}
.chamspace-intro-text-wrapper .js-intro-title .outer .text {
    transition-delay: 0.4s;
}

/* ================================
   MOBILE
   ================================ */

/* ================================
   DESC OVERLAY — trên cover luôn
   Align left, dưới title + line xám
   ================================ */
.chamspace-intro-text-wrapper .intro-desc-line {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin-top: 8px;
}

.chamspace-intro-text-wrapper .intro-desc-text {
    font-size: 12px;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.60);
    line-height: 1.6;
    margin: 8px 0 0;
    max-width: 600px;
    text-align: left;
    letter-spacing: 0.01em;
}

@media (min-width: 1024px) {
    .chamspace-intro-text-wrapper .intro-desc-line {
        margin-top: 10px;
    }
    .chamspace-intro-text-wrapper .intro-desc-text {
        font-size: 13px;
    }
}


/* ================================
   INFO BAR — below cover, 3 ô 50/25/25
   Giống single projects cover bar style
   ================================ */
.intro-info-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 3;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.intro-cell {
    padding: 11px 16px;
    border-right: 1px solid rgba(255,255,255,0.10);
    flex: 1;
}
.intro-cell:last-child {
    border-right: none;
}

/* Width ratios */
.intro-cell-a { flex: 2; }  /* 50% */
.intro-cell-b { flex: 1; }  /* 25% */
.intro-cell-c { flex: 1; }  /* 25% */

.intro-cell-lab {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}
.intro-cell-lab svg {
    width: 14px;
    height: 14px;
    stroke: rgba(255,255,255,0.70);
    flex-shrink: 0;
}
.intro-cell-lab span {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
}

.intro-cell-val {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    display: block;
}
.intro-cell-a .intro-cell-val {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.90);
}

.intro-cell-num {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

@media (max-width: 860px) {
    .intro-info-bar {
        flex-wrap: wrap;
    }
    .intro-cell-a {
        flex: 1 1 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .intro-cell-b, .intro-cell-c {
        flex: 1;
    }
}
@media (max-width: 520px) {
    .intro-cell {
        padding: 8px 8px;
    }
    .intro-cell-val {
        font-size: 11px;
    }
    .intro-cell-num {
        font-size: 11px;
    }
}

@media (max-width: 1023px) {
    .chamspace-intro-bg {
        height: clamp(284px, 50vh, 473px) !important;
    }
    .chamspace-intro-img {
        height: clamp(284px, 50vh, 473px) !important;
    }
    .chamspace-intro-text-wrapper {
        padding: 0 72px 8% 8px;
        margin-left: -12px;
        bottom: 130px;
    }
    
    .chamspace-intro-text-wrapper .animation-text {
        font-size: clamp(1.93rem, 5.23vw, 2.58rem);
        line-height: 1.2;
        white-space: nowrap;
    }
    
    .chamspace-intro-text-wrapper .js-intro-title .inner {
        padding: 4px 3px 4px 5px;
    }
    
    .chamspace-intro-text-wrapper .js-intro-title .inner:after {
        left: 8px;
    }
}