/*==================================================
FRAMEWORK PAGE
Jessica Feldman
==================================================*/

/*==================================================
GENERAL
==================================================*/

.framework-hero,
.framework-intro,
.framework-build,
.framework-real,
.framework-connected,
.framework-breathing,
.framework-continue{
    padding:90px 0;
}

/*==================================================
HERO
==================================================*/

.framework-hero{
    position:relative;
    height:85vh;
    min-height:700px;
    padding:0;
    overflow:hidden;
    background:var(--deep-teal);
}

.framework-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    animation:heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom{
    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }
}

.framework-hero .hero-panel{
    position:absolute;
    left:50%;
    bottom:35px;
    transform:translateX(-50%);
    width:min(720px,88%);
    padding:24px 36px;
    border-radius:22px;
    background:rgba(248,248,238,.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    text-align:center;
    box-shadow:var(--shadow);
}

.framework-hero .hero-panel h1,
.framework-hero .hero-panel h2{
    margin:0 0 12px;
    color:var(--deep-teal);
}

.framework-hero .hero-panel p{
    margin:0;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
INTRO
==================================================*/

.framework-intro{
    padding:85px 0;
    background:var(--cream);
}

.framework-intro h2{
    margin-bottom:35px;
    color:var(--deep-teal);
}

.framework-intro p{
    max-width:700px;
    margin:0 auto 24px;
    color:var(--brown);
    text-align:center;
    line-height:1.9;
}

/*==================================================
FRAMEWORK BUILD
==================================================*/

.framework-build{
    padding:100px 0;
    background-image:
        linear-gradient(
            rgba(248,248,238,.92),
            rgba(248,248,238,.92)
        ),
        url("../images/framework/blueprint.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.framework-element{
    padding:34px 38px;
    border-radius:22px;
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.framework-element + .framework-element{
    margin-top:28px;
}

.foundation{
    background:rgba(22,207,191,.10);
    border-left:8px solid var(--deep-teal);
}

.middle{
    margin-left:55px;
    background:rgba(19,96,94,.08);
    border-left:8px solid var(--teal);
}

.roof{
    margin-left:110px;
    background:rgba(162,34,130,.10);
    border-left:8px solid var(--magenta);
}

.framework-element h3{
    margin-bottom:12px;
    color:var(--deep-teal);
}

.framework-element p{
    margin:0;
    color:var(--brown);
    line-height:1.8;
}

/*==================================================
REAL LIFE
==================================================*/

.framework-real{
    position:relative;
    padding:90px 0;
    overflow:hidden;
}

.dating-real::before,
.marriage-real::before{
    content:"";
    position:absolute;
    inset:0;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:.08;
    pointer-events:none;
}

.dating-real::before{
    background-image:url("../images/framework/window-frame.png");
    background-position:left center;
}

.marriage-real::before{
    background-image:url("../images/framework/stone.png");
    background-position:right center;
}

.framework-real > *{
    position:relative;
    z-index:2;
}

.journey{
    max-width:720px;
    margin:auto;
}

.journey-label{
    display:inline-block;
    margin-bottom:35px;
    padding:8px 20px;
    border-radius:999px;
    background:var(--teal);
    color:var(--deep-teal);
    font-weight:600;
}

.journey-step{
    padding:28px 34px;
    border-radius:18px;
    background:rgba(248,248,238,.88);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    box-shadow:0 15px 35px rgba(0,0,0,.06);
}

.journey-step h3{
    margin-bottom:12px;
    color:var(--magenta);
}

.journey-step p{
    margin:0;
    color:var(--brown);
    line-height:1.8;
}

.journey-divider{
    width:70px;
    height:3px;
    margin:18px auto;
    border-radius:999px;
    background:var(--deep-teal);
    opacity:.35;
}

/*==================================================
CONNECTED
==================================================*/

.framework-connected{
    padding:90px 0;
    text-align:center;
    background:var(--cream);
}

.framework-connected h2{
    margin-bottom:30px;
    color:var(--deep-teal);
}

.framework-connected p{
    max-width:720px;
    margin:0 auto;
    color:var(--brown);
    line-height:1.9;
}

.framework-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;
    margin:70px 0;
}

.circle{
    width:190px;
    height:190px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px;
    font-family:var(--heading-font);
    font-size:1.4rem;
    text-align:center;
    transition:var(--transition);
}

.circle:hover{
    transform:translateY(-8px) scale(1.04);
}

.circle.know,
.framework-circle.know{
    background:var(--teal);
    color:var(--deep-teal);
}

.circle.relate,
.framework-circle.relate{
    background:var(--magenta);
    color:var(--cream);
}

.circle.build,
.framework-circle.build{
    background:var(--deep-teal);
    color:var(--cream);
}

.link-line{
    width:70px;
    height:3px;
    background:rgba(19,96,94,.28);
}

.framework-ending{
    margin-top:40px;
    color:var(--magenta);
    font-style:italic;
}

/*==================================================
BREATHING FRAMEWORK
==================================================*/

.framework-breathing{
    padding:90px 0 70px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.07),
            rgba(162,34,130,.06)
        ),
        var(--cream);
}

.framework-breathing h2{
    margin-bottom:24px;
    color:var(--deep-teal);
}

.framework-breathing p{
    max-width:720px;
    margin:0 auto;
    color:var(--brown);
    line-height:1.9;
}

.breathing-framework{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:36px;
    margin:70px auto 60px;
    flex-wrap:wrap;
}

.framework-circle{
    width:185px;
    height:185px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    font-family:var(--heading-font);
    font-size:1.35rem;
    text-align:center;
    transition:transform .35s;
}

.framework-circle.know{
    animation:breatheKnow 8s infinite;
}

.framework-circle.relate{
    animation:breatheRelate 8s infinite;
}

.framework-circle.build{
    animation:breatheBuild 8s infinite;
}

.framework-closing{
    margin-top:15px;
    color:var(--magenta);
    font-family:var(--heading-font);
    font-size:1.2rem;
}

/*==================================================
BREATHING ANIMATION
==================================================*/

@keyframes breatheKnow{
    0%,100%{
        transform:scale(1);
    }

    10%{
        transform:scale(1.06);
    }

    20%{
        transform:scale(1);
    }
}

@keyframes breatheRelate{
    0%,100%{
        transform:scale(1);
    }

    40%{
        transform:scale(1.06);
    }

    50%{
        transform:scale(1);
    }
}

@keyframes breatheBuild{
    0%,100%{
        transform:scale(1);
    }

    70%{
        transform:scale(1.06);
    }

    80%{
        transform:scale(1);
    }
}

/*==================================================
CONTINUE / NEXT STEPS
Shared grid/card sizing lives in style.css.
==================================================*/

.framework-continue{
    position:relative;
    background:rgba(19,96,94,.08);
}

.framework-continue::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:8px;
    background:linear-gradient(
        90deg,
        var(--teal),
        var(--magenta),
        var(--deep-teal)
    );
}

.framework-continue h2{
    color:var(--deep-teal);
    text-align:center;
}

.framework-continue .continue-card{
    border:2px solid rgba(19,96,94,.18);
}

.framework-continue .continue-card:nth-child(1){
    border-color:rgba(22,207,191,.35);
}

.framework-continue .continue-card:nth-child(2){
    border-color:rgba(162,34,130,.30);
}

.framework-continue .continue-card:nth-child(3){
    border-color:rgba(19,96,94,.30);
}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:900px){
    .middle,
    .roof{
        margin-left:0;
    }

    .framework-links{
        flex-wrap:wrap;
    }

    .link-line{
        display:none;
    }
}

@media(max-width:700px){
    .framework-intro,
    .framework-build,
    .framework-real,
    .framework-connected,
    .framework-breathing,
    .framework-continue{
        padding:65px 0;
    }

    .framework-hero{
        height:auto;
        min-height:0;
        padding:0;
        overflow:visible;
        background:var(--cream);
    }

    .framework-hero img{
        position:relative;
        inset:auto;
        width:100%;
        height:430px;
        object-fit:cover;
        animation:none;
    }

    .framework-hero .hero-panel{
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;
        width:auto;
        margin:0;
        padding:26px 22px;
        border-radius:0;
        background:var(--cream);
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .framework-element{
        padding:28px 24px;
    }

    .framework-links{
        flex-direction:column;
        gap:20px;
        margin:50px 0;
    }

    .circle,
    .framework-circle{
        width:160px;
        height:160px;
        font-size:1.15rem;
    }

    .breathing-framework{
        gap:20px;
        margin:50px auto 45px;
    }

    .journey-step{
        padding:24px;
    }
}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){
    .framework-hero img,
    .framework-circle{
        animation:none;
    }

    .circle,
    .framework-circle{
        transition:none;
    }

    .circle:hover{
        transform:none;
    }
}

/* Mobile safeguard: all three framework elements must remain fully visible. */
@media(max-width:700px){
    .framework-house{
        width:100%;
        max-width:100%;
        overflow:visible;
    }

    .framework-element,
    .framework-element.middle,
    .framework-element.roof,
    .framework-element.foundation{
        width:100%;
        max-width:100%;
        margin-left:0;
        box-sizing:border-box;
    }
}