/* Maelana Nightingale · enchantment layer (see enchant.js). Additive: the site works the same without it. */

/* the night sky lives behind everything; the sparkle layer floats above, never catching clicks */
.mn-sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
.mn-sparkle{position:fixed;inset:0;width:100vw;height:100vh;z-index:2147482000;pointer-events:none;display:block}
:root{color-scheme:dark}
html.mn-fx{background:var(--ink)}
html.mn-fx body{background:transparent}
/* let the sky show through the big quiet areas; panels and cards stay solid */
.mn-fx .shopband{background:linear-gradient(180deg,rgba(16,13,17,.82),rgba(9,8,10,.6))}
.mn-fx .foot{background:linear-gradient(180deg,rgba(16,13,17,.92),rgba(12,10,13,.97));position:relative;overflow:hidden}
.mn-fx .foot>.wrap{position:relative;z-index:1}

/* header turns to deeper glass with a gold hairline glow once you scroll */
.mn-fx .site-head{transition:background .4s,box-shadow .4s}
.mn-fx .site-head.mn-scrolled{background:rgba(9,8,10,.78);box-shadow:0 1px 0 rgba(201,164,92,.22),0 10px 30px -18px rgba(201,164,92,.25)}

/* ---------- books that feel like books ---------- */
.mn-fx .cover-link>.cover:not(.fog):not(.type),.mn-fx .bitem .cover:not(.fog),.mn-fx [data-tilt] .cover:not(.fog){
  box-shadow:1px 0 0 #d9caa6,2px 1px 0 #a8946b,3px 1px 0 #cfbf98,0 24px 42px -18px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05)}
.mn-glare{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .35s;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,240,210,.38),rgba(255,240,210,.08) 28%,transparent 55%)}
.mn-tilt>.mn-glare,.mn-glare.on{opacity:1}
[data-tilt] .mn-glare.on{opacity:.0}
[data-tilt]:hover .mn-glare.on{opacity:1}
.mn-fx .cover.mn-tilt{transform:perspective(720px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px) scale(1.03);transition:transform .12s linear,box-shadow .3s;
  box-shadow:0 26px 44px -16px rgba(0,0,0,.95),0 0 28px -6px color-mix(in srgb,var(--world,#c9a45c) 55%,transparent),1px 0 0 #d9caa6,2px 1px 0 #a8946b,3px 1px 0 #cfbf98}
.mn-fx .world,.mn-fx .path,.mn-fx .svc,.mn-fx .fsvc,.mn-fx .ev{position:relative}
.mn-fx .world.mn-tilt{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);transition:transform .15s linear,border-color .4s;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--world,#c9a45c) 60%,transparent)}
.mn-fx .path.mn-tilt,.mn-fx .svc.mn-tilt,.mn-fx .fsvc.mn-tilt,.mn-fx .ev.mn-tilt{transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .15s linear}
.mn-fx .world>.mn-glare,.mn-fx .path>.mn-glare,.mn-fx .svc>.mn-glare,.mn-fx .fsvc>.mn-glare,.mn-fx .ev>.mn-glare{mix-blend-mode:soft-light;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,236,190,.22),transparent 50%)}
/* series cards: a tiny starfield in the world's colour wakes up on hover */
.mn-fx .world::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8e0 50%,transparent 51%),radial-gradient(1px 1px at 38% 8%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 64% 22%,#ffe9b8 50%,transparent 51%),radial-gradient(1px 1px at 86% 12%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 40%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 78% 38%,#fff2cc 50%,transparent 51%),radial-gradient(1px 1px at 52% 46%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 92% 52%,#fff 50%,transparent 51%);
  animation:mnTw 3.2s ease-in-out infinite alternate}
.mn-fx .world::after{animation-play-state:paused}
.mn-fx .world:hover::after{opacity:.75;animation-play-state:running}
@keyframes mnTw{from{filter:brightness(.6)}to{filter:brightness(1.4)}}

/* ---------- hero: light turning slowly behind the covers ---------- */
.mn-rays{position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;translate:-50% -50%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(241,217,156,.075) 0deg 3deg,transparent 3deg 11deg,rgba(241,217,156,.04) 11deg 13deg,transparent 13deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 35%,transparent 72%);mask:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.5) 35%,transparent 72%);
  animation:mnSpin 120s linear infinite;transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.mn-rays::after{content:"";position:absolute;inset:28%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--world,#c9a45c) 40%,transparent),transparent);filter:blur(10px);animation:mnBreath 6s ease-in-out infinite}
@keyframes mnSpin{to{rotate:360deg}}
@keyframes mnBreath{0%,100%{opacity:.55}50%{opacity:1}}
.hero .stage>*:not(.mn-rays){position:relative;z-index:1;transition:translate .7s cubic-bezier(.2,.7,.2,1)}
.hero .stage>.main,.hero .stage>.lead.r{z-index:2}

/* ---------- foil headings ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mn-fx .mn-foil{background:linear-gradient(100deg,#e2c07a 0%,#f1d99c 30%,#fff6dc 42%,#f1d99c 54%,#e2c07a 75%,#f1d99c 100%);background-size:300% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;color:#f1d99c;-webkit-text-fill-color:transparent;animation:mnFoil 9s ease-in-out infinite}
}
/* phones and tablets: solid gold, no gradient tricks (some phone "dark mode" features darken the gradient) */
@media (hover:none),(pointer:coarse){
  .mn-fx .mn-foil{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--gold-hi)!important;animation:none!important}
}
@keyframes mnFoil{0%,15%{background-position:100% 0}55%,100%{background-position:0% 0}}

/* ---------- reveals ---------- */
.mn-ink{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mn-ink.mn-in{opacity:1;transform:none}
.mn-stagger>.mn-rise{opacity:0;transform:translateY(28px) scale(.97);transition:opacity .8s ease calc(var(--i,0) * 70ms),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 70ms)}
.mn-stagger.mn-in>.mn-rise{opacity:1;transform:none}
.mn-stagger.mn-in>.mn-rise:hover{transition-delay:0s}

/* ornaments between sections draw themselves */
.mn-fx main>section{position:relative}
.mn-orn{position:absolute;left:50%;top:0;translate:-50% -50%;width:min(260px,60vw);color:var(--gold);opacity:.75;pointer-events:none;z-index:2}
.mn-orn svg{display:block;width:100%;height:auto;overflow:visible}
.mn-orn path[pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1)}
.mn-orn .o-star{transform-origin:120px 12px;transition:transform 1s cubic-bezier(.3,1.6,.5,1) .9s,opacity .6s .9s;filter:drop-shadow(0 0 4px rgba(241,217,156,.8))}
.mn-orn.pre path[pathLength]{stroke-dashoffset:1}
.mn-orn.pre .o-star{transform:scale(0) rotate(-90deg);opacity:0}
.mn-orn:not(.pre) .o-star{animation:mnStar 4s ease-in-out 2s infinite}
@keyframes mnStar{0%,100%{filter:drop-shadow(0 0 3px rgba(241,217,156,.6))}50%{filter:drop-shadow(0 0 9px rgba(255,240,200,1))}}

/* footer constellation */
.mn-constellation{display:block;margin:34px auto 0;width:min(240px,60vw);aspect-ratio:316/238;opacity:.85;pointer-events:none}
.mn-calm-row{text-align:center;margin:8px 0 0;font-size:13px;opacity:.8}
.mn-calm{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mn-calm:hover{color:var(--gold-hi)}

/* ---------- page turns (cross-page view transitions where the browser supports them) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mnPgOut .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:mnPgIn .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes mnPgOut{to{opacity:0;filter:blur(6px);transform:scale(.985)}}
@keyframes mnPgIn{from{opacity:0;filter:blur(6px);transform:scale(1.012)}}
::view-transition-group(mn-book){animation-duration:.7s;animation-timing-function:cubic-bezier(.5,0,.2,1)}
[data-tilt] .cover{view-transition-name:mn-book}


/* ---------- calm / reduced motion ---------- */
html.mn-still .mn-rays,html.mn-still .mn-rays::after,html.mn-still .mn-foil,html.mn-still .world::after,html.mn-still .mn-orn .o-star{animation:none}
html.mn-still .mn-sparkle{display:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .mn-rays,.mn-rays::after,.mn-foil,.world::after{animation:none!important}
}
html.mn-still ::view-transition-group(*),html.mn-still ::view-transition-old(*),html.mn-still ::view-transition-new(*){animation:none!important}

/* ---------- 3D book on each book's page ---------- */
.mn-b3d-host{perspective:1500px;perspective-origin:50% 40%;width:100%}
.mn-b3d{width:100%}
.mn-b3d{--T:clamp(20px,9cqw,34px);--sp:color-mix(in srgb,var(--world,#6e1f33) 55%,#0a0709);position:relative;container-type:inline-size;transform-style:preserve-3d;
  transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,28deg));transition:transform 1s cubic-bezier(.2,.7,.2,1);animation:mnSway 10s ease-in-out infinite}
.mn-b3d.live{transition:transform .25s ease-out;animation-play-state:paused}
@keyframes mnSway{0%,100%{rotate:y -3deg}50%{rotate:y 4deg}}
.mn-b3d>.cover{transform:translateZ(calc(var(--T) / 2))!important;transition:none!important;backface-visibility:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.05)!important}
.mn-b3d>i{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.b3-spine{top:0;bottom:0;left:calc(var(--T) * -1);width:var(--T);transform-origin:100% 50%;transform:translateZ(calc(var(--T) / 2)) rotateY(-90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.07) 45%,rgba(0,0,0,.5)),var(--sp);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18% 0 10%;writing-mode:vertical-rl;overflow:hidden;
  box-shadow:inset 0 14px 0 -12px var(--gold),inset 0 -14px 0 -12px var(--gold)}
.b3-spine b{font-family:var(--display);font-weight:600;color:var(--gold-hi);font-size:calc(var(--T) * .42);letter-spacing:.12em;white-space:nowrap;text-shadow:0 1px 0 #000}
.b3-spine small{font-family:var(--display);color:var(--gold);font-size:calc(var(--T) * .3);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.b3-pages{top:1.2%;bottom:1.2%;left:calc(100% - 2px);width:calc(var(--T) - 2px);transform-origin:0 50%;transform:translateZ(calc(var(--T) / 2)) rotateY(90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.3)),repeating-linear-gradient(90deg,#efe3c8 0 1px,#cdb990 1px 2px,#f4ead2 2px 3px)}
.b3-top{left:0;right:2px;top:calc(var(--T) * -1);height:var(--T);transform-origin:50% 100%;transform:translateZ(calc(var(--T) / 2)) rotateX(90deg);
  background:repeating-linear-gradient(180deg,#efe3c8 0 1px,#cdb990 1px 2px,#f4ead2 2px 3px)}
.b3-back{inset:0;transform:translateZ(calc(var(--T) / -2)) rotateY(180deg);background:var(--sp);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.mn-b3d-host::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:36px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);z-index:-1;filter:blur(4px)}
html.mn-still .mn-b3d{animation:none}
@media (prefers-reduced-motion:reduce){.mn-b3d{animation:none}}