/* ScholarVertex journal-pages motion layer (2026-10-08) — the landing page's design language on every public OJS page.
   Compositor-only effects (transform/opacity via CSS transitions started by IntersectionObserver, CSS scroll-driven
   animations, one WAAPI-free curtain). Scoped to html.svj, which the inline guard in the journal customHeaders adds only on
   public pages, only when motion is allowed (OS setting or the visitor's Motion switch), and removes after 3 s if the JS
   never boots. Page rules of the journal stylesheet load after customHeaders, so every selector is prefixed `html.svj`. */

:root { --svj-out: cubic-bezier(.16,1,.3,1); --svj-spring: cubic-bezier(.34,1.56,.64,1); }
@property --svj-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------------------------------------------------------------- page enter */
@keyframes svjIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
html.svj .pkp_structure_main > .page,
html.svj .pkp_structure_main > .page_index_journal,
html.svj .pkp_structure_main > div:not(#pkp_content_main) {
  animation: svjIn .9s var(--svj-out) both !important;
}
html.svj .pkp_structure_sidebar { animation: svjIn 1.1s var(--svj-out) .12s both !important; }
@keyframes svjDown { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
html.svj header.site-head { animation: svjDown .8s var(--svj-out) both !important; }

/* ---------------------------------------------------------------- curtains (intro once per session, arrive after an in-site navigation) */
html.svj-intro body::after, html.svj-arrive body::after {
  content: ""; position: fixed; inset: 0; z-index: 99990; pointer-events: none; background: #101a3d; transform-origin: 50% 0%;
  transition: transform .9s cubic-bezier(.76,0,.24,1), opacity .3s .9s !important;
}
html.svj-intro body::after { background: radial-gradient(60% 50% at 50% 50%, rgba(0,194,168,.18), transparent 70%), #101a3d; }
html.svj-intro body::before {
  content: "SV"; position: fixed; z-index: 99991; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center;
  font: 700 20px/1 "Fira Code", ui-monospace, monospace; color: #fff; background: #101a3d; border: 2px solid #ff4d5e; box-shadow: 7px 7px 0 #00c2a8; pointer-events: none;
  animation: svjMark .8s var(--svj-out) both !important;
}
html.svj-go body::after { transform: scaleY(0); opacity: 0; }
html.svj-go body::before { animation: svjMarkOut .5s cubic-bezier(.76,0,.24,1) forwards !important; }
@keyframes svjMark { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes svjMarkOut { to { opacity: 0; transform: translateY(-30px) scale(.8); } }
.svj-leave { position: fixed; inset: 0; z-index: 99990; pointer-events: none; background: #101a3d; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.76,0,.24,1) !important; }
.svj-leave.on { transform: scaleY(1); }

/* ---------------------------------------------------------------- scroll reveals (data-svj set by JS, .svj-rv added by IntersectionObserver) */
html.svj [data-svj] { opacity: 0; transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform 1.1s var(--svj-out) var(--d, 0s) !important; }
html.svj [data-svj="rise"]  { transform: translateY(44px); }
html.svj [data-svj="scale"] { transform: translateY(32px) scale(.94); }
html.svj [data-svj="side"]  { transform: translateX(-30px); }
html.svj [data-svj="pop"]   { transform: translateY(22px) scale(.86); transition: opacity .6s ease var(--d, 0s), transform 1s var(--svj-spring) var(--d, 0s) !important; }
html.svj [data-svj].svj-rv  { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- hover polish (buttons, cards) */
html.svj .cmp_button, html.svj .pkp_button, html.svj a.obj_galley_link, html.svj button.submit, html.svj .cmp_button_wire {
  transition: transform .4s var(--svj-out), box-shadow .4s var(--svj-out), background-color .25s, color .25s !important;
}
html.svj .cmp_button:hover, html.svj .pkp_button:hover, html.svj a.obj_galley_link:hover, html.svj button.submit:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(16,26,61,.45); }
html.svj .obj_issue_summary, html.svj .obj_article_summary, html.svj .sv-step, html.svj .cmp_article_list > li, html.svj .search_results > li {
  transition: transform .45s var(--svj-out), box-shadow .45s var(--svj-out) !important;
}
html.svj .obj_issue_summary:hover, html.svj .obj_article_summary:hover, html.svj .sv-step:hover, html.svj .search_results > li:hover { transform: translateY(-4px); box-shadow: 0 22px 38px -26px rgba(0,0,0,.55); }
html.svj main.wrap .card { transition: transform .45s var(--svj-out), box-shadow .45s var(--svj-out) !important; }
html.svj main.wrap button, html.svj main.wrap .btn, html.svj main.wrap a.button { transition: transform .4s var(--svj-out), box-shadow .4s var(--svj-out), background-color .25s !important; }
html.svj main.wrap button:hover, html.svj main.wrap .btn:hover, html.svj main.wrap a.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(16,26,61,.45); }
html.svj .pkp_structure_main a:not(.cmp_button):not(.pkp_button) { transition: color .25s, background-color .25s, text-decoration-color .25s; }

/* ---------------------------------------------------------------- reading progress (scroll-driven, compositor) */
.svj-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 99980; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ff4d5e, #ffd166 45%, #00c2a8); box-shadow: 0 0 12px rgba(0,194,168,.55); display: none; }
@keyframes svjProg { to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) { html.svj .svj-progress { display: block; animation: svjProg linear both !important; animation-duration: auto !important; animation-timeline: scroll(root) !important; } }

/* ---------------------------------------------------------------- motion on/off switch (same control as the landing page) */
.svm-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 99970; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 14px;
  border: 0; cursor: pointer; color: #fff; font: 700 12px/1 "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(16,26,61,.94); border-radius: 16px; corner-shape: squircle;
  box-shadow: 3px 3px 0 #00c2a8, 0 14px 30px -12px rgba(16,26,61,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1) !important;
}
@supports (corner-shape: squircle) { .svm-toggle { border-radius: 24px; } }
.svm-toggle:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #ff4d5e, 0 18px 34px -14px rgba(16,26,61,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.svm-toggle:focus-visible { outline: 2px solid #ffd166; outline-offset: 3px; }
.svm-toggle-ic { color: #ffd166; font-size: 13px; }
.svm-toggle-sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background-color .25s !important; }
.svm-toggle-sw i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .26s cubic-bezier(.2,.7,.2,1) !important; }
.svm-toggle.is-on .svm-toggle-sw { background: #00c2a8; }
.svm-toggle.is-on .svm-toggle-sw i { transform: translateX(16px); }
.svm-toggle-st { min-width: 24px; color: #c6d0f2; font-size: 11px; }
.svm-toggle.is-on .svm-toggle-st { color: #00c2a8; }
@media (max-width: 620px) { .svm-toggle { right: 12px; bottom: 12px; height: 40px; } .svm-toggle-lb { display: none; } }
@media print { .svm-toggle, .svj-progress, .svj-leave { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html:not(.svj-force) .svj-progress { display: none !important; } }