/* ============================================================
   AI WORLD — THE LIBRARY
   Self-contained styling for the library page.
   Register: deep navy / space, lit by Digi's neon-blue glow.
   Motion is pure CSS and honors prefers-reduced-motion.
   Cover frames are a FIXED 4:3 aspect ratio — any cover image
   dropped into ../assets/ fills the frame without breaking
   the layout (wave-2 cover swaps rely on this).
   ============================================================ */

:root{
  --abyss:#03081a;
  --deep:#061229;
  --navy:#0a1e40;
  --panel:#0b2148;
  --panel-2:#081a38;
  --line:rgba(96,186,255,.30);
  --line-soft:rgba(96,186,255,.16);
  --ice:#e6f4ff;
  --mist:#aac9ea;
  --dim:#7f9dbf;
  --cyan:#3ec6ff;
  --cyan-2:#8fe6ff;
  --cyan-deep:#1b7fd4;
  --glow:0 0 18px rgba(62,198,255,.35), 0 0 52px rgba(62,198,255,.16);
  --glow-strong:0 0 26px rgba(62,198,255,.55), 0 0 78px rgba(62,198,255,.28);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--abyss);
  color:var(--ice);
  font-family:var(--sans);
  font-size:1.06rem;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--cyan-deep);color:#fff}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--cyan-2);outline-offset:3px;border-radius:4px}

/* --- starfield / nebula backdrop (pure CSS gradients) --- */
.sky{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(230,244,255,.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 68% 12%, rgba(230,244,255,.75) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 84% 34%, rgba(143,230,255,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 33% 58%, rgba(230,244,255,.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 52% 78%, rgba(230,244,255,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 91% 66%, rgba(230,244,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 5% 84%, rgba(143,230,255,.7) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 44% 8%, rgba(230,244,255,.8) 50%, transparent 51%),
    radial-gradient(ellipse 90% 55% at 50% -6%, rgba(27,127,212,.34), transparent 62%),
    radial-gradient(ellipse 65% 45% at 88% 108%, rgba(62,198,255,.13), transparent 65%),
    linear-gradient(180deg, #050f28 0%, var(--abyss) 46%, #02050f 100%);
}

.stage{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:40px 26px 70px}

/* --- top bar --- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.backlink{
  font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);text-decoration:none;
}
.backlink:hover{color:var(--cyan-2)}
.wordmark{font-size:.8rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}

/* --- hero --- */
.hero{
  margin-top:34px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:38px;align-items:center;
}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
}
h1{
  font-family:var(--serif);
  font-size:clamp(2.6rem,5.4vw,4rem);
  line-height:1.08;font-weight:700;color:var(--ice);
  text-shadow:0 0 30px rgba(62,198,255,.35);
}
h1 .lit{
  background:linear-gradient(92deg,var(--cyan-2),var(--cyan) 55%,var(--cyan-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{color:var(--mist);font-size:1.14rem;margin-top:18px;max-width:34rem}
.guide{
  display:flex;align-items:flex-start;gap:14px;margin-top:26px;max-width:32rem;
}
.guide img{
  width:64px;height:auto;flex:none;
  filter:drop-shadow(0 0 14px rgba(62,198,255,.55));
  animation:digiFloat 6s ease-in-out infinite;
}
.bubble{
  position:relative;
  background:linear-gradient(165deg, rgba(62,198,255,.14), rgba(11,33,72,.85));
  border:1px solid var(--line);border-radius:14px;
  padding:12px 16px;color:var(--ice);font-size:1rem;line-height:1.5;
}
.bubble:before{
  content:"";position:absolute;left:-7px;top:24px;width:12px;height:12px;
  background:inherit;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.bubble b{color:var(--cyan-2)}

.hero-art{position:relative}
.hero-art .frame{
  position:relative;
  border-radius:20px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--glow), 0 30px 60px rgba(0,0,0,.55);
}
.hero-art .frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.hero-art .frame:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg, transparent 55%, rgba(3,8,26,.38));
}
.hero-art .digi-badge{
  position:absolute;left:-26px;bottom:-24px;width:118px;height:auto;
  filter:drop-shadow(0 0 20px rgba(62,198,255,.65)) drop-shadow(0 14px 22px rgba(0,0,0,.5));
  animation:digiFloat 7s ease-in-out infinite;
}
.hero-art .caption{
  margin-top:34px;font-size:.86rem;color:var(--dim);text-align:right;
}

/* --- sections --- */
section.shelf-block{margin-top:64px}
.sec-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.sec-head h2{
  font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--ice);
  text-shadow:0 0 18px rgba(62,198,255,.3);
}
.sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);min-width:60px}
.sec-sub{color:var(--dim);max-width:44rem;margin-bottom:28px}

/* --- the shelf --- */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.shelf.two{grid-template-columns:repeat(2,1fr);max-width:760px}
.shelf-board{
  height:10px;margin-top:22px;border-radius:5px;
  background:linear-gradient(180deg, rgba(62,198,255,.35), rgba(27,127,212,.12));
  box-shadow:0 14px 24px rgba(0,0,0,.45), 0 0 16px rgba(62,198,255,.14);
}

.card{
  display:block;text-decoration:none;border-radius:18px;
}
.card-in{
  display:block;height:100%;
  padding:16px 16px 20px;border-radius:18px;
  background:linear-gradient(168deg, rgba(62,198,255,.09), rgba(11,33,72,.88) 55%, rgba(4,10,26,.94));
  border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(230,244,255,.12), 0 18px 38px rgba(0,0,0,.5);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover .card-in, .card:focus-visible .card-in{
  transform:translateY(-6px);
  border-color:var(--cyan);
  box-shadow:var(--glow-strong), 0 26px 48px rgba(0,0,0,.6);
}

/* FIXED cover frame: 4:3, always. Swap the image file freely. */
.cover-frame{
  position:relative;
  display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 12px 26px rgba(0,0,0,.5);
  margin-bottom:16px;background:var(--panel-2);
}

/* --- cover titles as REAL TYPE over the art (wave 2) ---
   The generated art is text-free with a calm, dark upper third;
   the title lives here, in HTML, so it stays sharp at any size.
   A plum scrim behind the type guarantees contrast over any art. */
.cover-title{
  position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  padding:13px 14px 34px;text-align:center;
  background:linear-gradient(180deg,
    rgba(18,8,38,.82) 0%, rgba(18,8,38,.62) 52%, rgba(18,8,38,.28) 78%, rgba(18,8,38,0) 100%);
}
.cover-title .ct-name{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:1.3rem;line-height:1.22;letter-spacing:.01em;
  color:#f8edd3;
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.65);
}
.cover-title .ct-name.long{font-size:1.04rem;line-height:1.26}
.cover-title .ct-sub{
  display:block;margin-top:5px;
  font-family:var(--serif);font-style:italic;
  font-size:.85rem;line-height:1.32;color:#f5c869;
  text-shadow:0 1px 8px rgba(0,0,0,.95);
}
.cover-title .ct-author{
  display:block;margin-top:7px;
  font-size:.66rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:#efe0b4;
  text-shadow:0 1px 6px rgba(0,0,0,.95);
}
.cover-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .45s ease, filter .45s ease;
}
.card:hover .cover-frame img, .card:focus-visible .cover-frame img{
  transform:scale(1.045);filter:brightness(1.1) saturate(1.08);
}

.tag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan-2);border:1px solid var(--line);border-radius:999px;
  padding:3px 11px;margin-bottom:11px;background:rgba(62,198,255,.08);
}
.card h3{
  font-family:var(--serif);font-size:1.32rem;line-height:1.28;color:var(--ice);margin-bottom:8px;
}
.card .byline{font-size:.84rem;color:var(--dim);margin-bottom:8px;letter-spacing:.04em}
.card .hook{color:var(--mist);font-size:.98rem;line-height:1.55}
.card .read{
  display:inline-block;margin-top:14px;
  font-weight:800;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--cyan-2);border-bottom:1px solid rgba(143,230,255,.45);padding-bottom:2px;
}
.card:hover .read, .card:focus-visible .read{color:#fff}

/* --- closing band --- */
.closing{
  margin-top:76px;text-align:center;
  padding:44px 28px 48px;border-radius:22px;
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(62,198,255,.16), transparent 65%),
    linear-gradient(170deg, rgba(11,33,72,.9), rgba(4,10,26,.96));
  border:1px solid var(--line);
  box-shadow:var(--glow);
}
.closing img{
  width:84px;height:auto;margin:0 auto 10px;
  filter:drop-shadow(0 0 16px rgba(62,198,255,.6));
  animation:digiFloat 6.5s ease-in-out infinite;
}
.closing h2{
  font-family:var(--serif);font-size:clamp(1.8rem,3.6vw,2.5rem);color:var(--ice);
  text-shadow:0 0 20px rgba(62,198,255,.3);margin-bottom:12px;
}
.closing p{color:var(--mist);max-width:36rem;margin:0 auto}
.btn{
  display:inline-block;margin-top:24px;
  font-weight:800;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;
  color:#03263f;text-decoration:none;
  background:linear-gradient(92deg,var(--cyan-2),var(--cyan));
  border-radius:999px;padding:14px 30px;
  box-shadow:0 0 22px rgba(62,198,255,.45), 0 12px 26px rgba(0,0,0,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--glow-strong), 0 16px 30px rgba(0,0,0,.45)}

.foot{
  margin-top:46px;text-align:center;color:var(--dim);font-size:.86rem;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
}
.foot a{color:var(--mist);font-weight:700;text-decoration:none}
.foot a:hover{color:var(--cyan-2)}

/* --- motion --- */
@keyframes digiFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* Scroll-reveal, pure CSS where supported; content is fully
   visible by default everywhere else. */
@supports (animation-timeline: view()){
  .reveal{
    animation:rise .8s ease both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
  @keyframes rise{
    from{opacity:0;transform:translateY(26px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation:none !important;
    transition:none !important;
  }
  .card:hover .card-in{transform:none}
  .card:hover .cover-frame img{transform:none}
}

/* --- small screens --- */
@media (max-width:980px){
  .shelf{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;gap:30px}
  .hero-art{max-width:560px}
  .hero-art .caption{text-align:left}
}
@media (max-width:620px){
  .stage{padding:30px 18px 54px}
  .shelf,.shelf.two{grid-template-columns:1fr}
  .hero-art .digi-badge{width:88px;left:-8px;bottom:-18px}
  .guide img{width:52px}
  body{font-size:1.02rem}
}