/* v12.10.558 — navigation cue stays within the book, never the browser stage.
 * It is intentionally isolated from cards, page dimensions and typography. */

/* Desktop category links load an isolated category URL, so Turn.js cannot
 * retain a physical sheet between documents. Keep the short tab cue on the
 * book itself; native Turn.js still owns in-catalog page turns. */
body.op-nav-cue-leave .stage,
body.op-nav-cue-enter .stage{opacity:1!important;transform:none!important;transition:none!important;animation:none!important;}
/* A category is an isolated URL. Do not translate or fade the whole book while
 * the new document starts; the leaf below is the only departure animation. */
body.op-nav-cue-leave .magazine-shell .book-wrap,
body.op-nav-cue-enter .magazine-shell .book-wrap,
body.op-nav-cue-leave #op-turn-integrated-book,
body.op-nav-cue-enter #op-turn-integrated-book{transform:none!important;transition:none!important;animation:none!important;}
html body .magazine-shell .tabs .tab.op-nav-cue-selected{
  color:#fff!important;
  border-color:rgba(244,200,64,.98)!important;
  background:linear-gradient(145deg,#263442 0%,#141d27 52%,#090e14 100%)!important;
  box-shadow:inset 0 1px rgba(255,244,188,.23),inset 0 0 0 1px rgba(0,0,0,.45),0 0 0 3px rgba(224,178,53,.22),0 10px 20px rgba(0,0,0,.28)!important;
}
/* The transient leaf lives inside .book-wrap, above the current paper only.
 * It does not touch .stage, header, controls or the browser viewport. */
.op-nav-cue-leaf{
  position:absolute;top:0;bottom:0;width:50%;z-index:180;pointer-events:none;
  display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:linear-gradient(100deg,rgba(255,247,207,.90),rgba(225,196,127,.92) 46%,rgba(122,82,29,.62));
  box-shadow:0 12px 26px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,246,196,.42);
}
.op-nav-cue-leaf:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(73,47,15,.04) 0 1px,transparent 1px 5px),linear-gradient(90deg,rgba(255,255,255,.22),transparent 45%);}
.op-nav-cue-leaf.is-next{left:50%;transform-origin:left center;animation:op-nav-cue-leaf-next 200ms cubic-bezier(.2,.76,.28,1) both;}
.op-nav-cue-leaf.is-back{left:0;transform-origin:right center;animation:op-nav-cue-leaf-back 200ms cubic-bezier(.2,.76,.28,1) both;}
@keyframes op-nav-cue-leaf-next{from{opacity:.84;transform:perspective(2100px) rotateY(0)}to{opacity:0;transform:perspective(2100px) rotateY(-88deg)}}
@keyframes op-nav-cue-leaf-back{from{opacity:.84;transform:perspective(2100px) rotateY(0)}to{opacity:0;transform:perspective(2100px) rotateY(88deg)}}
body.op-nav-cue-page-pulse .controls .ctrl-next,
body.op-nav-cue-page-pulse.is-back .controls .ctrl-btn:first-child{
  animation:op-nav-cue-control-pulse 220ms ease-out both;
}
@keyframes op-nav-cue-control-pulse{
  0%{box-shadow:inset 0 0 0 1px rgba(255,220,98,.2)}
  45%{box-shadow:inset 0 0 0 1px rgba(255,237,156,.9),0 0 0 4px rgba(224,177,42,.12)}
  100%{box-shadow:inset 0 0 0 1px rgba(255,220,98,.2)}
}

/* Mobile/tablet pages are separate documents. Waiting for a leave animation
 * made the reader feel blocked, so navigation is immediate. Only the incoming
 * paper gets a light, short lateral settle once it is ready. */
body:not(.m2-editor).m2-nav-cue-enter .m2-main{
  animation:m2-nav-cue-sheet-in 175ms cubic-bezier(.18,.78,.3,1) both;
  will-change:transform;
}
/* Pager destinations receive a short paper settle, not a screen fade or
 * a blocking leave transition.  Animating the paper rather than .m2-main
 * keeps the sticky header and fixed pager stable on iOS. */
body:not(.m2-editor).m2-nav-cue-page-enter .m2-book{
  position:relative;
  transform-origin:left center;
  animation:m2-nav-cue-page-fold-next 310ms cubic-bezier(.2,.82,.28,1) both;
  will-change:transform;
}
body:not(.m2-editor).m2-nav-cue-page-enter.is-back .m2-book{
  transform-origin:right center;
  animation-name:m2-nav-cue-page-fold-back;
}
body:not(.m2-editor).m2-nav-cue-page-pulse .m2-pager-next,
body:not(.m2-editor).m2-nav-cue-page-pulse.is-back .m2-pager-prev{
  animation:m2-nav-cue-pager-pulse 180ms ease-out both;
}
@keyframes m2-nav-cue-sheet-in{
  from{transform:translate3d(var(--m2-nav-cue-enter-x,0),0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes m2-nav-cue-page-fold-next{
  from{transform:perspective(1250px) translate3d(17px,0,0) rotateY(-1.7deg)}
  to{transform:perspective(1250px) translate3d(0,0,0) rotateY(0)}
}
@keyframes m2-nav-cue-page-fold-back{
  from{transform:perspective(1250px) translate3d(-17px,0,0) rotateY(1.7deg)}
  to{transform:perspective(1250px) translate3d(0,0,0) rotateY(0)}
}
/* A small, paper-coloured leading edge makes the incoming mobile page turn
 * legible without covering the reader or dimming the viewport. */
.m2-nav-cue-page-edge{position:absolute;top:0;width:44%;height:86px;z-index:35;pointer-events:none;display:block;opacity:.72;background:linear-gradient(90deg,rgba(255,250,218,.86),rgba(220,184,105,.5) 62%,rgba(91,59,19,.03));box-shadow:0 7px 16px rgba(31,18,5,.16);}
.m2-nav-cue-page-edge.is-next{right:0;transform-origin:right center;animation:m2-nav-cue-page-edge-next 300ms cubic-bezier(.2,.82,.28,1) both;}
.m2-nav-cue-page-edge.is-back{left:0;transform-origin:left center;animation:m2-nav-cue-page-edge-back 300ms cubic-bezier(.2,.82,.28,1) both;}
@keyframes m2-nav-cue-page-edge-next{from{transform:perspective(900px) rotateY(-3deg) translateX(0)}to{transform:perspective(900px) rotateY(-58deg) translateX(42px);opacity:0}}
@keyframes m2-nav-cue-page-edge-back{from{transform:perspective(900px) rotateY(3deg) translateX(0)}to{transform:perspective(900px) rotateY(58deg) translateX(-42px);opacity:0}}
/* Appears immediately after tapping next/previous and stays only while the
 * browser fetches the destination. It is deliberately tiny and does not
 * introduce a navigation delay. */
.m2-nav-cue-loading{position:fixed;left:50%;bottom:76px;width:82px;height:3px;z-index:200;overflow:hidden;border-radius:999px;background:rgba(255,244,179,.24);transform:translateX(-50%);box-shadow:0 1px 8px rgba(0,0,0,.26);}
.m2-nav-cue-loading:after{content:"";display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b98316,#ffe36a,#fff3b3);animation:m2-nav-cue-loading-slide 580ms ease-in-out infinite;}
@keyframes m2-nav-cue-loading-slide{from{transform:translateX(-110%)}to{transform:translateX(240%)}}
@keyframes m2-nav-cue-pager-pulse{
  0%{box-shadow:inset 0 1px rgba(255,255,255,.08)!important}
  45%{box-shadow:inset 0 0 0 1px rgba(255,239,159,.92),0 0 0 3px rgba(231,188,45,.14)!important}
  100%{box-shadow:inset 0 1px rgba(255,255,255,.08)!important}
}
@media (prefers-reduced-motion:reduce){
  body.op-nav-cue-leave .magazine-shell .book-wrap,
  body.op-nav-cue-enter .magazine-shell .book-wrap,
  body.op-nav-cue-leave #op-turn-integrated-book,
  body.op-nav-cue-enter #op-turn-integrated-book,
  .op-nav-cue-leaf,
  body:not(.m2-editor).m2-nav-cue-enter .m2-main,
  body:not(.m2-editor).m2-nav-cue-page-enter .m2-book,
  .m2-nav-cue-page-edge,
  .m2-nav-cue-loading,
  body.op-nav-cue-page-pulse .controls .ctrl-next,
  body.op-nav-cue-page-pulse.is-back .controls .ctrl-btn:first-child,
  body:not(.m2-editor).m2-nav-cue-page-pulse .m2-pager-next,
  body:not(.m2-editor).m2-nav-cue-page-pulse.is-back .m2-pager-prev{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
  }
}