/* ---------------------------------------------------------------------------
   Book portfolio — clean, minimal, scroll-driven CSS 3D.
   Tunables live in :root and in book.js CONFIG.
--------------------------------------------------------------------------- */
:root {
  --bg: #cfcfcc;
  --page-bg: #ffffff;
  --ink: #111111;
  --hint: #8a8a88;
  --page-edge: rgba(0, 0, 0, 0.05);   /* thin page outline           */
  --spine-shade: rgba(0, 0, 0, 0.20); /* soft shading near the spine */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: radial-gradient(ellipse 120% 100% at 50% 40%, #e2e2df, var(--bg) 82%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The 3D viewport — fixed, so the book stays put while the page scrolls. */
.scene {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  z-index: 1;
  pointer-events: none;
}

/* The "camera": we tilt/rotate THIS to move from isometric to top-down. */
.stage {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Book container. The spine sits at its left edge (x = 0); pages fan right. */
.book {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

/* A single leaf (one sheet of paper) rotates around the spine. */
.leaf {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The two printed sides of a leaf. */
.face {
  position: absolute;
  inset: 0;
  background-color: var(--page-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.face--back { transform: rotateY(180deg); }

/* Soft shading down the spine edge sells the fold. */
.face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.face--front::after {
  background: linear-gradient(90deg, var(--spine-shade), transparent 26%);
}
.face--back::after {
  background: linear-gradient(270deg, var(--spine-shade), transparent 26%);
}

/* Curved-flip overlay: hinged vertical strips that bow the turning page. */
.flip { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.seg { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.panel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
.pface {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-color: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* hairline overlap kills seams between strips */
  outline: 0.5px solid transparent;
}
.pface--back { transform: rotateY(180deg); }

/* Curl shading that sweeps across a page while it turns (set in JS). */
.sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}

/* Soft shadow the lifting page drops onto the spread beneath it. */
.turn-shadow {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 42% 82% at 50% 46%,
    rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 72%);
}

/* Page-block side faces: stacked-paper striations + soft shading + a shadow
   line where the cover meets the block. --t = per-page thickness (one stripe). */
.edge {
  position: absolute;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.edge--right {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 16%),
    repeating-linear-gradient(to right,
      rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 0.5px,
      rgba(0, 0, 0, 0) 0.5px, rgba(0, 0, 0, 0) var(--t, 1px)),
    linear-gradient(to bottom, #f1f0eb, #dbdad4);
}
.edge--bottom {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 16%),
    repeating-linear-gradient(to bottom,
      rgba(0, 0, 0, 0.07) 0, rgba(0, 0, 0, 0.07) 0.5px,
      rgba(0, 0, 0, 0) 0.5px, rgba(0, 0, 0, 0) var(--t, 1px)),
    linear-gradient(to right, #f1f0eb, #dbdad4);
}
/* Spine (bound edge): solid, no page striations. */
.edge--left {
  background: linear-gradient(to bottom, #ecebe6, #d4d3cd);
}

/* Placeholder pages (used until real images are dropped in /assets). */
.face--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #fdfdfd, #f2f2f2);
}
.face--placeholder .num {
  font-size: clamp(28px, 6vmin, 64px);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #c4c4c4;
}
.face--placeholder .label {
  position: absolute;
  bottom: 8%;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d6d6d6;
}

/* Soft contact shadow on the ground; fades as the book lifts flat. */
.ground-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.16), rgba(0,0,0,0) 70%);
  filter: blur(6px);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Scroll cue. */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--hint);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  transition: opacity 0.5s ease;
}
.scroll-hint__line {
  width: 1px;
  height: 34px;
  background: currentColor;
  animation: hint 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hint {
  0%   { transform: scaleY(0.2); opacity: 0.3; }
  50%  { transform: scaleY(1);   opacity: 1;   }
  100% { transform: scaleY(0.2); opacity: 0.3; }
}

.spacer { position: relative; z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__line { animation: none; }
}