/* Steven Thomas Torres — site styles (psychedelic palette) */
:root {
  --bg: #1a0a24;        /* deep aubergine */
  --bg-2: #24102f;
  --panel: rgba(46, 18, 58, .78);
  --ink: #ffe6c2;       /* warm apricot cream */
  --muted: #f0c49a;      /* warm peach */
  --gold: #ffc23a;      /* marigold */
  --orange: #ff7a1a;
  --magenta: #ff3d8b;
  --violet: #8a4dff;
  --teal: #19c2b0;
  --red: #e8343b;       /* Maniac */
  --swirl: linear-gradient(90deg, #b3202a, #ff3d8b, #ff7a1a, #ffc23a, #ff7a1a, #ff3d8b, #b3202a); /* sunset, not rainbow */
  --display: "Shrikhand", Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
  --body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1100px;
  /* layered wavy stripes used as section dividers */
  --waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28' viewBox='0 0 120 28'%3E%3Cg fill='none' stroke-width='4'%3E%3Cpath d='M0 5 Q30 -3 60 5 T120 5' stroke='%23ff3d8b'/%3E%3Cpath d='M0 11 Q30 3 60 11 T120 11' stroke='%23ff7a1a'/%3E%3Cpath d='M0 17 Q30 9 60 17 T120 17' stroke='%23ffc23a'/%3E%3Cpath d='M0 23 Q30 15 60 23 T120 23' stroke='%23b3202a'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Slowly drifting colour swirls behind everything */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 30% at 15% 20%, rgba(255, 61, 139, .38), transparent 70%),
    radial-gradient(30% 35% at 85% 15%, rgba(255, 122, 26, .30), transparent 70%),
    radial-gradient(35% 30% at 75% 75%, rgba(138, 77, 255, .38), transparent 70%),
    radial-gradient(30% 30% at 20% 85%, rgba(25, 194, 176, .25), transparent 70%),
    conic-gradient(from 0deg at 50% 50%, #2a0e3a, #1a0a24, #33103a, #1a0a24, #2a0e3a);
  animation: drift 60s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: rotate(0deg) scale(1);    filter: hue-rotate(0deg); }
  100% { transform: rotate(25deg) scale(1.1); filter: hue-rotate(40deg); }
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: rgba(26, 10, 36, .88);
  backdrop-filter: blur(10px);
}
.site-header::after { content: ""; display: block; height: 6px; background: var(--swirl); background-size: 200% 100%; animation: flow 12s linear infinite; }
@keyframes flow { to { background-position: 200% 0; } }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
/* Name slowly drifts through beach hues: coral, peach, sand, seafoam, lagoon (no full rainbow) */
.brand {
  font-family: var(--display); font-size: 1.4rem; line-height: 1.1; text-decoration: none;
  color: var(--gold);
  background: linear-gradient(90deg, #ff6f61, #ffa07a, #f6d58e, #8fe3c8, #2ec4c4, #8fe3c8, #f6d58e, #ffa07a, #ff6f61);
  background-size: 400% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 0 #4a1230);
  animation: beach 14s ease-in-out infinite alternate;
}
.brand:hover { animation-duration: 4s; }
@keyframes beach { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.nav ul { list-style: none; display: flex; gap: 4px 18px; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a.navlink { font-family: var(--type); color: var(--muted); text-decoration: none; font-size: 1rem; }
.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: var(--ink); text-decoration: underline wavy var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- Type ---------- */
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 400; }
h1 { font-family: var(--display); font-size: clamp(2.3rem, 7vw, 4.4rem); }
h2 { font-family: var(--display); font-size: clamp(1.8rem, 4.6vw, 2.8rem); }
h3 { font-family: var(--type); font-size: 1.3rem; }
p { margin: 0 0 1em; }
.eyebrow { font-family: var(--type); color: var(--gold); letter-spacing: .04em; font-size: 1rem; margin-bottom: .6em; }
.hook { font-family: var(--type); font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.35; }

/* ---------- Hero ---------- */
.hero { overflow: hidden; padding: 56px 0 64px; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .hero-grid { grid-template-columns: 1fr 1.05fr; } }
.hero h1 {
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--orange), 6px 6px 0 var(--magenta), 9px 9px 0 #7a1f3d;
}
.hero .lede { color: var(--muted); max-width: 34ch; font-size: 1.1rem; }
.covers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.covers a { display: block; transition: transform .25s ease; }
.covers a:nth-child(1) { transform: rotate(-3deg); }
.covers a:nth-child(2) { transform: rotate(3deg) translateY(18px); }
.covers a:hover { transform: rotate(0) scale(1.03); }
.cover {
  border-radius: 8px; aspect-ratio: 5 / 8; object-fit: cover; width: 100%;
  box-shadow: 0 0 0 3px rgba(255, 243, 220, .15), 0 18px 50px rgba(255, 61, 139, .35), 0 10px 30px rgba(0, 0, 0, .6);
}

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; }
.btn {
  display: inline-block; font-family: var(--type); font-size: 1rem; text-decoration: none;
  padding: 11px 20px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink);
  background: transparent; cursor: pointer; line-height: 1.2; transition: transform .15s ease;
}
.btn:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn.primary { background: linear-gradient(90deg, var(--orange), var(--magenta)); border-color: transparent; color: #fff; }
.btn.primary:hover { background: linear-gradient(90deg, var(--gold), var(--orange)); color: #1a0a24; }
.book-title { font-family: var(--display); font-size: clamp(2rem, 5.5vw, 3.2rem); text-wrap: balance; }
.next-book { padding: 0 0 64px; }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.red:hover { background: var(--ink); border-color: var(--ink); color: var(--red); }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.band { background: rgba(36, 16, 47, .72); }
.rule { height: 28px; border: 0; margin: 0; background: var(--waves) repeat-x center / 120px 28px; }

.book { display: grid; gap: 32px; align-items: start; }
@media (min-width: 820px) { .book { grid-template-columns: 300px 1fr; gap: 48px; } }
.book .cover { max-width: 300px; margin: 0 auto; }
.book-hook { font-family: var(--type); font-size: 1.35rem; margin-bottom: .8em; }
.maniac .book-hook { color: #ff5a5f; }
.dbtb .book-hook { color: var(--gold); }
.facts { font-family: var(--type); color: var(--muted); font-size: .95rem; margin-bottom: 1.2em; }

.note {
  border-left: 4px solid var(--orange); background: var(--panel);
  padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: .95rem; color: var(--muted); margin: 1.2em 0;
}
.maniac .note { border-left-color: var(--red); }
.note strong { color: var(--ink); font-family: var(--type); font-weight: 400; }

.stories { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: 10px; }
.stories li { background: var(--panel); border-radius: 8px; padding: 10px 14px; font-family: var(--type); border-left: 4px solid; }
.stories li:nth-child(1) { border-color: var(--magenta); }
.stories li:nth-child(2) { border-color: var(--orange); }
.stories li:nth-child(3) { border-color: var(--gold); }
.stories li:nth-child(4) { border-color: #b3202a; }

/* ---------- Cards & forms ---------- */
.card {
  background: var(--panel); border-radius: 16px; padding: 28px;
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg-2), var(--bg-2)), var(--swirl);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.card + .card { margin-top: 24px; }
.signup-slot { border: 2px dashed rgba(255, 194, 58, .5); border-radius: 12px; padding: 20px; text-align: center; color: var(--muted); font-family: var(--type); }

.two-col { display: grid; gap: 32px; }
@media (min-width: 820px) { .two-col { grid-template-columns: 1fr 1fr; } }

.about { display: grid; gap: 40px; align-items: start; }
@media (min-width: 820px) { .about { grid-template-columns: 280px 1fr; } }
.photo-slot {
  aspect-ratio: 4 / 5; border-radius: 16px; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 61, 139, .45), transparent 60%),
              radial-gradient(circle at 75% 80%, rgba(25, 194, 176, .35), transparent 60%), var(--bg-2);
  border: 2px dashed rgba(255, 194, 58, .5);
  font-family: var(--type); color: var(--muted); padding: 16px;
  width: 100%; max-width: 280px;
}
.bio { font-size: 1.12rem; }

/* ---------- Footer ---------- */
.site-footer { padding: 0 0 40px; color: var(--muted); font-size: .92rem; }
.site-footer::before { content: ""; display: block; height: 28px; margin-bottom: 28px; background: var(--waves) repeat-x center / 120px 28px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--gold); color: #1a0a24; padding: 8px 12px; z-index: 20; }

/* ---------- Page transitions (Chrome, Edge, Safari 18.2+; other browsers just load the page) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }   /* menu stays put while the page changes */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

/* Don't Buy This Book! entrances (fx.js picks one per visit and sets data-fx) */
:root[data-fx] .site-header { view-transition-name: none; }

/* Walton and Marian: diagonal shutters, each slat at its own speed */
@property --s0 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s1 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s2 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s3 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s4 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s5 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s6 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s7 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s8 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s9 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s10 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s11 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s12 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s13 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s14 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s15 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s16 { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --s17 { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes s0 { to { --s0: 1; } }
@keyframes s1 { to { --s1: 1; } }
@keyframes s2 { to { --s2: 1; } }
@keyframes s3 { to { --s3: 1; } }
@keyframes s4 { to { --s4: 1; } }
@keyframes s5 { to { --s5: 1; } }
@keyframes s6 { to { --s6: 1; } }
@keyframes s7 { to { --s7: 1; } }
@keyframes s8 { to { --s8: 1; } }
@keyframes s9 { to { --s9: 1; } }
@keyframes s10 { to { --s10: 1; } }
@keyframes s11 { to { --s11: 1; } }
@keyframes s12 { to { --s12: 1; } }
@keyframes s13 { to { --s13: 1; } }
@keyframes s14 { to { --s14: 1; } }
@keyframes s15 { to { --s15: 1; } }
@keyframes s16 { to { --s16: 1; } }
@keyframes s17 { to { --s17: 1; } }
:root[data-fx="shutters"]::view-transition-new(root) {
  -webkit-mask-image:
    linear-gradient(135deg, transparent 0.000%, #000 0.000%, #000 calc(0.000% + 5.706% * var(--s0)), transparent calc(0.000% + 5.706% * var(--s0))),
    linear-gradient(135deg, transparent 5.556%, #000 5.556%, #000 calc(5.556% + 5.706% * var(--s1)), transparent calc(5.556% + 5.706% * var(--s1))),
    linear-gradient(135deg, transparent 11.111%, #000 11.111%, #000 calc(11.111% + 5.706% * var(--s2)), transparent calc(11.111% + 5.706% * var(--s2))),
    linear-gradient(135deg, transparent 16.667%, #000 16.667%, #000 calc(16.667% + 5.706% * var(--s3)), transparent calc(16.667% + 5.706% * var(--s3))),
    linear-gradient(135deg, transparent 22.222%, #000 22.222%, #000 calc(22.222% + 5.706% * var(--s4)), transparent calc(22.222% + 5.706% * var(--s4))),
    linear-gradient(135deg, transparent 27.778%, #000 27.778%, #000 calc(27.778% + 5.706% * var(--s5)), transparent calc(27.778% + 5.706% * var(--s5))),
    linear-gradient(135deg, transparent 33.333%, #000 33.333%, #000 calc(33.333% + 5.706% * var(--s6)), transparent calc(33.333% + 5.706% * var(--s6))),
    linear-gradient(135deg, transparent 38.889%, #000 38.889%, #000 calc(38.889% + 5.706% * var(--s7)), transparent calc(38.889% + 5.706% * var(--s7))),
    linear-gradient(135deg, transparent 44.444%, #000 44.444%, #000 calc(44.444% + 5.706% * var(--s8)), transparent calc(44.444% + 5.706% * var(--s8))),
    linear-gradient(135deg, transparent 50.000%, #000 50.000%, #000 calc(50.000% + 5.706% * var(--s9)), transparent calc(50.000% + 5.706% * var(--s9))),
    linear-gradient(135deg, transparent 55.556%, #000 55.556%, #000 calc(55.556% + 5.706% * var(--s10)), transparent calc(55.556% + 5.706% * var(--s10))),
    linear-gradient(135deg, transparent 61.111%, #000 61.111%, #000 calc(61.111% + 5.706% * var(--s11)), transparent calc(61.111% + 5.706% * var(--s11))),
    linear-gradient(135deg, transparent 66.667%, #000 66.667%, #000 calc(66.667% + 5.706% * var(--s12)), transparent calc(66.667% + 5.706% * var(--s12))),
    linear-gradient(135deg, transparent 72.222%, #000 72.222%, #000 calc(72.222% + 5.706% * var(--s13)), transparent calc(72.222% + 5.706% * var(--s13))),
    linear-gradient(135deg, transparent 77.778%, #000 77.778%, #000 calc(77.778% + 5.706% * var(--s14)), transparent calc(77.778% + 5.706% * var(--s14))),
    linear-gradient(135deg, transparent 83.333%, #000 83.333%, #000 calc(83.333% + 5.706% * var(--s15)), transparent calc(83.333% + 5.706% * var(--s15))),
    linear-gradient(135deg, transparent 88.889%, #000 88.889%, #000 calc(88.889% + 5.706% * var(--s16)), transparent calc(88.889% + 5.706% * var(--s16))),
    linear-gradient(135deg, transparent 94.444%, #000 94.444%, #000 calc(94.444% + 5.706% * var(--s17)), transparent calc(94.444% + 5.706% * var(--s17)));
          mask-image:
    linear-gradient(135deg, transparent 0.000%, #000 0.000%, #000 calc(0.000% + 5.706% * var(--s0)), transparent calc(0.000% + 5.706% * var(--s0))),
    linear-gradient(135deg, transparent 5.556%, #000 5.556%, #000 calc(5.556% + 5.706% * var(--s1)), transparent calc(5.556% + 5.706% * var(--s1))),
    linear-gradient(135deg, transparent 11.111%, #000 11.111%, #000 calc(11.111% + 5.706% * var(--s2)), transparent calc(11.111% + 5.706% * var(--s2))),
    linear-gradient(135deg, transparent 16.667%, #000 16.667%, #000 calc(16.667% + 5.706% * var(--s3)), transparent calc(16.667% + 5.706% * var(--s3))),
    linear-gradient(135deg, transparent 22.222%, #000 22.222%, #000 calc(22.222% + 5.706% * var(--s4)), transparent calc(22.222% + 5.706% * var(--s4))),
    linear-gradient(135deg, transparent 27.778%, #000 27.778%, #000 calc(27.778% + 5.706% * var(--s5)), transparent calc(27.778% + 5.706% * var(--s5))),
    linear-gradient(135deg, transparent 33.333%, #000 33.333%, #000 calc(33.333% + 5.706% * var(--s6)), transparent calc(33.333% + 5.706% * var(--s6))),
    linear-gradient(135deg, transparent 38.889%, #000 38.889%, #000 calc(38.889% + 5.706% * var(--s7)), transparent calc(38.889% + 5.706% * var(--s7))),
    linear-gradient(135deg, transparent 44.444%, #000 44.444%, #000 calc(44.444% + 5.706% * var(--s8)), transparent calc(44.444% + 5.706% * var(--s8))),
    linear-gradient(135deg, transparent 50.000%, #000 50.000%, #000 calc(50.000% + 5.706% * var(--s9)), transparent calc(50.000% + 5.706% * var(--s9))),
    linear-gradient(135deg, transparent 55.556%, #000 55.556%, #000 calc(55.556% + 5.706% * var(--s10)), transparent calc(55.556% + 5.706% * var(--s10))),
    linear-gradient(135deg, transparent 61.111%, #000 61.111%, #000 calc(61.111% + 5.706% * var(--s11)), transparent calc(61.111% + 5.706% * var(--s11))),
    linear-gradient(135deg, transparent 66.667%, #000 66.667%, #000 calc(66.667% + 5.706% * var(--s12)), transparent calc(66.667% + 5.706% * var(--s12))),
    linear-gradient(135deg, transparent 72.222%, #000 72.222%, #000 calc(72.222% + 5.706% * var(--s13)), transparent calc(72.222% + 5.706% * var(--s13))),
    linear-gradient(135deg, transparent 77.778%, #000 77.778%, #000 calc(77.778% + 5.706% * var(--s14)), transparent calc(77.778% + 5.706% * var(--s14))),
    linear-gradient(135deg, transparent 83.333%, #000 83.333%, #000 calc(83.333% + 5.706% * var(--s15)), transparent calc(83.333% + 5.706% * var(--s15))),
    linear-gradient(135deg, transparent 88.889%, #000 88.889%, #000 calc(88.889% + 5.706% * var(--s16)), transparent calc(88.889% + 5.706% * var(--s16))),
    linear-gradient(135deg, transparent 94.444%, #000 94.444%, #000 calc(94.444% + 5.706% * var(--s17)), transparent calc(94.444% + 5.706% * var(--s17)));
  animation: s0 0.55s cubic-bezier(.6,0,.3,1) 0s both, s1 0.95s cubic-bezier(.6,0,.3,1) 0.08s both, s2 0.7s cubic-bezier(.6,0,.3,1) 0.15s both, s3 1.2s cubic-bezier(.6,0,.3,1) 0s both, s4 0.6s cubic-bezier(.6,0,.3,1) 0.2s both, s5 1.05s cubic-bezier(.6,0,.3,1) 0.05s both, s6 0.8s cubic-bezier(.6,0,.3,1) 0.12s both, s7 1.3s cubic-bezier(.6,0,.3,1) 0s both, s8 0.65s cubic-bezier(.6,0,.3,1) 0.18s both, s9 0.9s cubic-bezier(.6,0,.3,1) 0.03s both, s10 1.15s cubic-bezier(.6,0,.3,1) 0.1s both, s11 0.58s cubic-bezier(.6,0,.3,1) 0.22s both, s12 1.0s cubic-bezier(.6,0,.3,1) 0.06s both, s13 0.75s cubic-bezier(.6,0,.3,1) 0.14s both, s14 1.25s cubic-bezier(.6,0,.3,1) 0s both, s15 0.68s cubic-bezier(.6,0,.3,1) 0.09s both, s16 1.1s cubic-bezier(.6,0,.3,1) 0.2s both, s17 0.85s cubic-bezier(.6,0,.3,1) 0.04s both;
}
:root[data-fx="shutters"]::view-transition-old(root) { animation: shutter-dim 1.4s ease both; }
@keyframes shutter-dim { to { filter: brightness(.3) sepia(.7); } }

/* A Pioneer's Learning: blast doors split open from the centre */
:root[data-fx="doors"]::view-transition-old(root),
:root[data-fx="doors"]::view-transition-new(root),
:root[data-fx="fireworks"]::view-transition-old(root),
:root[data-fx="fireworks"]::view-transition-new(root) { animation: none; }
:root[data-fx="doors"]::before, :root[data-fx="doors"]::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: 50.5%; z-index: 1000; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 90px),
    linear-gradient(90deg, #11141c, #2b3141 55%, #3d4559);
  animation: door-left 1.25s cubic-bezier(.75, 0, .2, 1) both;
}
:root[data-fx="doors"]::before { left: 0; border-right: 3px solid #5fe3ff; box-shadow: 0 0 28px 4px rgba(95, 227, 255, .75); }
:root[data-fx="doors"]::after {
  right: 0; transform-origin: right; animation-name: door-right;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 90px),
    linear-gradient(270deg, #11141c, #2b3141 55%, #3d4559);
  border-left: 3px solid #5fe3ff; box-shadow: 0 0 28px 4px rgba(95, 227, 255, .75);
}
@keyframes door-left  { 0%, 28% { transform: translateX(0); } 100% { transform: translateX(-102%); } }
@keyframes door-right { 0%, 28% { transform: translateX(0); } 100% { transform: translateX(102%); } }

/* A Fight for the Gods: page rises out of the dark under fireworks (sparks drawn by fx.js) */
:root[data-fx="fireworks"]::after {
  content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: #0b0410;
  animation: fw-reveal 1.7s ease both;
}
@keyframes fw-reveal { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }

/* A Brief Glimpse into the Mind of a Maniac: psychedelic melt-and-warp */
@keyframes warp-out { to { opacity: 0; filter: blur(16px) hue-rotate(-140deg) saturate(2.6); transform: scale(.88) rotate(-3deg) skewX(4deg); } }
@keyframes warp-in {
  0%   { opacity: 0; filter: blur(14px) hue-rotate(170deg) saturate(3) contrast(1.4); transform: scale(1.14) skewX(-8deg) rotate(2deg); }
  55%  { opacity: 1; filter: blur(3px) hue-rotate(50deg) saturate(1.8); transform: scale(.97) skewX(3deg) rotate(-.5deg); }
  100% { opacity: 1; filter: none; transform: none; }
}
:root.page-maniac::view-transition-old(root) { animation: warp-out .7s ease-in both; }
:root.page-maniac::view-transition-new(root) { animation: warp-in 1.15s cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  :root[data-fx]::before, :root[data-fx]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, .site-header::after, .brand { animation: none; }
  .covers a, .covers a:hover, .btn { transform: none; transition: none; }
}