/* Fan deck of 3D books ("More books I've written"). Card positions come from fan-deck.js as CSS variables;
   the calc() fallbacks below lay out the same fan when JavaScript is unavailable. */
.fan-deck-section{--fd-yellow:#ffd000;position:relative;overflow:hidden;isolation:isolate;padding:clamp(76px,7.5vw,116px) 0 clamp(56px,6vw,92px);background:linear-gradient(180deg,#051340 0%,#061852 55%,#07236f 100%);color:#fff}
.fd-glow{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 46% 42% at 50% 62%,rgba(28,92,255,.55) 0,rgba(28,92,255,0) 70%),radial-gradient(ellipse 30% 22% at 50% 76%,rgba(255,208,0,.13) 0,rgba(255,208,0,0) 70%)}
.fd-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask:radial-gradient(ellipse 62% 70% at 50% 58%,#000 0,transparent 78%);mask:radial-gradient(ellipse 62% 70% at 50% 58%,#000 0,transparent 78%)}
.fd-inner{position:relative}

.fd-head{text-align:center;max-width:900px;margin:0 auto}
.fd-head .eyebrow{justify-content:center;margin-bottom:20px;letter-spacing:.24em}
.fd-head h2{font-size:clamp(50px,6.6vw,100px);font-weight:800;line-height:.9;letter-spacing:-.005em;color:#fff}
.fd-head h2 em{color:var(--fd-yellow)}
.fd-head h2 .fd-line{display:block}
.fd-head p{margin:22px auto 0;max-width:520px;font-size:clamp(16px,1.35vw,19px);color:#b9c6ec}

/* Deck geometry. --bw drives everything: book width, thickness, and the stage height. */
.fd-deck{--bw:clamp(128px,17vw,232px);--bh:calc(var(--bw) * 1.5);--bt:calc(var(--bw) * .1);--sp:calc(var(--bw) * .8);--arc:calc(var(--bw) * .045);margin-top:clamp(20px,3vw,40px)}
.fd-cards{position:relative;list-style:none;margin:0;padding:0;height:calc(var(--bh) + var(--bw) * .82);transform:translateY(calc((var(--fd-p,.5) - .5) * -36px))}
.fd-card{position:absolute;left:50%;top:54%;width:var(--bw);height:var(--bh);margin:calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2);
 transform:translate(var(--tx,calc(var(--c) * var(--sp))),var(--ty,calc(var(--c2) * var(--arc)))) rotate(var(--r,calc(var(--c) * 9deg))) scale(var(--s,calc(1 - var(--ac) * .055)));
 transition:transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms);will-change:transform}
.fd-deck.is-bouncy .fd-card{transition-timing-function:cubic-bezier(.34,1.4,.64,1)}
.fd-link{position:absolute;inset:0;display:block;perspective:1400px;border-radius:6px;outline:none;-webkit-user-drag:none}
.fd-link:focus-visible{outline:none}
.fd-link:focus-visible .fd-front{box-shadow:0 0 0 3px var(--fd-yellow),0 30px 60px rgba(0,5,30,.55)}

/* The book object */
.fd-book{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,calc(var(--c) * -12deg)));transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.fd-card.is-active .fd-book{transition-duration:.45s}
.fd-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden}
.fd-front{transform:translateZ(calc(var(--bt) / 2));border-radius:2px 6px 6px 2px;background:var(--spine-bg);box-shadow:0 18px 34px rgba(0,6,34,.45);transition:box-shadow .5s ease}
.fd-front img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Hinge crease and a soft edge light, like a printed hardcover. */
.fd-front:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) 2.6%,rgba(255,255,255,.22) 3.6%,rgba(255,255,255,0) 7%,rgba(255,255,255,0) 94%,rgba(255,255,255,.12) 100%)}
/* Dim layer for books that are not in focus. */
.fd-front:before{content:'';position:absolute;inset:0;z-index:1;background:#020a2c;opacity:0;transition:opacity .5s ease;pointer-events:none}
.fd-glare{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.38) 0,rgba(255,255,255,0) 46%);mix-blend-mode:soft-light;transition:opacity .4s ease}
.fd-back{transform:rotateY(180deg) translateZ(calc(var(--bt) / 2));background:var(--spine-bg);border-radius:6px 2px 2px 6px}
.fd-spine{position:absolute;top:0;left:calc(var(--bt) / -2);width:var(--bt);height:100%;transform:rotateY(-90deg);background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.12) 45%,rgba(0,0,0,.18)),var(--spine-bg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10% 0 6%;overflow:hidden}
.fd-spine span{writing-mode:vertical-rl;font:800 calc(var(--bt) * .52)/1 var(--display);letter-spacing:.04em;color:var(--spine-ink);white-space:nowrap}
.fd-spine i{width:44%;aspect-ratio:1;border-radius:2px;background:var(--spine-accent)}
.fd-pages{position:absolute;top:1.2%;right:calc((var(--bt) - 4px) / -2);width:calc(var(--bt) - 4px);height:97.6%;transform:rotateY(90deg);background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 30%),repeating-linear-gradient(90deg,#f6f2e4 0 1px,#d7d2c1 1px 2px)}
.fd-top{position:absolute;left:1%;top:calc((var(--bt) - 4px) / -2);width:97%;height:calc(var(--bt) - 4px);transform:rotateX(90deg);background:repeating-linear-gradient(0deg,#f6f2e4 0 1px,#d7d2c1 1px 2px)}

.fd-shadow{position:absolute;left:6%;right:6%;bottom:-9%;height:12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,4,24,.7) 0,rgba(0,4,24,0) 70%);filter:blur(6px);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease}

.fd-badge{position:absolute;left:50%;top:calc(var(--bw) * -.16);transform:translate(-50%,6px) scale(.9);padding:6px 11px 5px;border-radius:999px;background:var(--fd-yellow);color:#061852;font:800 clamp(10px,.9vw,12px)/1 var(--body);letter-spacing:.16em;white-space:nowrap;opacity:0;box-shadow:0 8px 20px rgba(255,208,0,.28);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}

/* States */
.fd-deck.has-focus .fd-card:not(.is-active) .fd-front:before{opacity:.34}
.fd-card.is-active .fd-front{box-shadow:0 38px 70px rgba(0,4,28,.62),0 0 0 1px rgba(255,255,255,.06)}
.fd-card.is-active .fd-glare{opacity:1}
.fd-card.is-active .fd-shadow{transform:translateY(calc(var(--bw) * .2)) scale(1.18);opacity:.55}
.fd-card.is-home.is-active .fd-badge{opacity:1;transform:translate(-50%,0) scale(1)}

/* Caption for the book in focus */
.fd-caption{margin:clamp(6px,1.4vw,18px) auto 0;min-height:64px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;transition:opacity .28s ease,transform .28s ease}
.fd-caption strong{font:700 clamp(22px,2.3vw,32px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.fd-caption span{font-size:clamp(14px,1.2vw,16px);color:#aebbe4}
.fd-caption.is-swapping{opacity:0;transform:translateY(6px)}

@media(max-width:780px){
 .fd-deck{--bw:clamp(112px,31vw,176px);--sp:calc(var(--bw) * .56)}
 .fd-cards{height:calc(var(--bh) + var(--bw) * .8)}

}
@media(max-width:420px){
 .fd-deck{--bw:clamp(104px,33vw,140px)}
 .fd-head p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
 .fd-card,.fd-book,.fd-shadow,.fd-caption{transition-duration:.01ms!important}
 .fd-cards{transform:none}
}