/* ==========================================================================
   TOME COVER — Hinged 3D cover overlay for the welcome-to-tier2 transition
   --------------------------------------------------------------------------
   Ported from samples/book-hinge.html. All styles are gated behind:
     html[data-tome-cover="on"]  (feature flag — see inline script in head)
     @media (min-width: 768px)   (desktop only; mobile uses display:contents
                                  on wrappers and has no positioning context)

   The cover is a decorative overlay that sits inside .book-left-page and
   covers the left-page container. It is hidden by default (display:none)
   and only revealed during the tier1→tier2 transition in app.js. When
   rotated -180° around its left edge, it swings into the empty viewport
   space to the left of the book.

   Accessibility: the cover is aria-hidden; the "Start a New Adventure"
   button remains the single semantic control. Reduced-motion disables the
   rotation — app.js short-circuits to instant tier2 reveal in that case.
   ========================================================================== */

/* Always hide the cover scene — it is only revealed via JS during the
   tier1→tier2 transition. Without this, the raw title text renders in the
   top-left corner on mobile and whenever the feature flag is absent. */
.tome-cover-scene {
  display: none;
}

@media (min-width: 768px) {

  html[data-tome-cover="on"] .tome-cover-scene {
    /* Absolute overlay of the left-page container. .book-left-page is
       position:relative on desktop (see book-layout.css). */
    position: absolute;
    inset: 0;
    z-index: 60;            /* above welcome-screen content, below modals */
    pointer-events: none;   /* decorative — clicks pass through */
    display: none;          /* revealed by .is-armed during transition */
    transform-style: preserve-3d;
  }

  html[data-tome-cover="on"] .tome-cover-scene.is-armed {
    display: block;
  }

  /* Cover tokens — derived from active theme so the cover responds to theme changes.
     --tome-gold  : gilt frame and title colour (from --gold)
     --tome-glow  : sigil/aura tint (from --spell-cast / arcane accent)
     --tome-leather-bg : leather face gradient (from --bg-secondary / --bg-primary)
  */
  html[data-tome-cover="on"] .tome-cover-scene {
    --tome-gold-color:        var(--gold, #d4a017);
    --tome-glow-color:        var(--spell-cast, #c084fc);
    --tome-leather-hi-color:  var(--bg-secondary, #1a1f2e);
    --tome-leather-lo-color:  var(--bg-primary, #0f1419);
    --tome-turn-duration: 1100ms;
    --tome-turn-ease: cubic-bezier(0.7, 0, 0.3, 1);
  }

  /* The single 3D element. Pivots around its left edge (the spine). */
  html[data-tome-cover="on"] .tome-cover {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform var(--tome-turn-duration) var(--tome-turn-ease),
                filter    var(--tome-turn-duration) var(--tome-turn-ease);
    will-change: transform;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.5));
    border-radius: 24px;
  }

  /* Two stacked faces on the same pivot. */
  html[data-tome-cover="on"] .tome-cover__face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
  }

  /* Front — leather with gilt frame, sigil, and spine ridge. */
  html[data-tome-cover="on"] .tome-cover__front {
    background:
      radial-gradient(
        ellipse 38% 30% at 50% 48%,
        color-mix(in srgb, var(--tome-glow-color) 22%, transparent) 0%,
        color-mix(in srgb, var(--tome-glow-color) 6%, transparent) 45%,
        transparent 75%
      ),
      repeating-linear-gradient(
        118deg,
        rgba(0, 0, 0, 0.18) 0 1px,
        transparent 1px 3px
      ),
      repeating-linear-gradient(
        62deg,
        rgba(0, 0, 0, 0.12) 0 1px,
        transparent 1px 4px
      ),
      linear-gradient(
        135deg,
        var(--tome-leather-hi-color) 0%,
        var(--tome-leather-lo-color) 100%
      );
    box-shadow:
      inset 14px 0 24px -8px rgba(0, 0, 0, 0.7),
      inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  }

  /* Gilt frame */
  html[data-tome-cover="on"] .tome-cover__front::before {
    content: '';
    position: absolute;
    inset: 20px 20px 20px 28px;
    border: 1px solid color-mix(in srgb, var(--tome-gold-color) 55%, transparent);
    border-radius: 4px;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--tome-gold-color) 12%, transparent),
      inset 0 0 22px color-mix(in srgb, var(--tome-gold-color) 8%, transparent);
    pointer-events: none;
  }

  /* Spine ridge down the left edge */
  html[data-tome-cover="on"] .tome-cover__front::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 32px;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.25) 50%,
      rgba(255, 255, 255, 0.04) 80%,
      rgba(0, 0, 0, 0.35) 100%
    );
    pointer-events: none;
  }

  html[data-tome-cover="on"] .tome-cover__title {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 40px;
    text-align: center;
    color: var(--tome-gold-color);
    font-family: 'Georgia', serif;
    text-shadow:
      0 0 12px rgba(var(--tome-glow), 0.35),
      0 1px 0 rgba(0, 0, 0, 0.8);
    pointer-events: none;
  }
  html[data-tome-cover="on"] .tome-cover__title .sigil {
    font-size: 54px;
    line-height: 1;
  }
  html[data-tome-cover="on"] .tome-cover__title .title {
    font-size: 28px;
    letter-spacing: 0.18em;
    font-weight: 300;
  }
  html[data-tome-cover="on"] .tome-cover__title .subtitle-text {
    font-size: 12px;
    letter-spacing: 0.3em;
    color: color-mix(in srgb, var(--tome-gold-color) 70%, transparent);
    text-transform: uppercase;
  }

  /* Back face — pre-rotated 180° so it reads correctly at the end of the
     swing. Parchment palette matches the page background so there is no
     visual seam. Kept minimal because the cover is hidden again once the
     animation ends; the container's tier2 content is what the user sees. */
  html[data-tome-cover="on"] .tome-cover__back {
    transform: rotateY(180deg);
    background:
      linear-gradient(
        180deg,
        rgba(245, 235, 215, 0.96) 0%,
        rgba(225, 210, 180, 0.93) 100%
      );
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
  }

  /* Open state — rotate -180° around the left edge. */
  html[data-tome-cover="on"] .tome-cover-scene.is-open .tome-cover {
    transform: rotateY(-180deg);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
  }

  /* Square off the right-side corners of the left page when the book is
     open — the cover has swung away, so the rounded corners would be
     visible against the spine/right page. */
  html[data-tome-cover="on"] .book-left-page:has(.tome-cover-scene.is-open) {
    border-radius: 24px 0 0 24px;
  }

  /* Reduced motion: no rotation. app.js still short-circuits the JS path
     to skip the cover entirely in this case, but this is a belt-and-braces
     guard in case the element is ever rendered statically. */
  @media (prefers-reduced-motion: reduce) {
    html[data-tome-cover="on"] .tome-cover {
      transition: none;
    }
  }
}