/* Immersive layer for index.php — only active when JS adds html.im */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Loader */
.loader{display:none}
.im .loader{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;justify-content:space-between;
  padding:40px;background:#0b0b0c;color:var(--text);
  animation:loaderSafety 0s 5s forwards;
}
.loader .l-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.loader .l-name{font-family:var(--display);font-weight:800;font-size:clamp(48px,11vw,180px);letter-spacing:-.04em;line-height:.9;overflow:hidden}
.loader .l-name em{font-style:italic;font-weight:400;color:var(--accent)}
.loader .l-count{font-family:var(--display);font-size:clamp(28px,4vw,56px);color:var(--accent)}
.loader .l-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
@keyframes loaderSafety{to{visibility:hidden;opacity:0}}

/* Scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Cursor + spotlight (fine pointers only) */
.cursor,.cursor-dot,.spotlight{display:none}
@media (hover:hover) and (pointer:fine){
  .im .cursor,.im .cursor-dot{display:flex;position:fixed;top:0;left:0;z-index:190;pointer-events:none;border-radius:50%}
  .im .cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(232,167,139,.7);align-items:center;justify-content:center;
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1a1607;
    transition:width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1),background .3s,border-color .3s}
  .im .cursor span{opacity:0;transition:opacity .2s;color:#0b0b0c;font-weight:600}
  .im .cursor.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(232,167,139,.12)}
  .im .cursor.is-label{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--accent);border-color:var(--accent)}
  .im .cursor.is-label span{opacity:1}
  .im .cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent)}
  .im .spotlight{display:block;position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
    background:radial-gradient(520px circle at var(--sx,50%) var(--sy,50%),rgba(232,167,139,.22),transparent 60%)}
  .im body, .im a, .im button{cursor:none}
  .im input{cursor:text}
}

/* Chapter rail */
.chapters{display:none}
@media (min-width:1100px){
  .im .chapters{display:flex;flex-direction:column;gap:14px;position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:55;list-style:none}
  .chapters a{display:flex;align-items:center;justify-content:flex-end;gap:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .chapters a .lbl{opacity:0;transform:translateX(8px);transition:all .3s}
  .chapters a i{width:8px;height:8px;border-radius:50%;border:1px solid var(--muted);transition:all .3s}
  .chapters a:hover .lbl,.chapters a.active .lbl{opacity:1;transform:none}
  .chapters a.active{color:var(--text)}
  .chapters a.active i{background:var(--accent);border-color:var(--accent);transform:scale(1.4)}
}

/* Split text */
.im .w{display:inline-block;white-space:nowrap}
.im .mask .w{overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.im .c{display:inline-block;will-change:transform}
.im .scrub-words .w{opacity:.16;transition:none}

/* Hero */
.hero-books{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-books img{position:absolute;width:var(--w);left:var(--x);top:var(--y);opacity:0;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) blur(var(--b,0px));will-change:transform}
.hero .container{position:relative;z-index:1}
.scroll-cue{display:inline-flex;align-items:center;gap:12px}
.scroll-cue i{position:relative;display:block;width:1px;height:42px;background:var(--line);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--accent);animation:cue 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cue{to{top:110%}}
@media (max-width:900px){ .hero-books{opacity:.45} .scroll-cue{display:none} }
@media (max-width:600px){ .hero-books{opacity:.22} }

/* Books: 3D tilt + glare */
.book .cover{perspective:900px}
.book .cover img{transform-style:preserve-3d}
.book .cover::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 45%)}
.book:hover .cover::before{opacity:1}
.book .num-big{position:absolute;top:18px;left:22px;z-index:3;font-family:var(--display);font-size:14px;letter-spacing:.2em;color:var(--muted)}

/* Books: horizontal pinned gallery (desktop) */
#books.is-h{padding:96px 0 48px;overflow:hidden;min-height:100vh}
#books.is-h .section-head{margin-bottom:28px}
#books.is-h .books{display:flex;gap:56px;width:max-content;padding-right:22vw;will-change:transform}
#books.is-h .book,#books.is-h .book:nth-child(even){flex:0 0 auto;width:calc((100vh - 520px) * .8);min-width:260px;max-width:440px;margin-top:0}
#books.is-h .book:nth-child(even){transform:translateY(24px)}
#books .h-progress{display:none}
#books.is-h .h-progress{display:flex;align-items:center;gap:16px;margin-top:20px;font-size:12px;letter-spacing:.2em;color:var(--muted)}
#books.is-h .h-progress .bar{width:180px;height:1px;background:var(--line);position:relative;overflow:hidden}
#books.is-h .h-progress .bar span{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* Comics rows: hover fill */
.list .row{position:relative;overflow:hidden}
.list .row::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(232,167,139,.12),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.list .row:hover::before{transform:scaleX(1)}

/* Partners tilt */
.partner{transform-style:preserve-3d;will-change:transform}

/* Award */
.award .cover-wrap{perspective:1000px}
.award-banner{overflow:hidden}
.award-banner img{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .im .loader,.progress,.cursor,.cursor-dot,.spotlight{display:none!important}
}
