/* =====================================================================
   THEMES / NIGHT.CSS — Candlelit "Old Book" Theme for Read Runeberg
   ===================================================================== */

/* Prevent transition flash */
html.night *, 
html.night *::before,
html.night *::after {
  transition: none !important;
}


body.night,
[data-theme="dark"] {
  --bg: #1b1613;
  --fg: #e9dfcf;
  --muted: #b5a794;
  --link: #e3c59b;
  --accent: #e3c59b;
  --card: #2b241d;
  --bord: #3d342b;

  --paper-texture: url(/assets/img/paper-fiber-dark.webp);

  /* Header stays identical */
  --header-bg: #231a14;
  --header-text: #f8efe3;
  --header-btn-bg: rgba(255,255,255,0.05);
  --header-btn-border: rgba(255,255,255,0.15);
}

  --paper-fiber: url(/assets/img/paper-fiber.webp);
}


/* Prevent flicker when loading with night mode active */
/* 🚫 Disable all transitions while the page initializes */
body.no-transition *,
body.no-transition::before,
body.no-transition::after {
  transition: none !important;
}


/* === 2. Global Background & Text ================================== */
body.night{background-color:#1d1710;background-blend-mode:overlay,overlay,multiply,multiply;background-size:500px 500px,800px 800px,auto,600px 600px;color:var(--fg);text-shadow:0 0 2px #0006;transition:background 1s ease,color .8s ease}
body.night *,body.night ::before,body.night ::after{transition:background-color .6s ease,border-color .6s ease,color .6s ease,box-shadow .6s ease,text-shadow .8s ease}
body.night{background-color:#18130e;background-image:url(/assets/img/paper-fiber.webp),linear-gradient(180deg,#1f1a15 0%,#0e0b08 100%);background-repeat:repeat,no-repeat;background-size:800px auto,cover;background-attachment:fixed;background-blend-mode:soft-light;color-scheme:dark;position:relative;background-attachment:scroll}
body.night::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 40% 10%,#ffd2a014,transparent 70%);mix-blend-mode:screen;z-index:-1}


/* === 3. Header & Branding ======================================== */
body.night .site-header{background:radial-gradient(circle at 30% 30%,#ffffff08 0%,transparent 80%),radial-gradient(circle at 70% 70%,#ffffff05 0%,transparent 90%);background-color:#1b1815;border-bottom:1px solid #3a342d;color:#f3ede2;box-shadow:0 2px 8px #0008}
body.night .brand{color:#f3ede2;text-shadow:0 0 4px #fff0b440}
body.night .brand:hover{color:#fff4c8;text-shadow:0 0 5px #f0d27866}

/* === 4. Reader & Page Surfaces =================================== */
body.night .reader,body.night .ocr,body.night .facsimile{background:#281e12e0;border-color:#ffdc961a;color:#f6e9c5;box-shadow:inset 0 2px 12px #0004,0 2px 6px #0004;backdrop-filter:brightness(0.9) contrast(1.05)}

/* === 5. Candle Glow & Title Effects =============================== */
body.night .btn#nightToggle{animation:candleFlicker 2.8s infinite ease-in-out alternate;color:#f6e7b2;text-shadow:0 0 3px #f6e7b280,0 0 6px #e0c67380;filter:drop-shadow(0 0 2px #cba65760)}
body.night .btn#nightToggle:hover{animation:none;transform:scale(1.05);text-shadow:0 0 5px #ffecb080,0 0 10px #e0c673b0}
body.night .book-title{color:#f7e9c5;text-shadow:0 -1px 1px #000,0 1px 2px #e0c67340,0 0 4px #cba65760;animation:titleShimmer 6s ease-in-out infinite alternate}
body.night .book-title:hover{animation-play-state:paused}

/* === 6. Cards & Panels =========================================== */
body.night .category-card,body.night .book-card,body.night .search-result{background:#2b2418ee;border:1px solid #f0dcaa26;color:#f6eedd;box-shadow:0 0 20px #c8a0501f inset,0 0 40px #0009}
body.night .category-card:hover,body.night .book-card:hover,body.night .search-result:hover{transform:translateY(-3px);box-shadow:0 0 25px #f0d27826 inset,0 0 50px #0006}
body.night .category-card h2 a{color:#f6e7b2;text-shadow:0 0 3px #fff0be40}

/* === 7. Inputs & Buttons ========================================= */
body.night input,body.night select,body.night button{background:#3a3123;color:#f6eedd;border:1px solid #f0dcaa33}
body.night input::placeholder{color:#faf0c899}

/* === 8. Links & Headings ========================================= */
body.night a{color:var(--link);text-decoration-color:#fff0b44d}
body.night a:hover{color:#fff4c8;text-shadow:0 0 5px #f0d2784d}
body.night h1,body.night h2,body.night h3{color:#f7e9c5;text-shadow:0 0 4px #f0c87826;font-weight:600}

/* === 9. Footer ==================================================== */
body.night footer{border-top:1px solid #ffffff26;color:#d8cba4;background:radial-gradient(circle at 50% 30%,#1e140acc,#0a0805e6);padding:1.5rem 0}

/* === 10. Decorative Animations =================================== */
@keyframes candleFlicker {
0%,100%{text-shadow:0 0 4px #f6e7b2,0 0 8px #e0c673,0 0 12px #b48b41;transform:scale(1)}
50%{text-shadow:0 0 6px #ffecb0,0 0 12px #e0c673,0 0 18px #cba657;transform:scale(1.04)}
75%{text-shadow:0 0 5px #f6e7b2,0 0 10px #dcb35f,0 0 14px #a67c3b;transform:scale(0.98)}
}
@keyframes titleShimmer {
0%,100%{text-shadow:0 -1px 1px #000,0 1px 2px #e0c67340,0 0 6px #cba65760}
50%{text-shadow:0 -1px 1px #000,0 1px 2px #dcb35f80,0 0 8px #ffecb050}
}

/*parallax */
body.night .hero-intro::before{opacity:.25;filter:brightness(0.7)}
body.night .hero-intro::before{background:radial-gradient(circle at 30% 20%,#503c2880,transparent 60%),radial-gradient(circle at 70% 80%,#32281466,transparent 60%),
repeating-linear-gradient(0deg,#ffffff08 0 2px,#fff0 2px 4px),linear-gradient(180deg,#1b150f 0%,#1a130b 100%);opacity:0}
.hero-intro::before,.categories-preview::before{background-attachment:scroll;background-position:center}