/* Native recreation of the effects bound to Rowalo Home01 and mapped routes.
   Sources and excluded template-only effects: docs/motion-reference-2026-10-24.* */
:root{--motion-out:cubic-bezier(.25,.46,.45,.94);--motion-sine:cubic-bezier(.445,.05,.55,.95)}
.hero h1,.hero-pill,.hero-actions,.showreel-card{animation:none}
.hero-bg{animation:none;scale:var(--header-scale,1)}
.hero-background .hero-bg{transform:translateY(var(--parallax,0px))}
.hero-light{animation:none}
.motion-ready [data-reveal],.motion-ready [data-reveal].is-visible{opacity:1;transform:none;transition:none;transition-delay:0s}
.motion-ready .motion-item-pending{opacity:0;transform:translateY(56px)}
.motion-ready .motion-single-pending{opacity:0;transform:translateY(80px)}
.motion-ready .motion-lines-pending .reveal-line>span{opacity:0;transform:translateY(2.5em)}
.motion-ready .motion-lines-pending>.reveal-line>span{opacity:0;transform:translateY(2.5em)}
.reveal-line{display:block;overflow:clip;padding:0;margin:0}
.reveal-line>span,.motion-ready .is-visible .reveal-line>span{animation:none;transform:none;opacity:1}
.reveal-char{display:inline-block;white-space:pre}
.motion-ready .motion-chars-pending .reveal-char{opacity:0;transform:translateY(48px)}
.motion-ready .motion-chars-pending.reveal-char{opacity:0;transform:translateY(48px)}
.marquee-track{animation-duration:20s}

/* Word masks: 300 ms + 40 ms stagger, reversed at 1.25× speed. */
.button .button-label,.nav-contact .button-label{display:block;overflow:visible;line-height:1.3}
.button .button-label>.button-word,.nav-contact .button-label>.button-word{
  position:relative;display:inline-block;overflow:clip;top:auto;left:auto;width:auto;
  vertical-align:top;transform:none!important;white-space:nowrap
}
.button-word>.word-front{display:block}
.button-word>.word-back{position:absolute;top:100%;left:0;display:block;width:100%}
.button-word>.word-front,.button-word>.word-back{
  transform:translateY(0);transition:transform .24s var(--motion-out);
  transition-delay:calc(var(--word-reverse,0) * .032s)
}
.button:is(:hover,:focus-visible) .button-word>span,.nav-contact:is(:hover,:focus-visible) .button-word>span{
  transform:translateY(-100%);transition-duration:.3s;transition-delay:calc(var(--word-index,0) * .04s)
}
.nav-contact:is(:hover,:focus-visible) .button-word>span{transition-duration:.4s}
.nav-contact .button-word>span{transition-duration:.4s;transition-delay:calc(var(--word-reverse,0) * .04s)}
.button-icon{width:24px;height:24px;position:relative;overflow:clip}
.button-icon::after,.button-icon:has(.arrow-icon)::after{content:none!important;display:none!important}
.button-icon>.arrow-icon{position:absolute;left:0;top:0;width:24px;height:24px;transition:transform .24s var(--motion-out) .16s;transform:translateY(0)}
.button-icon>.arrow-icon+ .arrow-icon{transform:translateY(-100%);transition-duration:.48s;transition-delay:.08s}
.button:is(:hover,:focus-visible) .button-icon>.arrow-icon{transform:translateY(100%);transition-duration:.3s;transition-delay:.2s}
.button:is(:hover,:focus-visible) .button-icon>.arrow-icon+ .arrow-icon{transform:translateY(0);transition-duration:.6s;transition-delay:.1s}
.button:not(.dark-button):is(:hover,:focus-visible) .button-icon>.arrow-icon+ .arrow-icon{transition-delay:0s}
.button{transition:background-color .3s var(--motion-out),color .3s var(--motion-out)}
.nav-contact{transition:background-color .5s var(--motion-out),border-color .5s var(--motion-out),color .3s var(--motion-out)}
.button.underline-button{min-height:0;gap:8px;padding:0 0 6.08px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-size:16px;line-height:24px;transition:border-color .4s var(--motion-out)}
.underline-button .button-label{order:0;line-height:24px}
.underline-button .button-word{height:24px}
.underline-button .word-back,.underline-button .button-icon>.arrow-icon+ .arrow-icon{color:var(--accent)}
.underline-button .button-icon,.underline-button .button-icon>.arrow-icon{width:20px;height:20px}
.underline-button .button-icon{order:1}
.button.underline-button:is(:hover,:focus-visible){background:transparent;color:var(--ink);border-color:var(--accent)}
.underline-button .button-icon>.arrow-icon{transition-duration:.2s;transition-delay:.08s}
.underline-button .button-icon>.arrow-icon+ .arrow-icon{transition-duration:.4s;transition-delay:.08s}
.button.underline-button:is(:hover,:focus-visible) .button-icon>.arrow-icon{transition-duration:.25s;transition-delay:.1s}
.button.underline-button:is(:hover,:focus-visible) .button-icon>.arrow-icon+ .arrow-icon{transition-duration:.5s;transition-delay:.1s}
.journal-image img,.work-image>img{transition:transform .4s var(--motion-sine)}
.journal-card:is(:hover,:focus-visible) .journal-image img,.work-card a:is(:hover,:focus-visible) .work-image>img{transform:scale(1.1)}
.work-open{transition:opacity .1s var(--motion-out),transform .3s var(--motion-out),background-color .35s var(--motion-out)}
.work-card a:is(:hover,:focus-visible) .work-open{background:var(--accent);color:white}
.feature-image>img{transition:transform .4s var(--motion-sine)}

/* About: 4 original portfolio images, instantaneous cut every 550 ms. */
.about-hero-image{position:relative}
.about-hero-image img{position:absolute;inset:0;object-fit:contain;opacity:0}
.about-hero-image img:first-child{opacity:1}
.about-hero-word{display:inline-block}
.agency-value{padding:32px 0;border-top:1px solid var(--line)}
.agency-value:first-child{padding-top:0;border-top:0}
.agency-value>summary{display:grid;grid-template-columns:1fr auto;gap:12px 24px;list-style:none;cursor:pointer;align-items:center}
.agency-value>summary::-webkit-details-marker{display:none}
.agency-value .project-number{grid-column:1/-1}
.agency-value h3{margin:0;font-size:28px}
.agency-value>p{margin-top:20px;color:var(--grey)}
.agency-value>summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* Native details retain their keyboard behavior; app.js animates their content. */
.faq-list details{padding:0 20px;border:1px solid transparent;border-bottom-color:var(--line);transition:background-color .2s var(--motion-out),border-color .2s var(--motion-out)}
.faq-list details[data-state=opening],.faq-list details[data-state=open]{background:var(--light);border-color:var(--light)}
.faq-list details[data-faq-motion=ready]{transition:none}
.faq-list .faq-icon,.agency-value .faq-icon{display:block;position:relative;width:20px;height:20px;flex:none;font-size:0;transform:none!important}
.faq-icon i{position:absolute;top:9px;left:0;width:18px;height:1.5px;background:var(--accent);display:block;transition:transform .4s var(--motion-out)}
.faq-icon i:last-child{transform:rotate(90deg)}
.faq-list details[data-faq-motion=ready] .faq-icon i{transition:none}
details[open]:not([data-state=closing]):not([data-state=closed]) .faq-icon i:last-child{transform:rotate(0)}
.agency-value .faq-icon i{transition-duration:.1s;transition-timing-function:linear}

/* Panel follows the native Webflow slide-down; body stays locked through exit. */
body.menu-closing{overflow:hidden}
.mobile-nav{will-change:transform}
.mobile-nav[data-state=closing]{pointer-events:none}
.pages-menu[data-pages-motion=ready]>[data-pages-panel]{position:absolute;top:43px;right:-20px;min-width:220px;overflow:hidden;border-radius:10px}
.pages-menu[data-pages-motion=ready]>[data-pages-panel]>nav{position:static}
.pages-menu[data-pages-motion=ready][open]::after{content:'';position:absolute;top:100%;height:20px;left:0;right:-20px}
.menu-toggle span{transition:transform .5s var(--motion-out),opacity .2s var(--motion-out);top:9px;left:2px;width:24px}
.menu-toggle[aria-expanded=false] span:nth-child(1){top:9px;transform:none;opacity:1}
.menu-toggle[aria-expanded=false] span:nth-child(2){top:17px;transform:none;opacity:1}
.menu-toggle[aria-expanded=false] span:nth-child(3){top:24px;transform:none;opacity:1}
.menu-toggle[aria-expanded=true] span:nth-child(1){top:9px;transform:translateY(8px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){top:17px;transform:none;opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){top:24px;transform:translateY(-7px) rotate(-45deg)}

/* Scroll paths and dimensions are driven by a single normalized timeline. */
@media(min-width:992px){
  .scroll-motion .studio-stage{top:32px}
  .studio-art{inset:auto;top:0;left:375px;width:calc(100% - 759px);height:530.3472px;overflow:visible}
  .studio-piece{width:252.8px;height:252.8px;border-radius:4px;box-shadow:none;max-width:252.8px}
  .studio-piece-0{left:0;right:-102.4px;top:auto;bottom:0;margin-inline:auto}
  .studio-piece-1{left:-22.4px;right:auto;top:0;bottom:0;margin-block:auto}
  .studio-piece-2{left:0;right:-6%;top:16px;bottom:auto;margin-inline:auto}
  .studio-piece-3{left:17.6px;right:auto;top:auto;bottom:75.2px}
  .studio-piece-4{left:auto;right:-22.4px;top:0;bottom:0;margin-block:auto}
  .studio-bottom{top:78%}
  .scroll-motion .studio-piece{translate:var(--piece-x,0px) var(--piece-y,0px)}
  .studio-piece-0{rotate:6.043deg;transform:none}
  .studio-piece-1{rotate:4.601deg;transform:none}
  .studio-piece-2{rotate:-15deg;transform:none}
  .studio-piece-3{rotate:-13.551deg;transform:none}
  .studio-piece-4{rotate:3.383deg;transform:none}
  .scroll-motion .feature-image{width:var(--project-width,40%)}
  .scroll-motion .feature-copy{opacity:var(--copy-opacity,1);width:40%;max-width:496px}
  .scroll-motion .feature-project:focus-within .feature-image{width:40%}
  .scroll-motion .feature-project:focus-within .feature-copy{opacity:1}
  .scroll-motion .featured>.section-heading{opacity:var(--project-heading-opacity,1)}
  .scroll-motion .floating-piece{translate:var(--exit-current-x,0px) var(--exit-current-y,0px);scale:1}
  .piece-5{top:auto;bottom:-16%}
  .scroll-motion .closing-copy>.button{transform:translateY(var(--cta-button-y,0px))}
  .scroll-motion .closing:not(:focus-within)[data-cta-visible=false] .closing-copy>.button{visibility:hidden;pointer-events:none}
  .scroll-motion .journal-callout{translate:0 var(--journal-offset,0px)}
}
@media(min-width:1440px){
  .studio-piece-0{right:0;bottom:14.4px}
  .studio-piece-1{left:9.6px}
  .studio-piece-2{top:28.8px;right:0}
  .studio-piece-3{left:100px}
  .studio-piece-4{right:9.6px}
}
.closing-panel{border-radius:20px}
.closing-panel img{opacity:1}
.closing-panel video{display:block;width:100%;height:100%;object-fit:cover}
.background-video-toggle{position:absolute;z-index:4;bottom:24px;right:24px;width:44px;height:44px;border:1px solid #ffffff88;border-radius:50%;display:grid;place-items:center;background:#032b3ecc;color:white;font-size:18px;line-height:1}
.background-video-toggle:is(:hover,:focus-visible){background:var(--accent);outline-color:var(--brand)}
.closing-panel::after{content:'';position:absolute;inset:0;background:#032b3eb3}
.closing-copy{isolation:isolate}
@media(max-width:991px){
  .closing-panel{border-radius:0}
  .menu-open .site-header,.menu-closing .site-header{position:fixed;top:0;background:white;color:var(--ink)}
  .studio-piece,.floating-piece{translate:none!important;scale:1}
}
@media(min-width:768px) and (max-width:991px){
  .studio-visual{height:640px}
  .studio-art{inset:auto;top:16px;left:50%;width:520px;height:360px;transform:translateX(-50%);overflow:visible}
  .studio-piece{width:160px;height:160px;max-width:160px;box-shadow:none;border-radius:4px}
  .studio-piece-0{left:0;right:0;top:auto;bottom:14.4px;margin-inline:auto;transform:rotate(6.043deg)}
  .studio-piece-1{left:9.6px;right:auto;top:0;bottom:0;margin-block:auto;transform:rotate(4.601deg)}
  .studio-piece-2{left:0;right:0;top:16px;bottom:auto;margin-inline:auto;transform:rotate(-15deg)}
  .studio-piece-3{left:100px;right:auto;top:auto;bottom:40px;transform:rotate(-13.551deg)}
  .studio-piece-4{left:auto;right:9.6px;top:0;bottom:0;margin-block:auto;transform:rotate(3.383deg)}
  .studio-bottom{top:78%}
}
@media(max-width:767px){
  .studio-art{display:none}
  .studio-visual{height:268px}
  .studio-bottom h2{font-size:32px}
  .studio-bottom>p:last-child{max-width:340px;font-size:16px}
  .agency-value h3{font-size:24px}
}
@media(hover:none){
  .button:is(:hover,:focus-visible) .button-word>span,.nav-contact:is(:hover,:focus-visible) .button-word>span{transform:none;transition:none}
  .journal-card:hover .journal-image img,.work-card a:hover .work-image>img{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready .motion-item-pending,.motion-ready .motion-single-pending,.motion-ready .motion-lines-pending .reveal-line>span,.motion-ready .motion-chars-pending .reveal-char{opacity:1!important;transform:none!important}
  .hero-bg{scale:1!important;transform:none!important}
  .about-hero-image img{animation:none!important}
  .button .button-word>span,.nav-contact .button-word>span{transform:none!important;transition:none!important}
  .button-icon>.arrow-icon{transform:none!important;transition:none!important}
  .button-word>.word-back,.button-icon>.arrow-icon+ .arrow-icon{display:none}
  .motion-ready .is-visible .reveal-line>span{animation:none!important}
  .closing-copy>.button{transform:none!important;visibility:visible!important;pointer-events:auto!important}
  .journal-callout{translate:none!important}
}