/* v10.0.0 - Desktop catalog fullscreen mode */
@media (min-width: 769px){
  :root{--op-fullscreen-gold:#d6a928;--op-fullscreen-white:#fff5d7;--op-fullscreen-black:#050403;}
  .nav .op-fullscreen-toggle{
    border:1px solid rgba(214,169,40,.42)!important;
    border-radius:12px;
    padding:10px 13px;
    background:rgba(214,169,40,.10)!important;
    color:var(--op-fullscreen-white)!important;
    transition:transform .24s ease, background .24s ease, box-shadow .24s ease, border-color .24s ease;
  }
  .nav .op-fullscreen-toggle:hover{background:rgba(214,169,40,.22)!important;border-color:rgba(214,169,40,.72)!important;box-shadow:0 10px 28px rgba(0,0,0,.25);transform:translateY(-1px);}

  body.op-catalog-fullscreen{
    overflow:hidden!important;
    background:var(--op-fullscreen-black)!important;
  }
  body.op-catalog-fullscreen::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:9988;
    pointer-events:none;
    background:
      radial-gradient(circle at 50% 42%, rgba(214,169,40,.15), transparent 38%),
      radial-gradient(circle at 50% 100%, rgba(255,255,255,.05), transparent 34%),
      linear-gradient(180deg,#090604 0%,#020202 100%);
    opacity:1;
    animation:opFsBackdrop .56s cubic-bezier(.16,1,.3,1) both;
  }
  body.op-catalog-fullscreen .topbar{
    transform:translateY(-120%);
    opacity:0;
    filter:blur(8px);
    pointer-events:none;
    transition:transform .46s cubic-bezier(.16,1,.3,1), opacity .32s ease, filter .38s ease;
  }
  body.op-catalog-fullscreen .controls{
    transform:translateY(130%);
    opacity:0;
    filter:blur(8px);
    pointer-events:none;
    transition:transform .46s cubic-bezier(.16,1,.3,1), opacity .32s ease, filter .38s ease;
  }
  body.op-catalog-fullscreen .stage{
    position:fixed!important;
    inset:0!important;
    z-index:9990!important;
    min-height:100vh!important;
    width:100vw!important;
    padding:28px 54px!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:
      radial-gradient(ellipse at center, rgba(214,169,40,.11), transparent 48%),
      linear-gradient(180deg, rgba(10,7,4,.98), rgba(0,0,0,.99))!important;
    animation:opFsStageIn .56s cubic-bezier(.16,1,.3,1) both;
  }
  body.op-catalog-fullscreen .magazine-shell{
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    display:grid!important;
    place-items:center!important;
    transform-origin:center center;
    animation:opFsBookIn .64s cubic-bezier(.16,1,.3,1) both;
  }
  body.op-catalog-fullscreen .book-wrap{
    width:min(calc(100vw - 168px), calc((100vh - 76px) * 1.72), 1720px)!important;
    max-width:calc(100vw - 168px)!important;
    min-width:min(760px, calc(100vw - 168px))!important;
    aspect-ratio:1.72!important;
    margin:auto!important;
  }
  body.op-catalog-fullscreen .book{
    filter:drop-shadow(0 56px 44px rgba(0,0,0,.82))!important;
    transform:rotateX(2.2deg) scale(1.025)!important;
    transition:transform .56s cubic-bezier(.16,1,.3,1), filter .56s ease!important;
  }
  body.op-catalog-fullscreen .tabs.left{left:-64px!important;}
  body.op-catalog-fullscreen .tabs.right{right:-64px!important;}
  body.op-catalog-fullscreen .stack-left{left:-34px!important;}
  body.op-catalog-fullscreen .stack-right{right:-34px!important;}
  body.op-catalog-fullscreen .op-fs-exit{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .op-fs-exit{
    position:fixed;
    top:18px;
    right:18px;
    z-index:10020;
    border:1px solid rgba(214,169,40,.48);
    border-radius:999px;
    padding:10px 14px;
    background:rgba(8,6,4,.72);
    color:#fff5d7;
    font-weight:900;
    font-size:13px;
    letter-spacing:.02em;
    cursor:pointer;
    box-shadow:0 16px 42px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .28s ease, transform .32s cubic-bezier(.16,1,.3,1), background .2s ease;
  }
  .op-fs-exit:hover{background:rgba(214,169,40,.18);}

  @keyframes opFsStageIn{from{opacity:.35;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
  @keyframes opFsBookIn{from{opacity:.58;transform:translateY(18px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes opFsBackdrop{from{opacity:0}to{opacity:1}}
}