/* Site overrides — must load after organic.css. Swaps the accent ramp to blue. */
:root{--color-accent:#2f52c8;--color-accent-100:#eef1ff;--color-accent-200:#dde4fb;--color-accent-300:#bccaf5;--color-accent-400:#8aa2ea;--color-accent-500:#4a6ad4;--color-accent-600:#2f4fbf;--color-accent-700:#233c99;--color-accent-800:#1a2c70;--color-accent-900:#111d4a}
html,body{margin:0;background:#233c99}
a{color:#bccaf5}a:hover{color:#f5ead8}
button{cursor:pointer}
[hidden]{display:none !important}
.behind-gate{opacity:0 !important}
/* While a book is off the shelf the page behind fades out (book-fade stays on after the first book, for the transition) */
html.book-fade #lilies,html.book-fade #gate~:not(#pill){transition:opacity .6s}
html.book-out #lilies,html.book-out #gate~:not(#pill){opacity:.12}
/* During the unlock intro the whole page is plain white, so nothing blue peeks out behind the phone's bars */
html.intro-white,html.intro-white body,html.intro-white body>div:first-child{background:var(--color-bg) !important}
html.intro-white,html.intro-white body{transition:background-color .8s ease}
html.intro-white body>div:first-child>div>:not(#gate){opacity:0}
/* As the curtains part, the status bar (one flat colour) fades to blue, while behind the bottom toolbar,
   which shows the page itself, the page parts with the curtains: white either side, the site showing
   through a gap that widens on the same timing as slideL/slideR */
html.intro-doors,html.intro-doors body{transition:background-color 1s cubic-bezier(.7,0,.25,1)}
@keyframes doorsBg{from{background-size:50.5% 100%,50.5% 100%}to{background-size:0 100%,0 100%}}
@keyframes doorsMask{from{-webkit-mask-size:0 100%;mask-size:0 100%}to{-webkit-mask-size:100% 100%;mask-size:100% 100%}}
html.intro-doors body>div:first-child{background-image:linear-gradient(var(--color-bg),var(--color-bg)),linear-gradient(var(--color-bg),var(--color-bg)) !important;background-position:left top,right top !important;background-repeat:no-repeat !important;animation:doorsBg 1s cubic-bezier(.7,0,.25,1) both}
@media (max-width:440px){html.intro-doors body>div:first-child>div{-webkit-mask:linear-gradient(#000,#000) center/0 100% no-repeat;mask:linear-gradient(#000,#000) center/0 100% no-repeat;animation:doorsMask 1s cubic-bezier(.7,0,.25,1) both}}

@keyframes lilyDash{from{opacity:0;stroke-width:0}to{opacity:1}}
@keyframes lilyPop{from{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes lilyOpen{from{opacity:0;transform:rotate(calc(var(--a) * 0.1)) scale(0.25,0.4)}25%{opacity:1}to{opacity:1;transform:rotate(var(--a)) scale(1)}}

/* Unlock intro: balloon puffs up and pops into confetti, letters drop in, curtains part */
@keyframes popOut{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(0)}}
@keyframes puff{0%{transform:scale(0)}22%{transform:scale(.5,.46)}32%{transform:scale(.44,.5)}58%{transform:scale(.84,.78)}68%{transform:scale(.76,.82)}100%{transform:scale(1)}}
@keyframes burst{from{transform:translate(0,0) scale(0) rotate(0deg)}to{transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r))}}
@keyframes fall{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(var(--f)) rotate(var(--sp))}}
@keyframes drop{0%{transform:translateY(-600px);animation-timing-function:cubic-bezier(.55,0,1,.45)}50%{transform:translateY(0) scale(1.18,.78);animation-timing-function:ease-out}63%{transform:translateY(-44px) scale(.94,1.08);animation-timing-function:ease-in}76%{transform:translateY(0) scale(1.07,.92);animation-timing-function:ease-out}88%{transform:translateY(-10px) scale(1);animation-timing-function:ease-in}100%{transform:translateY(0)}}
@keyframes slideL{20%{border-radius:0 90px 90px 0}to{transform:translateX(-102%);border-radius:0 90px 90px 0}}
@keyframes slideR{20%{border-radius:90px 0 0 90px}to{transform:translateX(102%);border-radius:90px 0 0 90px}}
@keyframes introIn{from{opacity:0}to{opacity:1}}
@keyframes gone{to{opacity:0}}
@keyframes stageIn{from{background-color:transparent}to{background-color:var(--color-bg)}}
@keyframes stageClear{to{background-color:transparent}}

/* Hover / active states */
.btn-open:hover{background:var(--color-accent-100) !important}
.btn-open:active{background:var(--color-accent-200) !important}
.year-tab{transition:transform .15s}
.year-tab:hover{transform:translateY(-3px)}
.year-tab:active{transform:translateY(0);filter:brightness(0.95)}
.btn-story:hover{background:var(--color-accent-100) !important}
.btn-story:active{background:var(--color-accent-200) !important}
.btn-surprise:active{transform:scale(0.98)}

/* ?noturn test switch: pages shown flat, no 3D */
html.noturn .book{perspective:none !important}
html.noturn [data-leaf]{transform:none !important;transform-style:flat !important;will-change:auto !important}
html.noturn [data-leaf]>*{-webkit-backface-visibility:visible !important;backface-visibility:visible !important}
html.noturn [data-leaf]>:last-child{display:none}

/* Photos: fill their frame; show a soft placeholder tile if the file is missing */
.photo{position:relative;width:100%;height:100%;background:var(--color-neutral-200)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:12px;font-size:13px;font-weight:600;color:var(--color-neutral-600);background:repeating-linear-gradient(45deg, var(--color-neutral-200) 0 10px, var(--color-neutral-100) 10px 20px)}
.photo.missing img{display:none}
.photo.missing .ph{display:flex}

/* Year tabs on the 2024–2026 book */
.year-tab{position:absolute;top:-34px;width:64px;height:46px;padding:6px 0 0;box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start;border:0;border-radius:14px 14px 0 0;color:var(--color-accent-2-900);font-family:var(--font-heading);font-size:15px;box-shadow:var(--shadow-sm)}

/* Bookshelf: books lift a little under the mouse (not on touch, where hover sticks after a tap) */
.shelf-book{cursor:pointer;transition:transform .2s;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.shelf-book:hover{transform:translateY(-4px)}.shelf-book.big:hover{transform:translateY(-6px)}}
.btn-close:hover{background:var(--color-accent-2-600) !important}
.reader{-webkit-user-select:none;user-select:none}