:root {
  --cyber-bg: #0a0a14;
  --cyber-cyan: #00f0ff;
  --cyber-cyan-dark: #00aabb;
  --cyber-glow: rgba(0, 240, 255, 0.55);
  --text-light: #e0e6f1;
  --text-muted: #7f8ea1;
  --accent-color: #ff66cc;
}

/* =========================
 GLOBAL RESET
========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Share Tech Mono', monospace;
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
}

/* =========================
 BACKGROUND FIELD LAYER
========================= */

body {
  background-color: var(--cyber-bg);
  min-height: 100vh;
  padding: 2rem 1rem;
  text-align: center;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;

  background:
    radial-gradient(circle at 30% 20%, rgba(0,240,255,0.08), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(255,102,204,0.05), transparent 65%);

  pointer-events: none;
  animation: background-breath 28s ease-in-out infinite;
}

@keyframes background-breath {
  0%,100% { opacity:0.7; transform:scale(1); }
  50% { opacity:1; transform:scale(1.03); }
}

/* =========================
 TYPOGRAPHY
========================= */

h1 {
  font-family: 'UnifrakturCook', cursive;
  font-size: 3.5rem;
  color: var(--cyber-cyan);

  text-shadow:
    0 0 6px rgba(0,240,255,0.8),
    0 0 18px rgba(0,240,255,0.5);

  animation: typography-luminance 18s ease-in-out infinite;
}

h2 {
  font-family: 'UnifrakturCook', cursive;
  font-size: 2.2rem;
  color: var(--accent-color);

  border-bottom: 2px solid var(--accent-color);

  text-shadow: 0 0 5px rgba(255,102,204,0.6);

  animation: typography-luminance 22s ease-in-out infinite;
}

@keyframes typography-luminance {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.08); }
}

/* =========================
 COLUMN CONTAINERS
========================= */

.column {

  background: rgba(0,240,255,0.04);
  border: 1px solid var(--cyber-cyan-dark);
  border-radius: 8px;

  padding: 1.5rem;
  position: relative;

  box-shadow:
    0 0 12px rgba(0,240,255,0.25),
    inset 0 0 10px rgba(0,240,255,0.06);

  animation: midplane-breath 14s ease-in-out infinite;
}

.book-row .sub-column {

  flex: 0 0 320px;

  background: rgba(0,240,255,0.03);
  border: 1px solid rgba(0,240,255,0.35);
  border-radius: 8px;

  padding: 1rem;

  box-shadow:
    0 0 8px rgba(0,240,255,0.35),
    inset 0 0 8px rgba(0,240,255,0.05);

  animation: midplane-breath 16s ease-in-out infinite;
}

@keyframes midplane-breath {

  0%,100%{
    box-shadow:
      0 0 6px rgba(0,240,255,0.25),
      inset 0 0 6px rgba(0,240,255,0.04);
  }

  50%{
    box-shadow:
      0 0 16px rgba(0,240,255,0.55),
      inset 0 0 12px rgba(0,240,255,0.12);
  }
}

/* =========================
 COLUMN EDGE FADES
========================= */

.column::before,
.column::after {
  content:"";
  position:absolute;
  top:0;
  width:40px;
  height:100%;
  pointer-events:none;
}

.column::before {
  left:0;
  background:linear-gradient(to right,var(--cyber-bg),transparent);
}

.column::after {
  right:0;
  background:linear-gradient(to left,var(--cyber-bg),transparent);
}

/* =========================
 BOOK COVER
========================= */

.book-cover {

  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;

  border-radius:6px;
  margin:0.8rem 0 1rem 0;

  border:1px solid rgba(0,240,255,0.5);

  filter:brightness(1.06) contrast(1.04);

  box-shadow:0 0 10px rgba(0,240,255,0.4);

  animation:cover-luminance 20s ease-in-out infinite;
}

@keyframes cover-luminance {
  0%,100%{ filter:brightness(1.04) contrast(1.02); }
  50%{ filter:brightness(1.1) contrast(1.06); }
}

/* =========================
 HORIZONTAL BOOK SCROLL
========================= */

.book-row {

  display:flex;
  gap:1.5rem;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;

  padding-bottom:1rem;

  scrollbar-width:none;
}

.book-row::-webkit-scrollbar { display:none; }

/* =========================
 RESPONSIVE
========================= */

@media (max-width:600px){

  h1{font-size:2.4rem;}
  h2{font-size:1.8rem;}

  .book-row .sub-column{
    flex:0 0 260px;
  }

}

/* =========================
 CUSTOM CYBER SCROLLBAR
========================= */

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:var(--cyber-bg);
  border-left:1px solid rgba(0,240,255,0.1);
}

::-webkit-scrollbar-thumb{
  background:var(--cyber-cyan-dark);
  border-radius:5px;
  border:2px solid var(--cyber-bg);
}

::-webkit-scrollbar-thumb:hover{
  background:var(--cyber-cyan);
  box-shadow:0 0 10px var(--cyber-cyan);
}

.book-row{
  scrollbar-width:thin;
  scrollbar-color:var(--cyber-cyan-dark) var(--cyber-bg);
  padding-bottom:15px;
}

.book-row::-webkit-scrollbar{
  display:block;
  height:6px;
}

.book-row::-webkit-scrollbar-track{
  background:rgba(0,240,255,0.05);
  border-radius:10px;
}

.book-row::-webkit-scrollbar-thumb{
  background:var(--cyber-cyan-dark);
  border-radius:10px;
}

.book-row::-webkit-scrollbar-thumb:hover{
  background:var(--cyber-cyan);
}

/* =========================
 RECOMMENDED BOOKS
========================= */

.recommend-list{
display:flex;
flex-direction:column;
gap:1rem;
}

.recommend-item{

border:1px solid rgba(0,240,255,0.4);
padding:0.8rem 1rem;
border-radius:6px;

background:rgba(0,240,255,0.03);

display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;

box-shadow:
  0 0 6px rgba(0,240,255,0.25),
  inset 0 0 6px rgba(0,240,255,0.04);
}

.rec-title{
text-align:left;
flex:1;
}

.why-btn{

margin-left:1rem;

background:transparent;
border:1px solid var(--accent-color);

color:var(--accent-color);

padding:0.3rem 0.7rem;

cursor:pointer;

border-radius:4px;

transition:all 0.25s ease;
}

.why-btn:hover{

background:var(--accent-color);
color:var(--cyber-bg);

box-shadow:0 0 8px rgba(255,102,204,0.6);
}

.why-panel{

width:100%;
margin-top:0.8rem;

padding:0.8rem;

border-left:2px solid var(--cyber-cyan);

background:rgba(0,240,255,0.05);

color:var(--text-muted);

display:none;
}

.recommend-item.open .why-panel{
display:block;
}