/* The "summon doglord" easter egg on the home page terminal (layouts/index.html) switches the site to
   the purple theme (theme-purple.css) and changes a few things on top of it, styled here. Loaded by the
   main site (partials/head.html) and by the pages in tools/ (their scripts/build.mjs). */

/* the address in the top left corner reads ~/doglord (the span is in the navigation bar, hidden on other themes) */
:root[data-theme="purple"] .brand-name { display: none; }
:root[data-theme="purple"] .brand-doglord { display: inline; }
/* the teaching paragraph of the home page bio makes way for a shorter one that ends with a note on
   Doglord (doglord_note in content/_index*.md), about as long so the page does not move; the
   Doglord sentence is amp orange (--hornbill of the purple theme, like the amplifiers on the album cover) so it stands out */
/* both paragraphs share one grid cell, so the bio keeps the same height in every theme and the page
   does not move (the Doglord version is a little shorter); only the theme decides which one shows */
.hero-intro { display: grid; }
.hero-intro > * { grid-column: 1; }
.hero-intro > .bio-teaching, .hero-intro > .hero-doglord { grid-row: 2; }
.hero-intro > .hero-doglord { display: block; visibility: hidden; }
:root[data-theme="purple"] .hero-intro > .bio-teaching { visibility: hidden; }
:root[data-theme="purple"] .hero-intro > .hero-doglord { visibility: visible; }
.doglord-new { color: var(--hornbill); }

/* praise doglord (removable, see layouts/index.html): each word glows briefly as it turns into
   "doglord", then stays violet or amp orange */
.doglorded { color: var(--pandan); animation: doglorded 0.9s ease-out; }
@keyframes doglorded { from { color: #e7d6ff; text-shadow: 0 0 12px rgba(198, 163, 255, 0.9); } }
.doglorded-orange { color: var(--hornbill); animation-name: doglorded-orange; }
@keyframes doglorded-orange { from { color: #ffd9b0; text-shadow: 0 0 12px rgba(242, 176, 74, 0.9); } }
@media (prefers-reduced-motion: reduce) { .doglorded { animation: none; } }
/* page titles have a gradient as their fill (site.css); the new words take their own colour instead */
h1 .doglorded { -webkit-text-fill-color: currentColor; }
/* the highlighted language keeps its own text colour, which is readable on its pill */
.lang-current .doglorded { color: inherit; animation: none; }