/* Just 24 Things by J&J — site-wide premium motion v1
   Visual-only: no layout mutations; never hide content without JS support. */
@keyframes jj-brand-form {
  0% { opacity:0; filter:blur(6px); transform:translate3d(var(--jx,0px),var(--jy,9px),0) rotate(var(--jr,0deg)); }
  100% { opacity:1; filter:blur(0); transform:translate3d(0,0,0) rotate(var(--jend,0deg)); }
}
@keyframes jj-soft-orbit {
  0%,100% { opacity:.66; transform:translate3d(0,0,0) scale(1); }
  50% { opacity:1; transform:translate3d(8px,-6px,0) scale(1.035); }
}
html.jj-motion-enabled .site-logo .logo-script { --jend:-8deg; --jx:-17px; --jy:9px; --jr:-13deg; animation:jj-brand-form 790ms cubic-bezier(.18,.8,.25,1) both; }
html.jj-motion-enabled .site-logo .logo-rule { --jx:0px; --jy:-12px; animation:jj-brand-form 730ms 65ms cubic-bezier(.18,.8,.25,1) both; }
html.jj-motion-enabled .site-logo .logo-24 { --jx:0px; --jy:18px; --jr:7deg; animation:jj-brand-form 830ms 115ms cubic-bezier(.18,.8,.25,1) both; }
html.jj-motion-enabled .site-logo .logo-things { --jx:17px; --jy:8px; --jr:6deg; animation:jj-brand-form 800ms 180ms cubic-bezier(.18,.8,.25,1) both; }
html.jj-motion-enabled .site-logo .jj-logo-byline { --jx:12px; --jy:11px; animation:jj-brand-form 760ms 230ms cubic-bezier(.18,.8,.25,1) both; }

html.jj-motion-enabled [data-jj-motion="rise"],
html.jj-motion-enabled [data-jj-motion="zoom"],
html.jj-motion-enabled [data-jj-motion="side"] {
  opacity:0;
  filter:blur(4px);
  transform:translate3d(0,26px,0);
  transition:opacity 720ms cubic-bezier(.22,1,.36,1),transform 780ms cubic-bezier(.22,1,.36,1),filter 650ms ease;
  transition-delay:var(--jj-delay,0ms);
}
html.jj-motion-enabled [data-jj-motion="zoom"] { transform:translate3d(0,17px,0) scale(.96); }
html.jj-motion-enabled [data-jj-motion="side"] { transform:translate3d(-28px,0,0); }
html.jj-motion-enabled [data-jj-motion="rise"].jj-visible,
html.jj-motion-enabled [data-jj-motion="zoom"].jj-visible,
html.jj-motion-enabled [data-jj-motion="side"].jj-visible {
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) scale(1);
}
html.jj-motion-enabled [data-jj-motion="scatter"] .jj-word {
  display:inline-block;
  opacity:0;
  filter:blur(5px);
  transform:translate3d(var(--jj-x,0px),var(--jj-y,18px),0) rotate(var(--jj-r,0deg));
  transition:opacity 720ms cubic-bezier(.22,1,.36,1),transform 880ms cubic-bezier(.2,.8,.2,1),filter 760ms ease;
  transition-delay:var(--jj-word-delay,0ms);
  will-change:auto;
}
html.jj-motion-enabled [data-jj-motion="scatter"].jj-visible .jj-word {
  opacity:1;
  filter:blur(0);
  transform:translate3d(0,0,0) rotate(0);
}
html.jj-motion-enabled .jj-parallax-logo {
  transform:translate3d(0,var(--jj-parallax,0px),0);
}
html.jj-motion-enabled .cover-frame .cover-image {
  transform:scale(1.015) translate3d(0,var(--jj-cover-offset,0px),0);
  transform-origin:50% 50%;
}
.jj-scroll-progress {
  position:fixed;top:0;left:0;z-index:85;width:100%;height:3px;
  background:linear-gradient(90deg,#a9b99d,#4d755f);
  transform-origin:left center;
  transform:scaleX(0);
  pointer-events:none;
}
.japps-neon ~ .jj-scroll-progress, body.japps-neon .jj-scroll-progress {
  background:linear-gradient(90deg,#37d7fa,#8af2f4);
  box-shadow:0 0 13px rgba(37,211,245,.4);
}
.jj-motion-enabled .announcement-star {animation:jj-soft-orbit 5.5s ease-in-out infinite}
@media(hover:hover) and (pointer:fine) {
  .button,.j-cta-primary,.j2-download,.j2-more,.topic-filter,.theme-toggle,.nav-youtube {
    transition:transform .24s ease,background-color .24s ease,box-shadow .24s ease,filter .24s ease;
  }
  .button:hover,.j-cta-primary:hover,.j2-download:hover,.nav-youtube:hover {transform:translateY(-3px)}
  .j2-more:hover,.topic-filter:hover,.theme-toggle:hover {transform:translateY(-2px)}
  .japps-neon .j2-card:hover {box-shadow:0 18px 45px rgba(0,166,208,.18)}
}
@media(max-width:640px){
  html.jj-motion-enabled [data-jj-motion="rise"],
  html.jj-motion-enabled [data-jj-motion="zoom"],
  html.jj-motion-enabled [data-jj-motion="side"]{filter:none;transition-duration:560ms;transform:translate3d(0,14px,0)}
  html.jj-motion-enabled [data-jj-motion="scatter"] .jj-word{filter:none;transition-duration:560ms}
  .jj-scroll-progress{height:2px}
}
@media(prefers-reduced-motion:reduce){
  .jj-scroll-progress{display:none!important}
  html.jj-motion-enabled [data-jj-motion],html.jj-motion-enabled [data-jj-motion] .jj-word{
    opacity:1!important;filter:none!important;transform:none!important;transition:none!important;
  }
  html.jj-motion-enabled .site-logo span,html.jj-motion-enabled .announcement-star{animation:none!important}
  html.jj-motion-enabled .cover-frame .cover-image,
  html.jj-motion-enabled .jj-parallax-logo{transform:none!important}
}

@media(hover:hover) and (pointer:fine) {
  html.jj-motion-enabled .j2-card.jj-visible:hover,
  html.jj-motion-enabled .thing-card.jj-visible:hover,
  html.jj-motion-enabled .info-card.jj-visible:hover {
    transform:translateY(-4px);
  }
}

/* Dialog entrance/exit: subtle depth, no layout or download behavior changes. */
@keyframes jj-dialog-enter {
  from { opacity:0; transform:translate3d(0,18px,0) scale(.985); }
  to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@keyframes jj-dialog-backdrop {
  from { opacity:0; }
  to { opacity:1; }
}
html.jj-motion-enabled .j2-dialog[open] {
  animation:jj-dialog-enter 340ms cubic-bezier(.2,.8,.2,1) both;
}
html.jj-motion-enabled .j2-dialog[open]::backdrop {
  animation:jj-dialog-backdrop 340ms ease-out both;
}
@media(prefers-reduced-motion:reduce) {
  html.jj-motion-enabled .j2-dialog[open],
  html.jj-motion-enabled .j2-dialog[open]::backdrop { animation:none!important; }
}


/* Original Just24Things cover — scroll-linked layout collapse + thick paper roller.
   Unlike clip-path alone, the slot's physical height shrinks with the image.
   Everything below follows upward with no empty reserved banner region. */
html.jj-paper-active { overflow-anchor:none; }
html.jj-paper-active .jj-paper-slot {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  border-radius:7px;
  overflow-anchor:none;
}
html.jj-paper-active .jj-paper-slot .cover-frame {
  position:absolute;
  top:0;left:0;
  width:100%;
  height:auto;
  clip-path:none;
  border-radius:7px;
}
html.jj-paper-active .jj-paper-slot .cover-image {
  transform:none!important;
}
/* The diffuse fold casts light and shade across the last visible part. */
html.jj-paper-active .jj-paper-slot::before {
  content:"";
  position:absolute;
  z-index:4;
  left:0;right:0;bottom:0;
  height:100px;
  pointer-events:none;
  opacity:var(--jj-paper-edge-opacity,0);
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(51,49,41,.06) 30%,
    rgba(30,28,25,.20) 69%,
    rgba(255,255,255,.24) 100%);
}
/* Thicker 62px curled-paper cylinder (mobile 42px), tied to roll progress. */
html.jj-paper-active .jj-paper-slot::after {
  content:"";
  position:absolute;
  z-index:5;
  left:-1.5%;width:103%;
  bottom:-8px;
  height:62px;
  pointer-events:none;
  opacity:var(--jj-paper-edge-opacity,0);
  border-radius:52% 52% 15% 15% / 58% 58% 32% 32%;
  border-top:2px solid rgba(255,255,255,.95);
  background:linear-gradient(to bottom,
    #fffdf6 0%,
    #f4f0e7 14%,
    #d5d0c3 29%,
    #878379 46%,
    #f6f1e5 66%,
    #cbc3b1 84%,
    #79776d 100%);
  box-shadow:0 -13px 24px rgba(28,31,30,.15),
             0 10px 19px rgba(23,29,26,.25),
             inset 0 6px 7px rgba(255,255,255,.83),
             inset 0 -6px 10px rgba(47,44,38,.24);
  transform:perspective(650px) rotateX(-19deg);
}
@media(max-width:640px) {
  html.jj-paper-active .jj-paper-slot {border-radius:3px}
  html.jj-paper-active .jj-paper-slot::before {height:70px}
  html.jj-paper-active .jj-paper-slot::after {
    height:42px;
    bottom:-6px;
    box-shadow:0 -7px 13px rgba(28,31,30,.13),
               0 7px 11px rgba(23,29,26,.24),
               inset 0 4px 6px rgba(255,255,255,.83),
               inset 0 -4px 8px rgba(47,44,38,.24);
  }
}
@media(prefers-reduced-motion:reduce) {
  html.jj-paper-active .jj-paper-slot {height:auto!important;overflow:visible!important}
  html.jj-paper-active .jj-paper-slot .cover-frame {position:relative!important}
  html.jj-paper-active .jj-paper-slot::before,
  html.jj-paper-active .jj-paper-slot::after {display:none!important}
}