/* ── Sunlit CSS variables ─────────────────────────────────────────
   --light / --dark swap on html.dark; used by overlay elements.
   Body background tracks var(--light) so keyframe animations work.
   ─────────────────────────────────────────────────────────────── */
:root {
  --day:     #fffdfa;
  --evening: #fccc83;
  --dusk:    #db7a2a;
  --night:   #1d1f21;   /* matches our dark-mode palette */
  --dawn:    #16132b;
  --morning: #9fb3bf;

  --light:        var(--day);
  --dark:         var(--night);
  --shadow:       #1a1917;
  --bounce-light: #f5d7a6;
  --timing-fn:    cubic-bezier(0.455, 0.190, 0.000, 0.985);
}

html.dark {
  --light:        var(--night);
  --dark:         var(--day);
  --shadow:       #030307;
  --bounce-light: #1b293f;
  border-top-color: #c9cacc;
}

/* Override compiled body background with the CSS variable */
body { background-color: var(--light); }

/* ── Sunrise / sunset body animations ────────────────────────── */
html.animation-ready body           { animation: sunrise 1s   linear forwards; }
html.animation-ready.dark body      { animation: sunset  1.7s linear forwards; }

@keyframes sunrise {
  0%   { background-color: var(--night);   }
  10%  { background-color: var(--dawn);    }
  35%  { background-color: var(--morning); }
  100% { background-color: var(--day);     }
}
@keyframes sunset {
  0%   { background-color: var(--day);     }
  30%  { background-color: var(--evening); }
  60%  { background-color: var(--dusk);    }
  90%  { background-color: var(--dawn);    }
  100% { background-color: var(--night);   }
}

/* ── Smooth transitions on content (lowest specificity via :where)
   Sunlit elements keep their own timing; nothing is overridden.  */
:where(html.animation-ready) *,
:where(html.animation-ready) *::before,
:where(html.animation-ready) *::after {
  transition: background-color 0.5s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ── Dappled-light overlay ────────────────────────────────────── */
#dappled-light {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 100vw;
}

#glow {
  position: absolute;
  height: 100%; width: 100%;
  background: linear-gradient(309deg, var(--bounce-light), var(--bounce-light) 20%, transparent);
  transition: background 1.0s var(--timing-fn);
  opacity: 0.5;
}
#glow-bounce {
  position: absolute;
  height: 100%; width: 100%;
  bottom: 0;
  background: linear-gradient(355deg, var(--bounce-light) 0%, transparent 30%);
  transition: background 1.0s var(--timing-fn);
  opacity: 0.5;
}

.perspective {
  position: absolute;
  top: -30vh; right: 0;
  width: 80vw; height: 130vh;
  opacity: 0.07;
  transform-origin: top right;
  transform-style: preserve-3d;
  transform: matrix3d(0.75,-0.0625,0,0.0008, 0,1,0,0, 0,0,1,0, 0,0,0,1);
  transition: transform 1.7s var(--timing-fn), opacity 4s ease;
}
html.dark .perspective {
  opacity: 0.3;
  transform: matrix3d(0.8333,0.0833,0,0.0003, 0,1,0,0, 0,0,1,0, 0,0,0,1);
}

#leaves {
  position: absolute;
  bottom: -20px; right: -700px;
  width: 1600px; height: 1400px;
  background-image: url("/images/leaves.png");
  background-size: cover;
  background-repeat: no-repeat;
  filter: url(#wind);
  animation: billow 8s ease-in-out infinite;
}
@keyframes billow {
  0%   { transform: perspective(400px) rotateX(0deg)  rotateY(0deg)  scale(1);    }
  25%  { transform: perspective(400px) rotateX(1deg)  rotateY(2deg)  scale(1.02); }
  50%  { transform: perspective(400px) rotateX(-4deg) rotateY(-2deg) scale(0.97); }
  75%  { transform: perspective(400px) rotateX(1deg)  rotateY(-1deg) scale(1.04); }
  100% { transform: perspective(400px) rotateX(0deg)  rotateY(0deg)  scale(1);    }
}

#blinds { position: relative; width: 100%; }
#blinds .shutter,
#blinds .bar    { background-color: var(--shadow); }

#blinds > .shutters {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 60px;
  transition: gap 1.0s var(--timing-fn);
}
html.dark #blinds > .shutters { gap: 20px; }

#blinds > .vertical {
  position: absolute; top: 0;
  height: 100%; width: 100%;
  display: flex; justify-content: space-around;
}
.vertical > .bar { width: 5px; height: 100%; }

.shutter { width: 100%; height: 40px; transition: height 1.0s var(--timing-fn); }
html.dark .shutter { height: 80px; }

#progressive-blur { position: absolute; height: 100%; width: 100%; }
#progressive-blur > div {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  backdrop-filter:         blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  mask-image:         linear-gradient(252deg, transparent, transparent var(--stop1), black var(--stop2), black);
  -webkit-mask-image: linear-gradient(252deg, transparent, transparent var(--stop1), black var(--stop2), black);
}
#progressive-blur > div:nth-child(1) { --blur-amount:  6px; --stop1:  0%; --stop2:  0%; }
#progressive-blur > div:nth-child(2) { --blur-amount: 12px; --stop1: 40%; --stop2: 80%; }
#progressive-blur > div:nth-child(3) { --blur-amount: 48px; --stop1: 40%; --stop2: 70%; }
#progressive-blur > div:nth-child(4) { --blur-amount: 96px; --stop1: 70%; --stop2: 80%; }

/* ── Toggle button ────────────────────────────────────────────── */
#theme-toggle {
  background: none; border: none; cursor: pointer;
  padding: 0 4px; color: #2bbc8a;
  font-size: 1rem; line-height: 50px;
  float: right; display: block;
}
#theme-toggle:focus  { outline: none; }
#theme-toggle:hover  { opacity: 0.7; }

#theme-toggle .icon-sun  { display: none; }
#theme-toggle .icon-moon { display: inline; }
html.dark #theme-toggle .icon-sun  { display: inline; }
html.dark #theme-toggle .icon-moon { display: none; }

@media screen and (max-width: 480px) {
  #theme-toggle {
    float: none; position: absolute;
    top: 77px; right: 5rem;
    line-height: 1; padding: 4px; font-size: 1.1rem;
  }
}

/* ── Dark mode colour overrides ───────────────────────────────── */
html.dark body          { color: #c9cacc; }

html.dark h2, html.dark .h2 { color: #eeeeee; }
html.dark h3                { color: #eeeeee; }
html.dark h4, html.dark h5, html.dark h6 { color: #cccccc; }

html.dark hr { border-color: #cccccc; }
html.dark th { color: #eeeeee; }

html.dark .content a {
  color: #c9cacc;
  background-image: linear-gradient(transparent, transparent 5px, #c9cacc 5px, #c9cacc);
}
html.dark .content a:hover {
  background-image: linear-gradient(transparent, transparent 4px, rgba(212,128,170,1) 4px, rgba(212,128,170,1));
}

/* Heading links must inherit the heading colour, not the generic link colour */
html.dark h1 a, html.dark .h1 a,
html.dark h2 a, html.dark h3 a,
html.dark h4 a, html.dark h5 a,
html.dark h6 a {
  color: inherit;
  background-image: none;
}

/* Icon links (social icons etc.) must not get the text underline gradient */
html.dark .content a.icon {
  color: inherit;
  background: none;
}

html.dark #header h1, html.dark #header .h1 { color: #c9cacc; }

html.dark code { background-color: #23262a; }
html.dark pre  { background-color: #23262a; }

html.dark article header .meta *      { color: #cccccc; }
html.dark .post-list .post-item .meta { color: #888888; }
html.dark blockquote                  { color: #ccffb6; }
html.dark blockquote::before          { color: #ccffb6; }
html.dark #tag-cloud .tag-cloud-title { color: #888888; }

/* Mobile post action bar */
html.dark #footer-post                         { background: #23262a; border-top-color: #444; }
html.dark #footer-post #nav-footer,
html.dark #footer-post #share-footer,
html.dark #footer-post #toc-footer             { background: #2a2d30; }
html.dark #footer-post a                       { color: #c9cacc; }
html.dark #footer-post #nav-footer a           { color: #2bbc8a; }
html.dark #footer-post #actions-footer a       { color: #2bbc8a; }
html.dark #footer-post #toc-footer #TableOfContents > ul > li           { color: #c9cacc; }
html.dark #footer-post #toc-footer #TableOfContents > ul > li > ul > li { color: #888888; }

/* Desktop post sidebar */
html.dark #header-post #toc nav > ul > li                     { color: #c9cacc; }
html.dark #header-post #toc nav > ul > li > ul > li           { color: #888888; }
html.dark #header-post #toc nav > ul > li > ul > li > ul > li { color: #555555; }

/* Search */
html.dark .search-input                        { background-color: #23262a; color: #c9cacc; border-color: #555; }
html.dark #search-result a.search-result-title { color: #c9cacc; }
html.dark .search-no-result                    { color: #c9cacc; }