/* ======================================================
   NIGHTANGELS - MAUSOLEUM.CSS
   Univers : Le Mausol�e de l'Ange
====================================================== */

body[data-universe="mausoleum"]{

--accent-color:#9aa4b0;
--header-border:rgba(210,220,235,.08);

--theme-bg:#050608;
--theme-bg-secondary:#0b0d10;

--theme-primary:#4b525d;
--theme-primary-light:#c3cad3;

--theme-gold:#d7dde5;

--theme-text:#edf1f5;
--theme-text-secondary:#a5afbb;
--theme-title:#fafbfd;

--theme-border:rgba(220,230,255,.08);
--theme-glow:rgba(220,230,255,.08);

--hero-overlay:rgba(5,6,8,.45);
--hero-overlay-strong:rgba(5,6,8,.92);

--hero-image:url('/images/mausoleum-bg.webp');

background:

radial-gradient(
circle at top,
rgba(170,180,200,.06),
transparent 40%
),

linear-gradient(
to bottom,
#050608,
#08090b,
#050608
);

color:var(--theme-text);

overflow-x:hidden;

}

/* ======================================================
BACKGROUND
====================================================== */

body[data-universe="mausoleum"]::before{

content:'';

position:fixed;
inset:0;

z-index:-10;

pointer-events:none;

background-image:

linear-gradient(
to bottom,
rgba(5,6,8,.35),
rgba(5,6,8,.88)
),

var(--hero-image);

background-size:cover;
background-position:center;
background-repeat:no-repeat;

opacity:.95;

animation:
mausoleumDrift 45s ease infinite;

}

body[data-universe="mausoleum"]::after{

content:'';

position:fixed;
inset:0;

z-index:-9;

pointer-events:none;

background:

linear-gradient(
to bottom,
rgba(0,0,0,.2),
rgba(0,0,0,.84)
);

opacity:.5;

}

/* ======================================================
GLOBAL
====================================================== */

body[data-universe="mausoleum"] section{

position:relative;
z-index:2;
width:100%;

}

body[data-universe="mausoleum"] .particles{

position:fixed;
inset:0;

z-index:1;

pointer-events:none;

overflow:hidden;

}

body[data-universe="mausoleum"] .particles span{

position:absolute;

width:3px;
height:3px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(230,235,255,.95),
rgba(180,190,220,.25),
transparent
);

box-shadow:
0 0 10px rgba(220,230,255,.55);

opacity:.45;

animation:
memoryFloat linear infinite;

}

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

body[data-universe="mausoleum"] .theme-hero{

display:flex;

justify-content:center;
align-items:center;

min-height:90vh;

padding:
210px
40px
120px;

text-align:center;

position:relative;

overflow:hidden;

}

body[data-universe="mausoleum"] .theme-hero::before{

content:'';

position:absolute;
inset:0;

background:

radial-gradient(
circle at center,
rgba(200,210,225,.08),
transparent 70%
);

animation:
mausoleumPulse 10s ease infinite;

}

body[data-universe="mausoleum"] .hero-content{

max-width:1200px;

position:relative;

z-index:2;

}

body[data-universe="mausoleum"] .hero-subtitle{

letter-spacing:6px;

text-transform:uppercase;

font-size:.85rem;

color:var(--accent-color);

}

body[data-universe="mausoleum"] .hero-title{

font-size:

clamp(
4rem,
8vw,
7rem
);

line-height:.9;

letter-spacing:2px;

margin:18px 0;

}

body[data-universe="mausoleum"] .hero-text{

max-width:850px;

margin:auto;

font-size:1rem;

line-height:1.8;

color:var(--theme-text-secondary);

}

/* ======================================================
QUOTE
====================================================== */

body[data-universe="mausoleum"] .theme-quote{

padding:
70px
40px;

text-align:center;

}

body[data-universe="mausoleum"] .quote-content{

max-width:1000px;
margin:auto;

}

body[data-universe="mausoleum"] .quote-symbol{

font-size:2rem;

display:block;

margin-bottom:20px;

color:var(--accent-color);

}

body[data-universe="mausoleum"] .quote-text{

font-size:1.3rem;

line-height:2;

}

/* ======================================================
CARDS
====================================================== */

body[data-universe="mausoleum"] .theme-atmosphere{

padding:
10px
40px
80px;

}

body[data-universe="mausoleum"] .atmosphere-grid{

display:grid;

grid-template-columns:
repeat(3,minmax(0,1fr));

gap:35px;

max-width:1450px;

margin:auto;

}

body[data-universe="mausoleum"] .atmosphere-card,
body[data-universe="mausoleum"] .track-card{

background:

linear-gradient(
145deg,
rgba(12,13,16,.76),
rgba(4,5,6,.92)
);

border:
1px solid var(--theme-border);

border-radius:32px;

backdrop-filter:blur(8px);

box-shadow:
0 0 20px rgba(220,230,255,.04);

}

body[data-universe="mausoleum"] .atmosphere-card{

padding:36px;

}

body[data-universe="mausoleum"] .atmosphere-card h3{

font-size:2rem;

margin-bottom:20px;

}

body[data-universe="mausoleum"] .atmosphere-card p{

line-height:2;

color:var(--theme-text-secondary);

}

/* ======================================================
SOUVENIRS
====================================================== */

body[data-universe="mausoleum"] .souvenir-image{

overflow:hidden;

border-radius:22px;

margin-bottom:24px;

}

body[data-universe="mausoleum"] .souvenir-image img{

display:block;

width:100%;

height:auto;

}

/* ======================================================
TRACKS / ENDING
====================================================== */

body[data-universe="mausoleum"] .theme-tracks{

padding:
0
40px
80px;

}

body[data-universe="mausoleum"] .tracks-grid{

max-width:1100px;

margin:auto;

}

body[data-universe="mausoleum"] .track-video-preview{

overflow:hidden;

background:#000;

border-top-left-radius:32px;
border-top-right-radius:32px;

}

body[data-universe="mausoleum"] .track-video-preview img{

display:block;

width:100%;

height:auto;

}

body[data-universe="mausoleum"] .track-content,
body[data-universe="mausoleum"] .mausoleum-ending-body{

padding:34px;

}

body[data-universe="mausoleum"] .track-title{

font-size:2.6rem;

margin-bottom:20px;

}

body[data-universe="mausoleum"] .track-lore{

line-height:2;

color:var(--theme-text-secondary);

}

body[data-universe="mausoleum"] .mausoleum-ending-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

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

body[data-universe="mausoleum"] .theme-button{

display:flex;

justify-content:center;
align-items:center;

padding:
16px 28px;

border-radius:18px;

text-decoration:none;

color:white;

background:

linear-gradient(
145deg,
rgba(220,230,255,.10),
rgba(10,12,15,.96)
);

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

}

/* ======================================================
RELIC
====================================================== */

body[data-universe="mausoleum"] .relic-symbol{

font-size:2rem;

color:var(--accent-color);

margin-bottom:18px;

text-align:center;

}

body[data-universe="mausoleum"] .relic-text{

text-align:center;

line-height:2;

color:var(--theme-text-secondary);

}

body[data-universe="mausoleum"] #relicContent{

transition:1.2s ease;

}

body[data-universe="mausoleum"] #relicContent.fade-away{

opacity:0;

transform:
translateY(-20px);

}

body[data-universe="mausoleum"] .album-title{

display:block;

text-align:center;

margin-bottom:15px;

}

body[data-universe="mausoleum"] .hidden-album{

display:none;

opacity:0;

}

body[data-universe="mausoleum"] .hidden-album.active{

display:block;

animation:
albumReveal .8s ease forwards;

}

/* ======================================================
MODAL
====================================================== */

body[data-universe="mausoleum"] .memory-modal{

position:fixed;

inset:0;

display:flex;

justify-content:center;
align-items:center;

padding:20px;

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

opacity:0;

pointer-events:none;

transition:.45s ease;

z-index:999999;

}

body[data-universe="mausoleum"] .memory-modal.active{

opacity:1;

pointer-events:auto;

}

body[data-universe="mausoleum"] .memory-container{

position:relative;

width:min(100%,950px);

max-height:95vh;

overflow:auto;

}

body[data-universe="mausoleum"] .memory-container img{

display:block;

width:100%;

border-radius:20px;

}

body[data-universe="mausoleum"] .close-memory{

position:absolute;

right:12px;
top:12px;

width:48px;
height:48px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:1.2rem;

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

color:white;

z-index:5;

}

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

body[data-universe="mausoleum"] .theme-tracks .track-card{

animation:
softReveal 1.2s ease;

animation-fill-mode:both;

}

@keyframes softReveal{

from{opacity:0;}
to{opacity:1;}

}

@keyframes albumReveal{

from{

opacity:0;

transform:
translateY(20px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

@keyframes memoryFloat{

0%{

opacity:0;

transform:
translateY(0);

}

100%{

opacity:0;

transform:
translateY(-160px);

}

}

@keyframes mausoleumDrift{

0%,100%{

transform:scale(1);

}

50%{

transform:
scale(1.03)
translateY(-10px);

}

}

@keyframes mausoleumPulse{

0%,100%{opacity:.35;}
50%{opacity:.55;}

}

/* ======================================================
STORY ENGINE
====================================================== */

body[data-universe="mausoleum"] .story-media{

position:relative;

overflow:hidden;

border-radius:28px;

border:

1px solid var(--theme-border);

box-shadow:

0 0 20px rgba(
220,
230,
255,
0.05
);

}

body[data-universe="mausoleum"] .story-image{

display:block;

width:100%;

height:auto;

}

body[data-universe="mausoleum"] .story-text{

background:

linear-gradient(

145deg,

rgba(12,13,16,.76),

rgba(4,5,6,.92)

);

border:

1px solid var(--theme-border);

border-radius:28px;

box-shadow:

0 0 20px rgba(
220,
230,
255,
0.04
);

color:

var(--theme-text-secondary);

}

body[data-universe="mausoleum"] .story-fullscreen-text{

background:

linear-gradient(

145deg,

rgba(8,10,14,.94),

rgba(20,24,32,.95)

);

border:

1px solid var(--theme-border);

color:

var(--theme-text);

}

body[data-universe="mausoleum"] .story-button{

background:

linear-gradient(

145deg,

rgba(220,230,255,.10),

rgba(10,12,15,.96)

);

border:

1px solid rgba(
220,
230,
255,
0.08
);

color:white;

}

body[data-universe="mausoleum"] .story-media::after{

content:'';

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(

circle,

rgba(170,190,255,.06),

rgba(100,120,180,.03),

transparent 72%

);

}

/* FULLSCREEN */

body[data-universe="mausoleum"] .story-fullscreen-overlay{

background:

linear-gradient(

to top,

rgba(0,0,0,.92),

rgba(0,0,0,.2)

);

}

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

@media(max-width:1100px){

body[data-universe="mausoleum"]{

--hero-image:
url('/images/mausoleum-bg-mobile.webp');

}

body[data-universe="mausoleum"] .theme-hero{

padding:
120px
20px
15px;

min-height:auto;

}

body[data-universe="mausoleum"] .hero-title{

font-size:

clamp(
2.8rem,
12vw,
4.4rem
);

line-height:.9;

letter-spacing:1px;

margin:
10px 0 18px;

}

body[data-universe="mausoleum"] .hero-text{

font-size:.95rem;

line-height:1.45;

max-width:95%;

}

body[data-universe="mausoleum"] .quote-text{

font-size:0.95rem;

line-height:1.45;

margin-bottom:10px;

}

body[data-universe="mausoleum"] .theme-quote{

padding:

10px
20px
20px;

}

body[data-universe="mausoleum"] .theme-tracks,
body[data-universe="mausoleum"] .theme-atmosphere{

padding:

0
20px
25px;

}

body[data-universe="mausoleum"] .atmosphere-grid{

display:flex;

flex-direction:column;

gap:20px;

}

body[data-universe="mausoleum"] .track-content{

padding:24px;

}

body[data-universe="mausoleum"] .memory-container{

width:100%;

}

}