/*=========================================================
    STORY SECTION
    PART 2A
==========================================================*/


/*=========================================================
    SECTION VARIABLES
==========================================================*/

.story-section{

    --story-bg:#0f0f0f;

    --story-card:#151515;

    --story-text:#f5f5f5;

    --story-muted:#bdbdbd;

    --story-accent:#ff6b1a;

    --story-border:#242424;

    --story-radius:18px;

    --story-shadow:0 20px 60px rgba(0,0,0,.35);

    --story-transition:.35s ease;

    background:var(--story-bg);

    color:var(--story-text);

    padding:110px 0;

    overflow:hidden;

    position:relative;

}


/*=========================================================
    RESET
==========================================================*/

.story-section *{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

.story-section img{

    display:block;

    width:100%;

}

.story-section a{

    text-decoration:none;

    color:inherit;

}

.story-section iframe{

    border:none;

}


/*=========================================================
    CONTAINER
==========================================================*/

.story-section .container{

    width:min(92%,1240px);

    margin:auto;

}


/*=========================================================
    HEADER
==========================================================*/

.story-header{

    text-align:center;

    margin-bottom:90px;

}

.story-header h2{

    max-width:760px;

    margin:auto;

    font-size:42px;

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1px;

    color:var(--story-text);

}


/*=========================================================
    GRID
==========================================================*/

.story-grid{

    display:flex;

    flex-direction:column;

    gap:90px;

}


/*=========================================================
    ROW
==========================================================*/

.story-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


/*=========================================================
    REVERSE
==========================================================*/

.story-row.reverse{

    direction:rtl;

}

.story-row.reverse > *{

    direction:ltr;

}


/*=========================================================
    CONTENT
==========================================================*/

.story-content{

    max-width:500px;

}

.story-content.left{

    justify-self:start;

}

.story-content.right{

    justify-self:end;

}


/*=========================================================
    IMAGE
==========================================================*/

.story-image{

    width:100%;

    max-width:560px;

    justify-self:center;

}


/*=========================================================
    ALIGNMENT
==========================================================*/

.story-row.normal .story-content{

    justify-self:start;

}

.story-row.normal .story-image{

    justify-self:end;

}

.story-row.reverse .story-content{

    justify-self:end;

}

.story-row.reverse .story-image{

    justify-self:start;

}


/*=========================================================
    SPACING
==========================================================*/

.story-row + .story-row{

    margin-top:10px;

}


/*=========================================================
    SECTION DECORATION
==========================================================*/

.story-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:radial-gradient(circle,
        rgba(255,107,26,.05),
        transparent 70%);

    top:-200px;

    right:-200px;

    pointer-events:none;

}

.story-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
        rgba(255,255,255,.03),
        transparent 70%);

    bottom:-250px;

    left:-200px;

    pointer-events:none;

}


/*=========================================================
    DEFAULT ANIMATION STATE
==========================================================*/

.story-row{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .6s ease,

        transform .6s ease;

}


/*=========================================================
    LARGE DESKTOP
==========================================================*/

@media(min-width:1500px){

    .story-section .container{

        max-width:1320px;

    }

    .story-row{

        gap:90px;

    }

}

/*=========================================================
    PART 2B-1
    FEATURE CARDS
==========================================================*/


/*=========================================================
    FEATURE CONTENT
==========================================================*/

.story-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:100%;

    position:relative;

}


/*=========================================================
    STORY NUMBER
==========================================================*/

.story-count{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    border-radius:50%;

    background:rgba(255,107,26,.12);

    color:var(--story-accent);

    font-size:16px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px;

    transition:var(--story-transition);

}


/*=========================================================
    HEADING
==========================================================*/

.story-content h3{

    font-size:38px;

    font-weight:700;

    color:var(--story-text);

    line-height:1.15;

    margin-bottom:22px;

    letter-spacing:-.5px;

    transition:var(--story-transition);

}


/*=========================================================
    DESCRIPTION
==========================================================*/

.story-content p{

    font-size:17px;

    line-height:1.9;

    color:var(--story-muted);

    max-width:480px;

}


/*=========================================================
    IMAGE WRAPPER
==========================================================*/

.story-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--story-radius);

    background:var(--story-card);

    box-shadow:var(--story-shadow);

}


/*=========================================================
    IMAGE
==========================================================*/

.story-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:

        transform .6s ease,

        filter .35s ease,

        opacity .35s ease;

}


/*=========================================================
    IMAGE OVERLAY
==========================================================*/

.story-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        180deg,

        rgba(255,255,255,.08),

        rgba(0,0,0,.08)

    );

    opacity:0;

    transition:.35s;

    z-index:2;

    pointer-events:none;

}


/*=========================================================
    IMAGE BORDER
==========================================================*/

.story-image::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,.05);

    border-radius:inherit;

    pointer-events:none;

}


/*=========================================================
    HOVER EFFECT
==========================================================*/

.story-row:hover .story-image::before{

    opacity:1;

}

.story-row:hover .story-image img{

    transform:scale(1.05);

}

.story-row:hover .story-count{

    background:var(--story-accent);

    color:#fff;

}

.story-row:hover h3{

    color:var(--story-accent);

}


/*=========================================================
    CARD SHADOW
==========================================================*/

.story-row:hover .story-image{

    box-shadow:

        0 30px 70px rgba(0,0,0,.45);

}


/*=========================================================
    CARD TRANSITION
==========================================================*/

.story-row{

    transition:

        transform .35s ease,

        opacity .35s ease;

}

.story-row:hover{

    transform:translateY(-6px);

}


/*=========================================================
    IMAGE LOADING
==========================================================*/

.story-image img[loading="lazy"]{

    background:#1b1b1b;

}


/*=========================================================
    IMAGE RATIO
==========================================================*/

.story-image{

    aspect-ratio:1/1;

}


/*=========================================================
    PREMIUM SPACING
==========================================================*/

.story-content>*+*{

    margin-top:0;

}


/*=========================================================
    SELECTION
==========================================================*/

.story-content h3::selection,

.story-content p::selection{

    background:var(--story-accent);

    color:#fff;

}

/*=========================================================
    STORY SECTION
    PART 2B-2
    VIDEO • ANIMATIONS • FINAL POLISH
==========================================================*/


/*=========================================================
    ADVANCED IMAGE ZOOM
==========================================================*/

.story-image{

    transform:translateZ(0);

    will-change:transform;

}

.story-image img{

    transform-origin:center center;

    backface-visibility:hidden;

}

.story-row:hover .story-image img{

    transform:scale(1.08);

    filter:brightness(1.04) contrast(1.02);

}


/*=========================================================
    IMAGE SHINE EFFECT
==========================================================*/

.story-image .shine{

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-25deg);

    pointer-events:none;

}

.story-row:hover .shine{

    animation:storyShine 1.2s ease;

}

@keyframes storyShine{

    100%{

        left:150%;

    }

}


/*=========================================================
    TEXT REVEAL
==========================================================*/

.story-content h3,

.story-content p,

.story-count{

    transition:

        transform .45s ease,

        opacity .45s ease,

        color .35s ease;

}

.story-row:hover h3{

    transform:translateX(8px);

}

.story-row:hover p{

    transform:translateX(6px);

}

.story-row:hover .story-count{

    transform:scale(1.08);

}


/*=========================================================
    VIDEO SECTION
==========================================================*/

.story-video-section{

    margin-top:140px;

}

.story-video-heading{

    text-align:center;

    margin-bottom:45px;

}

.story-video-heading h2{

    font-size:42px;

    color:var(--story-text);

    font-weight:700;

    letter-spacing:-.5px;

}


/*=========================================================
    VIDEO WRAPPER
==========================================================*/

.story-video{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:#000;

    aspect-ratio:16/9;

    box-shadow:

        0 25px 70px rgba(0,0,0,.45);

}

.story-video::before{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(255,255,255,.08);

    border-radius:inherit;

    pointer-events:none;

    z-index:2;

}


/*=========================================================
    IFRAME
==========================================================*/

.story-video iframe{

    width:100%;

    height:100%;

    display:block;

    transition:transform .45s ease;

}

.story-video:hover iframe{

    transform:scale(1.02);

}


/*=========================================================
    SCROLL REVEAL
==========================================================*/

.story-row,

.story-video-section{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.story-row.visible,

.story-video-section.visible{

    opacity:1;

    transform:translateY(0);

}


/*=========================================================
    STAGGER DELAYS
==========================================================*/

.story-row:nth-child(1){

    transition-delay:.05s;

}

.story-row:nth-child(2){

    transition-delay:.15s;

}

.story-row:nth-child(3){

    transition-delay:.25s;

}

.story-row:nth-child(4){

    transition-delay:.35s;

}


/*=========================================================
    PREMIUM TRANSITIONS
==========================================================*/

.story-row,

.story-image,

.story-content,

.story-video{

    transition:

        all .45s cubic-bezier(.22,.61,.36,1);

}


/*=========================================================
    GPU ACCELERATION
==========================================================*/

.story-row,

.story-image,

.story-video,

.story-image img{

    transform:translateZ(0);

    will-change:

        transform,

        opacity;

}


/*=========================================================
    ACCESSIBILITY
==========================================================*/

.story-image:focus-within,

.story-video:focus-within{

    outline:2px solid var(--story-accent);

    outline-offset:4px;

}


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

@media (prefers-reduced-motion:reduce){

    .story-row,

    .story-video-section,

    .story-image img,

    .story-content h3,

    .story-content p,

    .story-count{

        transition:none !important;

        animation:none !important;

        transform:none !important;

    }

}


/*=========================================================
    FINAL POLISH
==========================================================*/

.story-section{

    isolation:isolate;

}

.story-image{

    cursor:pointer;

}

.story-content{

    z-index:2;

    position:relative;

}

.story-video{

    cursor:pointer;

}

.story-video iframe{

    border-radius:inherit;

}

.story-section *{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.story-section ::selection{

    background:var(--story-accent);

    color:#fff;

}


/*=========================================================
    END OF PART 2B-2
==========================================================*/

/*=========================================================
    STORY SECTION
    PART 2C
    RESPONSIVE + FINAL POLISH
==========================================================*/


/*=========================================================
    1400px
==========================================================*/

@media (max-width:1400px){

    .story-section .container{

        max-width:1200px;

    }

}


/*=========================================================
    1200px
==========================================================*/

@media (max-width:1200px){

    .story-section{

        padding:90px 0;

    }

    .story-header{

        margin-bottom:70px;

    }

    .story-header h2{

        font-size:36px;

    }

    .story-row{

        gap:50px;

    }

    .story-content h3{

        font-size:32px;

    }

    .story-content p{

        font-size:16px;

    }

}


/*=========================================================
    992px
==========================================================*/

@media (max-width:992px){

    .story-grid{

        gap:70px;

    }

    .story-row,

    .story-row.reverse{

        grid-template-columns:1fr;

        direction:ltr;

        gap:35px;

    }

    .story-row.normal .story-content,

    .story-row.normal .story-image,

    .story-row.reverse .story-content,

    .story-row.reverse .story-image{

        justify-self:center;

        max-width:100%;

    }

    .story-content{

        text-align:center;

        align-items:center;

    }

    .story-content p{

        max-width:650px;

    }

    .story-image{

        max-width:720px;

    }

}


/*=========================================================
    768px
==========================================================*/

@media (max-width:768px){

    .story-section{

        padding:70px 0;

    }

    .story-header{

        margin-bottom:50px;

    }

    .story-header h2{

        font-size:30px;

        line-height:1.25;

    }

    .story-grid{

        gap:55px;

    }

    .story-content h3{

        font-size:28px;

    }

    .story-content p{

        font-size:15px;

        line-height:1.8;

    }

    .story-count{

        width:52px;

        height:52px;

        font-size:15px;

    }

    .story-video-section{

        margin-top:90px;

    }

    .story-video-heading h2{

        font-size:30px;

    }

}


/*=========================================================
    576px
==========================================================*/

@media (max-width:576px){

    .story-section{

        padding:55px 0;

    }

    .story-section .container{

        width:94%;

    }

    .story-header h2{

        font-size:26px;

    }

    .story-content{

        text-align:left;

        align-items:flex-start;

    }

    .story-content h3{

        font-size:24px;

    }

    .story-content p{

        font-size:15px;

        max-width:100%;

    }

    .story-count{

        width:48px;

        height:48px;

        margin-bottom:18px;

    }

    .story-row{

        gap:25px;

    }

    .story-image{

        border-radius:14px;

    }

    .story-video{

        border-radius:16px;

    }

}


/*=========================================================
    420px
==========================================================*/

@media (max-width:420px){

    .story-header h2{

        font-size:22px;

    }

    .story-content h3{

        font-size:22px;

    }

    .story-content p{

        font-size:14px;

    }

}


/*=========================================================
    UTILITY CLASSES
==========================================================*/

.story-hidden{

    display:none !important;

}

.story-flex{

    display:flex;

}

.story-center{

    align-items:center;

    justify-content:center;

}

.story-text-center{

    text-align:center;

}

.story-rounded{

    border-radius:var(--story-radius);

}

.story-shadow{

    box-shadow:var(--story-shadow);

}

.story-w-100{

    width:100%;

}


/*=========================================================
    IMAGE QUALITY
==========================================================*/

.story-image img{

    image-rendering:auto;

}


/*=========================================================
    PERFORMANCE
==========================================================*/

.story-row,

.story-image,

.story-content,

.story-video{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}


/*=========================================================
    SMOOTH SCROLL
==========================================================*/

html{

    scroll-behavior:smooth;

}


/*=========================================================
    FINAL POLISH
==========================================================*/

.story-row:last-child{

    margin-bottom:0;

}

.story-section{

    position:relative;

    z-index:1;

}

.story-section *{

    box-sizing:border-box;

}


/*=========================================================
    END OF FILE
==========================================================*/