/*
 * Shared static-first depth-scene contract. Load after tokens.css and motion.css.
 * Scenes are decorative, occupy an isolated grid area, and never own an action.
 */

/* Optional two-area shell keeps core content and decoration spatially separate. */
:where(.depth-scene-layout, [data-depth-layout]) {
  display: grid;
  grid-template-areas: "content scene";
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 16rem), 0.8fr);
  gap: var(--space-6);
  align-items: center;
}

:where(.depth-scene-layout, [data-depth-layout])
  > :where(.depth-scene-layout__content, [data-core-content]) {
  grid-area: content;
  min-inline-size: 0;
}

:where(.depth-scene-layout, [data-depth-layout])
  > :where(.depth-scene, [data-depth-scene]) {
  grid-area: scene;
}

/*
 * The root alone establishes flow geometry. Both visual states are inset layers,
 * so changing visibility cannot alter the grid track or surrounding content.
 */
:where(.depth-scene, [data-depth-scene]) {
  --depth-scene-aspect-ratio: 4 / 3;
  --depth-scene-min-block-size: 12rem;
  --depth-scene-intrinsic-inline-size: 30rem;
  --depth-scene-intrinsic-block-size: 22.5rem;
  --depth-scene-perspective: 60rem;
  --depth-scene-max-translation: var(--motion-translate-max);
  --depth-scene-max-rotation: var(--motion-rotate-max);
  --depth-scene-rotation-envelope: var(--space-6);
  --depth-scene-shadow-offset: var(--space-2);
  --depth-scene-shadow-blur: var(--space-5);
  --depth-scene-shadow-spread: var(--space-1);
  --depth-scene-safe-inset: calc(
    var(--depth-scene-max-translation)
    + var(--depth-scene-rotation-envelope)
    + var(--depth-scene-shadow-offset)
    + var(--depth-scene-shadow-blur)
    + var(--depth-scene-shadow-spread)
  );

  position: relative;
  grid-area: var(--depth-scene-grid-area, scene);
  display: grid;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--depth-scene-min-block-size);
  aspect-ratio: var(--depth-scene-aspect-ratio);
  contain: layout paint;
  contain-intrinsic-size:
    var(--depth-scene-intrinsic-inline-size)
    var(--depth-scene-intrinsic-block-size);
  isolation: isolate;
  overflow: clip;
  perspective: var(--depth-scene-perspective);
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}

:where(.depth-scene, [data-depth-scene]),
:where(.depth-scene, [data-depth-scene]) * {
  box-sizing: border-box;
  pointer-events: none !important;
}

/* Fallback and enhancement always occupy the exact same reserved box. */
:where(.depth-scene, [data-depth-scene])
  > :where(.depth-scene__fallback, [data-depth-fallback]),
:where(.depth-scene, [data-depth-scene])
  > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  max-inline-size: 100%;
  max-block-size: 100%;
  padding: var(--depth-scene-safe-inset);
  contain: layout paint;
  overflow: clip;
  transform: none;
  transform-origin: center;
  transition-property: opacity;
  transition-duration: var(--motion-reduced);
  transition-timing-function: var(--ease-standard);
  transition-delay: 0s;
}

:where(.depth-scene, [data-depth-scene])
  > :where(.depth-scene__fallback, [data-depth-fallback]) {
  z-index: 0;
  opacity: 1;
  visibility: visible;
}

:where(.depth-scene, [data-depth-scene])
  > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

:where(.depth-scene, [data-depth-scene])
  > :where(.depth-scene__fallback, [data-depth-fallback])[hidden],
:where(.depth-scene, [data-depth-scene])
  > :where(.depth-scene__enhanced, [data-depth-enhanced])[hidden] {
  display: none !important;
}

/* The fallback remains visible while static, loading, reduced, or failed. */
:where(
  .depth-scene--static,
  .depth-scene--fallback,
  :is(.depth-scene, [data-depth-scene]):is(
    [data-scene-status="static"],
    [data-scene-status="loading"],
    [data-scene-status="fallback"],
    [data-scene-status="reduced"],
    [data-scene-status="failed"],
    [data-scene-status="error"],
    [data-scene-status="disabled"],
    [data-scene-mode="static"],
    [data-depth-collision="blocked"]
  )
) > :where(.depth-scene__fallback, [data-depth-fallback]) {
  display: grid !important;
  opacity: 1;
  visibility: visible;
}

:where(
  .depth-scene--static,
  .depth-scene--fallback,
  :is(.depth-scene, [data-depth-scene]):is(
    [data-scene-status="static"],
    [data-scene-status="loading"],
    [data-scene-status="fallback"],
    [data-scene-status="reduced"],
    [data-scene-status="failed"],
    [data-scene-status="error"],
    [data-scene-status="disabled"],
    [data-scene-mode="static"],
    [data-depth-collision="blocked"]
  )
) > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* Ready and paused enhancements replace, rather than reflow, the fallback. */
:where(.depth-scene, [data-depth-scene]):is(
  [data-scene-status="ready"],
  [data-scene-status="paused"]
) > :where(.depth-scene__fallback, [data-depth-fallback]) {
  opacity: 0;
  visibility: hidden;
}

:where(.depth-scene, [data-depth-scene]):is(
  [data-scene-status="ready"],
  [data-scene-status="paused"]
) > :where(.depth-scene__enhanced, [data-depth-enhanced]):not([hidden]) {
  opacity: 1;
  visibility: visible;
}

/* A stage fills only the envelope-safe content box. */
:where(.depth-scene, [data-depth-scene])
  :where(.depth-scene__stage, [data-depth-stage]) {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  transform-style: preserve-3d;
}

/* Layer values are clamped again in CSS; the root clips every extreme pose. */
:where(.depth-scene, [data-depth-scene])
  :where(.depth-scene__layer, [data-depth-layer]) {
  --depth-translate-x: 0px;
  --depth-translate-y: 0px;
  --depth-rotate-x: 0deg;
  --depth-rotate-y: 0deg;

  max-inline-size: 100%;
  max-block-size: 100%;
  backface-visibility: hidden;
  transform:
    translate3d(
      clamp(
        calc(0px - var(--depth-scene-max-translation)),
        var(--depth-translate-x),
        var(--depth-scene-max-translation)
      ),
      clamp(
        calc(0px - var(--depth-scene-max-translation)),
        var(--depth-translate-y),
        var(--depth-scene-max-translation)
      ),
      0
    )
    rotateX(
      clamp(
        calc(0deg - var(--depth-scene-max-rotation)),
        var(--depth-rotate-x),
        var(--depth-scene-max-rotation)
      )
    )
    rotateY(
      clamp(
        calc(0deg - var(--depth-scene-max-rotation)),
        var(--depth-rotate-y),
        var(--depth-scene-max-rotation)
      )
    );
  transform-origin: center;
  transform-style: preserve-3d;
  transition-property: transform, opacity;
  transition-duration: var(--motion-standard);
  transition-timing-function: var(--ease-standard);
  transition-delay: 0s;
  will-change: auto;
}

:where(.depth-scene, [data-depth-scene])[data-scene-status="ready"]
  :where(.depth-scene__layer, [data-depth-layer]) {
  will-change: transform;
}

:where(.depth-scene, [data-depth-scene])[data-scene-status="paused"]
  :where(.depth-scene__layer, [data-depth-layer]) {
  transition-property: none;
  will-change: auto;
}

/* Static compositions always return every layer to its resting pose. */
:where(
  .depth-scene--static,
  .depth-scene--fallback,
  :is(.depth-scene, [data-depth-scene]):is(
    [data-scene-status="static"],
    [data-scene-status="fallback"],
    [data-scene-status="reduced"],
    [data-scene-status="failed"],
    [data-scene-status="error"],
    [data-scene-mode="static"],
    [data-depth-collision="blocked"]
  )
) :where(.depth-scene__layer, [data-depth-layer]) {
  transform: none !important;
  transition-property: none;
  will-change: auto;
}

/* Shared diffuse matte material: broad shadow, soft edge, and no gloss/filter. */
:where(.depth-scene, [data-depth-scene])
  :where(
    .depth-scene__object,
    .depth-scene__surface,
    .depth-material--matte,
    [data-depth-object],
    [data-depth-material="matte"],
    [data-depth-material="diffuse"],
    [data-depth-material="paper"]
  ) {
  color: var(--color-text-primary);
  background-color: var(--motif-surface);
  border: var(--border-width) solid var(--motif-edge);
  border-radius: var(--motif-geometry-radius);
  box-shadow:
    var(--shadow-inset),
    0
    var(--depth-scene-shadow-offset)
    var(--depth-scene-shadow-blur)
    var(--depth-scene-shadow-spread)
    var(--motif-shadow);
}

:where(.depth-scene, [data-depth-scene])
  :where([data-depth-material="diffuse"]) {
  background-color: var(--motif-diffuse);
}

/* At most one low-opacity reflection plane is rendered per sibling group. */
:where(.depth-scene, [data-depth-scene])
  :where(.depth-scene__reflection, [data-depth-reflection]) {
  max-inline-size: 75%;
  max-block-size: var(--space-6);
  background: linear-gradient(
    to right,
    transparent,
    var(--motif-highlight),
    transparent
  );
  border-radius: var(--radius-pill);
  box-shadow: none;
  filter: none;
  mix-blend-mode: normal;
  opacity: var(--motif-reflection-opacity);
}

:where(.depth-scene__reflection, [data-depth-reflection])
  ~ :where(.depth-scene__reflection, [data-depth-reflection]) {
  display: none;
}

:where(.depth-scene, [data-depth-scene])
  :where(img, svg, canvas, video) {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

/* Reduced detail removes reflection and far/optional decoration, never content. */
:where(
  .depth-scene--reduced,
  :is(.depth-scene, [data-depth-scene]):is(
    [data-scene-detail="reduced"],
    [data-depth-detail="reduced"]
  )
) :where(
  .depth-scene__reflection,
  [data-depth-reflection],
  .depth-scene__detail--far,
  [data-depth-detail="far"],
  [data-depth-detail="optional"],
  .depth-scene__particle,
  [data-depth-particle]
) {
  display: none !important;
}

:where(
  .depth-scene--reduced,
  :is(.depth-scene, [data-depth-scene]):is(
    [data-scene-detail="reduced"],
    [data-depth-detail="reduced"]
  )
) :where(
  .depth-scene__object,
  .depth-scene__surface,
  .depth-material--matte,
  [data-depth-object],
  [data-depth-material]
) {
  box-shadow: var(--shadow-inset), var(--shadow-raised);
}

/* Script-set preference hooks provide the same static state as media queries. */
:where(
  :is(.depth-scene, [data-depth-scene]):is(
    [data-reduced-motion="true"],
    [data-save-data="true"],
    [data-scene-preference="reduced-motion"],
    [data-scene-preference="save-data"]
  ),
  [data-reduced-motion="true"] :is(.depth-scene, [data-depth-scene]),
  [data-save-data="true"] :is(.depth-scene, [data-depth-scene]),
  .reduce-motion :is(.depth-scene, [data-depth-scene]),
  .save-data :is(.depth-scene, [data-depth-scene])
) > :where(.depth-scene__fallback, [data-depth-fallback]) {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

:where(
  :is(.depth-scene, [data-depth-scene]):is(
    [data-reduced-motion="true"],
    [data-save-data="true"],
    [data-scene-preference="reduced-motion"],
    [data-scene-preference="save-data"]
  ),
  [data-reduced-motion="true"] :is(.depth-scene, [data-depth-scene]),
  [data-save-data="true"] :is(.depth-scene, [data-depth-scene]),
  .reduce-motion :is(.depth-scene, [data-depth-scene]),
  .save-data :is(.depth-scene, [data-depth-scene])
) > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

:where(
  :is(.depth-scene, [data-depth-scene]):is(
    [data-reduced-motion="true"],
    [data-save-data="true"],
    [data-scene-preference="reduced-motion"],
    [data-scene-preference="save-data"]
  ),
  [data-reduced-motion="true"] :is(.depth-scene, [data-depth-scene]),
  [data-save-data="true"] :is(.depth-scene, [data-depth-scene]),
  .reduce-motion :is(.depth-scene, [data-depth-scene]),
  .save-data :is(.depth-scene, [data-depth-scene])
) :where(.depth-scene__layer, [data-depth-layer]) {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* Effective narrow layouts (including typical 200% zoom) use static reduced detail. */
@media (max-width: 40rem) {
  :where(.depth-scene-layout, [data-depth-layout]) {
    grid-template-areas:
      "content"
      "scene";
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.depth-scene, [data-depth-scene]) {
    --depth-scene-safe-inset: calc(
      var(--depth-scene-shadow-blur)
      + var(--depth-scene-shadow-offset)
    );
  }

  :where(.depth-scene, [data-depth-scene])
    :where(
      .depth-scene__reflection,
      [data-depth-reflection],
      .depth-scene__detail--far,
      [data-depth-detail="far"],
      [data-depth-detail="optional"],
      .depth-scene__particle,
      [data-depth-particle]
    ) {
    display: none !important;
  }

  :where(.depth-scene, [data-depth-scene])
    :where(.depth-scene__layer, [data-depth-layer]) {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  :where(.depth-scene, [data-depth-scene])[data-scene-static-on-narrow="true"]
    > :where(.depth-scene__fallback, [data-depth-fallback]) {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  :where(.depth-scene, [data-depth-scene])[data-scene-static-on-narrow="true"]
    > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.depth-scene, [data-depth-scene])
    > :where(.depth-scene__fallback, [data-depth-fallback]) {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  :where(.depth-scene, [data-depth-scene])
    > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  :where(.depth-scene, [data-depth-scene])
    :where(.depth-scene__layer, [data-depth-layer]) {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* Supported where implemented; script-set save-data hooks cover other browsers. */
@media (prefers-reduced-data: reduce) {
  :where(.depth-scene, [data-depth-scene])
    > :where(.depth-scene__fallback, [data-depth-fallback]) {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  :where(.depth-scene, [data-depth-scene])
    > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  :where(.depth-scene, [data-depth-scene])
    :where(.depth-scene__layer, [data-depth-layer]) {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* overflow: hidden is a scene-local fallback, never page-level overflow concealment. */
@supports not (overflow: clip) {
  :where(.depth-scene, [data-depth-scene]),
  :where(.depth-scene, [data-depth-scene])
    > :where(.depth-scene__fallback, [data-depth-fallback]),
  :where(.depth-scene, [data-depth-scene])
    > :where(.depth-scene__enhanced, [data-depth-enhanced]) {
    overflow: hidden;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXTUAL BOOK SCENES — Dimensional Gilded German Hardback
   Three decorative variants for the warm editorial German-book aesthetic.
   All geometry rides on the shared layer contract above, so the engine keeps
   control of motion, readiness, collision and fallback. Decoration only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared book material ───────────────────────────────────────────────── */

:where(
  .depth-scene--book, [data-depth-scene="hero-book"],
  .depth-scene--pages, [data-depth-scene="chapter-pages"],
  .depth-scene--words, [data-depth-scene="word-drift"]
) :where(.depth-scene__layer, [data-depth-layer]) {
  position: absolute;
  inset: 0;
}

:where(
  .depth-scene--book, [data-depth-scene="hero-book"],
  .depth-scene--pages, [data-depth-scene="chapter-pages"]
) :where(.book-static) {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

:where(
  .depth-scene--book, [data-depth-scene="hero-book"],
  .depth-scene--pages, [data-depth-scene="chapter-pages"]
) :where(.book__cover, .book__back, .book__pages, .page-sheet) {
  position: absolute;
  inset-block: 12%;
  inset-inline: 18%;
  border-radius: var(--radius-control);
}

/* ── 1. Floating German book (hero) ────────────────────────────────────── */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) {
  --depth-scene-aspect-ratio: 5 / 4;
}

/* --- Contact shadow: wider, blurrier, sits beneath the book --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__shadow {
  position: absolute;
  inset-block-end: 8%;
  inset-inline: 16%;
  block-size: 12%;
  border-radius: var(--radius-pill);
  background: var(--motif-shadow);
  filter: blur(var(--space-5));
  opacity: 0.85;
  transform: translateZ(-2px) scaleX(1.08);
}

/* --- Back board: dark leather, slightly offset for thickness --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__back {
  inset-block: 13%;
  inset-inline-start: 20%;
  inset-inline-end: 17%;
  background: linear-gradient(
    145deg,
    var(--color-brand-ink-700) 0%,
    var(--color-brand-ink-900) 100%
  );
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
  transform: translateZ(-8px);
}

/* --- Page block: striations for stacked sheets, real depth --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__pages {
  inset-block: 14%;
  inset-inline-start: 19%;
  inset-inline-end: 18%;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--motif-surface) 0px,
      var(--motif-surface) 2px,
      var(--motif-diffuse) 2px,
      var(--motif-diffuse) 3px
    );
  border-radius: var(--radius-control);
  box-shadow:
    var(--shadow-inset),
    0 1px 3px var(--motif-shadow);
  transform: translateZ(-4px);
}

/* Page-block top/bottom edge simulation via pseudo */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__pages::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 4px;
  border-start-end-radius: 2px;
  border-end-end-radius: 2px;
  background: linear-gradient(
    to bottom,
    var(--motif-diffuse) 0%,
    var(--motif-surface) 20%,
    var(--motif-surface) 80%,
    var(--motif-diffuse) 100%
  );
}

/* --- Gilded fore-edge: gold catching light --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__edge {
  position: absolute;
  inset-block: 14%;
  inset-inline-end: 17.5%;
  inline-size: 5px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: linear-gradient(
    to bottom,
    var(--color-brand-gold-400) 0%,
    var(--motif-edge) 40%,
    var(--color-brand-gold-400) 70%,
    var(--motif-edge) 100%
  );
  box-shadow:
    inset 0 0 2px var(--motif-highlight),
    1px 0 3px var(--motif-shadow);
  transform: translateZ(-3px);
}

/* Gilded edge light catch via pseudo */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__edge::before {
  content: "";
  position: absolute;
  inset: 10% 0 10% 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--motif-highlight) 30%,
    transparent 70%
  );
  border-radius: inherit;
  opacity: 0.6;
}


/* --- Cover: dark leather with embossed gold inset panel --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__cover {
  inset-block: 12%;
  inset-inline-start: 18%;
  inset-inline-end: 18%;
  background: linear-gradient(
    155deg,
    var(--color-brand-ink-900) 0%,
    var(--color-brand-ink-950) 60%,
    var(--color-brand-ink-900) 100%
  );
  border-radius: var(--radius-control);
  box-shadow:
    var(--shadow-floating),
    inset 0 1px 0 var(--motif-highlight);
  transform: translateZ(0px);
}

/* Embossed title panel — inset gold rule via ::before */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__cover::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline: 18%;
  border: 1px solid var(--color-brand-gold-400);
  border-radius: 2px;
  opacity: 0.7;
  box-shadow:
    inset 0 0 0 1px var(--color-brand-ink-950),
    inset 0 0 4px var(--motif-shadow);
}

/* Inner decorative panel suggestion via ::after */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__cover::after {
  content: "";
  position: absolute;
  inset-block-start: 36%;
  inset-block-end: 50%;
  inset-inline: 26%;
  border-block-start: 1px solid var(--color-brand-gold-400);
  border-block-end: 1px solid var(--color-brand-gold-400);
  opacity: 0.5;
}

/* --- Spine: a connecting 3D face turned perpendicular --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__spine {
  position: absolute;
  inset-block: 12%;
  inset-inline-start: 18%;
  inline-size: 14px;
  background: linear-gradient(
    to right,
    var(--color-brand-ink-950) 0%,
    var(--color-brand-ink-700) 30%,
    var(--color-brand-ink-900) 70%,
    var(--color-brand-ink-950) 100%
  );
  border-start-start-radius: var(--radius-control);
  border-end-start-radius: var(--radius-control);
  transform: rotateY(-45deg) translateZ(4px);
  transform-origin: left center;
  box-shadow: inset -2px 0 4px var(--motif-shadow);
}

/* Spine gold bands via pseudo */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__spine::before {
  content: "";
  position: absolute;
  inset-inline: 3px;
  inset-block-start: 15%;
  block-size: 1px;
  background: var(--color-brand-gold-400);
  opacity: 0.55;
  box-shadow: 0 calc(var(--space-7) * 2.5) 0 var(--color-brand-gold-400);
}

/* --- Directional sheen: upper-left light source --- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__sheen {
  position: absolute;
  inset: 12%;
  inset-inline-end: 18%;
  border-radius: var(--radius-control);
  background: linear-gradient(
    125deg,
    var(--motif-highlight) 0%,
    transparent 35%,
    transparent 100%
  );
  opacity: var(--motif-reflection-opacity);
  transform: translateZ(1px);
}

/* --- Idle float keyframe (child element, not the layer) --- */
@keyframes depth-book-float {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translate3d(0, -6px, 0) rotateX(1.5deg) rotateY(-1deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
}

/* Apply float to the book-static wrapper (a child, not the layer itself) */
:where(.depth-scene--book, [data-depth-scene="hero-book"])[data-scene-status="ready"]
  .book-static {
  animation: depth-book-float 8s var(--ease-standard) infinite;
}

/* Also float elements in the enhanced view via the inner content wrapper */
:where(.depth-scene--book, [data-depth-scene="hero-book"])[data-scene-status="ready"]
  .book__cover {
  animation: depth-book-float 8s var(--ease-standard) infinite;
}


/* ── 2. Chapter page sheets — pages mid-turn ────────────────────────────── */
:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) {
  --depth-scene-aspect-ratio: 16 / 5;
  --depth-scene-min-block-size: 6rem;
}

:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet {
  inset-block: 14%;
  background: linear-gradient(
    to left,
    var(--motif-surface) 0%,
    var(--motif-surface) 70%,
    var(--motif-diffuse) 95%,
    var(--motif-shadow) 100%
  );
  border-block-end: 1px solid var(--motif-edge);
  box-shadow:
    var(--shadow-inset),
    0 2px 6px var(--motif-shadow);
  transform-origin: left center;
  transform-style: preserve-3d;
}

/* Far page: most open, deepest in stack */
:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--far {
  inset-inline: 12%;
  opacity: 0.6;
  border-radius: var(--radius-control) 2px 4px var(--radius-control);
  transform: translateZ(-6px) rotateY(-14deg);
}

:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--far::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    transparent 60%,
    var(--motif-shadow) 100%
  );
  border-radius: inherit;
  opacity: 0.4;
}

/* Mid page: partly turned */
:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--mid {
  inset-inline: 15%;
  opacity: 0.8;
  border-radius: var(--radius-control) 3px 6px var(--radius-control);
  transform: translateZ(-3px) rotateY(-9deg);
}

:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--mid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    transparent 65%,
    var(--motif-shadow) 100%
  );
  border-radius: inherit;
  opacity: 0.3;
}

/* Near page: almost flat, closest to viewer */
:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--near {
  inset-inline: 18%;
  border-radius: var(--radius-control) 4px 8px var(--radius-control);
  transform: translateZ(0px) rotateY(-4deg);
  box-shadow:
    var(--shadow-inset),
    0 4px 12px var(--motif-shadow);
}

:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--near::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    transparent 75%,
    var(--motif-shadow) 100%
  );
  border-radius: inherit;
  opacity: 0.2;
}

/* Page curl edge highlight on leading side (::after) */
:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--near::after {
  content: "";
  position: absolute;
  inset-block: 5%;
  inset-inline-end: 0;
  inline-size: 3px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--motif-highlight) 40%,
    transparent 100%
  );
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  opacity: 0.5;
}

:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--mid::after {
  content: "";
  position: absolute;
  inset-block: 8%;
  inset-inline-end: 0;
  inline-size: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--motif-highlight) 50%,
    transparent 100%
  );
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  opacity: 0.35;
}

/* Book elements in page scene for the static fallback */
:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .book-static .book__cover {
  position: absolute;
  inset-block: 12%;
  inset-inline: 10%;
  background: linear-gradient(
    155deg,
    var(--color-brand-ink-900) 0%,
    var(--color-brand-ink-950) 60%,
    var(--color-brand-ink-900) 100%
  );
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-floating);
}

:where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .book-static .book__pages {
  position: absolute;
  inset-block: 14%;
  inset-inline: 12%;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--motif-surface) 0px,
      var(--motif-surface) 2px,
      var(--motif-diffuse) 2px,
      var(--motif-diffuse) 3px
    );
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-inset);
}


/* ── 3. Floating German words — depth-staggered ambient drift ───────────── */
:where(.depth-scene--words, [data-depth-scene="word-drift"]) {
  --depth-scene-aspect-ratio: 3 / 1;
  --depth-scene-min-block-size: 8rem;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__word {
  position: absolute;
  font-family: var(--font-display);
  font-size: var(--text-step-2);
  line-height: var(--line-heading);
  color: var(--color-text-secondary);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  /* Background texture only: stays far below body-text emphasis. */
  opacity: 0.12;
  transform-style: preserve-3d;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"])
  :where(.depth-scene__layer, [data-depth-layer]) .word-drift__word {
  animation-name: depth-word-drift;
  animation-timing-function: var(--ease-standard);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Near words: larger, crisper, closer Z */
:where(.depth-scene--words, [data-depth-scene="word-drift"])
  .word-drift__word--near {
  font-size: var(--text-step-3);
  opacity: 0.16;
  transform: translateZ(8px);
}

/* Far words: smaller, softly blurred, further Z */
:where(.depth-scene--words, [data-depth-scene="word-drift"])
  .word-drift__word--far {
  font-size: var(--text-step-1);
  opacity: 0.08;
  filter: blur(1px);
  transform: translateZ(-8px);
}

/* Placement slots */
:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__slot-1 {
  inset-block-start: 12%;
  inset-inline-start: 4%;
  animation-duration: 16s;
  animation-delay: 0s;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__slot-2 {
  inset-block-start: 58%;
  inset-inline-start: 14%;
  animation-duration: 22s;
  animation-delay: -3s;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__slot-3 {
  inset-block-start: 30%;
  inset-inline-start: 38%;
  animation-duration: 19s;
  animation-delay: -7s;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__slot-4 {
  inset-block-start: 70%;
  inset-inline-end: 24%;
  animation-duration: 24s;
  animation-delay: -11s;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__slot-5 {
  inset-block-start: 18%;
  inset-inline-end: 8%;
  animation-duration: 17s;
  animation-delay: -5s;
}

:where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__slot-6 {
  inset-block-start: 46%;
  inset-inline-end: 2%;
  animation-duration: 21s;
  animation-delay: -14s;
}

/* Ambient drift stays well inside the shared 12px translation budget. */
@keyframes depth-word-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(
      calc(var(--depth-scene-max-translation) * 0.4),
      calc(0px - var(--depth-scene-max-translation) * 0.5),
      0
    );
  }
}


/* ── Static fallback: presentable book without animation ────────────────── */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__shadow {
  position: absolute;
  inset-block-end: 8%;
  inset-inline: 18%;
  block-size: 10%;
  border-radius: var(--radius-pill);
  background: var(--motif-shadow);
  filter: blur(var(--space-4));
  opacity: 0.7;
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__back {
  position: absolute;
  inset-block: 13%;
  inset-inline-start: 20%;
  inset-inline-end: 17%;
  background: linear-gradient(
    145deg,
    var(--color-brand-ink-700) 0%,
    var(--color-brand-ink-900) 100%
  );
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__pages {
  position: absolute;
  inset-block: 14%;
  inset-inline-start: 19%;
  inset-inline-end: 18%;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--motif-surface) 0px,
      var(--motif-surface) 2px,
      var(--motif-diffuse) 2px,
      var(--motif-diffuse) 3px
    );
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-inset);
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__edge {
  position: absolute;
  inset-block: 14%;
  inset-inline-end: 17.5%;
  inline-size: 5px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: linear-gradient(
    to bottom,
    var(--color-brand-gold-400) 0%,
    var(--motif-edge) 50%,
    var(--color-brand-gold-400) 100%
  );
  box-shadow: inset 0 0 2px var(--motif-highlight);
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__cover {
  position: absolute;
  inset-block: 12%;
  inset-inline: 18%;
  background: linear-gradient(
    155deg,
    var(--color-brand-ink-900) 0%,
    var(--color-brand-ink-950) 60%,
    var(--color-brand-ink-900) 100%
  );
  border-radius: var(--radius-control);
  box-shadow:
    var(--shadow-floating),
    inset 0 1px 0 var(--motif-highlight);
}

/* Static embossed panel */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__cover::before {
  content: "";
  position: absolute;
  inset-block: 22%;
  inset-inline: 18%;
  border: 1px solid var(--color-brand-gold-400);
  border-radius: 2px;
  opacity: 0.6;
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__cover::after {
  content: "";
  position: absolute;
  inset-block-start: 36%;
  inset-block-end: 50%;
  inset-inline: 26%;
  border-block-start: 1px solid var(--color-brand-gold-400);
  border-block-end: 1px solid var(--color-brand-gold-400);
  opacity: 0.45;
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__spine {
  position: absolute;
  inset-block: 12%;
  inset-inline-start: 18%;
  inline-size: 12px;
  background: linear-gradient(
    to right,
    var(--color-brand-ink-950) 0%,
    var(--color-brand-ink-700) 40%,
    var(--color-brand-ink-900) 100%
  );
  border-start-start-radius: var(--radius-control);
  border-end-start-radius: var(--radius-control);
  box-shadow: inset -2px 0 4px var(--motif-shadow);
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__spine::before {
  content: "";
  position: absolute;
  inset-inline: 3px;
  inset-block-start: 15%;
  block-size: 1px;
  background: var(--color-brand-gold-400);
  opacity: 0.5;
  box-shadow: 0 calc(var(--space-7) * 2.5) 0 var(--color-brand-gold-400);
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__sheen {
  position: absolute;
  inset: 12% 18%;
  border-radius: var(--radius-control);
  background: linear-gradient(
    125deg,
    var(--motif-highlight) 0%,
    transparent 35%
  );
  opacity: var(--motif-reflection-opacity);
}

/* ── Degradation ────────────────────────────────────────────────────────── */

/* Narrow viewports simplify all three scenes: drop far layers, stop animations. */
@media (max-width: 40rem) {
  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__back,
  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__sheen,
  :where(.depth-scene--pages, [data-depth-scene="chapter-pages"]) .page-sheet--far,
  :where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__word--far {
    display: none !important;
  }

  :where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__word {
    animation-name: none !important;
  }

  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static,
  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__cover {
    animation: none !important;
  }
}

/* Reduced motion and save-data remove every ambient loop; shapes remain static. */
@media (prefers-reduced-motion: reduce) {
  :where(.depth-scene--words, [data-depth-scene="word-drift"]) .word-drift__word {
    animation-name: none !important;
    transform: none !important;
  }

  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static,
  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__cover {
    animation: none !important;
  }

  :where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__sheen {
    opacity: 0 !important;
  }
}

:where(
  :is(.depth-scene, [data-depth-scene]):is(
    [data-reduced-motion="true"],
    [data-save-data="true"],
    [data-scene-preference="reduced-motion"],
    [data-scene-preference="save-data"]
  ),
  [data-reduced-motion="true"] :is(.depth-scene, [data-depth-scene]),
  [data-save-data="true"] :is(.depth-scene, [data-depth-scene]),
  .reduce-motion :is(.depth-scene, [data-depth-scene]),
  .save-data :is(.depth-scene, [data-depth-scene])
) .word-drift__word {
  animation-name: none !important;
  transform: none !important;
}

:where(
  :is(.depth-scene, [data-depth-scene]):is(
    [data-reduced-motion="true"],
    [data-save-data="true"],
    [data-scene-preference="reduced-motion"],
    [data-scene-preference="save-data"]
  ),
  [data-reduced-motion="true"] :is(.depth-scene, [data-depth-scene]),
  [data-save-data="true"] :is(.depth-scene, [data-depth-scene]),
  .reduce-motion :is(.depth-scene, [data-depth-scene]),
  .save-data :is(.depth-scene, [data-depth-scene])
) :where(.book-static, .book__cover) {
  animation: none !important;
}

:where(
  :is(.depth-scene, [data-depth-scene]):is(
    [data-reduced-motion="true"],
    [data-save-data="true"],
    [data-scene-preference="reduced-motion"],
    [data-scene-preference="save-data"]
  ),
  [data-reduced-motion="true"] :is(.depth-scene, [data-depth-scene]),
  [data-save-data="true"] :is(.depth-scene, [data-depth-scene]),
  .reduce-motion :is(.depth-scene, [data-depth-scene]),
  .save-data :is(.depth-scene, [data-depth-scene])
) .book__sheen {
  opacity: 0 !important;
}


/* ── Composition fix: the cover must never eclipse the page block ─────────
   At rest there is no rotation, so the book parts stack flat and the cover,
   painting last, completely covered the pages. Only the gilded sliver at
   17.5% remained visible, which made the book read as a wireframe outline.
   Pulling the cover in on the fore-edge side keeps the cream page block and
   its gilding visible in every state, including the static fallback that
   reduced-motion, save-data, and failed-enhancement users receive.
   ---------------------------------------------------------------------- */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__back,
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__back {
  inset-block: 12%;
  inset-inline-start: 17%;
  inset-inline-end: 15%;
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__pages,
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__pages {
  inset-block: 14%;
  inset-inline-start: 20%;
  inset-inline-end: 15.5%;
}

:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__edge,
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__edge {
  inset-block: 14%;
  inset-inline-end: 15%;
  inline-size: var(--space-2);
}

/* The cover stops short of the fore edge, and a gilt hairline separates the
   dark leather from the equally dark hero behind it. */
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book__cover,
:where(.depth-scene--book, [data-depth-scene="hero-book"]) .book-static .book__cover {
  inset-block: 11%;
  inset-inline-start: 16%;
  inset-inline-end: 23%;
  border: var(--border-width) solid var(--motif-edge);
  box-shadow: var(--shadow-raised);
}