/* Rabarba Studios — motion layer (v2, Oct 30 2026)
   Everything here is optional: delete motion.css + motion.js (or set MOTION = False in build.py) and the site goes back to static.
   Rules: only transform/opacity, ease-out, short durations, nothing that loops forever in the content area, and nothing at all for
   visitors who ask their device for reduced motion (motion.js never adds .motion-on for them).
   v2: faster entrance, content reveals before it reaches the screen (no empty gaps on a fast scroll), stacked service cards,
   smart header and an animated mobile menu. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* quick start, soft landing */
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);   /* a tiny overshoot for playful bits */
}

/* ---------- Hero entrance (home): done in well under a second ---------- */
.motion-on .hero .wordmark:not([data-split]) { opacity: 0; }
.motion-on .wordmark .ch { display: inline-block; opacity: 0; transform: translateY(.28em); animation: rb-rise .55s var(--ease-out) forwards; }
.motion-on .hero-copy > * { opacity: 0; transform: translateY(0.75rem); animation: rb-rise .5s var(--ease-out) forwards; }
.motion-on .hero-copy > *:nth-child(1) { animation-delay: .08s; }
.motion-on .hero-copy > *:nth-child(2) { animation-delay: .14s; }
.motion-on .hero-copy > *:nth-child(3) { animation-delay: .2s; }
.motion-on .hero-copy > *:nth-child(4) { animation-delay: .26s; }
.motion-on .hero-art-wrap { opacity: 0; transform: translateY(1.125rem); animation: rb-rise .6s var(--ease-out) .05s forwards; }
.motion-on .services-line { opacity: 0; animation: rb-fade .5s var(--ease-out) .35s forwards; }
@keyframes rb-rise { to { opacity: 1; transform: none; } }
@keyframes rb-fade { to { opacity: 1; } }

/* The speaker in the illustration "plays": a few soft rings on load, again whenever you hover the illustration. */
.hero-art-wrap { position: relative; display: block; }
.hero-art-wrap .hero-art { display: block; }
.rings { position: absolute; left: 66.5%; top: 61%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.rings i { position: absolute; left: 0; top: 0; width: clamp(3.75rem, 9vw, 8.125rem); aspect-ratio: 1; margin: calc(clamp(3.75rem, 9vw, 8.125rem) / -2) 0 0 calc(clamp(3.75rem, 9vw, 8.125rem) / -2);
  border: 0.25rem solid #fff; border-radius: 50%; opacity: 0; transform: scale(.3); box-shadow: 0 0 0 0.125rem rgba(0,0,0,.25); }
.motion-on .rings.play i { animation: rb-ring 1.6s var(--ease-out) 3; }
.motion-on .rings.play i:nth-child(2) { animation-delay: .35s; }
.motion-on .rings.play i:nth-child(3) { animation-delay: .7s; }
@keyframes rb-ring { 0% { opacity: .85; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.9); } }

/* Gentle idle float on the illustration — desktop only (phones get a calmer, lighter page). */
@media (hover: hover) and (min-width: 761px) {
  .motion-on .hero-art-wrap.idle .hero-art { animation: rb-float 6s ease-in-out infinite; }
  .motion-on .hero-art-wrap.idle:hover .hero-art { animation-play-state: paused; }
}
@keyframes rb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.375rem); } }


/* ---------- Scroll reveal: starts just before an element reaches the screen ---------- */
.motion-on .rv { opacity: 0; transform: translateY(1.125rem); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: var(--d, 0ms); }
.motion-on .rv.in { opacity: 1; transform: none; }
.motion-on .rv.now { transition: none; }                 /* scrolled past fast: just show it */
.motion-on .rv-left { opacity: 0; transform: translateX(-3rem); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.motion-on .rv-right { opacity: 0; transform: translateX(3rem); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.motion-on .rv-left.in, .motion-on .rv-right.in { opacity: 1; transform: none; }
.motion-on .rv-left.now, .motion-on .rv-right.now { transition: none; }
.motion-on main { overflow-x: clip; }                    /* sliding elements never widen the page */

/* ---------- "What we do": cards stack on top of each other while you scroll (pure CSS, no scroll hijacking) ---------- */
.motion-on .svc-stack { gap: 0; }
.motion-on .stack-card { position: sticky; top: calc(5.25rem + var(--i) * 1rem); margin-bottom: 7vh; }
.motion-on .stack-card:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .motion-on .stack-card { top: calc(4.75rem + var(--i) * 0.625rem); margin-bottom: 5vh; }
}

/* ---------- Header: hides while you read downwards, comes back as soon as you scroll up ---------- */
.motion-on .site-header:not(.on-dark) { transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.motion-on .site-header.scrolled { box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,.06); }
.motion-on .site-header.tucked { transform: translateY(-100%); }

/* Mobile menu: links slide in one after another */
@media (max-width: 760px) {
  .motion-on .nav a { opacity: 0; transform: translateY(1.25rem); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
  .motion-on .nav.open a { opacity: 1; transform: none; }
  .motion-on .nav.open a:nth-child(1) { transition-delay: .05s; }
  .motion-on .nav.open a:nth-child(2) { transition-delay: .09s; }
  .motion-on .nav.open a:nth-child(3) { transition-delay: .13s; }
  .motion-on .nav.open a:nth-child(4) { transition-delay: .17s; }
  .motion-on .nav.open a:nth-child(5) { transition-delay: .21s; }
  .motion-on .nav.open a:nth-child(6) { transition-delay: .25s; }
}

/* ---------- Small interactions ---------- */
.btn:active, .svc-box:active, .filter-box:active, .album-btn:active, .sound-toggle:active, .lang a:active { transform: translate(0.1875rem, 0.1875rem); box-shadow: 1px 1px 0 var(--shade); transition-duration: .06s; }
.post-card { transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.post-card:hover { transform: translate(-0.125rem, -0.125rem); box-shadow: 0.5rem 0.5rem 0 var(--shade); }
.stack-card .stack-img img { transition: transform .35s var(--ease-out); }
.stack-card:hover .stack-img img { transform: translate(-0.25rem, -0.25rem) rotate(-.6deg); }
.stack-card .go { transition: padding-right .25s var(--ease-out); }
.stack-card:hover .go { padding-right: 0.625rem; }
.mini-work img { transition: transform .25s var(--ease-out); }
.mini-work:hover img { transform: translateY(-0.25rem); }
.logos img { transition: transform .25s var(--ease-back), opacity .25s ease; }
.logos img:hover { transform: translateY(-0.25rem) scale(1.04); opacity: 1; }
.portrait img { transition: transform .35s var(--ease-out); }
.portrait:hover img { transform: translate(-0.25rem, -0.25rem); }
.ptag { transition: transform .25s var(--ease-back); }
.person:hover .ptag { transform: translateX(-0.25rem); }
.person:hover .ptag:nth-child(2) { transition-delay: .04s; }
.person:hover .ptag:nth-child(3) { transition-delay: .08s; }
.likes li::before { transition: transform .3s var(--ease-back); }
.likes li:hover::before { transform: scale(1.5); }
details[open] > p { animation: rb-open .3s var(--ease-out); }
@keyframes rb-open { from { opacity: 0; transform: translateY(-0.375rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .svc-box, .filter-box, .album-btn, .post-card, .mini-work img, .logos img, .portrait img, .ptag, .feat, .work .media img, .release img, .stack-card .stack-img img { transition: none !important; }
  details[open] > p { animation: none; }
}