/* Hover and scroll motion for the 03B top page. Everything here adds to the adopted speech-bubble effects
   and leaves them as they are. All of it runs only for a mouse (hover:hover) and when the reader has not asked
   for less motion; the 「動きを止める」 button (body.motion-off) turns it off. Scroll entrances need body.ozx-motion,
   which wp-motion.js sets, so without the script nothing is hidden. */

/* Single-line titles that run like a ticker on hover (wp-motion.js sets the distance). */
.ozx-mq-inner{white-space:nowrap}
.ozx-mq.is-running{text-overflow:clip!important}
.ozx-mq.is-running .ozx-mq-inner{display:inline-block;animation:ozx-mq var(--ozx-mq-time,4s) ease-in-out infinite}
@keyframes ozx-mq{0%,12%{transform:translateX(0)}70%,82%{transform:translateX(var(--ozx-mq-shift,0))}100%{transform:translateX(0)}}

/* Marker pen under a title. */
.ozx-hl{background:linear-gradient(transparent 58%,#daee49 58%,#daee49 92%,transparent 92%) no-repeat 0 0/0 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}

/* Thin reading bar at the top of the screen. */
.ozx-progress{position:fixed;left:0;top:0;z-index:99990;width:100%;height:4px;background:#daee49;border-bottom:1px solid #171a17;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
body.motion-off .ozx-progress{display:none}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Panels 02-07: the panel lifts off the page, the picture pushes in, the caption turns to the logo color. */
  body:not(.motion-off) #stories .seven-grid .story{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)}
  body:not(.motion-off) #stories .seven-grid .story:hover{transform:translate(-5px,-5px);box-shadow:8px 8px 0 #171a17;z-index:6}
  body:not(.motion-off) #stories .seven-grid .comic-picture>img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
  body:not(.motion-off) #stories .seven-grid .story:hover .comic-picture>img{transform:scale(1.1)!important;filter:saturate(1.15) contrast(1.04)}
  body:not(.motion-off) #stories .seven-grid .comic-cell-2:hover .comic-picture>img{transform:scale(1.18)!important}
  body:not(.motion-off) #stories .seven-grid .story-copy{transition:background-color .35s ease}
  body:not(.motion-off) #stories .seven-grid .story:hover .story-copy{background:#eef5c2}
  body:not(.motion-off) #stories .seven-grid .public-card-link{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  body:not(.motion-off) #stories .seven-grid .story:hover .public-card-link{transform:translateX(8px)}

  /* Panel 01: the moving cover leans in a little. */
  body:not(.motion-off) #stories .seven-cover .seven-cover-art{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  body:not(.motion-off) #stories .seven-cover:hover .seven-cover-art{transform:scale(1.045)}

  /* 01 cover lines 「今週よく読まれている記事」: the row slides, the number jumps, the title runs. */
  body:not(.motion-off) #stories .seven-cover .cover-lines li{transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease}
  body:not(.motion-off) #stories .seven-cover .cover-lines li:hover{transform:translateX(6px);background:#f1f6d0}
  body:not(.motion-off) #stories .seven-cover .cover-lines li:hover::before{animation:ozx-jump .5s cubic-bezier(.3,1.6,.5,1) 1}
  body:not(.motion-off) #stories .seven-cover .cover-lines button:hover{text-decoration:none}

  /* Weekly ranking: picture zooms, number spins, title gets a marker line, subtitle runs like a ticker. */
  .ozx-ranking a{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  body:not(.motion-off) .ozx-ranking li:not(.rank-1) a:hover{transform:translateX(8px)}
  body:not(.motion-off) .ozx-ranking li.rank-1 a:hover{transform:translateY(-4px)}
  body:not(.motion-off) .ozx-ranking .ozx-rank-pic{transition:box-shadow .35s ease}
  body:not(.motion-off) .ozx-ranking a:hover .ozx-rank-pic{box-shadow:4px 4px 0 #171a17}
  body:not(.motion-off) .ozx-ranking .ozx-rank-pic img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
  body:not(.motion-off) .ozx-ranking a:hover .ozx-rank-pic img{transform:scale(1.14);filter:saturate(1.15)}
  body:not(.motion-off) .ozx-ranking a:hover .ozx-rank-no{animation:ozx-spin .6s cubic-bezier(.3,1.4,.5,1) 1}
  body:not(.motion-off) .ozx-ranking a:hover strong,body:not(.motion-off) .ozx-ranking a:focus-visible strong{text-decoration:none}
  body:not(.motion-off) .ozx-ranking a:hover .ozx-hl,body:not(.motion-off) .ozx-ranking a:focus-visible .ozx-hl{background-size:100% 100%}
  body:not(.motion-off) .ozx-ranking em.ozx-mq{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-line-clamp:unset}

  /* The site's floating 「今週のランキング」 panel. */
  #ozxlog-float-wrap #ozxlog-float-btn{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
  body:not(.motion-off) #ozxlog-float-wrap #ozxlog-float-btn:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:6px 6px 0 #171a17}
  body:not(.motion-off) #ozxlog-float-wrap #ozxlog-float-items a{transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,box-shadow .3s ease}
  body:not(.motion-off) #ozxlog-float-wrap #ozxlog-float-items a:hover{transform:translateX(5px);box-shadow:inset 5px 0 0 #daee49}
  body:not(.motion-off) #ozxlog-float-wrap .ozxlog-rk-thumb{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  body:not(.motion-off) #ozxlog-float-wrap #ozxlog-float-items a:hover .ozxlog-rk-thumb{transform:scale(1.12) rotate(-2deg)}
  body:not(.motion-off) #ozxlog-float-wrap #ozxlog-float-items a:hover .ozxlog-rk-num{display:inline-block;animation:ozx-jump .5s cubic-bezier(.3,1.6,.5,1) 1}

  /* Feature cards, the bookshelf and the footer links. */
  body:not(.motion-off) .comic-feature .feature-cards button{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  body:not(.motion-off) .comic-feature .feature-cards button:hover{transform:translateY(-6px) rotate(-.6deg)}
  body:not(.motion-off) .comic-feature .feature-cards button img{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .26s ease}
  body:not(.motion-off) .comic-feature .feature-cards button:hover img{transform:scale(1.1)}
  body:not(.motion-off) .shelf-book-button .shelf-book-cover{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  body:not(.motion-off) .shelf-book-button:hover .shelf-book-cover{transform:translateY(-10px) rotate(-2.5deg) scale(1.04)!important;box-shadow:6px 10px 0 #171a1733}
  body:not(.motion-off) .ozx-footer-links a{display:inline-block;transition:transform .25s ease}
  body:not(.motion-off) .ozx-footer-links a:hover{transform:translateY(-3px)}
}
@keyframes ozx-jump{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-7px) scale(1.25)}100%{transform:translateY(0) scale(1)}}
@keyframes ozx-spin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(380deg) scale(1.18)}100%{transform:rotate(360deg) scale(1)}}

/* Scroll entrances: the seven panels drop in one by one when the page opens, and the sections below rise in
   as they come into view. */
@keyframes ozx-panel-in{from{opacity:0;transform:translateY(26px) scale(.965)}}
body.ozx-motion:not(.motion-off) #stories .seven-grid>*{animation:ozx-panel-in .6s cubic-bezier(.2,.7,.2,1) backwards}
body.ozx-motion:not(.motion-off) #stories .seven-grid>:nth-child(2){animation-delay:.08s}
body.ozx-motion:not(.motion-off) #stories .seven-grid>:nth-child(3){animation-delay:.16s}
body.ozx-motion:not(.motion-off) #stories .seven-grid>:nth-child(4){animation-delay:.24s}
body.ozx-motion:not(.motion-off) #stories .seven-grid>:nth-child(5){animation-delay:.32s}
body.ozx-motion:not(.motion-off) #stories .seven-grid>:nth-child(6){animation-delay:.4s}
body.ozx-motion:not(.motion-off) #stories .seven-grid>:nth-child(7){animation-delay:.48s}
body.ozx-motion:not(.motion-off) .ozx-rv{opacity:0;transform:translateY(34px);transition:opacity .7s ease var(--ozx-rv-delay,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--ozx-rv-delay,0s)}
body.ozx-motion:not(.motion-off) .ozx-rv.ozx-rv-left{transform:translateX(-40px)}
body.ozx-motion:not(.motion-off) .ozx-rv.ozx-in{opacity:1;transform:none}
.comic-feature .feature-backdrop.ozx-parallax{will-change:transform}
@media (prefers-reduced-motion:reduce){.ozx-progress{display:none}}