/*
 * JOY ROY / V40 — UNIFIED MOTION LANGUAGE
 * Art direction: confident, quiet, cinematic. One timing system across the site.
 * Only motion properties are modified. No media elements, player geometry,
 * project data, image sources, card sizing, or interaction JS are changed.
 *
 * Motion score
 * 180ms   instantaneous feedback (icons / underline)
 * 320ms   controls, focus states, micro-interactions
 * 500ms   light, depth, editorial surfaces
 * 760ms   image movement and reveal
 * 880ms   hero / larger compositional entrances
 */
:root {
 --jr40-ease-out: cubic-bezier(.22,1,.36,1);
 --jr40-ease-ui: cubic-bezier(.2,.75,.28,1);
 --jr40-ease-soft: cubic-bezier(.33,0,.2,1);
 --jr40-fast: 180ms;
 --jr40-ui: 320ms;
 --jr40-surface: 500ms;
 --jr40-reveal: 760ms;
 --jr40-image: 760ms;
 --jr40-intro: 880ms;
}
/* 01 — First impression: orchestrate EXISTING hero components, not a new intro. */
@media (prefers-reduced-motion:no-preference) {
 #home.jr28-hero h1 {
   animation-duration: 980ms;
   animation-timing-function: var(--jr40-ease-out);
   animation-delay: 75ms;
 }
 #home.jr28-hero .jr28-overline {
   animation-duration: 620ms;
   animation-timing-function: var(--jr40-ease-out);
   animation-delay: 15ms;
 }
 #home.jr28-hero h2 {
   animation-duration: 760ms;
   animation-timing-function: var(--jr40-ease-out);
   animation-delay: 185ms;
 }
 #home.jr28-hero p {
   animation-duration: 760ms;
   animation-timing-function: var(--jr40-ease-out);
   animation-delay: 265ms;
 }
 #home.jr28-hero .jr28-actions {
   animation-duration: 780ms;
   animation-timing-function: var(--jr40-ease-out);
   animation-delay: 345ms;
 }
 #home.jr28-hero .jr-v25-marquee {
   animation-duration: 820ms;
   animation-timing-function: var(--jr40-ease-out);
   animation-delay: 415ms;
 }
 /* Ambient details live at a slower, quieter tempo. */
 #home .jr-v25-marquee-track { animation-duration: 38s; }
 #home .jr28-rule span { animation-duration: 5.2s; }
 #home .jr28-scroll-bar::after { animation-duration: 2.4s; }
 #home .jr28-live-dot { animation-duration: 3.8s; }
}
/* 02 — Scroll typography: coherent timing, smaller blur, same one-time triggers. */
.joy-reveal {
 transition: opacity 740ms var(--jr40-ease-out),
             transform 800ms var(--jr40-ease-out);
}
.joy-v11-word {
 transition: opacity 690ms var(--jr40-ease-out),
             transform 790ms var(--jr40-ease-out),
             filter 630ms var(--jr40-ease-out);
}
/* 03 — Navigation & CTA: related easing across otherwise separate components. */
.navlinks a {
 transition: color var(--jr40-ui) var(--jr40-ease-ui) !important;
}
.navlinks a::after {
 transition: transform 360ms var(--jr40-ease-out);
}
#home .jr28-actions a {
 transition: transform var(--jr40-ui) var(--jr40-ease-out),
             background-color var(--jr40-ui) var(--jr40-ease-ui),
             border-color var(--jr40-ui) var(--jr40-ease-ui),
             box-shadow var(--jr40-surface) var(--jr40-ease-soft);
}
#home .jr28-actions a span[aria-hidden] {
 display: inline-block;
 transition: transform var(--jr40-ui) var(--jr40-ease-out);
}
#work .filters button {
 transition: color var(--jr40-ui) var(--jr40-ease-ui),
             background-color var(--jr40-ui) var(--jr40-ease-ui),
             border-color var(--jr40-ui) var(--jr40-ease-ui),
             transform var(--jr40-ui) var(--jr40-ease-out),
             box-shadow var(--jr40-surface) var(--jr40-ease-soft);
}
.jr-v25-top {
 transition: opacity var(--jr40-ui) var(--jr40-ease-ui),
             transform var(--jr40-ui) var(--jr40-ease-out),
             background-color var(--jr40-ui) var(--jr40-ease-ui) !important;
}
footer.jr36-finale .jr36-cta {
 transition: background-color var(--jr40-ui) var(--jr40-ease-ui),
             color var(--jr40-ui) var(--jr40-ease-ui),
             box-shadow var(--jr40-surface) var(--jr40-ease-soft),
             transform var(--jr40-ui) var(--jr40-ease-out);
}
footer.jr36-finale .jr36-cta-arrow {
 transition: transform var(--jr40-ui) var(--jr40-ease-out),
             background-color var(--jr40-ui) var(--jr40-ease-ui);
}
footer.jr36-finale .jr36-social a {
 transition: color var(--jr40-ui) var(--jr40-ease-ui),
             transform var(--jr40-ui) var(--jr40-ease-out);
}
/* 04 — About, skill and tool surfaces: quiet feedback; text stays still. */
#about .portrait img {
 transition: transform 840ms var(--jr40-ease-soft);
}
.jr-v18-skill-board::before, .jr-v18-tool-panel::before {
 transition: opacity var(--jr40-surface) var(--jr40-ease-soft);
}
.jr-v18-skill { transition: background-color var(--jr40-ui) var(--jr40-ease-ui); }
.jr-v18-skill .jr-v18-icon {
 transition: transform var(--jr40-ui) var(--jr40-ease-out),
             box-shadow var(--jr40-surface) var(--jr40-ease-soft),
             background-color var(--jr40-ui) var(--jr40-ease-ui),
             border-color var(--jr40-ui) var(--jr40-ease-ui);
}
.jr-v18-tool-panel .jr-v18-tool {
 transition: transform var(--jr40-ui) var(--jr40-ease-out),
             background-color var(--jr40-ui) var(--jr40-ease-ui),
             border-color var(--jr40-ui) var(--jr40-ease-ui),
             box-shadow var(--jr40-surface) var(--jr40-ease-soft);
}
.jr-v18-tool-panel .jr-v18-tool img {
 transition: transform 380ms var(--jr40-ease-out),
             filter 380ms var(--jr40-ease-ui);
}
/* 05 — Film-gallery image moves; exact approved crop and end transforms remain. */
#gallery .card {
 transition: border-color 390ms var(--jr40-ease-ui),
             box-shadow 520ms var(--jr40-ease-soft);
}
#gallery .card::before {
 transition: opacity 390ms var(--jr40-ease-ui),
             transform 540ms var(--jr40-ease-out);
}
#gallery .card .thumb-shell::before {
 transition: box-shadow 520ms var(--jr40-ease-soft),
             background 520ms var(--jr40-ease-soft);
}
#gallery .card .thumb-shell::after {
 transition: opacity 420ms var(--jr40-ease-ui);
}
#gallery .card .thumb-shell .thumb-image {
 /* Prior layers had conflicting !important transitions: transform vs filter.
    Keep BOTH animated without touching their actual transforms. */
 transition: transform var(--jr40-image) var(--jr40-ease-out),
             filter 420ms var(--jr40-ease-ui) !important;
}
#gallery .card .thumb-shell .thumb-backdrop {
 transition: transform var(--jr40-image) var(--jr40-ease-out) !important;
}
#gallery .jr-v30-indicator {
 transition: opacity 220ms var(--jr40-ease-ui),
             scale 270ms var(--jr40-ease-out);
}
/* Restore V10 scroll-reveal property transitions, unintentionally overridden
   by the ID-level card rule in V30/V39. Preserve original scroll up/down logic. */
@media (prefers-reduced-motion:no-preference) {
 #gallery .card.joy-video-reveal:not(.joy-video-playing) {
   transition-property: opacity, transform, filter, border-color, box-shadow;
   transition-duration: 740ms, 780ms, 620ms, 390ms, 520ms;
   transition-timing-function: var(--jr40-ease-out), var(--jr40-ease-out),
                               var(--jr40-ease-out), var(--jr40-ease-ui),
                               var(--jr40-ease-soft);
   transition-delay: var(--joy-delay, 0ms), var(--joy-delay, 0ms),
                     var(--joy-delay, 0ms), 0ms, 0ms;
 }
 #gallery .card.joy-video-reveal.joy-video-reset {
   transition-duration: 0ms !important;
   transition-delay: 0ms !important;
 }
}
/* Hover refinements only where hover is real; avoid sticky touch interaction. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 #home .jr28-actions a:hover span[aria-hidden] { transform: translate(2px,-2px); }
}
/* Reduced motion: functionality remains, animations don't hide content. */
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .joy-reveal,.joy-v11-word,
 #gallery .card,#gallery .card::before,
 #gallery .card .thumb-shell::before,#gallery .card .thumb-shell::after,
 #gallery .card .thumb-shell .thumb-image,
 #gallery .card .thumb-shell .thumb-backdrop,
 #gallery .jr-v30-indicator,
 .jr-v18-skill,.jr-v18-skill .jr-v18-icon,
 .jr-v18-tool-panel .jr-v18-tool,.jr-v18-tool-panel .jr-v18-tool img,
 .jr-v18-skill-board::before,.jr-v18-tool-panel::before,
 .navlinks a,.navlinks a::after,
 #home .jr28-actions a,#home .jr28-actions a span[aria-hidden],
 #work .filters button,.jr-v25-top,
 footer.jr36-finale .jr36-cta,
 footer.jr36-finale .jr36-cta-arrow,
 footer.jr36-finale .jr36-social a {
   transition:none !important;
 }
 .joy-reveal,.joy-v11-word,
 #gallery .card.joy-video-reveal {
   opacity:1 !important;
   filter:none !important;
 }
 #gallery .card.joy-video-reveal {transform:none !important;}
 #home .jr28-actions a span[aria-hidden] {transform:none !important;}
}