/* =========================================================
   STORY V3.2
   HYBRID CINEMATIC SYSTEM
========================================================= */

body[data-page="story"]{

    background:#000;

    color:#fff;

    overflow-x:hidden;
}

/* =========================================================
   SCENE
========================================================= */

.story-scene{

    position:relative;

    width:100%;

    min-height:100vh;

    padding-top:140px;

    padding-bottom:100px;
}

/* =========================================================
   TOP
========================================================= */

.story-top{

    width:min(1200px,100%);

    margin:auto;

    padding:
    0
    24px
    40px;

    text-align:center;
}

.story-subtitle{

    margin-bottom:18px;

    font-size:0.9rem;

    letter-spacing:10px;

    text-transform:uppercase;

    color:var(--theme-primary,#c6a46a);
}

.story-title{

    font-size:clamp(3rem,8vw,7rem);

    line-height:0.9;

    text-transform:uppercase;

    font-family:'Cinzel',serif;

    color:var(--gold);

    text-shadow:
    0 0 30px rgba(255,220,180,0.18);
}

/* =========================================================
   MEDIA
========================================================= */

.story-media{

    position:relative;

    width:min(1400px,100%);

    margin:auto;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#000;
}

.story-media::after{

content:'';

position:absolute;

left:50%;
top:50%;

width:70%;

height:70%;

transform:

translate(-50%,-50%);

background:

radial-gradient(

circle,

var(--theme-glow),

transparent 72%

);

filter:blur(40px);

opacity:.9;

pointer-events:none;

animation:

imageHalo 6s ease-in-out infinite;

}

@keyframes imageHalo{

0%{

opacity:.55;

transform:
translate(-50%,-50%)
scale(1);

}

50%{

opacity:1;

transform:
translate(-50%,-50%)
scale(1.08);

}

100%{

opacity:.55;

transform:
translate(-50%,-50%)
scale(1);

}

}

.story-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    filter:
    brightness(0.82)
    contrast(1.04);

    transition:
    opacity .5s ease,
    transform 8s ease;

    animation:
    storyZoom 18s ease-in-out infinite alternate;

    will-change:
    transform,
    opacity;
}

/* =========================================================
   FULLSCREEN BUTTON
========================================================= */

.story-expand{

    position:absolute;

    right:24px;

    bottom:24px;

    width:72px;

    height:72px;

    border:none;

    border-radius:24px;

    cursor:pointer;

    z-index:10;

    background:
    rgba(0,0,0,0.62);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-size:2rem;

    transition:
    transform .3s ease,
    background .3s ease;
}

.story-expand:hover{

    transform:scale(1.08);

    background:
    rgba(20,20,20,0.88);
}

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

.story-content{

    width:min(820px,100%);

    margin:auto;

    padding:
    24px
    16px
    0;
}

.story-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
    10px
    14px
    10px;

    border-radius:22px;

    background:
    rgba(5,5,8,0.72);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    border:
    1px solid rgba(255,255,255,0.05);

    font-size:1rem;

    line-height:1.30;

    text-align:center;

    box-shadow:
    0 0 30px rgba(0,0,0,0.26);

    width:100%;

    margin:auto;

}

.story-text p{

margin:0;

padding:0;

line-height:1.05;

}

.story-text p:last-child{

    margin-bottom:0;
}

/* =========================================================
   BUTTONS
========================================================= */

.story-buttons{

display:flex;

flex-direction:column;

gap:12px;

margin-bottom:20px;

}

.story-button{

position:relative;

width:100%;

min-height:48px;

border:none;

border-radius:18px;

overflow:hidden;

cursor:pointer;

color:white;

font-size:.75rem;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

isolation:isolate;

background:rgba(255,255,255,.03);

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

transition:

transform .45s ease,
filter .45s ease,
box-shadow .45s ease;

box-shadow:

0 12px 40px rgba(0,0,0,.45),

0 0 70px var(--theme-glow);

}

/* =========================================
   REFLET PREMIUM
========================================= */

.story-button::before{

content:'';

position:absolute;

left:-12%;

top:-50%;

width:72%;

height:220%;

border-radius:50%;

background:

radial-gradient(

ellipse,

rgba(255,255,255,.26),

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

transparent 72%

);

pointer-events:none;

transition:.8s ease;

z-index:1;

}

/* =========================================
   PROFONDEUR
========================================= */

.story-button::after{

content:'';

position:absolute;

inset:0;

border-radius:inherit;

box-shadow:

inset 0 1px 1px rgba(255,255,255,.35),

inset 0 -10px 25px rgba(0,0,0,.30);

pointer-events:none;

}

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

.story-button:hover::before{

left:4%;

}

.story-button:hover{

transform:

translateY(-4px)

scale(1.01);

filter:

brightness(1.05);

box-shadow:

0 15px 45px rgba(0,0,0,.45),

0 0 90px var(--theme-glow);

}

/* =========================================================
   THEMES
========================================================= */

.choice-btn{

background:

linear-gradient(
145deg,
#f4e3c1,
#c89a5f
);

box-shadow:

0 0 50px rgba(214,174,110,.32),

0 0 120px rgba(214,174,110,.18);

}

.lilith-btn{

background:

linear-gradient(
145deg,
#c40000,
#4b0000
);

box-shadow:

0 0 55px rgba(180,0,0,.42),

0 0 120px rgba(180,0,0,.20);

}

.gaia-btn{

background:

linear-gradient(
145deg,
#67c287,
#2b6d43
);

box-shadow:

0 0 55px rgba(86,180,120,.36),

0 0 120px rgba(86,180,120,.18);

}

/* =========================================================
   FULLSCREEN MODE
========================================================= */

.story-fullscreen{

    position:fixed;

    inset:0;

    z-index:99999;

    background:#000;

    display:none;

    justify-content:center;

    align-items:center;
}

.story-fullscreen.active{

    display:flex;
}

.story-fullscreen img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;
}

.story-fullscreen-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.7)
    );
}

.story-fullscreen-ui{

    position:relative;

    z-index:5;

    width:min(900px,100%);

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:24px;

    gap:14px;
}

/* =========================================================
   FULLSCREEN TEXT
========================================================= */

.story-fullscreen-text{

display:flex;

flex-direction:column;

justify-content:center;

width:100%;

padding:
8px
14px
8px;

border-radius:22px;

background:
rgba(0,0,0,.38);

backdrop-filter:
blur(8px);

-webkit-backdrop-filter:
blur(8px);

font-size:0.92rem;

line-height:1.05;

text-align:center;

overflow:auto;

white-space:normal;

}

/* paragraph spacing */

.story-fullscreen-text p{

margin:0;

padding:0;

line-height:1.05;

}

/* separation between paragraphs */

.story-fullscreen-text p + p{

margin-top:6px;

}

.story-fullscreen-text p:last-child{

    margin-bottom:0;
}

/* =========================================================
   FULLSCREEN BUTTONS
========================================================= */

.story-fullscreen-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:2px;
}

.story-fullscreen-buttons .story-button{

    min-height:48px;

    font-size:0.75rem;

    letter-spacing:1px;

    padding:
    5px;

    border-radius:18px;
}

/* =========================================================
   CLOSE BUTTON
========================================================= */

.story-close{

    position:absolute;

    top:24px;

    right:24px;

    width:70px;

    height:70px;

    border:none;

    border-radius:24px;

    cursor:pointer;

    z-index:20;

    background:
    rgba(0,0,0,0.62);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#fff;

    font-size:2rem;
}

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

#pageTransition{

    position:fixed;

    inset:0;

    background:#fff;

    opacity:0;

    pointer-events:none;

    z-index:999999;

    transition:opacity 1.2s ease;
}

#pageTransition.active{

    opacity:1;
}

/* =========================================================
   CINEMATIC TRANSITION
========================================================= */

.story-media,
.story-content{

    transition:
    opacity .5s ease,
    transform .5s ease,
    filter .5s ease;
}

body.story-changing .story-media,
body.story-changing .story-content{

    opacity:0;

    transform:
    scale(1.015);

    filter:
    blur(12px);
}

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

@media(max-width:768px){

.story-scene{

    padding-top:120px;
}

.story-title{

    font-size:clamp(3rem,16vw,5rem);
}

.story-subtitle{

    font-size:0.72rem;

    letter-spacing:5px;
}

.story-content{

    padding:
    14px
    10px
    0;
}

.story-text{

    font-size:0.92rem;

    line-height:1.30;

    border-radius:22px;
}

.story-button{

min-height:48px;

font-size:.75rem;

letter-spacing:1px;

padding:
5px;

}

.story-expand{

    width:64px;

    height:64px;

    right:16px;

    bottom:16px;
}

.story-fullscreen-ui{

    padding:18px;
}

.story-close{

    width:82px;

    height:82px;

    font-size:1.8rem;

    top:14px;

    right:14px;
}

}

@media (max-width:900px) and (orientation:landscape){

.story-fullscreen-ui{

width:100%;

height:100%;

padding:14px 20px;

display:flex;

flex-direction:column;

/* reste en bas */

justify-content:flex-end;

gap:8px;

}

/* =====================
TEXT BOX
===================== */

.story-fullscreen-text{

width:92%;

margin:0 auto;

padding:
10px
14px
10px;

background:

rgba(0,0,0,.28);

backdrop-filter:blur(8px);

-webkit-backdrop-filter:blur(8px);

border-radius:22px;

font-size:.92rem;

line-height:1;

text-align:center;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

/* SUPPRIME LES ESPACES HTML */

.story-fullscreen-text p{

margin:0 !important;

padding:0 !important;

line-height:1.02;

}

/* séparation minuscule */

.story-fullscreen-text p + p{

margin-top:2px !important;

}

/* =====================
BUTTONS
===================== */

.story-fullscreen-buttons{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:14px;

/* espace avec texte */

margin-top:6px;

width:92%;

margin-left:auto;

margin-right:auto;

}

.story-fullscreen-buttons .story-button{

min-height:48px;

font-size:.74rem;

}

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes storyZoom{

from{

    transform:scale(1);
}

to{

    transform:scale(1.04);
}
}

@keyframes textFade{

from{

    opacity:0;

    transform:
    translateY(10px);
}

to{

    opacity:1;

    transform:
    translateY(0);
}
}

/* =========================================================
   PORTAL OPENING
========================================================= */

#pageTransition.portal-open{

    opacity:1;

    background:
    radial-gradient(
        circle at center,
        rgba(255,255,255,1),
        rgba(255,230,180,0.92),
        rgba(255,180,80,0.45),
        rgba(0,0,0,1)
    );

    animation:
    portalFlash 3.2s ease forwards;
}

/* =========================================================
   STORY PORTAL ZOOM
========================================================= */

body.portal-opening .story-scene{

    animation:
    storyPortalZoom 2.2s ease forwards;
}

@keyframes portalFlash{

    0%{

        opacity:0;
    }

    20%{

        opacity:1;
    }

    100%{

        opacity:1;
    }
}

@keyframes storyPortalZoom{

    0%{

        transform:
        scale(1);

        opacity:1;

        filter:
        blur(0px);
    }

    100%{

        transform:
        scale(1.05);

        opacity:0;

        filter:
        blur(10px);
    }
}