/* immersive.css - couche d'ambiance partagee Love Ink.
 * Additive : ne change ni URL, ni ID, ni libelle. Charge en dernier dans <head>.
 * Amelioration progressive : sans support navigateur, la page reste identique a l'ancienne.
 */

:root {
    --li-ink-rose: #7a3e3e;
    --li-mid-rose: #b07070;
    --li-soft-rose: #d4a0a0;
    --li-glow-a: rgba(212, 160, 160, 0.42);
    --li-glow-b: rgba(240, 200, 190, 0.55);
    --li-glow-c: rgba(176, 112, 112, 0.22);
    --li-glass: rgba(253, 248, 245, 0.72);
    --li-glass-border: rgba(180, 120, 120, 0.18);
    --li-shadow-tint: 122, 62, 62;
    --li-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --li-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --li-grain-opacity: 0.05;
}

html[data-theme="dark"] {
    --li-glow-a: rgba(142, 82, 82, 0.30);
    --li-glow-b: rgba(90, 48, 52, 0.40);
    --li-glow-c: rgba(210, 150, 150, 0.12);
    --li-glass: rgba(30, 23, 23, 0.70);
    --li-glass-border: rgba(226, 188, 188, 0.10);
    --li-shadow-tint: 0, 0, 0;
    --li-grain-opacity: 0.07;
}

/* ---------- Transitions entre pages (meme origine, Chrome/Edge/Safari recents) ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
    animation: li-page-out 0.32s var(--li-ease-out) both;
}
::view-transition-new(root) {
    animation: li-page-in 0.48s var(--li-ease-out) both;
}
::view-transition-group(li-nav),
::view-transition-group(li-logo) {
    animation-duration: 0.4s;
    animation-timing-function: var(--li-ease-out);
}

@keyframes li-page-out {
    to { opacity: 0; transform: translateY(-6px) scale(0.995); }
}
@keyframes li-page-in {
    from { opacity: 0; transform: translateY(14px); }
}

/* ---------- Ambiance : aurore rose + halo qui suit le pointeur + grain ---------- */
.li-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.li-ambient__blob {
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    filter: blur(70px);
    will-change: transform;
}
.li-ambient__blob--a {
    top: -28vmax; left: -18vmax;
    background: radial-gradient(circle at 50% 50%, var(--li-glow-a), transparent 65%);
    animation: li-drift-a 38s ease-in-out infinite alternate;
}
.li-ambient__blob--b {
    bottom: -32vmax; right: -20vmax;
    background: radial-gradient(circle at 50% 50%, var(--li-glow-b), transparent 65%);
    animation: li-drift-b 46s ease-in-out infinite alternate;
}
.li-ambient__halo {
    position: absolute;
    top: 0; left: 0;
    width: 46vmax;
    height: 46vmax;
    margin: -23vmax 0 0 -23vmax;
    border-radius: 50%;
    background: radial-gradient(circle, var(--li-glow-c), transparent 62%);
    transform: translate3d(var(--li-px, 50vw), var(--li-py, 30vh), 0);
    transition: transform 1.2s var(--li-ease-out);
    will-change: transform;
}

@keyframes li-drift-a {
    to { transform: translate3d(14vmax, 10vmax, 0) scale(1.12); }
}
@keyframes li-drift-b {
    to { transform: translate3d(-12vmax, -8vmax, 0) scale(1.08); }
}

.li-grain {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: var(--li-grain-opacity);
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .li-grain { mix-blend-mode: screen; }

/* ---------- Navigation en verre ---------- */
.navbar,
.nav {
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.navbar.li-scrolled,
.nav.li-scrolled {
    box-shadow: 0 8px 30px rgba(var(--li-shadow-tint), 0.08);
}
.nav-links a {
    position: relative;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--li-ease-out);
    opacity: 0.6;
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

/* ---------- Typographie et confort de lecture ---------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, .section-title, .story-title { text-wrap: balance; }
p, .story-excerpt, .story-content { text-wrap: pretty; }
::selection { background: rgba(212, 160, 160, 0.45); color: inherit; }
html { scrollbar-color: rgba(176, 112, 112, 0.45) transparent; }

/* ---------- Retour tactile et focus ---------- */
.btn, button, [class*="btn"], .follow-btn, .tab-btn {
    transition-property: transform, box-shadow, background-color, color, border-color, opacity;
    transition-duration: 0.25s;
    transition-timing-function: var(--li-ease-out);
}
.btn:active, button:active:not(:disabled), [class*="btn"]:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
    transition-duration: 0.08s;
}
:focus-visible {
    outline: 2px solid var(--li-mid-rose);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- Cartes : elevation teintee ---------- */
.story-card, .cat-card, .author-card, .category-card, .settings-card,
.candidature-card, .auth-card, .stat-item, .apropos-card {
    transition: transform 0.45s var(--li-ease-out), box-shadow 0.45s var(--li-ease-out), border-color 0.3s ease;
}
.auth-card, .settings-card {
    box-shadow: 0 1px 2px rgba(var(--li-shadow-tint), 0.04), 0 18px 50px -20px rgba(var(--li-shadow-tint), 0.18);
}

/* ---------- Apparition au defilement (classe posee par immersive.js) ---------- */
.li-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--li-ease-out), transform 0.8s var(--li-ease-out);
    transition-delay: var(--li-delay, 0s);
}
.li-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Barre de progression de lecture (histoire.html) ---------- */
.li-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2147483001;
    pointer-events: none;
    background: linear-gradient(90deg, var(--li-soft-rose), var(--li-ink-rose));
    transform-origin: 0 50%;
    transform: scaleX(var(--li-read, 0));
}
@supports (animation-timeline: scroll()) {
    .li-progress {
        transform: scaleX(0);
        animation: li-read linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes li-read { to { transform: scaleX(1); } }
}

/* ---------- Squelette de chargement reutilisable ---------- */
.li-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(212, 160, 160, 0.16);
    border-radius: 14px;
}
.li-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: li-shimmer 1.6s ease-in-out infinite;
}
html[data-theme="dark"] .li-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
/* Pages publiques (landing, connexion, inscription) : la page se tourne comme une feuille. */
html.li-public::view-transition-image-pair(root) { perspective: 1800px; perspective-origin: 50% 50%; }
html.li-public::view-transition-old(root) {
    animation: li-turn-out 0.75s cubic-bezier(0.55, 0, 0.35, 1) both;
    transform-origin: left center;
    backface-visibility: hidden;
    z-index: 1;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.25);
}
html.li-public::view-transition-new(root) {
    animation: li-turn-in 0.75s cubic-bezier(0.55, 0, 0.35, 1) both;
}
@keyframes li-turn-out {
    0% { transform: rotateY(0deg); filter: brightness(1); }
    100% { transform: rotateY(-150deg); filter: brightness(0.6); }
}
@keyframes li-turn-in {
    0% { filter: brightness(0.82); }
    100% { filter: brightness(1); }
}

@keyframes li-shimmer { to { transform: translateX(100%); } }

/* ---------- Accessibilite : mouvement et transparence reduits ---------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .li-ambient__blob, .li-skeleton::after, .li-progress { animation: none !important; }
    .li-ambient__halo { transition: none; }
    .li-reveal { opacity: 1; transform: none; transition: none; }
    .btn:active, button:active, [class*="btn"]:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .navbar, .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .li-grain { display: none; }
}
@media print {
    .li-ambient, .li-grain, .li-progress { display: none !important; }
}