/* Film flip book — silent-picture deck for The Sick Kitten Library.
   Not a magazine 3D-curl engine. Frames turn like intertitles on a reel. */

:root{
  --ink:#14110F; --ink-2:#1b1712; --stock:#EDE3D0; --sepia:#C9A876;
  --fisik:#7A8B54; --claret:#8B3A2E; --soot:#4A4136; --soot-2:#8a7f6d;
  --paper:#EDE3D0;
  --flip-ms: 480ms;
  --flip-ease: cubic-bezier(.45, .05, .2, 1);
}

*{box-sizing:border-box;}
::selection{background:var(--fisik);color:var(--ink);}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ink); color:var(--stock);
  font-family:'Spectral',serif; font-weight:300;
  min-height:100dvh; display:flex; flex-direction:column;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
button{font:inherit; cursor:pointer;}
button:disabled{cursor:default;}

/* House chrome (Library pages) */
.sk-skip{
  position:absolute;left:-9999px;top:0;z-index:400;background:var(--fisik);color:var(--ink);
  padding:.7rem 1.1rem;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;
}
.sk-skip:focus{left:0;position:fixed;}
.sk-nav{
  position:sticky;top:0;z-index:80;background:rgba(20,17,15,.94);
  border-bottom:1px solid var(--soot);backdrop-filter:blur(8px);
}
.sk-nav ul{
  list-style:none;margin:0 auto;padding:0 .4rem;max-width:1100px;
  display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.sk-nav ul::-webkit-scrollbar{display:none;}
.sk-nav a{
  display:block;padding:.85rem .75rem;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soot-2);white-space:nowrap;
}
.sk-nav a:hover,.sk-nav a[aria-current="page"]{color:var(--stock);}
.sk-sub{border-bottom:1px solid var(--soot);background:var(--ink-2);}
.sk-sub .inner{
  max-width:1100px;margin:0 auto;padding:.55rem .5rem;display:flex;gap:.35rem;
  overflow-x:auto;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  scrollbar-width:none;
}
.sk-sub a{color:var(--soot-2);padding:.45rem .65rem;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;}
.sk-sub a:hover,.sk-sub a[aria-current="page"]{color:var(--stock);}
.sk-sub span{color:var(--sepia);padding:.45rem .65rem;}
.sk-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem .45rem;line-height:1.9;margin:0 0 .9rem;}
.sk-foot-nav a{color:var(--sepia);}
.sk-foot-nav span{color:var(--stock);}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed;inset:0;pointer-events:none;z-index:49;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* Book shell */
.book-shell{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom,0));
  max-width:720px; width:100%; margin:0 auto;
}
.book-meta{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--soot-2); margin:.4rem 0 1rem;
}
.book-meta a{color:var(--sepia);}
.book-meta a:hover{color:var(--stock);}

/* Sprocket edges — film strip, not magazine */
.stage-wrap{
  position:relative; width:100%;
}
.stage-wrap::before,
.stage-wrap::after{
  content:"";
  position:absolute; top:0; bottom:0; width:14px; z-index:4; pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 10px,
      var(--ink) 10px 18px,
      transparent 18px 28px
    );
  opacity:.55;
}
.stage-wrap::before{left:0; border-right:1px solid rgba(74,65,54,.55);}
.stage-wrap::after{right:0; border-left:1px solid rgba(74,65,54,.55);}

.stage{
  position:relative; width:100%;
  aspect-ratio: 3 / 4;
  max-height: min(72dvh, 640px);
  perspective: 1400px;
  touch-action: pan-y;
  outline: none;
}
.stage:focus-visible{
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--sepia);
}

.page{
  position:absolute; inset:0;
  border:1px solid var(--soot);
  background: var(--ink-2);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:clamp(1.2rem, 5vw, 2.4rem) clamp(1.4rem, 6vw, 2.6rem);
  text-align:center;
  opacity:0; pointer-events:none;
  transform: translateX(18px) rotateY(10deg) scale(.97);
  transition:
    opacity var(--flip-ms) var(--flip-ease),
    transform var(--flip-ms) var(--flip-ease);
  will-change: opacity, transform;
}
.page.is-active{
  opacity:1; pointer-events:auto;
  transform: translateX(0) rotateY(0) scale(1);
  z-index:2;
}
/* Direction-aware exits */
.page.is-exit-forward{
  opacity:0; transform: translateX(-22px) rotateY(-12deg) scale(.96); z-index:1;
}
.page.is-exit-back{
  opacity:0; transform: translateX(22px) rotateY(12deg) scale(.96); z-index:1;
}
/* Enter from opposite side when not active yet — handled by default idle pose */

/* Intertitle plate — stock paper feel */
.page.intertitle{
  background:
    radial-gradient(ellipse at 50% 40%, rgba(237,227,208,.06), transparent 62%),
    var(--ink-2);
}
.page.intertitle::before{
  content:"";
  position:absolute; inset:12px;
  border:1px solid rgba(201,168,118,.22);
  pointer-events:none;
}

.page-eyebrow{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sepia); margin:0 0 1.2rem;
}
.page h1, .page h2{
  font-family:'Fraunces',serif; font-weight:600; line-height:1.05; margin:0 0 .8rem;
  letter-spacing:-.02em;
}
.page.title h1{font-size:clamp(2.4rem, 10vw, 3.8rem);}
.page.title h1 span{display:block;}
.page.title h1 span:last-child{color:var(--sepia); font-style:italic; font-weight:500;}
.page.intertitle h2{
  font-size:clamp(1.5rem, 6vw, 2.2rem); font-weight:500; font-style:italic;
  max-width:18ch; line-height:1.25;
}
.page.scene h2{font-size:clamp(1.4rem, 5vw, 1.9rem); color:var(--sepia);}
.page.scene p, .page.closeup p{
  font-size:clamp(1.05rem, 3.4vw, 1.2rem); line-height:1.65; max-width:32ch; margin:.4rem auto 0;
  color:#e5d9c4;
}
.page.closeup .still{
  width:min(70%, 240px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--sepia); overflow:hidden; margin:0 auto 1rem;
  box-shadow:0 0 0 10px rgba(201,168,118,.08);
}
.page.closeup .still img{
  width:100%; height:100%; object-fit:cover; object-position:50% 56%;
  filter:sepia(.35) contrast(1.08);
}
.page.end h2{font-size:clamp(2rem, 8vw, 3rem); letter-spacing:.12em;}
.page .sub{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--soot-2); margin-top:1rem; max-width:36ch; line-height:1.6;
}
.page .note{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fisik); margin-top:1.2rem; max-width:36ch; line-height:1.6;
}
.ornament{
  width:64px; height:64px; margin:0 auto 1rem; border:1px solid var(--soot);
  border-radius:50%; display:grid; place-items:center;
  font-family:'Fraunces',serif; font-size:1.5rem; color:var(--sepia);
  background:radial-gradient(circle, rgba(201,168,118,.12), transparent 70%);
}

/* Controls */
.controls{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-top:1.1rem;
}
.controls > button{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--stock); border:1px solid var(--soot);
  padding:.7rem 1rem; min-height:44px; min-width:44px;
  touch-action:manipulation;
}
.controls > button:hover:not(:disabled){border-color:var(--sepia); color:var(--sepia);}
.controls > button:disabled{opacity:.35;}
.controls .mid{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.45rem; min-width:0;
}
.progress{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:100%;
}
.progress button{
  width:12px; height:12px; min-width:12px; min-height:12px; padding:0; border-radius:50%;
  border:1px solid var(--soot); background:transparent;
  touch-action:manipulation;
}
.progress button.is-on{background:var(--sepia); border-color:var(--sepia);}
.progress button:hover{border-color:var(--sepia);}
.frame-label{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--soot-2);
}
.hint{
  margin-top:.9rem; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--soot-2); text-align:center;
}
.foot{
  margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--soot); width:100%;
  text-align:center; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soot-2);
}
.foot a{color:var(--sepia);}

@media (max-width:520px){
  .stage{max-height:min(64dvh, 560px);}
  .page{padding:1.1rem 1.15rem;}
  .stage-wrap::before,.stage-wrap::after{width:10px;}
}

/* Reduced motion: hard cuts, no yaw */
@media (prefers-reduced-motion: reduce){
  .page{
    transition: opacity .01ms linear !important;
    transform: none !important;
  }
  .page.is-active,
  .page.is-exit-forward,
  .page.is-exit-back{
    transform: none !important;
  }
}