/* =========================================================================
   mb-page-flip.css — newspaper page-turn animation for mtblotter.com
   Wired in public_page_base.html. Activates only inside the newspaper
   broadsheet treatment (?newspaper != 0). Legacy chrome mode: no animation.

   The effect:
     - On nav link click inside the broadsheet, the current page content
       does a short 3D "page turn" (right edge lifts, paper curls, fades)
       then the browser follows the link normally.
     - Scaled-back fallback for touch / reduced-motion users.
   ========================================================================= */

/* Only active when the newspaper treatment is on */
body.mb-newspaper-body.ng-page-flip-enabled {

  /* Give the paper a 3D context so children can transform in Z */
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* The page-turn layer: absolutely-positioned sheet that mirrors the
   article's current content at the moment of transition. Hidden by
   default; shown only during a flip. */
.ng-page-flip-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  border-radius: 2px;
  /* start flat and invisible */
  transform: rotateY(0deg) translateZ(0);
  opacity: 0;
  transition: none;
  /* paper texture echo so the sheet looks like the broadsheet */
  background:
    repeating-linear-gradient(0deg,
      rgba(40, 28, 12, 0.02) 0px,
      rgba(40, 28, 12, 0.02) 1px,
      transparent 1px,
      transparent 2px),
    radial-gradient(ellipse at top, #fbf8f0 0%, #f5efe1 70%, #ece4d0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 18px 48px -12px rgba(0, 0, 0, 0.45);
}

/* Visible, flip-ready state: start to the right of the viewport,
   fully opaque, facing the reader */
.ng-page-flip-sheet.ng-flip-enter {
  opacity: 1;
  transform: rotateY(-2deg) translateX(0);
  pointer-events: none;
}

/* The actual "turn": right edge lifts and the page curls away.
   We animate rotateY + a slight translateY to feel like a paper flip,
   not a digital wipe. */
.ng-page-flip-sheet.ng-flip-active {
  pointer-events: none;
  transform: rotateY(-110deg) translateY(18px) translateZ(-40px);
  opacity: 0;
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 480ms ease-in;
  /* small crease shadow on the curling edge */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 18px 48px -12px rgba(0, 0, 0, 0.45),
    -10px 8px 18px -8px rgba(0, 0, 0, 0.4);
}

/* Reverse flip is used only for back-nav edge cases; keep the same
   timing so the motion is consistent. */
.ng-page-flip-sheet.ng-flip-active-reverse {
  transform: rotateY(110deg) translateY(18px) translateZ(-40px);
  opacity: 0;
  transition:
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 480ms ease-in;
}

/* Fold shadow inside the curling page — a thin dark band on the
   "underside" of the turning page */
.ng-page-flip-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%,
    rgba(20, 14, 4, 0.18) 0%,
    transparent 60%);
  opacity: 0;
  transition: opacity 160ms linear;
}
.ng-page-flip-sheet.ng-flip-active::after {
  opacity: 1;
}

/* ---- Reduced-motion / touch-friendly modes ---- */
@media (prefers-reduced-motion: reduce) {
  body.ng-page-flip-enabled .ng-page-flip-sheet {
    display: none !important;
  }
}

/* Disable the flip on touch-primary devices where a tap already feels
   fast; the animation would just slow down the tap-to-page experience. */
@media (hover: none) and (pointer: coarse) {
  body.ng-page-flip-enabled .ng-page-flip-sheet {
    display: none !important;
  }
}

/* ---- Desktop gentle mode: a softer fade-plus-lift instead of a true
   3D page turn when the user has told us they want calmer motion. ---- */
body.ng-page-flip-enabled.ng-page-flip-calm .ng-page-flip-sheet.ng-flip-active {
  transform: translateY(10px) translateZ(0);
  opacity: 0;
  transition:
    transform 340ms ease-in,
    opacity 280ms ease-in;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}