/* Full-screen moving opening and one icon style for every card. Added November 9, 2026 at Yang's request;
   library-home.js adds the "Browse library" button, the stars and the icons. The Bunnynook skin keeps its own opening. */

/* The opening image fills the whole first screen under the top bar, on desktop and phone. */
main:not(.bunnynookLibrary) .hero{min-height:calc(100svh - 76px)}
main:not(.bunnynookLibrary) .heroArt{inset:0}
main:not(.bunnynookLibrary) .heroArt img{object-fit:cover;object-position:right center}
@media (max-width:690px){
  main:not(.bunnynookLibrary) .hero{min-height:calc(100svh - 66px);padding-bottom:max(24px,env(safe-area-inset-bottom))}
  main:not(.bunnynookLibrary) .heroArt{position:absolute;inset:0;margin:0;width:auto;height:auto;aspect-ratio:auto}
  main:not(.bunnynookLibrary) .heroArt img{object-position:52% 46%}
  main:not(.bunnynookLibrary) .heroArt:after{background:linear-gradient(180deg,#07111f 0,rgba(7,17,31,.84) 28%,rgba(7,17,31,.25) 44%,transparent 50% 58%,rgba(7,17,31,.86) 74%,#07111f 100%)}
  main:not(.bunnynookLibrary) .heroCopy{position:relative;z-index:2}
  main:not(.bunnynookLibrary) .heroStats{margin-top:auto;position:relative;z-index:2}
}

/* Motion: the image pushes in and drifts (one way in 14 s, then back), stars twinkle and a shooting star crosses now and
   then (canvas from library-home.js). Paused while the opening is off screen. It plays even when the system asks for
   reduced motion: Yang's PCs have Windows animation effects off and Yang wants the opening to move. */
@keyframes heroDrift{
  0%{transform:scale(1) translate3d(0,0,0)}
  100%{transform:scale(1.16) translate3d(-3%,-1.6%,0)}
}
main:not(.bunnynookLibrary) .heroArt{overflow:hidden}
/* A random opening image is chosen on every visit (library-home.js): the image stays hidden until the chosen one has
   loaded, then fades in; if the script never runs it shows after 2.5 s anyway. */
@keyframes heroShow{to{opacity:1}}
main:not(.bunnynookLibrary) .heroArt img{opacity:0;transition:opacity .9s ease;animation:heroDrift 14s ease-in-out infinite alternate,heroShow .01s 2.5s forwards;transform-origin:62% 48%;will-change:transform}
main:not(.bunnynookLibrary) .heroArt.heroReady img{opacity:1}
/* The page's own stylesheet stops every animation and transition under reduced motion (!important on *); these more
   specific !important rules keep the opening moving. */
@media (prefers-reduced-motion:reduce){
  main:not(.bunnynookLibrary) .heroArt img{animation:heroDrift 14s ease-in-out infinite alternate,heroShow .01s 2.5s forwards!important;transition:opacity .9s ease!important}
  main:not(.bunnynookLibrary) .hero.heroPaused .heroArt img{animation-play-state:paused!important}
}
main:not(.bunnynookLibrary) .hero.heroPaused .heroArt img{animation-play-state:paused}
.heroStars{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

/* Preview switcher, only with ?hero=<letter> in the address: shows one opening image and buttons for all of them. */
.heroPick{position:fixed;flex-wrap:wrap;max-width:calc(100vw - 24px);justify-content:flex-end;top:calc(88px + env(safe-area-inset-top,0px));right:12px;z-index:60;display:flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(2,7,18,.86);border:1px solid rgba(121,233,255,.4);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.heroPick button{min-width:36px;min-height:44px;border:0;border-radius:999px;background:transparent;color:#cfe9f7;cursor:pointer;
  font:800 16px/1 "Segoe UI",-apple-system,"Microsoft YaHei UI","PingFang SC",sans-serif}
.heroPick button[aria-pressed="true"]{background:#79e9ff;color:#06202a}
.heroPick button:focus-visible{outline:2px solid #f0b765;outline-offset:2px}
.heroPick small{align-self:center;padding:0 8px 0 10px;color:#93a6be;font:600 12px/1.2 "Segoe UI","Microsoft YaHei UI",sans-serif;white-space:nowrap}
@media (max-width:690px){.heroPick{top:calc(76px + env(safe-area-inset-top,0px))}.heroPick small{display:none}}

/* "Browse library" sits at the bottom of the opening and scrolls to search. */
.heroBrowse{position:absolute;right:clamp(22px,7vw,112px);bottom:clamp(28px,5vh,56px);z-index:3;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 22px;border:1px solid rgba(121,233,255,.45);border-radius:999px;background:rgba(7,17,31,.55);color:#eaf8ff;
  font:700 15px/1 "Segoe UI",-apple-system,"Microsoft YaHei UI","PingFang SC",sans-serif;letter-spacing:.02em;text-decoration:none;cursor:pointer}
.heroBrowse:hover,.heroBrowse:focus-visible{background:rgba(18,48,82,.85);border-color:#79e9ff}
.heroBrowse svg{width:16px;height:16px}
@media (max-width:690px){
  .heroBrowse{position:relative;right:auto;bottom:auto;align-self:center;margin-top:16px;order:3}
}

/* Card icons: one set in one style (site-icons-v2/), drawn over the old icon or letter mark. */
.siteMark.libIcon{background-color:#0b1730;background-position:center;background-repeat:no-repeat;background-size:cover;border:0;
  border-radius:10px;box-shadow:0 1px 2px rgba(11,23,48,.18);height:44px;width:44px;color:transparent;font-size:0}

/* "Next opening image" button, left of the trash icon in the top bar. */
.heroNext{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;margin-left:14px;padding:0 12px;
  border-radius:999px;border:1px solid rgba(121,233,255,.28);background:transparent;color:rgb(213,229,245);cursor:pointer;flex-shrink:0;
  font:700 12px/1 "Segoe UI",-apple-system,"Microsoft YaHei UI","PingFang SC",sans-serif;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.heroNext:hover,.heroNext:focus-visible{border-color:rgba(121,233,255,.7);color:#fff}
.heroNext:active{transform:scale(.96)}
@media (max-width:690px){.heroNext{padding:0;width:44px}.heroNext span{display:none}}

/* WebGL opening (library-sky.js): the canvas draws the picture with depth parallax; the <img> stays as its source and fallback. */
.heroArt canvas.heroGL{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease}
.heroArt.heroReady canvas.heroGL{opacity:1}
main:not(.bunnynookLibrary) .hero.heroGLOn .heroArt img{visibility:hidden;animation:none!important}
@media (prefers-reduced-motion:reduce){.heroArt canvas.heroGL{transition:opacity .9s ease!important}}